Envato Notes

15+ Web Design Elements That Will Inspire You

Posted: 09 Nov 2013 04:00 PM PST

webdesignelementsheader

Most of us love to think of ourselves as creative individuals, and at times it becomes really hard to find originality in the designs we work on. Most designers constantly battle between embracing their own style, and mixing it with current trends in the industry.

I like to think that when designers get inspired by other people’s work, and try to incorporate or enhance that design, it eventually leads to an evolution in design. Just so I don’t start a war in the comments below, I want to make sure I make myself clear: Getting inspired does not equal ripping off designs. There is a fine, but distinct, line separating those two.

Whether you’ve been designing for years, or only for days, finding inspiration is one of those things you can never bet on. It might come to you when you least expect it. So today, I am hoping you find some inspiration from a few of the things that I have personally found to be quite interesting. If you have any items that are inspired by these, or if you have any inspirational content that you want to add to this list, please drop me a comment below, or reach out on Twitter or Google+.

1. Bonds.com.au

Bonds are an iconic clothing brand in Australia. I am in love with their top navigation menu. The brand logo is moved away from the main navigation area and tucked away in the top left. This frees up valuable real estate in the navigation area for other items.

That huge search bar makes me want to use the search feature whenever I see it, and the small drop-down adds the ability to search specific verticals from their shop. I also like how the fixed navigation bar expands to show the search bar and the logo.

The only thing I would want to add is a small visual indicator (magnifying glass) for search on the minimized fixed navigation.

2. Diplomatic-cover.com

http://www.youtube.com/watch?v=JkVDws1IL6o

Diplomatic-Cover. I am really impressed with their multi-screen experience. You’re given the option when you first visit the website, and you can also manually pick it from the footer. Once you sync a session with your mobile browser you can interact with the PC version of the website using your smartphone.

Now I have to say I did run in to issues with this on mobile IE on a Windows phone, and on Chrome on the iPhone, but it was an amazing experience on Safari on the iPhone. This isn’t something that would work for all sites, but if you have a creative content website then this experimental design should go well with it and will leave a lasting impression on your visitors.

3. Secondstory.com

secondstory.com is a great example of a well-designed horizontal-scrolling website. The content on the site is laid out in columns, and each of these will scroll vertically. The fixed navigation on the left lets you easily jump between different sections of the site.

4. Tao by Onioneyethemes.com

Tao

Tao is a great responsive WordPress theme available for purchase on ThemeForest, with a horizontal sliding menu animation. I think hiding the navigation allows them to project a clean minimal design that is quite appealing. You can get Tao from here.

There are various WordPress plugins on CodeCanyon that allow users to take advantage of sliding menu on their WordPress themes. WordPress Menufication and MOBILE.NAV are good examples

5. Gizmodo.com

gizmodo

Instead of having a bunch of related posts listed out towards the end of an article, gizmodo.com displays related post within the body of the content. I haven’t seen this on gizmodo.com.au. What do you guys think of this? Will this get more users to check out the related content?

6. Wpmegamenu.com

There are various types of mega menu navigation you can see on websites these days. When done properly these aid users to navigate the website much more efficiently and helps them discover what they are looking for. We have couple of WordPress Plugins on CodeCanyon, like MashMenu and UberMenu, that might help you achieve this goal.

7. Minimalmonkey.com

Minimalmonkey has a flat design with a nice hover effect that highlights the content for the user to focus on. While you are on the site don’t forget to check out the navigation menu button for some nice effects. It’s not something that comes up when you are going to focus on usability, but it certainly is pretty.

8. One.htc.com

HTC One. I really like this design from HTC. You can zoom in to each of these pictures using the mouse wheel to bring more information about the product. Think of it like an infinite recursion style design. You often see that in images, and it was adapted elegantly to web design in this case.

9. Storylane by Datcouch.com

Storylane

Thanks to Facebook, timeline navigation is certainly a new trend making its way in to may new website redesign. TechCruch has opted for this in their new design. This type of navigation can be overkill for traditional websites, but works well for a blog that frequently churns out new content. You can see the timeline navigation employed on a new Ghost Theme called Storylane.

If you want to add a timeline feature to your site, you might want to look at JoDe WordPress Timeline Plugin, or the MelonHTML5 jQuery Plugin.

10. Wacom.com

Wacom has a really nice eCommerce design. The main navigation is fixed on the left and allows users to scroll through their products with ease—an excellent example of how navigation can be both simple and robust.

Their product listing page gives users the experience of the product in action, and scrolling down lets you pull as much or as little information as you want.

11. Silktricky.com

Silktricky is another example of clean design with an emphasis on video content. I like the way the content is organized into visual tiles: when you click on any of the content it will load the content on the same page. It’s also nice how they use the view button using high contrast color so that it stands out.

12. Hexagonal by Avathemes.com

Hexagonal

Hexagonal. Instead of the usual image slider with boring tabs, these guys utilize expanding tabs to showcase the three core aspects which are most important to them: design, photography and branding. You can get this theme from ThemeForest.

13. Tapmates.com

Tapmates. I love how these guys showcase their work: a portfolio page of various app screenshots. When you click on any one of those it highlights all the screenshots from that app and pushes the other into the background revealing more info about the app.

14. Cropp.com

Cropp takes a bold approach with their sites design. The homepage is a visual representation of the navigation menu, and the images pixelate when you hover over them.

15. Hardgraft.com

Hardgraft. I like how the these guys lay out all the products on their site as the background image. One issue I noticed was that the navigation menu is at times hidden when you scroll over images. Adding a solid or transparent background color to the menu might make it better.

16. Escapeflight.com

Escapeflight. There is no room for boring user input forms on this website. Fill in the blanks to search for flights and packages they offer. The whole menu at the top gives you the feeling of look at a typical ticker board at the airport.

17. Agencexy.com

Agencexy. I am really impressed with their navigation menu that moves around the page on selection. This isn’t something that would work for all sites, but if you have a creative content website then this experimental design should go well with it.

There are many websites that are dedicated to showcasing inspirational work from the web design industry. I will try and cover those in detail with a future post if there is a demand for that type of content. In the meantime, if you want more inspirational content, do check out our Newsletter. We feature some really cool stuff you might enjoy in our Inspirations Edition.