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
- New retro colors for the Web
- Full screen layout left side navigation
- Supersized and One-Page Websites
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
Very nice flat design for a IPhone App made by clyp presented on dribbble.
Free Flat User Interface
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.
Modern Flat 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.
Easy Note User Interface
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.
Free Dark User Interface Freebie
Modern Dark User Interface Kit
A free dark UI kit with the typical colors with and flat elements.
AppBlog – Free Tumblr 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.
Liquidfolio – Responsive 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.
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 Rounded Buttons with Retro Colors
Flat Round Icons with Modern Colors
Flat Round Science Icons
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 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.
Naldz Graphics – Design Inspiration
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.
Metronic – HTML5 Admin 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.
Division – Full-screen Portfolio 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.
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
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.
84 Paris – Independent Agency
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!
Eden-Made IPhone Case
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.
Jardan – Furniture from Australia
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.
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.
