6 web design trends that are here to stay

Before I started writing this article, I was very concerned about the direction to take – there are literally hundreds of “design trends” blog posts out there, each covering dozen or more examples. The strange thing was that most of these articles confused trends with fads. It’s time to make a distinction between fads and real trends taking place out there.

Trends vs. fads: an important distinction

A trend is something that slowly takes place over a longer period of time and will slowly fade away, if ever. A fad is something that gets very popular during a short period of time then disappears as if it never existed in the first place.

Organic food is a trend; the latest crash diet is a fad. The first one has staying power; the second will be replaced by something new in a matter of months.

The same thing occurs within the design industry. If you put too much focus on the latest bells and whistles, you risk creating work with a very short shelf life. On the other hand, understanding real trends helps you stay current and produce work that won’t look outdated in a year.

Let’s explore some of them.

Trend #1 : rich typography

Long gone are the days when designers were limited to typefaces available on users computer. Web font foundries, such as Google fonts and Typekit allow you to use virtually unlimited number of fonts in your web designs, dramatically enhancing their appeal.

Top: a Kern and Burn website uses beautiful type and easy pallete for a fantastic effect.
Left and Middle: Typographica and Fray use custom fonts to create a special look of their pages.
Right: Center for Investigative reporting combines web fonts with good  layout for a surprinsingly modern look.

Designers have been taking advantage of this opportunity for some time now, and more and more sites are being built with a strong attention paid to typography. Some of the sites, like Typographica, rely almost entirely on type and still look beautiful.

For more on web design typography, check out typography trends in web design (and some goodies to get you started).

 When and how to use it:

  • You can use rich typography in virtually every web design project – every site will benefit from having richly set type.
  • Make sure to check if there is a cost associated with a particular font – there are many free web fonts out there, and Google fonts has its own collection. In my opinion, Typekit offers the best choice but there is a charge.
  • Use one font for headlines and a different, contrasting one for body text. This gives the best visual appeal.
  • Take special care with font sizes for body text – in most cases, you need to make body text a bit larger than normal in order to get the best results.

Trend #2:  solid blocking

This trend has been around for a while, and it basically introduces a brick-like design grid which features blocks of solid color coupled with blocks carrying photos or text.

Design and marketing companies are particularly fond of this approach. Top: Dynamite  Left: Lithium Right: Landor

It sticks with users because of its simplicity – it offers a quick, organized overview of the site content, with minimum distractions. Contrast between blocks of solid colors and blocks with images / text creates strong visual interest, which usually stimulates users to explore more.

When and how to use it:

  • Solid blocking is a great way to approach a multitude of projects – from corporate websites to personal portfolios, even social networks (check out Pinterest or Huddle).
  • Experiment with different solid colors and move the blocks around to get radically different results.
  • Spice it up – avoid the generic look by adding your own personal touch to design. For example, you could use a special combination of fonts or put illustrations in some of the blocks.
  • Solid blocking works for home pages but inside pages need to hold larger pieces of content. When doing inside pages, keep some of the blocks around so you make the design more consistent and the switch less dramatic.

Trend #3:  homemade

The words says it all – this trend is about warm, simple and unpretentious designs, something you would expect to see in a grandmas kitchen.

Yum!  I would mind seeing any of this on a homemade jar of jam. Top:  Hello Bar. Left: Shoplocket. Right: Amazelabs

This look & feel is achieved by combining subtle textures and colors, hand written or drawn elements and easy-going typography. Because it uses visual cues we associate with relaxation and better times, it instantly makes the site look warm, friendly and inviting.

When and how to use it:

  • This style is best fitted for service industries which need to look simple, inexpensive and easy going.
  • Subtle, grainy textures are essential for this particular look & feel but good, readable typography is just as important.
  • This design style is very fun to do but don’t overdo it – remember, it’s what’s inside the box that matters.

Trend #4: oversized type

Large, bold headlines are nothing new in graphic design but they are a relatively new trend in web design industry.  More and more companies and individuals are using this approach to spark users interest and make them engage with the site.

These sites love their type. Top: Big Omaha is a prime example of great type at work. Left: Basecamp homepage makes a clear statement. Right:  Zurb makes a big promise – in big type.

For best effect, you need something compelling to say — make sure to think about what you want to say.

