Getting Started with Flat UI Design

A recent Forbes report places the increasing trend towards flat design firmly at the door of people’s growing familiarity with digital interfaces. In years gone by (1995-2003), the author says, designers were designing for only a “certain class of professional workers” who were familiar with desktop software and this meant designing with clickability in mind.

Fast forward to the present day and the latest version of iOS7, and now we’re designing still very much with the user at the forefront of our minds with flat UI design. In the early days of the iPhone, web trends were made popular by the Apple devices too, but with an eye on bubbles, drop-shadows and glares, to name a few popular UI techniques.

It’s this earlier intervention from Apple that the Forbes article says has helped modern users get really comfortable with using the web, on more devices than just a desktop or laptop computer.
“I believe that the flat design trend is a symptom of the growing maturity in the field of web and interface design,” the article states.

“This maturity applies to our designers – who are getting better at making interfaces that encourage interactivity and engagement – as well as to our users.”

Users are of course increasingly sophisticated when it comes to how, where and why they use the internet and because of this, the tendency to make shiny buttons that scream “click me” is now thankfully behind us.

Where to begin

Trends are all very well and good and personally, I love the current minimalist, flat and simple designs that are emerging thick and fast within the design community, but that’s not to say that all of your clients will too.

The first place to start then would be in the suitability of flat UI design to the project that you’re working on. If the client has a good, strong brand persona, then see what you can take from that in terms of colors, layout and content strategy to make sure it matches your ideas.

Most of all though, think about the users as, if the client’s ideas are outdated and horrify you, then you have a good argument to overcome this. Users may be a lot more web/technologically literate than in the past, but they still need a certain amount of direction when it comes to clickable areas and such like.

Elements of flat design

  1. Absence of depth
  2. Use of simple elements
  3. Typography
  4. Color
  5. Minimalism

Grid

As with all UI design, the grid plays one of the most vital roles and flat design is no exception. It establishes visual order when you’re working with just a few elements and gives you a guide to work to.

Use the grid to define your content and draw the user’s eye to where you want them to go. You can get creative and user tighter grids to experiment with different visual effects, so that you can gauge how much content can be included, without the overall interface looking cramped and messy.

Color

You may have noticed that flat designs tend to be quite colorful, making the most of different shades and hues from the same palette. It’s important not to get carried away with too many colors and bear in mind that very strong colors can be overbearing.

With that in mind, think pastels and save the strongest hues for your actionable areas to draw the eye and entice clicks. Reds and oranges are great for call-to-action buttons, but be careful not to overuse as this will drive users away.

Take a look at Flat UI Colors for inspiration and ideas.

colors

Typography

This is another important part of flat design and it’s vital that the typography fits in with the overall design, using strong, bold fonts that are simple and easy to read. Consider readability too, use simple, solid words and keep them to a minimum, with a consistent tone and voice.

Consider the use of white space too, your design should ideally be able to be taken in at a glance, with clear information and visual indicators that guide the user where you want them to go.

Flat UI Design kits

You have to hand it to the designer/developer community, when it comes to sharing useful tools, libraries and resources, they are generally well on the ball and flat design resources are readily available and plentiful.

Here’s some of the more useful, or just best looking ones, to choose from:

Flat UI Pro

This costs from $39 for a personal version and $149 for developer/business and is definitely worth a look. Flat UI Pro is grid-based, Retina-ready and comes bundled with a wealth of time-saving elements such as icon sets, color swatches, free fonts and glyphs, all designed to make your life easier.

It’s based on Twitter Bootstrap and also allows you to design responsively with a huge variety of devices in mind.

Modern Touch UI Kit

This is completely free to use for both personal and commercial use and is a metro-style kit to help you get started. Click on the image to download the full kit.

Modern Touch UI Kit

Featherweight UI

This simple kit is again retina-ready and includes elements such as menus, photo scrolling, icons and widgets. The kit is vector-based and has a nice retro feel to it, design and color wise, and whilst it’s not the largest kit out there, it’s a nice little package all the same.

Again free to use for any purpose, the font for Featherweight UI is Lato Normal, which is available from Google Web Fonts for offline and online use. More details on how to use can be found on designer Sarah Hunt’s site.

featherweight

Blog/Magazine Flat UI Kit

