Web Design Trends in 2013

By / Jan 30, 2013 / Tips

The past few years have seen a tremendous shift in the way developers are building websites. More users have switched onto mobile platforms, along with newer browsers which support HTML5/CSS3 web standards. There are so many unique ideas flowing out of the design community – it seems like new thresholds are being replaced every few months!

In this article I would like to go over some of the most recent trends we have seen evolving. Many of these design ideas have been around for a long time. But I would argue that over 2012 and moving into 2013 these unique ideas will flourish. There are so many open source projects and user interfaces which are offered online completely free for download. This creates an environment where new designers can enter the field and pick up on trends very quickly.

Mobile First Design

The idea of responsive design isn’t just limited to full websites scaling down smaller. The ideology surfacing among designers is to start with mobile and build your way up. There is an excellent article published on DesignShack which talks about this very idea.

It is often much easier to plan your most important interface elements first and squeeze each of them into a mobile layout. If they don’t all fit you will have to drop a few. Simultaneously you could plan for how the layout will respond as the window grows larger. You will have room to include a sidebar, possibly 2 sidebars, along with numerous other page elements.

mobile first book webdev designing websites

There is a small book published by A List Apart which is called Mobile First. It was written by Luke Wroblewski and he brings up many of these same ideas. The trend points towards a need to fill mobile interfaces as the priority among Internet users. Most desktop browsers will be happy with any style of layout, as long as everything works. This is much more difficult to nail down on mobile platforms so it’s useful to start out small while planning for a larger design.

Infinite Scrolling

A number of social media websites have begun applying infinite scroll effects onto dashboards and timelines and user feeds. This effect was gaining traction due to the popularity of Twitter and Tumblr’s unique layout style. And now more recently Pinterest has also adopted this infinite page scroll on their homepage.

infinite scrolling pagination social media dashboard website interface

Designers may be asking why this is even useful in the first place. Sure it provides a seamless interface without reloading the page. But then users will have a difficult time generating permalinks for the different pages. And while all of this is true, it brings up the important point that not every website will need infinite scrolling. I feel this trend works best when you can load information that doesn’t require a specific pagination style.

For example, blog archives seem like a poor choice because readers may want to go directly onto page 15 or 25 instead of scrolling down multiple times. But Tumblr or Pinterest are great ideas because the information is dynamic and constantly changing. What appears on the 1st or 2nd page of your Twitter feed will update over time and so the Ajax speeds are very noticeable in comparison. Nobody wants to be clicking “next page” to load the next set of tweets.

Whitespace & Minimalism

The terms minimalism and whitespace are thrown around a lot. And while it is true that these trends have been part of web design for years, it’s also true they have evolved to fit this newer spectrum of creativity. There are plenty of websites using whitespace as a design tool which forces users to focus deeper on the main content. But even very dense websites can utilize whitespace in smaller areas to alleviate room.

leaftlet iphone ios app design interface ui

Another big misconception is that all white space should be white in the design. However dark layouts still use whitespace and it is easier to consider this term as “empty space” on the page. These are places where you leave some room to breathe without excess clutter. Often this will represent larger elements on the page, such as buttons or icons or screenshots. Design portfolios may fill in large oversized typography leaving gaps for white space between headings and paragraphs. This makes the content much easier to digest and readers are less likely to flee at a first glance.

iphone blip.me mobile app landing page website layout whitespace

Natural Design Elements

The CSS3 specifications have brought about so many changes. Importing typography through @font-face and keyframe animations are just a couple of topics to demonstrate the more advanced features. But even basic CSS3 properties have been influencing the use of natural designs within layouts.

These elements may include rounded corners, box shadows, or background gradients with a flexible container. All of these styles would have required images 5-10 years back. Nowadays you may design a mockup completely in-browser using only CSS3 to generate these effects. 2013 will be another year forward where images built into the layout are being replaced by standards-compliant CSS properties.

dabblet website interface layout css3 coding gradient background

I have always loved the Dabblet website for its incredibly basic use of background gradients on each new page. This webapp ties into the Github Gist framework and allows developers to build small HTML/CSS prototypes in real-time. The entire interface is based off CSS3 properties and you may quickly notice how far trends have advanced in just a few years’ time.

Big Photography

We have previously written about big photo backgrounds and this trend has not been slowing down. In fact, I have seen even more websites and portfolios launching under this design style. Website layouts can be attuned for a very specific feeling or emotion based on the colors and background style. Large photographs are one other method to push for a very specific emotion.

I would argue this trend is certainly not for everybody. However in the right situation where you have enough space on the page, this large background offers a pleasing aesthetic for the visitor. The biggest problem is fitting content into the layout where it is still clearly readable. This is why the best solutions for big background photos often include landing pages or firms/agencies.

great discontent website interface ui layout design

This unique style is also perfect for design portfolios and personal websites to offer a deeper connection with your visitors. People who land on your site will be curious about who you are and what you do. It is delightful to offer visitors a photograph and showcase a brief peek into who you are. Big photographs can also be used for displaying your creative work – such as illustrations, vectors, or even your own photos.