When and how to use it:

  • Oversized type is great when you have a strong offer, statement or announcement to make. It doesn’t work very well for headlines which say nothing important.
  • This is an attention grabbing tool – use it for headlines only and regular type for everything else.
  • Big type can work in almost any type of project but it’s best suited for design pieces which need a strong sense of personality.

Trend #5: photo backgrounds

Another design trend that has been around for quite some time and works wonders for user engagement – provided the photography is good.

Top, left: Creative people’s and Alexey Abramov’s sites look astonishing. Right: When Tennessee fishing is at stake, nothing can replace a good photo.

Pioneered by fashion brands and photographers, this design approach is now being used in virtually all industries with great degree of success. Clients love it because it looks good – users love it because it feels good.

When and how to use it:

  • Photo background approach is great for branding and presentational purposes – when your main objective is to make a strong visual statement. This is why it’s often used by fashion and clothing brands and travel destinations too.
  • Use only top quality, high resolution photos.
  • Try laying out the content so it interacts with the photo – this can make the design even more interesting.

Trend #6:  infographics

Infographics is definitely here to stay – once being used only for educational purposes for niche topics, they’ve gained unprecedented popularity over past several years. Although they are not a web design trend as such, a growing number of sites use them as a good way to add visual interest to content which would otherwise look bland.

Infographic is a great way to spice up a website. Top: Academy. Left: Grip Limited Right: Pointless Corp

When and how to use it:

  • Infographics can be used in more cases than you can imagine — hey can be used to describe a process, a set of numbers or statistics, a cause and effect, and more.
  • Good infographics adds clarity to information being presented, not the other way round – make sure to read about infographic principles on the web. Here is a good place to start.
  • If you’re doing a highly technical or generic looking project that needs a touch of originality, this is the way to go.

Conclusion

Graphic design trends described above are probably here to stay for quite some time – there is no evidence showing that people are abandoning them in favor of something else. On the other hand, there are a dozen design fads that get their “5 minutes” of fame but burn out very quickly – leather ribbons and stitching being one of them.

When you want to do a website design that has staying power, consider trends above – rich or oversized typography, solid blocking, homemade look, photo backgrounds and infographics. These design approaches are less likely to become outdated, and you can combine them in a myriad of ways to make great looking websites.

Know of any other web design trends? Please share.

Related articles:
Trend spotting: the best and worst of ‘Snowfall’ design
Trend spotting: adaptive logo design
Top 10 web design trends for 2014
Web design trends for 2013

Peter Vukovic is a seasoned designer & creative director with 10 years of experience in worldwide advertising agency. He is a proud member of the 99designs community. http://99designs.com/people/pvukovich
Peter Vukovic
View all posts by Peter Vukovic
Peter's website

