Fame Foundry - A Charlotte Website Design and Marketing Firm

Monday, 2nd September, 2013 | By Jeremy Girard | Category: Website Design and Development

The State of Website Design 2013: 5 Top Trends + Mobile

Web design – like all forms of art – is subject to trends. One designer influences others, who then take that idea and try to make it their own. As sites launch that share similar traits and visual treatments, new trends begins to emerge.

Embracing current trends in the design of your website can have positive or negative consequences. Having the latest look on your site can show that it is fresh and modern, but if a trend falls out of favor, your site can quickly go from new and cutting-edge to embarrassingly outdated.

In the end, the best course of action is to use design elements – whether they’re the most current or not – that reflect your brand and cater to the preferences of your audience. To that end, it’s important to follow the latest trends in design so that you and your design team can recognize opportunities to help your website evolve to provide the best possible experience for all users:

1. Big text

Visit any number of recently launched websites, and you are sure to see many that boast big, bold messages that dominate your screen and refuse to be ignored.

These messages are almost always the first thing you see and read when you land on the home page, instantly setting the tone for the rest of the site and the content to be presented. Here are a few examples of this approach:

Dickson Fong

Make the Future

Instrument

Digital creative

Believe In

Believe In

Nurun

Nurun

Made Together

Made Together

2. Big images

Often oversized text is paired with large, stunning imagery that helps reinforce the site’s key message. Other times, the images are left to tell the story on their own. Here are few example of this “big images” approach, some of which are accompanied by big text and some of which stand on their own:

Jake Shimabukuro

Shim

Kiawah Island

Kiawah

Brave People

Brave

Clarke Design Group

Clarke

Eden

Eden

Optimo Fine Hats

Optimo

3. Motion

Building on the trend of big text coupled with big images, you will also find a number of sites that add motion to the presentation. This is not just simple animation iterating through a few static photos. Instead, we’re talking about sophisticated video content that not only adds movement to the screen but also serves to introduce an element of storytelling to the site:

Exponent

Exponent

Numbrs

Numbers

Tool of North America

Tool

4. Storytelling

Video content is one way that website designers incorporate elements of storytelling. Another increasingly popular approach is using a narrative that unfolds as the page is scrolled:

Julia and Artem

Julia

A Day in Big Data

Ogilvy

Josh Cohen School of Music

Josh Cohen

The Dangers of Fracking

fracking

Playground Inc.

Digital creative

5. Simplicity

For years, websites have treated their home pages like mini-dashboards for the site as a whole, teasing the latest blog articles, press releases, portfolio entries and other current content. This approach gives visitors a broad overview of all the content the site has to offer, but it can also create a busy, cluttered presentation as so many different types of content vie for users’ attention.

Recently, the tides have begun to turn away from this practice, as many websites eschew this approach in favor of providing a more focused experience with a single call-to-action that really centers the user experience around the site’s most important content:

Mixd

MIXD

Whole.

Whole

Teehan + lax

Teehan

Plain

Plain

What about mobile?

Website design today is much more complex than providing a good experience to users who are sitting in front of a computer at a desk. The variety of devices and screen sizes being used to access web content is more varied today than it has ever been before, and presenting a quality experience for mobile users is critical to success.

While all the screen shots shown here are of the large screen versions of these sites, the trends presented here do, indeed, apply to mobile as well. In fact, many of these trends may actually have gotten their start thanks to the constraints and best practices of designing for the smaller screens of mobile devices.

Focus on the necessary. Eliminate the extraneous.

Starting with the trend of “simplicity”, we can appreciate how mobile web design – and specifically a mobile-first approach to UX design – is driving the trend of reducing clutter on home pages and providing a more narrowly focused user experience.

When designing for mobile and taking into account screen size limitations as well as bandwidth concerns, a logical starting point is eliminating any elements or content that is not critical. In working through this process, we often realize that the same content that was deemed unnecessary for the small-screen version of the site is also not all that important to the full-scale version, either. After all, a streamlined, focused user experience can certainly benefit users on mobile devices, but why wouldn’t all site visitors want that same focused experience that is free of clutter and extraneous information?

A mobile-first approach to design allows for the creation of a simpler, more focused experience, and it is exactly that type of experience that we are now seeing as a trend across all sites, even those that are designed for screens much larger than a tablet or smartphone.

Go big.

The growing use of big text, big images and even big video content can all be traced back to the size limitations of small-screen devices.

When designing for smaller screens, there is often no choice but to set headlines or images to span the entire width of the display. If we set them any smaller, they would lose all impact. If an image or headline is powerful when set to the full width of the screen on a mobile device, that same treatment can be equally powerful on larger screens.

This exact scenario played out recently as I was redesigning my own site. Starting with the mobile layout, I set images and text to cover close to the full width of the small screen. As I began to scale the page up in size for larger screens, I realized that those visuals and messages made a much greater impact if I allowed them to retain their proportionally larger size, even as the site’s layout grew to accommodate rather large desktop screens. While adjustments needed to be made for different screen sizes, the requirements of designing for the small screen helped inspire my decisions for the look on larger screens as well.

pumpkin

One piece at a time.

Due to the small size of many mobile screens, like those found on most smartphones, only a very limited amount of content can be effectively shown on that screen at one time. By necessity, when designing for small-screen devices, we must present content in a linear fashion that allows readers to process one bit and then scroll down to move on to the next piece. We have all become accustomed to this method of digesting online content on our mobile devices – so much so that we have realized that this approach to content delivery can work well away from small-screen devices too.

While this method of storytelling certainly existed long before mobile devices, the way that we process content on our mobile devices – be it social media posts, items in an online store, news headlines or articles and stories – can absolutely provide the inspiration to bring a similar approach to larger screens.

To follow or not to follow?

The decision about whether to implement any design trend on your website, or whether to avoid that trend altogether, is something you should discuss with a professional website design team with expertise in creating great user experiences across all screens and devices.

As a rule, you should never incorporate a trend just for the sake of being on the cutting edge of design. At the same time, there’s no need to shy away from making advantageous use of a trend for fear of being perceived as a bandwagon-jumper.

Talk to your design team about what is right for your project and implement solutions that are a good fit – because doing what is right for your brand and your audience is a trend that will never go out of style.

Share:

  • E-mail this story to a friend!
  • Print this article!
  • Twitter
  • Digg
  • Facebook
  • del.icio.us
  • Google Bookmarks
  • LinkedIn
  • NewsVine
  • Technorati
  • Tumblr
Jeremy Girard
Jeremy Girard has been designing for the web since 1999. He is currently employed at the Providence, Rhode Island-based firm Envision Technology Advisors and also teaches website design and front-end development at the University of Rhode Island. In addition, Jeremy contributes regularly to a number of websites and magazines focused on business and the Web, including his personal site at Pumpkin-King.com.