11 Resources to Help You Create a Flat Design Responsive Site

by Sherice Jacob

Last updated on October 30th, 2017

2014’s web design slogan might as well be “Flat is Where It’s At.”

All over the web, you’ll find dozens of tutorials, elements and examples showing you how to create your own flat-style web design.

But what exactly is a flat design—and why should you care?

As it turns out, flat web design is just as much about trend-setting as it is about improving the user experience.  Let’s talk about why and how, and then I’ll share 11 resources to help you create your own flat style, responsive site.

Why Flat Design?

Flat design has been around for a while, but it really took off when Windows 8 and its “Metro” interface hit the stage, shifting design trends from bulky textures and gradients to vibrant colors, simple shapes and “flat” elements—hence the name.

There’s also a considerable shift toward more white space and large typography, making it easy to browse the layout on a variety of devices.


An example of a flat web design

Flat design is also the antithesis to skeumorphism, a design term that simply means a digital graphic that has its inspiration from a real-life object.

Apple’s previous designs focused heavily on the skeumorphism angle—you can see the hands on the analog clock or click buttons on the digital calculator. Except that when you’re sitting at a computer, the analog clock on your screen is difficult to read, and the calculator buttons are a pain to click individually when you could simply type them in instead.


Apple’s analog clock and calculator are cumbersome to use in a keyboard/mouse environment

Here’s another example. Notice the realistic icons converted to simple shapes:

skeumorphic 02 comparison flat

Skeumorphism vs. Flat Design – Source: Basic Principles of Flat Design

In these cases, large, flat, easily tappable buttons and digital interfaces would be much more inviting. And this idea has finally extended to the web as well.

What Does it Mean for Website Users?

Websites are naturally suited to blocks of content, a type of layout where flat design is totally comfortable.

And, while I don’t recommend ditching your current design just to embrace a trend where it doesn’t make sense, there is a marked difference in the conversion rates of simpler, clearly illustrated sites versus their cluttered counterparts.

Plus, flat designs are endlessly adaptable and are perfectly at home in mobile environments as well as on tablets and regular computers, making them great for responsive designs.

How Do I Create One?

Glad you asked!  There are tons of design resources out there to help anyone who wants to create a flat website design, but listed below are some of my personal favorites spanning a variety of categories.

Website Layouts

Wireframe (GIF and PSD)


This wireframe design (also available as a PSD) will help you lay out your new flat website according to best design practices.

Flat GUI Set


This collection contains 7 PSDs, a vector PSD, 500+ individual elements, as well as vector icons. 30 different colors available.  Everything from music playlists to contact details and error messages are included here in a flat style.  Free and commercial versions available.

Responsive Frameworks


furattoFuratto is an open-source responsive framework made with flat design elements

Furatto includes elements for landing pages, carousel slideshows, basic templates and a dashboard, among many other things.  Its flexibility and ease of use let you create stylish layouts on the fly.

Responsive Web CSS


Design responsive layouts in minutes with Responsive Web CSS

Responsive Web CSS is a quick way to prototype how your design will look in a variety of devices.  This method saves hours of time and helps you get the layout just right without the hassle or guesstimation.



Twitter’s Bootstrap framework is one of the most popular choices for quickly building responsive designs.

bootstrap examplesExamples of sites built with Bootstrap

 Icons and Elements

What good would a flat design be without the corresponding icons, buttons and other elements that make it stand out?  Here are some of the best free selections:

Simple & Bold

SimpleBoldUIElementsSimple and Bold User Interface Elements

Dribble gives you a variety of user interface element in three distinct color schemes, including icons, maps, calendar, search box and more.

 PSD Flat UI Kit

flatui tanone

Here’s a beautiful user interface kit from Riki Tanone.  A blog version is also available from that link.

Flat Social Icons


Pixedon offers 16 flat style social media icons, available as PSD.

More Flat Social Icons


If your favorite social network wasn’t included in the 16 flat icon designs above, it’s bound to be in this collection of 40 social icons.

3,000+ Flat Iconsflat

Get 3,000+ flat icons from IconShock, available as free (personal) and commercial varieties.

Flat UI Colors


Flat UI colors gives you pixel-perfect colors for your flat web design. Just click and paste!

What Are Some of Your Favorite Flat Web Design Resources?

Those are my faves. Share yours in the comments below!

Read other Crazy Egg articles by Sherice Jacob



Get updates on new articles, webinars and other opportunities:

Sherice Jacob