57 Comments

  1. Jason Aiken

    Great Stuff Peter – thanks for putting it together!

    Cheers,
    Jason

    Reply June 1, 2012 at 2:30 pm
    • Peter Vukovic

      Thanks Jason, you’re welcome!

      Reply June 5, 2012 at 7:51 am
  2. Ebolyne

    informative post.. thx for blogging

    Reply June 1, 2012 at 4:14 pm
  3. Ledevil

    Peter – this is Best information as for me.
    Thanks,
    Kind Regards
    Vladimir

    Reply June 1, 2012 at 4:49 pm
  4. Alhuzin

    it is good and usefull article for me. i have a question PV, how to set size to make web designs ideal… thanks…

    Reply June 2, 2012 at 7:26 pm
    • Peter Vukovic

      Thanks Alhuzin, it’s great to hear my post was helpful to you.

      Size is a good question when it comes to web design. All things being equal, the safest bet is to make the webpage 960 or 1024 pixels wide; that will make it fit on most desktop, mobile and tablet screens.

      However, this is an important design decision, so make sure to consult the client first.

      P.S. There are many web design veterans right here on 99designs who can share their best experiences regarding web page sizes – let’s hope they’ll jump in with a comment too :)

      Reply June 3, 2012 at 11:46 pm
  5. sreelakshmi prasad

    good designs

    Reply June 2, 2012 at 11:47 pm
  6. A

    Very informative. I like few points very much. Thanks!!

    Reply June 3, 2012 at 11:57 pm
  7. Tony

    Good information; I will take these trends into consideration on my blog design.

    Reply June 4, 2012 at 12:31 pm
  8. Jerome

    Thank you for this!! Very helpful, and I agree totally. Icons and texts have gotten bigger, and I find it attractive on a website, with colors that blend with each other as well. Not to mention, how attractive different and appropriate fonts makes it look.

    Reply June 4, 2012 at 7:33 pm
  9. Becca

    Wonderful post! There are more new trends coming every month. I expect more and much better trend.

    Reply June 4, 2012 at 10:10 pm
  10. web design

    Very good post.Really interesting.A website design which catches the eyes of the audience has more chances of success.Thanks for sharing such a cool and interesting post.

    Reply June 4, 2012 at 11:09 pm
  11. John Lee

    Hey peter,
    Really these are few superb web design trends nice information.

    Reply June 5, 2012 at 3:28 am
  12. Steve

    A great roundup of the staple design trends that work so well and will be here to stay for some time to come I feel. Really informational article Peter so cheers for sharing it! I definitely agree that some things only hang around for a little while whereas other styles like these establish themselves for the long term. It’s interesting to see what has staying power and what doesn’t, perhaps it because each of these work so well in their own right, keeping information presentable but displayed in a way that retains visual interest. Thanks again!

    Reply June 6, 2012 at 1:08 am
  13. Utah Web Design

    Hi Peter,

    This is truly trends. I want to read more web design trends from you.

    Reply June 6, 2012 at 1:36 am
    • YellowCorn

      same here, I really want to read more about web trends

      Reply June 12, 2012 at 2:51 am
      • Allison Stuart

        Great! There will be more articles such as these in the near future. ;)

        Reply June 12, 2012 at 9:45 am
  14. Green Web Solutions

    hey its really very interesting post and will be usefull for me.

    Reply June 9, 2012 at 12:56 am
  15. katherine

    I would LOVE to share but I dont see a gplus button. come on in…the design community on gplus is huge. and yes, you can have a business page.

    Reply June 15, 2012 at 1:39 pm
    • Allison Stuart

      Hi Katherine! We definitely want you to be able to share via Gplus. I’ll talk to the dev. team about adding that button. Thanks for bringing it to our attention :) Cheers!

      Reply June 15, 2012 at 4:22 pm
  16. Qaisar Irfan

    good one

    Reply June 21, 2012 at 8:31 pm
  17. Alex Kuznetsof

    I think you right :-) Homemade is a funny one, but again not for everybody.

    Reply June 22, 2012 at 10:39 am
  18. Sha web design

    Very nice one

    Reply June 23, 2012 at 10:47 am
  19. clairesler

    Great Post! Thanks!

    Reply June 24, 2012 at 6:52 am
  20. Zeidan

    Great post Peter! It’s nice to get a brief overview of design trends so far this year. Thanks for posting.

    Reply July 5, 2012 at 5:18 am
  21. Project Tracking Software

    I believe, topography is the next big adventure in the design industry and its definitely going to revolutionize the design sector.

    Reply August 1, 2012 at 8:01 am
  22. thomas

    Very nice post sir. I am very thankful for it..

    Reply September 14, 2012 at 3:05 am
  23. Adeel Ishfaq

    Great trends on a single article.

    Reply September 20, 2012 at 2:35 am
  24. Ayman Ezzat

    What I like is Why & When using .. thx Peter, wonderful article

    Reply September 27, 2012 at 4:21 am
  25. Websites Cheap

    Bright ideas. Giving more knowledge about the trends today.

    Reply September 28, 2012 at 9:40 pm
  26. Adam Johnson

    You told better difference between Trends vs. fads

    Reply October 4, 2012 at 2:46 am
  27. Alagbe Olorunniisola

    The Solid Blocking method is called Metro Styling!

    Reply October 8, 2012 at 8:05 pm
  28. sylvana coche

    This is really helpful, thank you.
    I have my own company and we are in IT (SAP partner) and I am tired of all the websites looking the same. I would like to come out different but still with the possibility to do SEO. I saw some websites that you can also see on iPads that are more like a catalog where you turn pages. Any example of a website with this style? Also, any other idea to do a new website format for IT (SAP) so still the serious message about the company but a different way of making it synamic and different? Thank you for your ideas :-)

    Reply October 15, 2012 at 4:02 pm
  29. martinyong

    IMHO: we are slowly migrating towards 3rd dimensional communication where interactive, film, motion graphic will be the next in thing,coming. Even smelling is on the way!

    Reply October 31, 2012 at 8:02 pm
  30. suchi

    Nice read. Outstanding examples!

    Reply November 1, 2012 at 3:04 am
  31. Madhu Kaleeckal

    Really very valuable Information for every designer around the world.

    Reply November 2, 2012 at 11:57 pm
  32. Priya

    These designs contain new trend of writing in different fonts. The solid block pattern looks so worthy and beautiful. Your blog giving an unique idea to the Web Designers.

    Reply November 7, 2012 at 6:40 am
  33. Jonsone M

    excellent examples!
    But i add italian design http://www.fe-el.com

    Reply November 8, 2012 at 1:19 am
  34. iWeb Expert

    Thanks for this very informative post. I agree that typography is very important because it serves as the word of mouth. How can you convey the message to your audience if it is not properly visualize by the intended users.

    Reply November 15, 2012 at 5:48 am
  35. Adyla

    Hello Peter,

    I hardly leave comments on articles but yours is exceptional. I really like how you put ‘When and how to use it’ on the articles that I’ve read written by you.

    It really is useful for a web designer like me, coz that basically acts as a small summary and also as some takeaway points to remember. (especially when we’re in the age where we scan through more than we actually read articles)

    But nevertheless, good job for this thorough and informative post! I will be subscribing by email! :)

    Reply November 20, 2012 at 11:08 pm
  36. Wine Dine

    Love the typography trends.

    Reply November 24, 2012 at 4:02 pm
  37. S.K.Illangarathne

    Dear Peter,
    I’m newer for web designing thank you for your valued information.

    S.K.Illangarathne

    Reply November 28, 2012 at 12:38 am
  38. Andy Walsh

    Thanks for a great post. One trend that seems to be gaining pace now is the one page website. With the general use of scroll wheels or the Mighty Mouse, people can easily scroll vertically (or horizontally) through a site, and using pins and anchors, it can be made easily navigable. After the initial site load time (this must be kept to a minimum), there’s no waiting for other pages too. I like the idea, and I’m incorporating it into my next web designs. What do other people think about this?

    Reply November 30, 2012 at 9:24 am
  39. Emad

    Thanks Peter

    Reply December 6, 2012 at 12:20 am
  40. emyloretta

    I loved to read infographics and Trends vs. fads.such a great collection:)

    Reply December 13, 2012 at 9:22 pm
  41. Ashish Shah

    Great Post Author. Explained in very detailed with Images. Great ! Keep it up.

    Reply December 26, 2012 at 5:20 am
  42. Line Hostmalingen

    I love the SOLID BLOCKING!!
    Got some good ideas here for my next projects…
    thank you!

    Reply January 14, 2013 at 3:20 am
  43. Sam

    Your Articles regarding “6 web design trends that are here to stay” really rocks.Your Articles are much more informative than any other site.Thanks for Posting Awesome Articles.

    Reply January 23, 2013 at 12:51 pm
  44. Lauren

    Blocks of space and Infographics are some of the best trends to have ever been stumbled upon in our world of design. Great post!

    Reply January 24, 2013 at 6:49 am
  45. Karl

    Great post useful article these trends you have shared is really important. Thanks for sharing

    Reply January 26, 2013 at 11:36 pm
  46. Brad

    These 6 web design trends are the real things that web designer should apply if they want to have a effective website.

    Reply February 2, 2013 at 1:46 am
  47. Harley Gutknecht

    I had been there, and both are beautifully finished, and tow vehicle pretty effectively proportioned. Truly stunning effect.

    Reply February 3, 2013 at 10:14 pm
  48. job dubai

    These are really very good designs with this you clear difference between Trends vs. fads

    Reply February 21, 2013 at 3:54 am
  49. sakshi

    Eye catchy design have more chance of success. Thanks for sharing interesting post.

    Reply March 8, 2013 at 3:50 am
  50. ron

    this is A great page. i found a page called pagebin.com its a fast and easy way to create and post your own web page.

    Reply March 22, 2013 at 11:59 pm
  51. Dane

    I was same happy to attain this website. I hunted to thank you for your time in support of this outstanding post!!

    Reply April 5, 2013 at 8:07 am
  52. Mona

    Heads Positive us just especially likes your amazing blog along with satisfy be writing

    Reply April 8, 2013 at 1:19 am

Leave a comment