Web Design Trends – The Why and the How

Web Design Trends – The Why and the How

I spoke at Multi-Mania this week. It’s an annual event that brings together more than 2000 designers and developers for two days of conferences. This year, I decided to talk about Web Design Trends. If you Google it, you’ll find hundreds of articles every year that will describe these trends. I wanted to summarize them and also make sure that designers don’t follow them blindly. The most important thing with trends is to understand them, identify their origins and make decisions based on your personal analysis. It’s a 45 minute talk that I’ll recap in this post.

Why do we need trends?

This was the first time I gave this talk and it became one of the most popular session at Multi-Mania. The room was full, attendees started to sit on the floor and the organisers had to block some people at the entrance. I like to think that they just wanted to hear me speaking, but I’m not a fool :) . It clearly shows the appetite that web designers have for trends. I can bet that this appetite would be lower in other industries such as print or video. It’s because, as we celebrate the 20th anniversary of the web, web designers have lived through hundreds of disruptions and might feel lost. From table-based pages to CSS layouts, from Flash interactions to the rise of HTML5, from web 2.0 to the mobile web, all web designers had to quickly adapt their skills and visions. That’s why “Web Design Trends” articles are so popular and why, as designers, we need to step back and put them in perspective in this rapidly moving history.

Web designers have lived through hundreds of disruptions.

Some articles list 10 trends, others just three… I’ve chosen to extract the five main trends for 2014:

  • Responsive Web Design
  • Storytelling
  • Non boring typography
  • Flat design
  • The Hero Welcome experience

1. Responsive Web Design

Yes, RWD is trendy. I mean that 90% of the web agencies I meet these days are mainly working on responsive pages. But it’s not the solution for everything. RWD is a good technical solution for websites that want to display the same content for mobile and desktop users. By playing with CSS Media Queries you can optimize the layout of your pages for all your users. You can add some JavaScript to “adapt” some blocks of information for mobile users, but usually RWD tends to display the same information for all users.

01foodsense

Foodsense is a great example of Responsive Web Design.

RWD is born for maintenance reasons. The cost of maintenance of two or three websites that share the same content can be huge. Having one single codebase is seducing, but don’t underestimate the cost of designing and creating a complex responsive websites. Many responsive websites are composed of 4 or 5 pages.

In some cases, RWD is not an option.

Before jumping into RWD, which is a very complex design process because it requires tons of exchanges between the design and the development teams, you need to ask one question: Do we want to display the same content to mobile users? Maybe mobile users don’t have the same needs when they are in a situation of mobility. This is the case of McDonalds.fr.

McDonalds' website provides different experience and services to their desktop and mobile visitors.

McDonalds’ website provides different experience and services to their desktop and mobile visitors.

Thanks to analytics, they realized that the big majority of mobile users were directly jumping to the store locator section of the site. That’s why they designed a dedicated  experience for mobile users who cannot miss the store locator service anymore. In this case, RWD wasn’t an option.

GETTING STARTED WITH TOOLS – If you need to quickly prototype responsive pages, have a look at Dreamweaver CC and Edge Reflow CC.

2. Storytelling

Even the word is trendy and used by politicians, video makers and now web designers. How do you tell a compelling story to your visitors in less than 30 seconds? In the past, Flash was the best technology to tell a story. It was light, could play videos, sound, and guide the user through an interactive navigation. At some point, after 2005, a lot of talented agencies such as Soleil noir started using Flash as a universal player for interactive videos. The experiences were highly immersive. Now, we have the rise of HTML5 for engaging UX. That said, web designers avoid fullscreen animations and prefer to insert small animations to catch the eye in the pages.

The Cups website contains great HTML5 animations.

The Cups website contains great HTML5 animations.

Parallax scrolling also appeared a few years ago. It’s a funny “trick” to base your animations on the scrolling position. I’m not a big fan of massive parallax scrolling experience (such as this website) but can enjoy slight ones if it’s part of a story (like the Muse website).

The game changer in storytelling for web design is video. Embedding an HD video in a page won’t shock anybody today, when this would have unimaginable a few years back. Web designers have to consider videos as part of the design process and this can be disruptive. More and more web agencies now have video makers and motion designers in house. Videos can be part of your welcome experience (QUECHUA), your navigation (CURADMIR) and even at the heart of your website. My favorite example is the OneCoin website. The founder welcomes you demonstrating his product in one minute, and the light parallax scrolling animations list the top three messages you want to deliver before the call to action (pre-order). Enjoy:

OneCoin website combines video and parallax scrolling effects.

OneCoin website combines video and parallax scrolling effects.

GETTING STARTED WITH TOOLS – If you want to create Parallax Scrolling animations without coding, try Adobe Muse CC. To create professional HTML5 animations, you’ll enjoy Edge Animate CC and its timeline.

3. Non-boring typography