Cleaner Source Code

The release of more CSS frameworks have allowed web developers to chop down their coding times dramatically. This means you can build an entire 2-column or 3-column website layout within a matter of minutes, when using the right tools. It also means there is less HTML markup necessary to achieve the same results.

Building websites on clean source code means everything is more streamlined, and often much smaller. This is good because smaller file sizes mean quicker loading times from the server. Plus when going back into the layout for editing these can be swift and concise without difficulty. I have learned a lot about clean HTML/CSS just by reading articles online and studying the words of other talented developers.

html5 css3 coding webpage open source

The two most important resources I would have to recommend are Github and Stack Overflow. The former has a lot of free source code you can download and implement into website projects. The latter is a very helpful Q&A community of developers looking for nothing more than to help each other. These 2 websites should offer plenty of good material to start building clean, readable source code in your websites.

Final Thoughts

Over the rest of this year we will surely unearth some new schemas and mindsets related to web design. The community has grown into a global community with designers to be found all over the planet. This means we all have access to share and research off each other’s information, regardless of skill level. There has truly never been a better era to enter the field of web design.

I do hope some of the trends I’ve listed above may offer a conjecture into new designs for 2013. It is likely impossible to nail down every single new idea as it spreads over the community. The best way to keep yourself involved is to be proactive with new trends. Read new blog posts and tutorials to stay involved with the latest web standards. Additionally if you have any ideas or suggestions we would love to check them out in the post discussion area below.

About the Author

Jake Rocheleau is a creative writer and UI designer. You can follow him on twitter @jakerocheleau or visit his personal website at JakeRocheleau.com.

  • http://www.pragmaticdesign.co.uk Web Design Wolverhampton & Birmingham

    They all sound like definite steps forward to us. We love big pictures and clean websites, so looking forward to more of those :)

  • http://www.sweetmag.my Web Design Malaysia

    im looking forward to see how infinite scrolling can be implemented on ecommerce based sites’ home page!

  • http://www.fourtopper.com Michael

    I definitely agree with all of these. I think the 2013 trends will likely cary over into years to come as UX/UI become more important. What about parallax scrolling, though?

  • http://codenuke.com/ Jeffrey Bennett

    Fantastic list! I think all of these are steps in the right direction. They’ve also already begun to show up on many popular websites, and hopefully more as time goes by.

  • Kyreena

    You forgot Masonry, and 100% width. Pinterest and Behance do both, and they are something I’m constantly asked to do, to which I constantly have to explain why they won’t work for their needs.

    I hate trends.

  • Kyreena

    Also, “Big Photography” is old, by like 4yrs. I was using large photography based websites as inspiration in university. It existed as soon as it became easier to manipulate the scaling with simple javascript.

  • http://www.kevflannigan.co.uk Web Designer Worcester

    Great tips!!! As a freelance website designer I’m always looking for trends. It’s so important to keep moving with the times and as technology evolves so do we as designers. Thanks again for the great list of trends.

  • http://Www.cr84.com Cesar

    Good article. As it mentions, every trend has its own purpose: it makes sense the heavy use of images & video in commercial websites, and pure CSS & HTML elements in compact sites like intranets.

  • Sumiko

    Mobile First publishing company is A book Apart not A List Apart. It says so right there on the book.

  • http://juanulloa.com juan

    Interesting list. I would have added: (1) font icons; (2) simple css – based animations; (3) tablet-first web design (or some other term will come out); (4) responsive content; (5) ARIA.

    ARIA usage us more of a hope, but just the fact that jQueryUI uses it more now, guaranties increased usage.

    • http://www.adesignlink.com Chad P

      I agree with you about the font icons. Although tablet first design I believe fits well into the a fore mentioned mobile first design. I also thing that people will start moving toward a more flat design look verses a raised or 3 dimensional look. I don’t think (at least in my case) my clients need to see a 3D button to know it is a button, and when i present a flat look for their site 90% of the time they are very please with the result!

  • http://www.webdesignscottishborders.co.uk/ Tim

    I agree with Michael, UX design is already huge in certain places and it will only grow. I think these trends will pass for some years to come.

  • http://www.nesossis.com Anthony

    Nice work. Good stuff here and thanks for sharing! I think integrated video will play a bigger roll in the design and layout of sites than it has played in the past, especially as YouTube and Vimeo become more recognized and used, and as widgets and embeddable code are becoming more popular.

  • http://www.nathanwilkins.com Nathan Wilkins

    I always stick with using light colors and lots of whitespace. For some reason it enhances the website a lot! Big photography is something I still have to experiment with :)

  • http://www.designturnpike.com Design Turnpike

    I agree with these – I’d add larger buttons, simpler calls to action, airier font line-heights, and paler color palettes. Nice article!

  • http://www.themangomedia.com/ William Peter

    Most of them liking Pinterest type of webdesigns for this year. In mobile, it looks very cool.

  • http://webrevisions.com/ laeeq

    Great article!!! As a web developer I’m always looking for latest trends. Thanks!