Web Design Inspiration – 22x Flat Web Design
I’ve decided to post more web design inspirations on a regular base. I collected modern websites with a flat design for this post. This web design trend is quite popular since 2012 and you will find it nearly everywhere. 90% of the newest WordPress themes, Tumblr themes or HTML5 templates use this design.
I created some categories for this article to give you a better clue:
- 10x Parallax Scrolling and One-Page Websites
- 5x Full-Screen Content-Centered Websites
- 4x Video-Background Websites
- 3x Normal Websites
10x Parallax and One-Page websites
These types of websites show two more widely spread trends of 2013. The one-page design uses only a single page to present the whole content. The pages are particularly well suited for campaigns, events or small companies. Parallax scrolling is a beautiful effect, if you do not use it too much.
Google Code Art One-Page Website
Flat design and a minimalist design shift the attention of the visitor to the content. The colors are strongly reminiscent of Google.
Stylish One-Page Website with CSS3 Effects
The guys from Creative 9 combine parallax scrolling and flat design in perfection. I really like the subtle CSS3 effects and the hovering of the spaceships.
Stunning Website with Flat People
All information about the TV-series Game of Thrones on a huge one-page website. Every elements looks like a declaration of love to flat design.
One-Page Explanation of the Google Search
Yet another page from Google. They explain in vivid details the search with plenty CSS3 and HTML5 effects. Easy to understand and great story-telling.
One-Pager with Parallax Awesomeness
Another one-page website with parallax scrolling effects. They website is about a dance convention and gives you all the info in just a single page.
Parallax Product Campaign One-Page Website
The website for the motocross goggles from Oakley is an outstanding example. Highly detailed parallax effects and cool animation create a long lasting impression. The website is even responsive. MUST SEE!
One-Page Story-Telling with Pictures
High quality pictures tell you everything you need. Every other element is totally reduced and you can focus on the Ringle yacht.
Annual Report – Stylish Data Crunching
Company recognize annual reports as a perfect marketing tool for their product or service. The website looks a bit like a real long infographic, but with cool CSS3 effects.
This website of a german yoga studio is a well designed one-page website. Flat design, beautiful images and parallax scrolling were combined here very skillfully.
Vintage One-Page Parallax Scrolling Website
The website for the watches of Vacheron Constantin is exceptional designed. I love the vintage typography and background.
5x Full-Screen Content-Centered Websites
Content is the most important part on every website, at least it should be. The full-screen concept makes room for more content. I really like this design approach with background images or bold colors.
Flat Design Full-Screen Slider
Absolutely cool website made by the british designer Adam Hartwig. The CSS3 and HTML5 gimmicks are made in the typical flat design colors.
Furniture Full-Screen Website
The menu fades out and the pictures are even more into the foreground. A typical web design that is also suitable for photographers.
Great UX Design and Full-Screen Portfolio
Great UX Design is really sexy. It removes everything you don’t really need on a website and the focus will be on the content. Nine Swiss shows some brilliant user interface. Absolute MUST SEE!
Flat Design with Retro Colors
Google created this smartphone + desktop game-website. You can synchronize your smartphone with your desktop and play some games with up to 4 players against each other.
Flat Design and Cool Badges
On the website for the world bakery day you can choose between 100 different recipes. The web design is clean and the content-slider on the right side is really fancy. Unfortunately, the white badge is covering the content to much.
4x Video-Background Websites
Especially for campaigns and stories, this is a great strategy to tell you story to the audience. You need some really good quality videos and reduce the other design elements a lot.
Storytelling Website with Great Content
Dadaab stories tells you the story of refugees in the Dadaab camp in Kenya. Each side has its own video as background.
Storytelling Website with Content-Slider
The website GetGoing is the best storytelling I have found. The Drexel University tells some really inspiring stories. Ingenious website with a strong charisma.
Flat Design and Video Background
The Arctic is melting and the website is dedicated to this topic. Flat web design, modern web fonts and a lot CSS3 effects create a great user interface. High-Quality videos are the center and I would like to see them more in the foreground.
Video-Background for a Campaign Website
The campaign for the shoe Mobium made by Puma got his own website. The web design is clean, flat and reduced to the minimum.
3x Small Business Websites
This category is made for 3 more website. I really like them all and they also a have flat web design.
High-Quality Images and Minimal Design
The high-quality images from the product are really outstanding. Flat and minimal design are really well chosen and create a cool user impression.
Full-Screen Image and Grid Content
House Lako is a polish label with a stunning website. They use a big full-screen image to introduce the label and the latest products. Below of the image you will find tiles with the blog posts. The colors are retro and bold and the design is clean.
Vintage & Retro Design
The leather manufacturer Wootten has an incredible website with a stunning design. Stunning pictures and a minimal design create a high quality impression of the products.
If you want to share your page or found a suitable website you can send me the link or post it into the comments.