Web Design Trends 2013

We have already march now and the web design trends for this year are emerging ever more clearly. The trends for this year clearly shifting focus to the mobile devices and the related technology of responsive web design. Four points are the impeller and the most important trends 2013 in my opinion.


Flat Design and Flat User Interfaces

In recent years, the style was characterized by fancy 3D effects such as drop shadows, gradients, bevel, embossing. This trend reversed since a few months to a fully flat design without any effects. The concept of flat design received a boost in the last year with the release of Microsoft Windows 8 and its Metro UI.

Minimalistic design is optimized for a future that will increasingly happen on mobile devices. Therefore, the flat design will be found on websites and in apps much more frequently. The buttons and elements made bigger and easier to use with touch gestures on smartphones and tablets. Here are a few example of attractive flat design from the web.

Flat IPhone User-Interface

IPhone Flat User Interface Inspiration

IPhone Flat User Interface Inspiration

Very nice flat design for a IPhone App made by clyp presented on dribbble.

Visit Website


Free Flat User Interface

Flat UI - Free Web User Interface Kit

Flat UI – Free Web User Interface Kit

The free flat User-Interface Kit from Designmodo has been a huge success. I used the kit already for some projects and it’s great base for every project. I even used it to set up my own WordPress theme.

Visit Website


Modern Flat User Interface Kit

Flat Modern User Interface Kit

Flat Modern User Interface Kit

Very nice free UI kit on Dribbble made by Riki Tanone. You can download the free PSD there.

Visit Website


Easy Note User Interface

Flat Metro User Interface Kit

Flat Metro User Interface Kit

An attractive and elegant UI kit in bright blue tones. If you are looking for cool inspiration and freebies you might use dribbble as a source.

Visit Website


Free Dark User Interface Freebie

Modern Dark User Interface Kit

Modern Dark User Interface Kit

A free dark UI kit with the typical colors with and flat elements.

Visit Website


AppBlog – Free Tumblr Theme

AppBlog - Free Tumblr Blog Theme

AppBlog – Free Tumblr Blog Theme

The free Tumblr theme of AppBlog is not only creatively designed but has also some outstanding features. The sidebar is sliding in and out smooth and the hover effects are also quite cool.

Visit Website


Liquidfolio – Responsive WordPress Theme

Liquidfolio - Modern Flat WordPress Theme

Liquidfolio – Modern Flat WordPress Theme

Liquidfolio is a flexible and responsive WordPress magazine and portfolio theme with a flat design. The design is really friendly and unique.

Visit Website


Retro Colors are Back in the Web

In addition to the flat design the colors of the Web support this new trend. If you have already taken a closer look at the UI’s in the previous section, you will have noticed that the same retro colors always appear. This bit strange-looking color combinations are typical for icons, buttons, glyphs and graphics and create a very fresh and modern look. Again, some examples for you.

Flat Design Filetype Icons

Flat Design Filetype Icons

Flat Rounded Buttons with Retro Colors

Flat Rounded Buttons with Retro Colors

Flat Round Icons with Modern Colors

Flat Round Icons with Modern Colors

Flat Round Science Icons

Flat Round Science Icons

Flat SuperHero Postcards

Flat SuperHero Postcards

You can see several icon sets and even postcards in the very typical colors. In combination with the flat design, the colors unfold their effect.


Full screen layout left side navigation

Another web design trend for this year – and certainly for 2014 – are full-screen layouts that use the entire screen in full width. For many years, websites have been artificially squeezed into a 960 pixel-wide grid system and began to disappear and losing force to the expanding monitors.

The weapon of choice is responsive web design, a trend from the last two years is continuing. Responsive websites adjust the layout and function automatically to the width of the device. In combination with this trend I’m we will see full-width content together with a flexible navigation.

This year, some sites are already venturing beyond the usual 1024 pixels and grow to the full width of the screen. In the course of this development to more and more different mobile devices it shows also a design-change in the main navigation. The navigation is moved to the left side and is therefore ideally placed for tablet users. The main area of ​​a website is fully utilized for the content. Let’s look at some outstanding examples.


Smashing Magazine – Design Magazine

Smashing Magazin - Content-Centered Design

Smashing Magazine – Content-Centered Design

