Web Design Trends in 2013

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.

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.

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.

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.

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.

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.

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.

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.