• Skip to main content

Rafal Tomal

Learn Design and Create Better Websites

  • About
  • Courses
  • Tools
  • Tips
  • Blog
  • Contact
  • Work With Me →

5 Web Design Trends To Keep An Eye On In 2013

posted on January 31, 2013

TweetFacebookLinkedInPin

The year 2012 was definitely a great year for web design. We saw several new trends that have significantly changed how the web looks today.

We saw the rise of responsive design, more beautiful typography and various implementations of animations and effects using CSS3 / HTML5 / JavaScript.

In this article, I’m going to focus more on visual design trends that I think are going to rule in 2013.

1. Flexible design

Today, when we design a new website, we already know it must be responsive by default. The responsive layout is not a feature anymore — it has become the spine of any website layout.

Instead of using extra big batches of code to make each screen resolution step separately responsive, we’re going to make our layouts fluid in the first place and let them automatically fit to all other screens.

Using responsive units like ’em’, ‘rem’ and % will help us to make all inner text and images flexible.

This is the end of static elements.

We’ve already done this in the most recent Genesis 1.9.
Go ahead and check out the CSS code.

Genesis Framework

2. Flat design

Creating shadows, gradients, bevel and emboss effects with CSS is not a problem anymore. However, the new web design trend, what we can call “flat design,” doesn’t need it at all.

The flat design makes your website look sharp and clean, and it’s easier to maintain the visual balance.

We believe that Internet users are so well educated in 2013 that they don’t need a button to have that 3D dimensional-looking style in order to know that it’s clickable.

With the flat design, the user interface can still be intuitive and create a great experience. An excellent example of that can be LayerVault:

Layervault.com

One of my most recent design projects, AgentPress, is all flat as well. See the results here:

AgentPress.com

3. Focus on typography

The database of web fonts grows every day.

We can now find hundreds of beautiful free web fonts on Google Web Fonts or choose some more unique and premium fonts from Typekit.

Typography became a really important part of modern web design and I believe it’s a foundation of any great design.

We can create the entire website by designing just typography and still make it unique and fascinating for the visitors.

Just look at some of these inspirational examples of wonderful typography in web design:

Brooklynbeta.org

Contrastrebellion.com

4. Long pages

People of 2013 can scroll! The old-school web design I learned had one main rule: “keep it above the fold.”

I heard it hundreds of times. Does it still matter? It’s obvious we want to keep some important things at the top of the website but “the fold” lost its meaning to me.

Instead of squeezing everything to the top of the website, it’s better to give it some space and let people scroll and explore the home page.

We’ve seen so many great web designs in 2012 with incredibly long pages that work just great.

People would rather scroll down the page than click and load to another page.

Scrolling is easy and we can even make it attractive and encourage people to take this action by using some effects like parallax scrolling.

Let’s look at some long page designs:

CirclesConference.com

Squarespace.com

5. Big photos and detailed illustrations

Thanks to using more CSS3 and web fonts, we reduced the usage of many images in the web design. Instead, we can use images where they are really needed and we can use them in really high quality.

We saw that trend near the end of 2012 where we could admire huge full-screen photo backgrounds.

I’m really looking forward to seeing even more great pictures and extremely detailed, huge illustrations in the world of modern web design this year.

It’s all happening right now; see these examples:

ThinkBasic.com

Stretch Genesis Child Theme

Conclusion

Those are my five design trends that I think are worthy of special attention in 2013.

We’re definitely going to see more designs in this direction and there will be a demand for it.

Of course, we can’t stick to the trends and blindly follow them. We always have a chance to create something new and original.

We should also try to incorporate our own style into the current standards what will make our work unique and recognizable.

Which design style are you going to follow in 2013?

TweetFacebookLinkedInPin
Previous article: Making of: typespiration.com
Next article: Making of: The Genesis Framework Logo

Join 20k+ people who love good design. Get my best tips, resources, and strategies to elevate your design skills and grow your business.

About Author

I'm Rafal Tomal, I help designers and businesses create simple and beautiful websites that work.

More about me...

Reader Interactions