The website of the Smashing Magazine is ahead of its time and has, in my view, a modern and beautiful layout at all. The navigations is pushed to the left edge and are very unobtrusive but perfect to use. On the right edge is the usual sidebar with more advertising and information. The content in the middle flexibly adapts to the screen width and is in focus.

Visit Website


Naldz Graphics – Design Inspiration

Naldz - Modern Design Magazine with Grid

Naldz – Modern Design Magazine with Grid

Yet Another magazine from the field of web design is the side of Naldz Graphics . The new design of the site existed since the relaunch on the 5th March of this year. With a combination of blog, magazine and minimal design the whole site is structured and clean.

Visit Website


Metronic – HTML5 Admin Template

Metronic - Metro-Style Admin HTML5 Template

Metronic – Metro-Style Admin HTML5 Template

The Metronic theme is indeed only an admin theme, but by far the best selling website templates on themeforest. Here all the web design trends for 2013 united in just one website. Full-screen responsive layout with slim design and navigation on the left side create a modern, sustainable and flexible theme.

Visit Website


Division – Full-screen Portfolio Theme

Modern & Responsive WordPress Theme

Modern & Responsive WordPress Theme

The Liquid Folio WordPress theme was already mentioned above as an example of successful flat design. Division is a similar theme perfect to show of a portfolio. The blog uses a dynamic grid system that fills the full screen width sent.

Visit Website


Google moves with their networks YouTube and Google+ in the same direction. The navigations were also pushed to the left side to provide more space and attention to the content in the entire middle column. However, the content is still somewhat “locked in” to the right and it’s lost valuable space that could be used much better. I’m sure we will see a change in the course of the year here.


Supersized and One-Page Websites

The fourth major trend is evident in campaigns for individual products, websites, locations, self-employed and small businesses. Single-page websites with just a homepage with a supersized full-screen background image and powerful headline and an emotional core message. This one-page websites are compact and the visitor gets your message in about a minute.

The big advantage of this technology lies in the built-in responsive effect. The combination of high-quality images and advanced jQuery technology that adjusts the images exactly to the size of the screen, creates attractive web pages with solid usability.


Escape flight – Booking Flights

Escape Flights - One-Page Flight-Booking Website

Escape Flights – One-Page Flight-Booking Website

The website of escape flight uses high quality images and emotional headlines to convince visitors to book a flight. The content of this page is restricted to one page only. The image-teaser with price open a reservation form in a lightbox. A highly interesting and completely innovative approach in an industry with conventional booking portals.

Visit Website


84 Paris – Independent Agency

Paris84 - Magazine Website with Fullscreen

Paris84 – Magazine Website with Fullscreen

The independent agency 84 Paris uses a supersized slider with emotional headline on the front page. The navigation is placed below the slider and becomes a sticky header when you scroll down. The individual pages are not on the homepage but loaded dynamically. The site is also technically a masterpiece next to the modern design. Supersized slider, dynamic loading content and the fixed header are just some of the many highlights. Absolute MUST SEE!

Visit Website


Eden-Made IPhone Case

Eden IPhone Case - One-Page Website

Eden IPhone Case – One-Page Website

This website offers just 5 high-quality images of the product. When you start to scroll down you will see that every picture covers a whole page. On the end of the page is a form to order the product. One-Page layouts are perfect to present and sell a product.

Visit Website


Jardan – Furniture from Australia

Jardan - Modern Furniture Website

Jardan – Modern Furniture Website

The Australian furniture manufacturer Jardan designs and produces furniture. They show of their masterpieces with beautiful supersized images. The competence of the company is communicated emotional with excellent images and a short headline. However this is not a true one-page website, but has also some more pages. This sub-pages are also designed with some kind of one-page layout.

Visit Website


Bright future?

Trends are going towards flexible websites with a high usability and reduced design. Minimalistic and flat design navigating the attention of the visitors more to the content. All the other elements like navigations, buttons, sliders etc. becoming less important. I hope this trends continues and we will see some great websites in 2013.

Related articles:

Tobias Gebauer

Webworker, web developer and also web designer. I love blogging and working on my websites all the time. I like to share great web design inspiration, freebies and tutorials with the world :).

You may also like...

Pinterest