Sherice Jacob helps website owners improve conversion rates with custom design, copywriting and website reviews.  Get your free conversion checklist and web copy tune-up by visiting iElectrify.com.


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

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

  1. Anonymous says:
    September 25, 2015 at 7:44 pm

    This article is useful because usually I only use Bootstrap for my web projects, never know other resources else. I very like Responsive Frameworks as you suggested above.

  2. Denise C says:
    September 3, 2015 at 2:09 pm

    I created websites via godaddy. Godaddy is somewhat responsive but not 100%. I use them because I don’t write code. Just start with a blank page and build it with website builder. Questions:
    Can I convert godaddy to this flat and responsive design or do I have to start all over?
    Am I best to hire a designer and just market the heck out of the company? I am afraid that I am not knowledgable enough. The last time I took computer science is when they were using DOS! Ok now that aged me. haha

    • Sherice Jacob says:
      September 8, 2015 at 2:53 pm

      Hi Denise,

      Does GoDaddy let you create responsive websites? It would certainly say so if this were the case as that’s a major selling point for them – and you. If it doesn’t say, it may not be responsive after all and it might be worth starting from scratch.

      The reason I say this is because you can’t really convert a site to “responsive”. It starts with a certain framework which makes it responsive from the very beginning, which, I suspect GoDaddy doesn’t have.

      If you’re interested, I do a lot of work with WordPress which has the ability to use responsive designs. It’s very easy to use and update your own site and you don’t have to write a line of code. Get in touch if that’s something you think you might like to explore.

      And I first learned to use a computer on DOS, so I’m an internet fossil too 😉

  3. Lara Beckham says:
    August 31, 2015 at 4:19 am

    Responsive web design refers that web pages should display its content to fit any devices like Desktop. Mobile Phone, Tablet.

  4. Jogja Outdoor says:
    October 25, 2014 at 1:23 pm

    nice article

  5. Ashish Ajani says:
    July 8, 2014 at 1:19 am

    Great article and completely agree with you about Twitter Bootstrap, I often recommand Twitter Bootstrap at first place and then creating it from scratch using HTML5. As Bootstrap provides everything we need to make a very good responsive websites. Thank you for sharing such nice article.

    • Neil Patel says:
      July 8, 2014 at 1:11 pm

      Ashish, glad we could help. Thanks for the great feedback 🙂

  6. Felix says:
    June 16, 2014 at 10:02 am

    Cool overall view! Thanks Sherice! I like the Flat-UI Color Website. Excatly what i was looking for 🙂

    • Neil Patel says:
      June 16, 2014 at 12:32 pm

      Glad we could help. Thanks for the feedback 🙂

    • Neil Patel says:
      June 17, 2014 at 1:56 pm

      Felix, glad we could help 🙂

  7. Anonymous says:
    May 6, 2014 at 8:39 pm

    Kathryn Aragon for your nice comment

    • May 7, 2014 at 9:35 am

      You’re welcome, Punom. Let us know if we can help you in any way.

  8. Araby Alhomsi says:
    April 9, 2014 at 11:07 pm

    Thank You for amazing Article,I love flat Design, ” from Syria”.

  9. Anonymous says:
    March 12, 2014 at 6:11 am

    A very attractive list of resources! Thanks for sharing. I’d also like to add a little history about why the transition from skeuomorphic to flat design happened. Read it here.

    • Kathryn Aragon says:
      March 12, 2014 at 10:08 am

      Interesting. But next time, leave your name so we know who to thank. 🙂

      • Christina Preetha says:
        March 14, 2014 at 6:27 am

        Hi Kathryn, I’m Christina. And I’m really glad you found it interesting! 🙂

        • Kathryn Aragon says:
          March 14, 2014 at 11:38 am

          Thanks, Christina!

  10. Anonymous says:
    March 10, 2014 at 6:56 am

    Yep, just ‘love’ Bootstrap, and the elements that go with it – makes for good responsive design

  11. enzo says:
    March 6, 2014 at 5:00 am

    I would also add FlatInspire for inspiration. Very good article btw, thanks for sharing.

  12. Boca website design says:
    January 31, 2014 at 7:20 am

    In 2014 the trends of web design is all about the flat design and the flat responsive web design is great and it will be at the top for whole 2014 and the information you have given about the flat web design is very good and useful thanks for sharing.

  13. January 27, 2014 at 6:18 am

    No doubt flat design is the trend that will rule throughout 2014. Excellent resource list, I will definitely grab some of these sets.

  14. Justin says:
    January 24, 2014 at 12:53 pm

    Great Post ! We just just relaunched our site this week using flat-design and really like how it turned out. Would love your feedback Sherice – you can visit it at http://www.net-craft.com.

  15. January 24, 2014 at 9:07 am

    I was looking for something like this, Sherice. I’d also be interested in finding the best ways to get started with flat, responsive design if you have an existing WordPress site. I’ve been looking but it seems that it’s either flat or responsive for many developers – any tips?

    • January 24, 2014 at 9:15 am

      Hi Sharon — there are many themes on sites like Themeforest that are both flat AND responsive, so you get the best of both worlds! 🙂

      • January 24, 2014 at 12:10 pm

        Sounds good to me, Sherice – now all I need is a guide to choosing Themeforest themes. 😉

        • Sherice says:
          January 24, 2014 at 12:15 pm

          Now *there’s* the million-dollar question! 🙂

          Honestly though, check out the reviews, comments, and the last time the author made an update to the theme – it really says a lot about their support (or lack of it)

Show Me My Heatmap

@CrazyEgg Thanks for no longer truncating naming conventions of exported snapshots. Saves so much time!

Nicole Mintiens


What makes people leave your website?