Comments

  1. Heather Jones says

    January 31, 2013 at 5:05 pm

    Nice list- I’m particular pleased to see that ‘flat design’ made the cut. I was never a huge fan of gradients and making things look 3D when they’re really not. Maybe my background in Maya is to blame? 😉

    Reply
    • Rafal Tomal says

      January 31, 2013 at 7:01 pm

      I’m a fan of everything that “works” 🙂 gradients and shadows help us recreate some real life visual experiences.

      If I had to design a website for older people or people with a little internet experience, I would avoid “flat design”.

      Reply
      • Oliver Nielsen says

        February 8, 2013 at 11:14 pm

        Good point.

        Reply
      • Petr Chutny says

        July 5, 2014 at 3:03 am

        Nice view…

        Reply
  2. Jared Williams says

    January 31, 2013 at 5:54 pm

    Awesome list! I love Flat Design, and am so excited to see what other designers do with it this year. Most of my projects that I have started this year will be flat and incorporate large images.

    Reply
    • Rafal Tomal says

      January 31, 2013 at 7:03 pm

      Nice! I love the intro section on your website: http://www.mediacrazed.com

      Reply
      • Jared Williams says

        January 31, 2013 at 11:46 pm

        Thanks!

        Reply
  3. Chris Langille says

    January 31, 2013 at 5:56 pm

    I’m a huge fan of “flat” design, and it’s something i’ll definitley be incorporating into more of my work going forward. It just looks so much cleaner, and it’s easier on the eyes!

    Good stuff man!

    Reply
    • Rafal Tomal says

      January 31, 2013 at 7:18 pm

      I love flat design for its minimalism. Depending on a project, I still like subtle shadows and gradients.

      Reply
  4. Cathy Tibbles says

    January 31, 2013 at 6:07 pm

    Love the scrolling – and giving things more room to breathe. The flexible design is a work in progress for us but taking apart the genesis themes has been a great tutorial!

    Reply
    • Rafal Tomal says

      January 31, 2013 at 7:13 pm

      I love long pages and websites that tell us a story.

      Reply
  5. Cody Landefeld says

    January 31, 2013 at 6:10 pm

    Great observations Rafal. As a designer I know it’s important to keep posted on these items as they become more of a focal point. I love to change these up as project scopes allow.

    Reply
    • Rafal Tomal says

      January 31, 2013 at 7:21 pm

      It’s difficult to be up-to-date with everything when your hands are full of work 🙂

      Reply
  6. Sam Lloyd says

    January 31, 2013 at 6:51 pm

    Flat design is VERY hard to actually pull off. 99% of attempts just end up looking boring and unappealing.

    Reply
    • Rafal Tomal says

      January 31, 2013 at 7:08 pm

      It’s not that easy to make a flat design look great. It takes a lot of time to create a good color scheme.

      Reply
  7. Justin McClelland says

    January 31, 2013 at 8:34 pm

    Spot-on. I’ve noticed everything you’ve mentioned on plenty of sites, I just hadn’t taken the time out to research what the styles were called and what-not. Protocols are changing so quickly it’s harder and harder to keep-up.

    Reply
  8. Ray Flores says

    January 31, 2013 at 9:32 pm

    RT – loved the teaser about Agentpress… please do give us more info on a release date… that look is definitely sell-able!

    Reply
    • Rafal Tomal says

      February 1, 2013 at 10:22 pm

      Well, you can already register: http://www.agentpress.com/offer

      Reply
  9. Durfington Hurfington Butterworth, Esq., PhD. says

    February 1, 2013 at 5:14 am

    I agree with most of this article, particularly in regard to “flat” design, as it looks much cleaner and is easier to read/navigate.

    However, I can’t help but feel that a lot of these “trends” are just that: trendy, fashionable things which will be looked at with disdain 5-10 years from now. Heck, I’ll bet you money that 20 years years from now pages full of animated gifs and blinky text will be the cutting edge of design again!

    Reply
    • Rafal Tomal says

      February 1, 2013 at 10:23 pm

      I really hope you’re wrong 🙂

      Reply
      • agnieszkas says

        April 3, 2013 at 9:18 pm

        Good design will always be good design. If good typography is a trend then it can last forever as far as I concerned. I am happy seeing web design aligning with great graphic design tradition.

        Reply
  10. Philip Gledhill says

    February 1, 2013 at 8:27 am

    Some of the things I like best about recent design trends are…
    Choices in typography and “beautiful free web fonts” have radically changed web design for the better. Long scrolling pages allow more white space and make reading web pages much more enjoyable. They also allow bigger better and more detailed illustrations that help explain your message clearly.

    But the most important thing is what you say in reply to the first comment, I’m a fan of everything that “works” 🙂

    Reply
  11. Will says

    February 1, 2013 at 12:37 pm

    This is awesome Rafal…thanks!

    Reply
  12. David says

    February 1, 2013 at 6:31 pm

    great work. I love flat design as well. I think the drop shadows and gradients are becoming a little redundant, but like you said, it’s on a project by project basis.

    Reply
  13. David Wang says

    February 4, 2013 at 4:54 am

    I would definitely love to see more long pages. I used to work in a digital agency who built lots of campaign sites. The art director always wanted everything to fit above the fold, so we always ended up with tiny text and few images. The web page is long and tall, why try to fit everything into a browser window?

    Reply
  14. Joel Libava says

    February 4, 2013 at 4:37 pm

    Great job–great design tips.

    A question: Doesn’t the sharebar up above hurt your SEO?

    The Franchise King®

    Reply
    • Oliver Nielsen says

      February 8, 2013 at 11:17 pm

      Why would it?

      Reply
  15. Louis says

    February 6, 2013 at 1:15 am

    I do love the look of the flat design much more then gradients or texture.

    As for the big images they have always been my main weakness!

    Reply
  16. Henk says

    February 6, 2013 at 11:42 pm

    Nice roundup.. thanks for your insights.
    What you call “flat design” is as much the result of low budgets and wanting to get results a fast as possible I think.
    And if enough people do it it becomes a trend…

    Nearly everytime I get a design with lots of dropshadows etc. it turns out that the designer spends most of his/her time designing for print.

    Reply
  17. NWonline says

    March 8, 2013 at 10:28 am

    That flat design looks nice!

    Reply
  18. Christof says

    March 12, 2013 at 12:00 pm

    Love your work man!

    Reply
  19. Mac Grossman says

    March 19, 2013 at 3:25 pm

    I have been incorporating just about all of these into recent projects. I find that when many of these are used in conjunction, it can be of a greater benefit to the design. In a recent blog post, I pulled together several examples of websites that do a good job of incorporating flat design with several of the other trends you mention. Take a look: http://blog.stationfour.com/flat-designs-trends-in-responsive-websites/.

    Reply
  20. Chris M. says

    April 11, 2013 at 2:07 am

    Great post! Thanks for sharing…

    Note: The two links under section one are dead, as of April 10th, 2013…

    Reply
  21. Julius says

    April 13, 2013 at 7:52 am

    Hi, I think your blog might be having browser compatibility issues.
    When I look at your blog in Ie, it looks fine but when opening in
    Internet Explorer, it has some overlapping. I just wanted to
    give you a quick heads up! Other then that, wonderful blog!

    Reply
  22. gia may phat dien says

    June 5, 2013 at 9:33 am

    Wow, nice. I prefer flat design than 3D design. Like your work ^_^

    Reply
  23. Chris Rutter says

    June 7, 2013 at 8:22 am

    Nice little list. However I think a lot of these have been used / are being used. It would be great to have a think about the next “big” thing.
    I wonder what effect long pages will have on SEO as well, if the content of a site is all on one page, keyword dilution could be something of a problem.

    Reply
  24. Jason K. says

    July 16, 2013 at 12:11 am

    Hi Rafal,

    Thanks for utilizing BASIC as a best practices example and great job on this post. Iconography is also a popular trend right now that’s aiming to simply user experience and let designs breathe easier without giant clumps of text.

    Reply
  25. Ducktoes Web Design says

    August 6, 2013 at 9:12 pm

    Very cool, thanks for sharing!

    Reply
  26. Shruti says

    September 9, 2013 at 11:20 am

    All points are right. web designers in 2013 is not so easy without considering these points. I agree with your point on the strength of typography. Thanks for these info.

    Shruti

    Reply
  27. William says

    September 20, 2013 at 11:34 am

    I will follow this design trends

    Reply
  28. Swen says

    February 5, 2014 at 5:58 am

    Woah! I’m really digging the template/theme of this
    site. It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between user friendliness and visual appeal.
    I must say you’ve done a fantastic job with this. In
    addition, the blog loads extremely fast for me on Internet explorer.
    Outstanding Blog!

    Reply
  29. Dan Carter says

    November 10, 2014 at 1:16 pm

    Great article and great tips. I am going to put them to practice for sure. thanks mate.

    Reply
  30. Naman says

    December 4, 2014 at 9:56 pm

    Great list…I am a web designer and I am going to suggest some of these to clients next.

    Reply
  31. webpagemasters says

    January 22, 2015 at 5:07 am

    These designs look awesome, thank you for sharing.

    Reply
  32. Lucy says

    April 13, 2015 at 1:33 am

    Though it is now 2015, I guess these trends remains same as they have a lot of exposure.

    Reply
  33. Taposy Rabeya says

    July 4, 2015 at 4:35 am

    ‘In this tutorial, you show us how we can create best web design without the need of expensive software or plugins and get pretty similar results! Thanks for sharing.

    Reply
  34. sukere says

    January 11, 2016 at 12:02 am

    Keep up the good work!

    Reply

Trackbacks

  1. Scroll isn't a dirty bitch that should be hidden in your basement says:
    August 20, 2013 at 12:41 pm

    […] UPDATE on february 9′th 2013: Just came across these two fine articles: UX Myths: Myth #3 – People don’t scroll 5 Web Design Trends To Keep An Eye On In 2013: #4 – Long pages […]

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© Copyright 2008 - 2025 Rafal Tomal.

Affiliate Program . Privacy Policy . Cookie Policy . License .

Follow me on Twitter, Dribbble, and Instagram.

DISCLOSURE: I may be an affiliate for products that I recommend. If you purchase those items through my links I will earn a commission. You will not pay more when buying a product through my link. It helps me to continue to offer you lots of free stuff. Thank you, in advance for your support!