Web Design Elements That Will Inspire You


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 web design elements 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+.


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


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.


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



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


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.



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.


8. Storylane by

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.

JoDe Timeline MelonHTML5


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.


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.



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.



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.



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.



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.



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 website design elements, do check out our Newsletter. We feature some really cool stuff you might enjoy in our Inspirations Edition.

About the Author Saijo George

Saijo George works as an SEO Strategy Director for Melbourne based award winning marketing agency Supple. You can find him on Twitter and LinkedIn.