October 14, 2024

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.

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.

Share

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

17 Comments

  1. Michael Reply

    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?

  2. Kyreena Reply

    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.

  3. Kyreena Reply

    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.

  4. Web Designer Worcester Reply

    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.

  5. Cesar Reply

    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.

  6. juan Reply

    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.

    1. Chad P Reply

      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!

  7. Tim Reply

    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.

  8. Anthony Reply

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *