Web Design Inspiration – Designer Websites
Web designers, agencies and web developers are usually the first to pick up on new web design trends and use them in their own websites. Their pages use the most important trends already and have a real good usability. Minimalistic, clean and flat design as well as retro colors are used very often.
There is also a trend towards a hidden navigation, which creates more space. The navigation also contains more functions, like filters and a contact form. Fully responsive web design is now the standard for agencies and designers.
I created this collection with some nice designer and agency websites. Enjoy them.
Minimal & Flat Web Design
The most important trend in 2013 is the flat and minimal design. Navigation elements are reduced to their basic functions and lose most of their styles as well. The focus is on the content.
Buffalo – Minimal & Flat Design
The Buffalo agency website relies on a flat and modern design in the form of hexagons, which are a kind of second navigation. The individual messages have a lot of space and they are distinguished from each other by simple lines. An elegant jQuery slider and CSS3 effects are skillfully staged without cluttering the page.
Nikita Shanin – Minimal Website Design
The website of the russian web developer Nikita Shanin has also been greatly reduced and has a minimal design. The content on the pages loads fast and the animations are very smooth.
Yaron Schoen – Minimal Design and Stylish Navigation
Simple and clear UX design. The self-made human interface designer Yaron Schoen is truly the master in the art of minimalism. The website is in a dialogue with the visitors and leads the user to the content. The navigation is hidden behind the logo on the top left corner and covers the full-screen when you activate it. His customers include Twitter, AOL, EA and National Geographic.
Image Mechanics – Smooth Page Loading
The australian agency Image Mechanics has a very reduced and clear messages on the website. The content is reloading with AJAX. I’m a bit disappointed from the 13px Arial font which is absolutely not suitable for the page.
William Leeks – Cool CSS3 Effects
The website of the developer and designer William Leek has a clean and flat design. Except for the CSS3 animations on the homepage the priority is given to the content.
Simple as Milk – Typography is King
The british agency simple as milk used a very stylish typography and a progressive color combination. The focus is clearly set on the content of the website. You can see this kind of trend also in the best-selling HTML5 templates.
Jim Ramsden – Small Website with Cool Navigation
Absolutely awesome website from the designer Jim Ramsden. He uses mobile user interface elements for his website. In addition to the narrow design, the hidden menu is a highlight. MUST SEE!
Manos – Flat Design and Bold Colors
The designers and developers of Manos, a studio that creates apps and websites, showing skill on their own website. Retro colors and flat design are very well used.
Full-screen Websites with cool navigation
Full-screen websites use the full width of every device. This is pretty useful if the visitor has an 24″ or 27″ screen with a big resolution. You can move the navigation to the left or right side and work with more space for the content. This kind of design is very good for blogs and web-magazines.
Booreiland – Awesome Zoom Slider
The dutch agency Booreiland staged their references perfectly. A slight zoom effect to the images intensifies the highlight on the reference. The navigation is innovatively designed and appears only on click. The powerful fusion of web and mobile interface elements will be particularly evident in the navigation. MUST SEE!
Online Department – Cool Cursor Navigation
Another dutch agency shows their references in the main slider on the homepage. The navigation on the page also reacts to key strokes which is a nice feature and often seen now. There are numerous elegant effects based on HTML5 & CSS3.
BKWLD – Video Background Slider
The sacramento-based agency BKWLD presents itself on the website with a video that leaves a lasting impression. Minimalist design, perfect videos in the background and only a few messages make this site an absolute masterpiece. MUST SEE! Two references of the agency are also exceptionally well: Drexel University Campaign and Osborn Barr.
Teehan and Lax – Impressive Full-Screen Menu
The agency Teehan + Lax website is the perfect synthesis of mobile user interface and minimal web design. The references are impressively staged on the home page slider. The navigation is only available on click but then in overwhelming beauty. Absolute MUST SEE!
Work – Genuine Project Navigation
The norwegian agency Work is a clear trendsetter with the high-spec website. The content of this page is packed very skilled in a one-page layout. The subject areas are clearly demarcated in color and both the references and the photos of the agency are placed in sliders. A special highlight is the project navigation hiding behind the yellow line in the margin. MUST SEE!
Fantasy Interactive – Full-Width Blog and Double Sidebar
The blog of the agency Fantasy Interactive skillfully uses the full-screen width. The individual news are spacious, fully linked and take a two-thirds of the screen. The sidebar on the right side is fixed and combined conventional footer and sidebar. The trend on normal websites is going more to mobile elements, which were originally optimized for touch gestures.
Team Geek – Award Winning Website
The multi-award winning website of the new zealand agency Team Geek is a classic one-page layout. A click on the navigation brings you to the appropriate content item.
Metro Design in modern Web Design
Metro style has become quite popular since Windows 8 came out. The design uses big tiles to separate the information. This kind of design is useful for portfolios, online-resumes and for eCommerce websites.
Etch – Grid Style Design
The app designers and developers of etch using their whole website for a single masonry. Each content item is placed in a separate tile, and those tiles can be filtered using the built-in jQuery Quicksand by category. What is usually known only as a product filter has been converted here to the navigation.
Float Design – Big Tiles for Projects
Tiles are used quite often as navigation elements right now. The designers of Float use this principle for their website very clever and combine it with a sticky navigation.
My Poor Brain – Full-Width Portfolio
The graphic designer and illustrator Tim from London also used tiles for his references across the entire width of the screen. A kind of synthesis between footer and navigation is located in the narrow strip on the left side of the screen.
TinyBigStudio – Big Content Tiles
The tinybigstudio by Pablo Dominguez also uses tiles to represent concepts and references. The colors are really typical for the flat design.
Extravagant and outrageous websites
If you are a web design and want to stand out from the crowd you can also use extravagant design. The following webpages show some great examples.
Webeffectual – Bold Design Elements
The bright CMYK colors of the Joomla and Drupal Agency are certainly not to everyone’s taste. However, the design is very modern and focused on the key content.
Filidor Wiese – Pixel-Art and CSS3 Effects
The lovingly animated website developer Filidor Wiese is definitely worth a visit. The digital version of Filidor is acting according to the time and doing some programming, sleeping or playing some games.
Ian Jamex Cox – Scroooooolllllling
The website of Ian James Cox was certainly a tough job. All content is on a page and the navigation brings you to the appropriate reference. This kind of one-page design is really cool.