For more than 15 years, web designers have been locked with nine fonts defined by Microsoft in the 90s’. Yes… that’s crazy but true. The MS in Comic Sans MS stands for Microsoft 😉 . That also helps explain the success of Flash because you could embed any TrueType font in a Flash project. In 2007, CSS enabled the use of TrueType fonts.

A professional font is expensive because it represents months of work.

Web designers had to deal with hundreds of free fonts, but quickly realized the value of professional fonts. Handling all languages and character sets is hard work for founders, and it has a cost. A professional font is expensive because it represents months of work. In 2009, Typekit changed the rules of game with the first subscription model to use professional fonts on the web. Today, members of Adobe Creative Cloud can use Typekit fonts on their website and even in their desktop applications.

Beautiful use of Typekit fonts

Beautiful use of Typekit fonts

For those of you who cannot afford Typekit fonts, have a look at the Adobe Edge Web Fonts. It’s a set of hundreds of free fonts hosted by Typekit and it includes the famous Google Web fonts.

This new era of typography freedom involves discipline. Web designers have to learn the emotions behind typography and your goals: readability? aesthetics? This article is a good starting point to learn how to choose the best fonts for your design: http://www.smashingmagazine.com/2011/03/24/how-to-choose-a-typeface/

I’m also very careful with web design trends and typography. Some fonts get quickly trendy for bad reasons. Comic Sans is very criticized these days and perceived as the worst font ever made. But it became trendy because it was in the list of nine fonts available in all web browsers, and in Microsoft Word. That’s it. Choosing a font is a process that requires discipline and efforts. Don’t pick the first funny font available to create a fun mood, or you’ll be trapped by the new Comic Sans… which is the case of Lobster in my opinion. Same for classy fonts such as Helvetica, I see more and more websites using Proxima Nova. It’s one of my favorite fonts, but as it starts being used everywhere, readers won’t be surprised anymore and it can impact my brand. Last week, I’ve discovered Foco for instance… let’s see if it becomes trendy by the end of the year :)

GETTING STARTED WITH TOOLS – Visit Typekit.com and browse the catalog. The filters will help you to understand the different families of fonts available. To enable a 100% web safe workflow with Typekit fonts in Photoshop CC, read my article

4. Flat design

Flat mountains, flat clouds, blue color swatch... and space.

Flat mountains, flat clouds, blue color swatch… and space.

Minimalism at its best: shapes, colors, fonts and shadows. A trend is never born by mistake. I feel that realism in web design, with heavy textures (leather in the background…), lights and shadows… didn’t fit well on mobile devices because of the user context. For more than 15 years, your visitors were at home or at the office, with a stable light and environment. Mobile users are… mobile. They walk as they browse your pages, the sky moves in the background, the contrast changes on the screen, the viewport is limited, etc… That’s why we had to simplify our user interfaces.

But today Flat Design is more than a Web Design trend, it’s a creative field. Check this amazing work by Lorena G on the movie Grand Hotel Budapest:

The Flat Grand Hotel Budapest (great movie by the way).

The Flat Grand Hotel Budapest (great movie by the way).

This doesn’t mean than skeuomorphism is dead. Again, it depends on the story you want to tell and the emotions you want to transmit to your users. I hate this false debate that tends to oppose Flat vs. Realism. Web Designers have two options and must master both of them.

Flat design also opens the door to more SVG assets. If you want to combine SVG creations and animations, check the open source library SnapSVG.

GETTING STARTED WITH TOOLS – Flat design is much easier with Illustrator CC. Check my articleTo create long shadows, there are some free extensions for Photoshop CC such as this cool panelTo choose a vibrant color swatch or a vintage one, get inspirations on Kuler.

5. The Hero Welcome Experience

08Seattle

The Hero banner is as important as the cover of a book. It has to send a strong signal to your visitor. This website gave a vintage look to the picture on purpose.

09video

I also enjoy videos in the background. It gives a lot of life to a website. Check this website.

CSS blend modes is a cutting-edge technology that will ease these experiences. Check this page to understand what’s coming in your web browser. This technology can dramatically change the way we design pages and play with manipulated imagery.

Conclusion

I’m expecting more articles about Web Design trends in the coming years as we are part of a vibrant industry. I just want web designers to understand the trends before following them. Why the rise of Flat Design? How to choose a creative typography? When is RWD relevant? We also have to be strong as designers and educate our customers. A customer should ask for a responsive page, he should ask for the best user experience for his mobile users. He shouldn’t ask for flat design, but for a modernized reading experience on his website.

And my advice would be that sometimes, it’s important to forget the trends. As Jack Kerouac said:

“Great things are not accomplished by those who yield to trends and fads and popular opinion.” 

Understand the world you’re living in, and create the trends. Or play it like Miley, and just F!#K THE TRENDS :)

The best web design to serve Miley Cyrus, it's as fucked up as her.

The best web design to serve Miley Cyrus — it’s as fucked up as she is :)

My slides

The slides of my presentation are on slideshare.

Questions ? Comments ? Feel free to post a comment or contact me via Twitter.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

Submit a Comment

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