Packed with useful components, this kit has been designed with publishers in mind and is perfect for creating magazine-style sites or professional blogs. While the photos in the presentations are not included in the download kit, everything else that comes in the download is fully PSD editable.

flat ui kit

Metro Vibes UI Kit

This is a bargain at $39 for a year’s access and contains 100 different elements for you to deliver the perfect metro look and style. Created by Mike of Creative Mints, Metro Vibes is made for 960 Grids and contains free open fonts and layered PSD files.

The year’s subscription entitles you to free updates as they become available and can be used commercially. This gives you every tool you’re likely to need in order to build a flat UI site, including blogging elements, pricing, calendars and so on. Visit the site to see a full preview of all of the available elements.

metro vibes

There are, of course, hundreds of kits out there now, so it shouldn’t be a difficult matter for you to find one to suit you and the above give you a great starting point.

So now it’s time to get cracking and put your creative head on again to start experimenting with flat UI design and coming up with some beautifully designed sites.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like The Principles of Beautiful Web Design, 2nd Edition.

Comments on this article are closed. Have a question about Web Design? Why not ask it on our forums?

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Anonymous

    Sorry, it still boggles my mind that people would spend money on a flat design kit. :) And I still predict that five years from now, designers will be saying, “What were we thinking?”

  • Thom Bosworth

    And yet again the design world hops on the Microsoft bandwagon… maybe the next hot design trend to be based of the Windows OS or Microsoft’s website? Doubtful.

  • Jeff Clayton

    A trend is a trend… was a trend…

  • Anonymous

    oh, stop it allready.

    I really tired of looking how DesignModo speculates on that trend.

  • UnifyCreative.com

    Flat design has not arisen as an answer to any UX problem. It is the epitome of designers designing for their own amusement. If the world was flat, I might be able to understand this trend. But our world is shape, contour, light, shadow, texture, etc… Layer effects in the hands of a solid designer can produce a UI that more specifically communicates critical meaning than flat design ever will. As I type this, I see Facebook and Twitter icons in the footer of this web page, and I’m thinking, what would happen to their traffic if they switched to flat design? Why haven’t they? Microsoft is known for making bad decisions and even worse software. Why are we even entertaining this trend? And Apple taking a stab at flat doesn’t validate it either. They are simply showing a lack of coherency without Jobs at the helm. To recap, the biggest red flag with this trend is that is does not solve any UX problem that layer effects failed to solve. And by virtue of being a reduced tool kit, it has less ability to communicate critical meaning.

  • Anonymous

    Unify, I’m not sure that it’s entirely true to say that flat design hasn’t arisen as an answer to any UX problem. I think the matter of clutter has become especially critical now, in the age of very small devices, where a design that isn’t clean can overwhelm the user visually.

    That said, I think flat design as a general trend is a lazy and unimaginative solution. While I can appreciate it as a change of pace and for variety, to be hell-bent on making everything flat … meh.

    • UnifyCreative.com

      Tim, thanks for reading my comment and responding. This is an interesting point you bring up. I’ve seen flat icons that are just as busy as layer effects icons. I’ve seen great flat design on a few infographics, but I’m also seeing flat designers strive to imply drop shadows and gradients with flat design. What I extrapolate from this is that visual designers are trying to prove that flat can do anything that layer effects can do, which I feel really underscores my point about flat design being visual amusement for designers. I truly believe most users would be frustrated by applications that were entirely flat. Back to clutter though…if there was good UX to begin with on XYZ project, and it came out cluttered, I’d say that’s more likely due to an inexperienced visual designer, not layer effects, and the best we can hope for is that those designers don’t get the jobs designing things we will have to use frequently. Content clutter is typically weeded out with good UX, so for a project to still end up visually cluttered I would look to the visual designer for my pound of flesh. But where is the UX content clutter problem that flat design addresses? Flat is basically the opposite of skeuomorph, but layer effects empower designers to explore the entire portion of the visual spectrum between flat and skeuomorph. Most of the best mobile designs I’ve seen use layer effects with incredible subtlety. Much of the UI is flat, not because flat is the goal, but simply because this makes layer effects objects stand out that much more amidst the design. Google is perhaps the best at this now, and Vine is another great example.

      I really love this topic, and honesty, I’d love to see flat design prove me wrong. I don’t want it to die, I just want it to mature beyond being something that fascinates designers and becomes useful and meaningful in the application space. Until that day comes, long live layer effects.

  • Anonymous

    I largely agree with you. I don’t hate flat, period. To me it’s one tool in the toolbox.

    • Anonymous

      “we’re designing still very much with the user at the forefront of our minds with flat UI design.”

      As a graphic designer at a digital marketing agency I really like the Flat UI Design aesthetic. A lot of the UI elements are easy to reproduce with CSS3 and my developer loves me because he doesn’t have to slice as many buttons or other layer heavy graphic elements. I think trends are fantastic, trends are part of history. We evolve as designers from trends and they become influences’ we can draw from the past and also paves the way towards evolving new trends. I can always look back at a design movement such as ‘art deco’ or ‘constructivism’ and that becomes an influence to my design. So will become the Flat UI aesthetic in years to come.

      Responsive design has become a necessity and the focus on a grid system, scaleability of typography and images is so important. I really find that Flat UI Design makes that creative transition easier for designers as they are learning how to design for mobile devices.

  • Tsega

    I just found this twitter-bootstrap inspired Flat UI framework, http://semantic-ui.com/ . Definitely going to give it a try.

  • Mike

    With ‘Flat Design’ in it’s purest form, nothing really stands off a page. I’ve just downloaded IOS 7 and visually it’s a step back from earlier versions of IOS. While bevels and textures can b (and have been) overdone over the years, at the end of the day the most important parts of the page should have some visual ‘stand off’.

    ‘Flat design’ will have it’s day. For the moment it’s a passing fad…

    • Ro

      @Mike – I agree that Flat design is a passing fad. But since it is the current style now, designers would need to conform to its look and feel. Yet, still need to keep in depth of elements. Like for me.. i recently had to “re-design” a page for my work place. I basically did it with a flat-ish design in mind, yet brought in certain ‘shadowed’ elements. So I agree with you that its a fad and it’ll pass, but a nice combination of the new and the old make it all work while.

  • Anonymous

    “I believe that the flat design trend is a symptom of the growing maturity in the field of web and interface design.” Definitely. :) I’m loving the simplicity and minimalism of flat design so far…

  • Anonymous

    “Design aesthetics follow trends just like in fashion: things are cool for a while, then they’re not, and then they are again—usually after a long period of time in between. Anyone who tells you otherwise is a silly gnome (without the tremendous pointy red hat, of course).”

    I think this is a great article about Flat UI Design trends from a designer perspective https://medium.com/design-ux/dd0991c7c4d5

  • UnifyCreative.com

    I posted two well articulated comments here on this page I don’t see them anymore. Censorship…?

    • Anonymous

      Oh, give me a break. Your comments are right there. You’ve clearly missed the (admittedly difficult to spot) “View x more replies” link right under the first published comment. But why do you go straight for the censorship card? Just FYI, making comments long doesn’t make them “well articulated”. Get a grip.

  • UnifyCreative.com

    @SitePointEd, I apologize if you were offended, I couldn’t see that link, or my comments at the time of my previous post. I thought perhaps because I “took some time” to share why I favor non-flat approaches to design that perhaps they had been removed. Thanks for the tip about the “View X more replies” link. It was very hard to find indeed.

    • Anonymous

      All good. We will get that link fixed – tsk, designers, eh? Your opinions are valued here, though. I prob get my back up about censorship claims a bit too quickly.

  • Neil

    @SitepointEd … have to say that I would never have spotted the “View x More Replies either” :-)

  • JohnAUS

    What an odd place to put a link to “view x more replies”! – that surely goes against all principles of good page design.

    • Anonymous

      It is a little bit odd, JohnAUS, yeah. We’re working on making it easier to spot.

  • Ian

    lol, i was scrolling up and down looking for the “View x More Replies” thinking it must of been fixed or there was only 6 comments, but see it now, just below the first comment in a light grey colour :)

  • simon

    is it a fad? I don’t think so , I have been designing “flat design” websites for the last 11 years and intend on continuing so ..

  • Anonymous

    I’m with @simon. I have loved it forever. Very Bauhaus, IMO.

  • simon

    @jeannie_io , love Bauhaus too, brings back memories of design school projects before the WWW, the world before WWW , WOW

  • Harry Norman

    my first UI Nav bar.. starting a new UI Kit soon. First one :) thoughts? This article is great by the way, very elegant and creative. http://codepen.io/harryjamesnorm/full/xzake