Web Design Elements That Will Inspire You

 13   Tweet

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.

Bonds

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. Secondstory.com

secondstory.com is a great example of a well-designed horizontal-scrolling website.

secondstory

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.

3. Diplomatic-cover.com

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.

4. Gizmodo.com

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?

gizmodo

5. 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.

MashMenu UberMenu

6. 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.

minimalmonkey

7. 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.

HTC One

8. Storylane by Datcouch.com

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.

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.

JoDe Timeline MelonHTML5

9. 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.

wacom

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.

10. 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.

silktricky

11. 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.

tapmates

12. 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.

cropp

13. 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.

hardgraft

14. 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.

escapeflight

15. 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.

agencexy

Concluding

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.

  • http://1to1webdesign.blog.co.uk/ 1 to 1 Web Design

    I really appreciate this post. Yes, I agree that these things are very important for the website of an aspiring author.

  • John Doe

    Hi, Envato you should do a better research Tao Theme is a total rip off as it comes to navigation menu. Look here http://www.toybox.co.nz/ he even copied the same animation style…

    • jonathan

      it’s actually from a tutorial on the codrops site :)

  • Miyoki

    Great article with one exception. Tao isn’t as inspiring as you mention. It’s a copy of existing site: http://www.toybox.co.nz/ .

    It would be better to give more appreciation to the actual authors :)

  • http://themeforest.net/user/Bedros Bedros

    HardGraft , all time favorite. Thanks for the post.

  • Bisso

    Nice article, also wanted to highlight that “Hexagonal” is inspired by Combadi: http://combadi.com/

  • Carmen

    Hi guys,
    Thanks for letting us know. We’re investigating this now. In future if you have any copyright concerns please contact Envato support asap. http://support.envato.com/

  • http://www.igeninfo.com/web_designing_company_in_bhopal.php Web designing company in Bhopal

    It’s nice to know in the midst of the flat design movement that transparency is still alive and well.

  • http://www.topnotchdezigns.com/ affordable website

    Some people are learning whatever they can about technology in this modern age in order to secure a great career. Web design is definitely a solid career path that you could choose, but you should be aware that there’s plenty of competition in this field. Check out some web design methods that could set you apart from the pack.

  • http://www.letcheck.eu Mossy

    Why is the word “boobs” in the top nav on the bonds screenshot? I must know!

    • http://envato.com Adrian Try

      Good question, Mossy. I just visited the actual site, and the word is no longer there. My guess is that it was a link to their ladies’ underwear.

    • Saijo George

      they were having a promotion for this when I took the screenshot bonds.com.au/boobs

  • http://www.vectorpsdfree.com/ saqib ahmad

    These are perfect list! Great sharing :)