Of the many factors that must be considered in Web design, emotional interaction is an important, but frequently neglected, component. In the real world, we experience the sensual interaction of design all the time. Reflect for a moment on the emotional engagement of slipping behind the wheel of a powerful luxury car: the welcoming embrace of the driving seat, the tactile experience of running your hands over the leather on the steering wheel, the subtle gleam reflected in the controls.

There is no technical requirement for any of these finely crafted details: The vehicle would perform equally well without them. Yet this singular focus on sensual and emotional engagement is what separates luxury goods from all others and what inspires deep loyalty from customers.

This drive for emotional design can be discovered in the most surprising places. Take the power light on the next to last-generation Apple MacBook. The company deserves credit for helping thousands of users avoid entanglements with power cords though the MagSafe connector, but the deeper emotional intimacy is held in the tiniest of details: the power status light on the front of the laptop. When in sleep mode, the light pulses, and not randomly: It does so 10 times a minute, the breathing rate of a resting human being.

The blink rate of Apple’s MacBook in sleep mode falls within the average breathing rate of a resting adult. (Image source: Michael Stillwell)

To take another example: The front of a car is not two headlights and a grill. It is a face, one with its own character and communication. Look at cars and vans marketed to suburban mothers, on which lines tend to be round, curved, welcoming and friendly.

The front of the vehicle often demonstrates the neotenic effect: We regard “eyes” (headlights) that are larger than the body as being cute, safe, loveable. Compare this to the visual communication of vehicles marketed to men, particularly sports cars: Those lines are angular and aggressive, right down to the slitted eyes.

Note how a sports car’s front interacts with you on an emotional level. (Image source: GabboT)

Designing For Emotion

We can strive to achieve the same emotional engagement on websites — a promise to delight, surprise and affect users without resorting to manipulation or being too saccharine. While the digital realm lacks many sensual cues, it is possible to impart an emotional experience through a careful selection of color, stroke and typography.

CSS transitions help us to make interactions more human: Rather than flicking from one state to another, we can ease the motion of an element over a few hundred milliseconds to make a website feel more inviting. Paradoxically, the same techniques can also make a website feel faster, especially if we use the opportunity to preload content.

In creating such experiences, we must avoid the mistakes of the past: The engagement should encourage the visitor to explore the website, but should never hide important components such as navigation. Rewards for exploration should be a treated as a bonus, rather than a required interaction. Any information shared should also be accessible to those who don’t have the time or ability to use the interface.

Surprise In Boxes

(Please see the demo at “Hover Effect on Images From Different Directions Using Pure CSS,” on CodePen.)

One way to design for emotional surprise and stimulation might be to present different panes of information according to the way the user hovers over a responsive image. For this example, I’ll use a photo of the spiral galaxy NGC 1309, added to an HTML5 page:

    <img src="ngc-1309.jpg" alt="">
    

(Note that I’ve intentionally left the alt value of the image blank. We’ll return to that attribute shortly.)

The information panels are created from four span elements, with the entire group wrapped in a div tag that includes a class:

    <div class="multi-hover">
        <span>Spiral Galaxy NGC 1309</span>
        <span>Approximately 120 million light years from Earth</span>
        <span>Home to several Cephid variable stars</span>
        <span>Member of the Eridanus galactic cloud</span>
        <img src="ngc-1309.jpg" alt="">
    </div>
    

We’ll write the CSS transition code sans vendor prefixes: Internet Explorer 10 does not use prefixes for animation, Firefox no longer requires them, Chrome is not far behind, and a piece of JavaScript magic such as Lea Verou’s -prefix-free will take care of those browsers that still do.

    .multi-hover {
    	position: relative;
    	font-family: Orbitron, sans-serif;
    	max-width: 500px;
    	line-height: 0;
    }
    
    .multi-hover img {
    	max-width: 100%;
    }
    
    .multi-hover span {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	line-height: 1.5;
    	font-weight: 100;
    	text-align: center;
    	box-sizing: border-box;
    	font-size: 3em;
    	transition: .3s linear;
    	color: white;
    	padding: 15%;
    	opacity: 0;
    }
    

The CSS takes advantage of the rule that absolutely positioned elements inside relative containers will be transformed relative to their parent. Because the image determines the height and width of the div, the span elements will always be exactly the same size, protected from growing further by the use of box-sizing, max-width and line-height: 0. In this example, I’m using Orbitron by The League of Moveable Type as an appropriate typeface.

Next, locate the span elements, so that each lies just over the inner edge of the image. We’ll do so by writing offsets from the containing div in percentages, to keep everything responsive:

    .multi-hover span:nth-child(1) {
    	top: 0;
    	left: 90%;
    	background: hsla(0,70%,50%,0.6);  } /* right panel */
    
    .multi-hover span:nth-child(2) {
    	top: -90%;
    	left: 0;
    	background: hsla(90,70%,50%,0.6); } /* top panel */   
    
    .multi-hover span:nth-child(3) {
    	top: 0;
    	left: -90%;
    	background: hsla(180,70%,50%,0.6); } /* left panel */  
    
    .multi-hover span:nth-child(4) {
    	top: 90%;
    	left: 0;
    	background: hsla(270,70%,50%,0.6); } /* bottom panel */
    

As you’ll see in a moment, the order of the panel declarations matters. The result looks something like this:

Positioned span elements with text. (Large view)

To clip the outside edges of the panels, use overflow: hidden on the containing div:

    .multi-hover {
    	position: relative;
            overflow: hidden;
    	font-family: Orbitron, sans-serif;
    

Now, the result appears like this:

The colored sections we can see for now will function as the “hit areas” of our panels. Increasing the size of these areas will increase the panel’s ability to respond to quicker and broader mouse movements, but will also increase the overlap between them, making it more likely that a different panel will be activated than the one expected.

Finally, we’ll hide the panels entirely by setting their opacity to 0 and moving them on hover, taking advantage of the fact that transparent elements still respond to mouse events.

    .multi-hover span {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	line-height: 1.5;
    	font-weight: 100;
            z-index: 2;
    	text-align: center;
    	box-sizing: border-box;
    	font-size: 3em;
    	transition: .3s linear;
    	color: white;
    	padding: 15%;
    	opacity: 0;
    }
    
    .multi-hover span:hover {
    	opacity: 1;
    }
    
    .multi-hover span:nth-child(odd):hover {
    	left: 0;
            z-index: 3;
    }
    
    .multi-hover span:nth-child(even):hover {
    	top: 0;
            z-index: 3;
    }
    

The odd and even declarations set each panel to the opposite side of the box, positioning them entirely over the image and completing the design. Note that this interface pattern requires exploratory mouse movement from the outside of the box inwards to activate each panel; alternately, a completely “in box” exploration model could be created by lowering the z-index of the :hover states to 1.

Accessibility Testing

Making the panels invisible brings up the issue of accessibility. Partially sighted users might be able to see and interact with the panels, but blind users obviously will not.

Screen readers treat such content as being truly “invisible” (leaving them, therefore, unread), depending on the context; content that is set to display: none is usually left unread, for example. However, opacity does not trigger this behavior. On a Mac, you can easily test this by activating VoiceOver and having it read the page we’ve created in the browser:

• Command + F5 to start VoiceOver,
• Control + Option + A to read Web page content,
• Command + F5 to stop VoiceOver.

You’ll hear the span content being read in the order that it appears on the page; all that’s missing is a description of the image at the end:

    <div class="multi-hover">
    <span>Spiral Galaxy NGC 1309</span>
    <span>Approximately 120 million light years from Earth</span>
    <span>Home to several Cephid variable stars</span>
    <span>Member of the Eridanus galactic cloud</span>
    <img src="ngc-1309.jpg" alt="Photograph of NGC 1309">
    </div>
    

Note that this only treats the visual aspects of accessibility. There are other important areas (cognitive, motor and language) that I will leave unaddressed in this example for the sake of space but that have been detailed by other Smashing Magazine authors.

Adding Touch Support

The majority of mobile devices that depend on touch interfaces do not support a pure “hover” state: An element is either “in touch” or not. With rare exceptions, there is no registration of a fingertip being just above the screen of a mobile device. A brief touch might be interpreted as a hover event by mobile browsers, but this behavior is not perfectly predictable. As such, our interface will not work on most tablets or phones, at least as it currently exists.

To solve this issue, we’ll add a little JavaScript (by way of jQuery) to the page:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
    function is_touch_device() {
      return !!('ontouchstart' in window) 
          || !!('onmsgesturechange' in window); 
    };
    
    $(document).ready(function() {
      if (is_touch_device()) {
        $('span').unbind('mousenter mouseleave touchend touchstart');
        $('span').bind('touchstart', function() {
          $('span').removeClass('hover');
          $(this).addClass('hover');
        });
      }
    });
    </script>
    

The JavaScript applies a class of hover to any span element that is touched. So, we just need to alter our CSS declarations to make this class equivalent to the :hover event:

    .multi-hover span:hover { opacity: 1; }
    .multi-hover span:nth-child(odd):hover { left: 0; z-index: 3; }
    .multi-hover span:nth-child(odd).hover { left: 0; z-index: 1; }
    .multi-hover span:nth-child(even):hover { top: 0; z-index: 3; }
    .multi-hover span:nth-child(even).hover { top: 0; z-index: 1; } 
    }
    

Note that in the mobile version, the extended panel goes “under” the level of those that are retracted, allowing them to be tapped.

Disengaging the copy controls on handheld devices might also be wise. This is not some futile pursuit of DRM, but a practical response to the fact that longer touch times on mobile devices can bring up copy prompts that could get in the way of the user interface:

    .multi-hover span {
      -ms-touch-action: none;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
    }
    

This user interface pattern of exploration on a mobile device may now be described as “tap on edge.” This could be further enhanced by increasing the overlap of the original position of the span elements in an @media query to provide larger hotspots, making the panels easier to activate, along with further improvements for smartphones. This code is not the only way to achieve this effect either: Ana Tudor has written an alternative technique using CSS transforms and SASS.

Conclusion

Crafting an element of surprise on Web pages can raise visitor engagement without obfuscating important content, sidelining mobile visitors or disadvantaging users who require accessibility features. Naturally, this must always be balanced with the need to guide users through the website: Visitors will only be surprised by the effects described here if they explore the page for themselves, or are led to it. How much users should be led and how much opportunity they should be given to discover a delight on their own initiative is a central question of user experience design.

(al) (ea)

© Dudley Storey for Smashing Magazine, 2013.

Namebox is a simple service created by designer Drew Wilson to help you sell your unwanted and/or unused web domains. It’s free to use and is built to make listing your domains quick and easy.

For those of you that are unfamiliar with Drew and his work, he’s well renowned for building his own products from start to finish all by himself, and Namebox is no exception. In fact, in this case, he built the whole thing in just two days! That includes doing everything from the design to writing the front and back end code as well as writing the copy.

Not only is the speed at which the site was built impressive, but also how quickly it began to take off. Within the first 24 hours there was 15,000 visitors, 800 sign ups, and over 2,100 domains listed.

Whether you’re looking to buy or sell a domain, I highly recommend that you check it out.

What do you think of Namebox? Will you be using the service to sell your unwanted domains? Let us know in the comments.

FLATPAD: A Twitter Bootstrap-Friendly UI Design Bundle – only $9!

The act of storytelling is present in every culture. Storytelling, when done well, can move people to take action.

The way we tell stories has evolved drastically over time. We constantly find new methods for preserving and sharing our stories: From drawings on cave walls, verbal recounting passed down from generation to generation and songs to more modern ways like newspapers, books, audio and video recordings.

The newest place to tell stories is the Internet. And like with any other medium, telling stories online is a very powerful tool for communicating your message. Online Storytelling help us engage and captivate our website visitors.

Let’s take a look at how you can get the most out of online storytelling by going through the most common ways we tell stories on the Web, as well as by discussing a few examples of good online storytelling.

Storytelling Through Text

While contemporary web technologies allow for all different kinds of content presentation, text is still one of the most common methods for telling stories on the Internet.

Textual content can be very effective, and sometimes it’s the only option that makes sense or is practical. Written stories (like blog posts, essays, articles, and e-books) are generally easier to produce compared to other methods such as video and audio.

However, people only read between 20-28% of the words on a web page on average. Furthermore, eye-tracking usability studies show that we tend to scan rather than completely read web pages.

So text might be a popular type of content on the Web, but it’s not necessarily the most engaging type because people just don’t read as much as we would like them to.

We need to give people a reason to get reading and then keep up their interest so they don’t stop.

By packaging your content in a good story, you can do just that.

You can build a captivating story about pretty much anything: your product, your company, your team, your vision, your customers, your experience, etc.

Make your story personal, fun, obscure, provocative, and anything else you can do to capture your readers’ interest.

Let your imagination run wild and offer your visitors more than just boring facts.

Examples of Storytelling Through Text

Campaign Monitor‘s "Our Story"

Campaign Monitor knows how to employ storytelling on their website. On their "Our Story" page, you can learn about the company history, their motivation, and their vision.

Not only is the text readable (it’s short and well-structured), it’s also engaging because it’s written informally by design.

The story starts with basic facts about the company, followed by an appealing photo of the team and a personal quote about the company’s goal. The tone of voice is casual and direct. In case you get bored, there are more team pictures to give you a glance "behind the scenes" and to keep you engaged.

Goruck

Goruck manufactures and sells high-end backpacks.

The founder of Goruck, Jason McCarthy, tells stories about why and how their bags are developed to make potential customers appreciate the work and the thoughtfulness in the design and manufacturing of the company’s products.

Jason tells the story through their blog and in other sections of the website. One such story is how he used their newest product (which is called the Goruck GR2) on a trip to Shanghai. Throughout the narrative, he outlines why the bag was developed for the purpose of travelling.

By publishing stories in your blog, you have the opportunity to really engage and connect with your readers.

The Goruck "About" page is also written like a story instead of what we commonly find in most other company "About" pages that are stuffy and too formal. Instead of a photo of their products, there is a real photo of Jason at the top of the Goruck "About" page.

Storytelling Through Visuals

Still images can tell stories. A picture is worth a thousand words as the adage goes.

Visuals are very efficient in conveying a story because our brains can process them 60,000 times faster than text.

You can write a whole lot of text to explain how your product works, how it makes people feel, and where they can use it. Or you can show a couple of pictures of real people using your product.

Images can tell stories and, at the same time, they leave a lot of room for personal interpretation.

There are three main types of visuals that can be used as Web content for storytelling:

1. Web images in your content (such as photos, sketches, illustrations, graphs, and charts)
2. Background images
3. Infographics

Using images with your content can supplement your textual content, and can help move your story forward.

Background images can draw website visitors in and put them in a certain mood. They can give people a good idea about the story you’re about to tell. Background images can help you build your site on a story.

Infographics are a great way to communicate a story. People like infographics because they are easy to consume and fun to share on their social networks. Infographics are popular because they can hold a lot of information while using very little text.

Examples of Storytelling Through Visuals

Testflight

People love the idea of interacting with actual human beings. That’s what Testflight is able to do for me with their visuals.

For some of their key content, Testflight uses blueprint-style sketches for images. Somehow this feels like you are in a room with them and they just made these sketches a minute ago to talk you through their work step by step.

Hand-sketched visuals can give your stories a personal touch, helping you connect with your visitors. It makes your story more authentic.

Airbnb

The site of Airbnb welcomes you with big and beautiful background images; a different one for each travel destination you select.

These background images give you a great feeling of the featured destinations, stirring your emotions, and giving you itchy feet to travel.

Airbnb tells different stories from around the world and invites you to become part of these stories.

StumbleUpon

Background images can also serve as a metaphor to help you explain abstract concepts and attract your visitors’ attention.

The StumbleUpon homepage is kept very simple: It consists of a simple header, a few lines of text, a call to action that invites you to "Start Exploring," and a huge background image.

At first glance, the background image is just a pretty image.

However, when you look closer, you will see that it perfectly reflects what StumbleUpon is about: Exploring the Web. Doesn’t the scene remind you of one of those warm summer nights when you were still a child? I remember myself playing outside in the garden, exploring the world with all its beautiful details and little wonders — a cherished story from my childhood.

Web Designers vs. Web Developers Infographic

Here is an infographic on Six Revisions that tells you the story of web design and web development through infographics. The story satirically portrays the people who are part of the web design and web development industry.

Water Down Infographic

Water Down is another infographic that tells a story; the true story of the lack of access to clean water in the world.

The story starts with the amount of water available on the planet and ends with the fact that every 20 seconds a child dies from water-borne illnesses.

With infographics, you decide just how many pieces of the puzzle you need to get the entire picture.

Storytelling Through Animated Interaction

One aspect of good storytelling is entertainment. When people are entertained, they will be more likely to listen to your story.

Good stories are fun, scary, heartwarming, and so forth. They appeal to our emotions.

That’s why we tend to think of storytelling as a gift.

For example, you might think something along these lines: "I love this site because someone came up with this nice story that made me smile."

With animated interactions, you can give your visitors such as gift.

I already discussed how people love visual stories. Animations take your visuals a step further by adding motion to them.

Once you’ve got people hooked, they’ll continue browsing your site to find out how the story continues. This is also an extremely positive effect of storytelling in general: It makes us curious and eager to find out what happens next.

One technique for animating your content is through the use of parallax scrolling. Parallax scrolling is a relatively new technique in web design with lots of potential to improve your overall user experience. It offers the ideal setting to tell your story in an engaging and interactive way. Let your visitors take control and let them walk through your story in their own pace. The different layers that respond differently to the scrolling behavior of your visitors create a sense of depth and even allow for multiple story lines.

Examples of Storytelling Through Animation

Google’s "The Story of Send"

The animated story of what happens whenever you send an email is entertaining.

Because their animated story is engaging, Google is able to inform and connect with their audience more successfully.

Peugeot’s "The Hybrid Graphic Novel"

A great example of storytelling through parallax scrolling is by Peugeot for their new HYbrid4 technology. It’s a graphic novel that progresses as you scroll down the page. You get drawn into a story of a hero who is about to "embark on a challenging mission to capture confidential data and get away safely."

As you scroll down the page, you become the witness of a beautifully illustrated and captivating story, which introduces the different travel modes of the HYbrid4 technology as a side plot.

The story is accompanied by music and sound highlights to make it even more engaging. There is no way you would want to leave the web page without finishing the story first.

TEDxGUC

On the TEDxGUC website, parallax scrolling is used on the homepage to welcome you with an interactive "TED tale."

When scrolling down the page, you learn all about the story behind TED. How it was founded based on the idea that small ideas can change the world, if they meet the right people and if they come together.

TED brings together ideas from all over the world and they are constantly looking for new ideas. By the time you get to the end of the page, you are being invited to join the TED community. End of story.

Storytelling Through Videos

Almost all videos include some kind of story. Video allows for both motion picture and sound, basically all the technical aspects that make a great platform for an engaging story.

Did you know that site visitors stay on a web page 100% longer when it has a video on it?

Also, site visitors are 85% more likely to purchase a product after watching a product video.

Those are just some numbers that show you how good of a platform video is for your stories.

Examples of Storytelling Through Videos

Wistia

The video hosting service Wistia shows us an example of good storytelling through video.

They have three videos on their homepage that can all be watched separately depending on which topic you are interested in.

In every video, different people from the team talk you through each chapter of their story.

At the end of each video, you are automatically taken to the next video to preserve the continuity of the story.

Even though there are three videos, they all cover different parts of one story. The story of Wistia, and the team behind it.

Droplet

The mobile money app Droplet also uses video to tell a story.

The video takes you on a journey through the city of London. It shows you why there is a need for the app and how the app solves an existing problem. They do it through storytelling.

The people behind Droplet have chosen a cartoon-style video. This allows them to minimize noise and focus on the details. The hand-drawn style makes it very personal and unique.

Storytelling Through Audio

Auditory storytelling is a very old form of storytelling. Songs, for example, were easy to remember and pass on from generation to generation.

Even today, most songs tell a story of some sort.

On your website, you can use audio in many different ways. Just keep in mind that not all people appreciate it, so be thoughtful in execution.

Example of Storytelling through Audio

Dumb Ways To Die

The website Dumb Ways To Die is a public service announcement campaign by Metro Trains in Australia to promote rail safety. The campaign went viral in 2012.

The story is about the many different dumb ways to die, including any accidents that happen on and around train tracks.

The campaign turns a serious topic into a story people are more likely to engage with, in the hopes that their message becomes better learned and disseminated.

The story is told in a song and it comes with a fun music video and a very engaging, interactive website.

This is a great example of how to get people to listen to a message they would otherwise not want to hear about.

Storytelling Through Social Media

Social media has gained a lot of popularity in the recent years. Why? Because they allow people and companies to connect with each other. Social media enables us to exchange feedback, ideas and content.

And most of all, social media empowers our users to create their own stories, to share them, to follow others, and to collaborate in building common stories.

For companies, social media can be a great place to tell stories. This form of storytelling is interactive and the stories evolve around a community.

Since social media platforms such as Facebook and Instagram are associated with leisure and entertainment, they attract the ideal audience for your stories.

Examples of Storytelling Through Social Media

Starbucks Facebook Page

There are still a lot of companies that don’t know how to use social media as an effective marketing tool. This does not hold true for Starbucks.

With 35 million followers, more than 50,000 likes on their Facebook page, and an estimated average of 5,000 comments per post, Starbucks sure knows how to engage with their community.

How?

Through storytelling.

Starbucks has mastered the use of Facebook to create a space for storytelling, not only for themselves, but also for the stories of their customers.

Red Bull on Instagram

Another popular social media platform is Instagram. On this social media site, you need to tell your stories with photos and short videos.

Red Bull does just that.

The company is known for their event marketing efforts and they create more content around their product than any other company. Content that is fun, visual, and extremely popular.

Related article: Content is All That Matters on the Web discusses Red Bull’s unique content strategy.

On Instagram Red Bull tells their stories with photos and short videos. And fans follow these stories engagingly.

Online Storytelling is Powerful

The Internet is the most powerful platform for storytelling. It combines different carriers for our stories: text, visuals, interactive animation, video, audio, and social media.

The Web is also the only medium that can be publically accessed simultaneously by people all over the world. Not only does this allow anyone to share their own stories, it also means that our stories can reach the entire world.

Related Content

• The Importance of Web Content Strategy
• Viral Content: Why We Share Some Things and Not Others
• How to Bake Content Strategy into Your Web Design Process
• Related categories: User Experience and Usability

About the Author

Sabina Idler is UX Specialist at Usabilla and Founder of UXkids. Sabina is passionate about improving interactive media for all ages. For more UX insights, check out the Usabilla blog and follow her on Twitter @sabinaidler and Google+.

The post Popular Methods for Online Storytelling appeared first on Six Revisions.

It is easy to say that 2013 has so far been the year of flat design.

Even Apple, the driver of the skeuomorphic design trend for many years, is trying some level of flat design when it releases iOS 7 later this year.

So are you ready to try it out as well? Not sure how to get started? WebdesignerDepot is here to help with a guide of flat design resources. We’ve put together a giant list of everything flat design, from free UI kits to color palettes to typography options.

If you want to test the flat design waters or swim out a little deeper, we have everything you need to get started, from ready-made tools to tutorials for the do-it-yourselfer.

Flat design 101

Flat design is a style that lacks the “tricks” designers often use in order to create a realistic or three-dimensional effect. The style is characterized by an overall minimalistic look, bright but muted colors, bold — often retro — typography and simple user interface elements such as buttons or icons.

Flat design techniques avoid embellishments such as bevels, embossing, drop shadows, gradients or artificial textures.

The design style is hugely popular for simple websites that only include a few pages and for mobile applications. Flat design has also been criticized for its overall simplicity, use of illustrations (that some label as cartoonish) and a user interface style that can be difficult for some users to understand.

Animation is typically avoided in flat design projects and large images are in. In minimal design schemes, designers often give plenty of room to the content, allowing it to tell the story in a simple, direct manner.

Several other trends have begun to emerge out of flat design: “almost flat design”, “long shadow design” and a re-emphasis on the always popular minimalist design.

“Almost flat design” is based on flat design but may include some degree of minimal effect, such as a simple shadow inside of an element or basic gradient.

“Long shadow design” is used almost exclusively for icons and is exemplified by an image within an icon frame that has a tinted area that extends from the image; long shadows typically fall at 45-degree angles and include the same characteristics the rest of the flat design scheme.

Flat design has also brought an emphasis back to minimalist design, even for designers not using flat-style techniques. As part of the overall trend, there has been a re-emphasis on white space; color, sharp shapes and lines; and a return to simple and basic typography.

UI kits

User interface kits are a great way to get started with a flat design project.

Kits can save you time – important when following a trend – with a pre-designed package of parts. Most UI kits come in the Adobe Photoshop file format (PSD) and are fully editable if you are comfortable with the software.

The kits below range from simple, free kits to more comprehensive downloads with licensing options. The number of available flat-style UI kits is growing daily; we’ve complied a list that includes a number of varying styles.

When choosing a user interface kit, don’t get too hung up on color or color palette. Most kits include usable colors if you don’t have a palette in mind, but allow you to change the overall color scheme with just a few clicks. Save time by creating usable swatches before opening the kit so that you don’t have to type in manual color values for each change. Also consider using your color palette in the same way as the kit designer used the default swatches, mirroring color choices in tone, saturation and contrast for elements in the kit.

Featherweight UI (free)

Featherweight UI is a simple, retina-ready kit that includes a handful of sharp elements, including menus, a photo scroll, map, simple icons and scroll widgets. While the kit is not incredibly large it has an elegant style and plays up the more retro color theme often associated with flat design.

Polaris UI kit (free)

Another kit by Designmodo featuring a darker style package. This kit contains a variety of buttons and panels that mirror the look of the Windows flat user interface. While Polaris contains parts that are designed in the flat style, it also includes some elements in the skeuomorphic style.

Erste UI kit (free)

This simple UI kit contains a handful of basic elements, such as social login buttons, menus and a media player. The colors are characteristic of flat design, using a palette of primary hues.

FlatUI kit (free)

The kit designed by Freepik.com for WebdesignerDepot contains a large number of elements, from navigation to drop down menus to social sharing tools to e-commerce modules.

Flat UI (free)

This free kit from Designmodo — one of the first design groups to fully embrace the flat design trend — is a brightly-colored starting part. The kit includes hundreds of elements, including buttons, icons, color swatches and menu items.

Flat UI kit (free)

Riki Tanone’s kit of flat user interface widgets is a fun little pack containing parts that are a little more put together: a chart, media player, task wheel and counter. This is a great starter tool for imagining how to combine simpler UI parts into more complex items.

Metro UI kit (free)

The Metro UI kit is a colorful kit that embodies the concept of flat as reintroduced by the Windows phone. The colors and style are both reminiscent of the phone interface, with lots of colorful blocks and simple typography. The kit includes a calendar, stats, chart, icons, menus and search elements.

Monotone flat UI kit (free)

While using a variety of bright colors is a popular choice for many designers using flat design, monotone color palettes are equally characteristic of the trend. This UI kit by Sebastiaan Scheer includes a few simple elements and great graduations of color.

Vertical Infinity (free)

Vertical Infinity, by CSS Author, is one of the bigger free kits available and is retina-ready. The manageable kit includes everything from drop down menus to buttons to form elements to widgets and social icons. The style is basic without a lot of extras but would be easy to use in almost any application.

Lil UI kit ($6)

This UI kit by Lil Squid Design is almost a steal with so many matched pieces, including 18 categories of elements. The vector kit is customizable and was designed for visual simplicity and consistency.

Flat UI kit ($19)

Ideation Pro’s flat UI kit includes a handful of nice simple elements — icons, form fields and buttons — to help get a project going. The elements are perfectly matched, include bright colors and could work great for a simple mobile project.

Flat UI pro (from $39)

Flat UI Pro is Designmodo’s comprehensive UI kit featuring the flat style. The kit is made for Twitter Bootstrap and includes full PSD files for customization. The kit is fully responsive; contains a ton of elements, icons and glyphs; color swatches and is retina-display ready.

Flat UI PSD ($5)

While this kit is in the flat style, some elements could be considered “almost flat.” The buttons, for example, include a light shadow behind the text to provide a little more color contrast.

Square UI (from $39)

Square UI is a comprehensive UI kit from Designmodo with a large array of buttons and elements. This kit differs from some of the others because it breaks tradition with the color palette and uses a much darker scheme. The kit contains elements, navigation and hundreds of components. The kit downloads in an editable, layer format for customization and includes light and dark color palettes with pre-built swatch files. The elaborate kit looks less like a kit than many other options out there and is retina-display ready.

Flat icons

Flat-style icons are everywhere and you can grab many of these kits for free from a variety of places.

Like UI kits, most icon packs are delivered as a PSD download, making the icons easy to customize.

Many of the icons are designed in the specification and style for mobile device applications. These icons, though, have other uses as well and could make great website buttons.

When choosing a set of icons, look for kits that contain icons in size options the meet your needs. While some kits are drawn as vector shapes, others may come in set sizes that can result in a loss of quality if used too large. 

40 social media flat icons (free)

This comprehensive social media icon set has almost every popular network and website included in a beautiful icon set that uses both a flat style and long shadow design. Icons are set in a way that make each easy to identify and with a color outline that is sharp and distinct. Each icon is also available in four sizes – 32, 64, 128 and 256 pixels square. While you could customize this kit, it is unlikely you will need to.

Freebie PSD — flat icons (free)

This simple download includes complex icons in a flat style. These icons include a little more detailing and styling than most flat elements. This kit is available for PC download only.

12 flat SEO icons (free)

This set of social media icons is one of the brightest out there. The kit designed by Vladislav Karpov for WebdesignerDepot contains 12 icons, that showcases everything from SEO performance to copywriting to web analytics that use both the flat style and contain some long shadows. This kit would work great for a portfolio or agency site design.

Free flat icon set (free)

While many flat design schemes rely on high-color visuals, some designers are opting to keep icons more simple so they don’t compete with other elements and parts of the overall design. This small icon set (9 icons) features low color, low contrast elements for ease of application.

Flat file icons (free)

Every designer who builds a site that includes downloadable files needs a set of file icons. This quad of icons represents the most popular file options – upload, download, settings and charts. Or you can change out the center icons for your custom options.

Flat icons freebie (free)

Flat icons with rounded edges are some of the lesser used icons. This set does just that in a way the maintains the integrity of flat design. The kit includes nine icons for common elements, such as weather, mail and a calendar.

Flat social media icons (free)

No site is complete these days without a set of social media links. Designmodo’s kit contains 35 social media buttons for a variety of popular networks. The color scheme is bright and icon colors match the networks they associate with, creating an immediate visual cue.

PSD flat social icons (free)

This set of 16 social media icons uses both the flat style and long shadow design techniques. This kit also breaks outside the idea of square icons, with a mix of circle and square shapes with slightly rounded corners.

IconShock flat icons (from $19)

This might be the largest set of flat icons out there. With 3,600 icons in three size options, this kit has an icon for almost everything. It includes basic elements, file types, shapes, and common items. What it is missing are popular social media icons. It’s also free for personal use.

FlatIcons (from $30)

With various options that include multiple file formats, FlatIcons is one of the simplest and most comprehensive kits on the market. Every icon is built to customize in shape, size, and scale. Kits are built so that every icon matches perfectly every time, and comes with a great built-in search function so you can quickly find the icon you need. Files are distributed as both copiable CSS/unicode values or in PSD format.

Other flat elements

Sometimes you find the need for elements that aren’t part of any other kit. The flat style is being used for almost everything these days, including these useful tools.

Apple product templates (free)

Getting ready to unveil a new design and want to show it off inside of a device? The Apple template from MediaLoot is designed in the flat style, and is usable in a number of ways.

E-comerce flat web elements (free)

Although flat design has not been embraced by a large number of e-commerce sites simple sales sites could benefit from the simple buttons in this kit. From a chat module to cart and checkout buttons, this kit has enough basic elements to get started or to build on for an online retailer.

Flat credit cards (free)

It is important to pay attention to every detail when picking a design scheme, even something as small as these credit card icons. Maintaining consistency is key and these simple, credit cards are recognizable and fit into any flat design.

Friends list UI (free)

Create a neat and organized list with this UI PSD, designed for the iPhone interface. The coral color is quite common in flat design as is the simple sans-serif typography and icons.

Radial graph (free)

Charts and graphs can be some of the more complicated items to build from scratch. This radial graph PSD is an excellent getting-started tool. The colors and sizes are customizable and easy to change, thanks to this simple vector design.

Sign-up form (free)

Flat design is popular for website design touting something that is coming soon, from a full site to a mobile application. In both instances, this makes the use of a sign up form popular, making it easy to notify users when the site or application goes live.

Flat browser frames ($5)

Create a custom browser frame for screenshots in the flat style. (This is becoming commonplace for designers and sites that want to showcase upcoming applications.) This kit contains 10 different browser frame styles in vector format that can be used as-is or customized for a completely different look.

Flat design flyer template ($6)

Most websites include some sort of companion pieces, from business cards to posters or fliers. The Flat Design Flyer Template helps you convert your web design outline into a usable print piece in the same flat style. The flier comes in a print-ready template, complete with CMYK colors and a quarter-inch bleed.

Flavor business card ($6)

Match business cards to the idea behind the same flat design scheme from your website. The Flavor business card template comes in a standard size and is CMYK print-ready. Colors and fonts can be matched to your site design for a perfect piece.

Pricing tables ($4)

Even if the main purpose of your site is not sales, but you do offer products or subscriptions, pricing tables may be important to have. This set of monotone tables complements a variety of other flat design elements and is an item that a lot of UI kits do not include. This particular kit is built for Twitter Bootstrap.

WordPress Themes

Creating a great flat design website does not have to happen from scratch. WordPress theme designers immediately jumped on the trend and there are quite a few great paid and free themes available for download.

What’s nice about using a pre-packaged theme is that you can get your design and site up and running in almost no time. Quality themes will have a clean, clear consistent look. Opt for buying (or downloading) a theme that includes everything you need right “out of the box.” Think about whether your site should be responsive, needs e-commerce features or forms, if you want something that offers customization, retina-ready graphics, multiple- or single-page design and icon packs or inclusions. Make a list of wants and needs first to make finding the right theme that much easier.

Typically, the best options, support and flexibility come with a premium (or paid) WordPress theme. These themes often look more professional, have cleaner code and offer support that free versions often lack. However free themes can be a fun and simple way to start building a site. While these theme options can be limiting and offer only a small selection of the options paid themes include, they can be useful.

Duena (free)

Made for blogs, this theme is simple and uses a bright, creamy color palette.

Fizz (free)

This responsive flat-style theme uses clean lines and bright colors on alternating dark and light backgrounds. Some of the background images are a bit textured.

Current (free)

Current is perfectly flat in every aspect of the design and is designed as a gateway page for a new product.

Attitude (free)

This simple and professional theme in the almost flat style includes more options than many other free themes.

Bloq (free)

Bloq uses flat design and flat colors beautifully (and some of the icons even have long shadows).

Frontier (free)

This flat theme focuses on minimalism and includes a lot of add-ons such as banner ads and custom menus.

MetroBlog (free)

MetroBlog uses bright colors and tiling — characteristics of flat design — but also includes gradient color boxes, which make this blog theme almost flat.

Viper (free)

One of the better free e-commerce options available Viper has big, bold boxes for text and clear navigation.

SimpleCorp (free)

While this theme has some characteristics of flat design, the style is more almost flat (note the icons in particular).

BirdFlat (free)

A flexible blog theme with options for color and header styles.

SympalPress (free)

This free theme is anything but simple with nice shapes, almost flat icons and vibrant color and typography.

Tetris (free)

Tetris uses simple block-styles and cards for a simple site design. The look is great for sites with great images or visuals.

Argo ($40)

Argo uses tiling and a simple structure that can work for both portfolios or business sites. The WordPress theme features clean lines and simple menu items featuring flat components. It comes in three color options — green, orange and blue — featuring a monotone palette.

Business Essentials ($45)

This simple, yet classic theme is perfectly flat and works great for a business that is on top of trends. The modern style is simple and comes with all the essentials for a business site, including company profile pages, social icons and printable and PDF download functionality.

Illustrate ($45)

This theme is designed for portfolios and display. The theme uses sharp boxes and bright color representative of flat design for a modern look. One of the cool features of this theme is custom color palette generation based on portfolio options. The theme is fully responsive and includes a long list of available options.

Modern Metro ($40)

For sites running on WordPress, Modern Metro is the theme that matches Metro UI. The layout features live tiles which can be moved and customized. The theme is responsive and comes with the ability to customize the color palette, a variety of matching charts and a set of 1,368 flat icons.

Shift ($35)

Shift is a modern, high-color theme with a ton of customization tools. Colors, typefaces and widgets are customizable (PSD formats are included). The flat styled design is sharp with pixel-perfect styling and comes retina-ready and is responsive.

Salmon & Cream ($75)

This theme is one of the sharpest out there. It’s highly customizable and the responsive design is retina-ready. The built-in color palettes are wonderfully flat, using the title salmon, blue or your choice of hue.

Candy ($35)

This fully-responsive theme is designed for portfolio-style sites and uses high color. The purely flat theme also uses a distinct font palette with a great look and feel in the default settings.

Alfie ($40)

This theme packs a lot of punch with a variety of layout options, background colors and a set of 361 retina-ready icons. In addition, the theme includes an easy shortcode generator and is built using Bootstrap.

Biggie ($7)

Color makes this flat theme stand out. It’s simple, modern, responsive and includes multiple widgets. The monotone scheme of flat colors is a nice touch and it’s one of a few purely single color themes out there.

Bonbon ($49)

Part of what appeals to some people about the flat style is the use of creative illustrations and icons. That’s where Bonbon comes in. It uses high color and a fun style in a retina-ready responsive theme. It even comes with a pack of great icon illustrations that can be customized.

Flat ($39)

Flat looks like what you would expect of a basic flat design minus one feature. The high color palette uses muted tones rather than some of the bright hues that are characteristic of flat design.

News ($45)

Frequent posters will like news, a simple theme that uses photo and text cards to index lots of content. The style is simple and flat with bright colors and simple icons.

Coffee & Cream ($40)

This single-page theme includes a number of options and two navigation options. It’s fully responsive and uses the flat design trend perfectly.

Flat Admin ($18)

There are plenty of forms, tables, custom pages and element integration in this flat theme designed for businesses. The responsive design is fully customizable and the download comes with free feature updates and support.

Sketch ($40)

A high-powered single-page theme that uses multiple and different screens that encourage scrolling. The theme is customizable and includes social media functionality and a contact form. This theme has many flat characteristics, but would be classified as almost flat.

Showy ($35)

This theme is almost the opposite of its name, with a simple and modern interface.

Evolux ($45)

With a variety of post formats, this theme is a great tool for showcasing a product or design. The theme features large image frames, simple and bold text.

Jobify ($55)

Jobify is a theme made just for creating jobs, using the trendy look of flat design. The powerful, responsive theme uses simple typography, color and grids and integrates with other jobs toolkits.

MetroFolio ($40)

MetroFolio uses the metro, card-style layout that has become linked to flat design. The simple theme has an easy-to-use interface, is customizable and is made for portfolios.

FlatPack ($55)

FlatPack includes multiple templates and options for businesses wanting to consider a site designed in the flat style.

Metrolium ($45)

This theme does a nice job of using color blocks in the flat and almost flat style. It has plenty of options and the real-time preview is nice.

Flat Portfolio ($35)

What’s great about Flat Portfolio is that it is designed to display your portfolio in a retina-ready environment. The customizable theme is also responsive and includes unlimited colors and use of Google Fonts.

Hypertext ($40)

This is the theme for designers or developers who want extra control because it has plenty of advanced admin options with HTML5, CSS3 and is fully responsive. Hypertext is also fully customizable in terms of color, page type and language.

Fuse ($45)

Because Fuse is designed with creative professionals in mind, it is slick and focuses on images, while using simple and beautiful flat-styling details.

Mineral ($45)

The color cast look for images that some sites are using with flat design schemes is part of what you will find with Mineral. The theme includes a flexible AJAX gallery, responsive design and lots of skins.

Ink ($49)

Ink combines great use of image frames with the colors and style of flat design. Hover animation works nicely and the theme allows you to group images as a slideshow.

Amada ($40)

Amada is a theme that embodies the minimalistic ideals of flat design with simple colors and lines. The theme also uses simple typography with clean lines. It is responsive and retina-ready and has exceptional scrolling effects. 

Glider ($45)

If icons are your thing, Glider is the theme for you. The pack comes with 960 vector icons, is retina-ready and supports a blog. The theme supports multiple languages as well.

Hexagonal ($40)

This almost flat theme is the backbone for a great minimalistic site and has a very professional look and feel. The design is responsive and include multiple layout options, including blogs.

Emerald ($40)

If you are looking to tiptoe into flat design and like parallax scrolling, Emerald is for you. The almost flat theme is simple and includes impressive scroll effects and an unlimited color palette.

Kumaon ($40)

Kumaon is a theme built for business with tools for great testimonials and calls to action. The theme also includes 300 flat icons and multiple forms.

Anubis ($40)

For a simple, flat theme, Anubis is packed with features and includes spectacular typography and color right out of the box. The theme is responsive, includes a variety of options and customization and multiple page templates.

Red Star ($45)

This is one of the few themes that allows you to turn on/off responsiveness. The theme focuses on clean, simple typography and includes nice template pages.

Forest ($40)

Forest looks great and has solid code to back it up. The theme works with widget-style boxes making moving items easy.

Panes ($40)

Panes, by default, uses two very popular flat design colors – teal and bright purple. The one-page design is setup for plug and play, includes Google maps integration and allows for custom colors and fonts. The card-style scroll effect is pretty nifty, too.

Nova ($45)

Nova is a great example of how to use novelty typefaces in flat design. All of the elements in this theme are created using bright colors, simple lines and a minimalistic backbone. The retina-ready theme is Bootsrap based and has a variety of customization options – with each of the primary colors pulled straight from a flat design basics palette.

Red Sky ($40)

Red Sky is one of those themes that does not look like a theme. The highly visual layout is responsive and works with high color and large images. The one-page theme comes in three styles; all are based in flat design.

Lambo ($45)

As a photography theme, where you most see hints of flat design in Lambo is in typography and accent color choices. Simple font choices with bold colors emphasize the flat feeling. With a textured background though, the overall concept is almost flat.

Righter ($2)

This theme is designed for blogging and writing. The super-simple theme has an adaptive layout, clean, minimalist feel and features lean code. It does not include any real bells and whistles.

DCJune ($29)

This grid-style theme uses great blocks of color and open space to showcase images. The theme is super clean, responsive and includes multiple page templates.

FlatCo ($45)

The FlatCo theme is one of the most packed when it comes to post format and type. The theme also includes more than 300 flat-styled icons and multiple chart and graph elements, making this a complete kit for a variety of projects.

Renova ($40)

This one-page theme is simple and beautiful in the true nature of the flat style. Icons and shapes are basic and can be color customized. The theme include simple animations that add a more almost flat feel on hover actions.

Octavus ($40)

Octavus uses flat design in a way that looks and feels trendy without being “too trendy.” The mix of images and colored blocks combine for an easy user experience in this responsive and retina-ready theme.

Templates

Flat design templates are beginning to hit the design market as well, even the most inexperienced web designers can put together a simple site using the trend.

Hosting template (free)

This template will require some work on your part, but it includes the framework for a basic website design in the flat style. It uses on-trend elements and colors and comes as a downloadable PSD, so you will need some backend experience to convert this design to a live site.

iPhone flat design UI template (free)

With a variety of simple iPhone templates using a flat design scheme for app design, this site delivers five styles of downloadables: logins, user profiles, activity feed, settings and sidebar design. The downloadable templates come with everything you need to get started and allow for full customization of each design.

Delta flat mobile template ($8)

While many designers are opting for responsive sites, Delta is a mobile-only template in the flat style. It includes many of the add-ons of bigger templates in for the small screen. The flat style used is super-simple and uses a monotone color palette.

Flappster flat landing page template ($20)

This landing page design is made for promoting an upcoming site or application. Based in Twitter Bootstrap, the landing page template uses a parallax panel scrolling and a bright flat theme with plenty of call to action buttons. The template comes with a variety of flat buttons and icons, which are all fully customizable in the associated PSD files. The template also uses a set of flat illustrations which are included.

iLevel Bootstrap template ($15)

This template for a responsive website features flat design and long shadows for a super-trendy theme. The framework is based on Twitter Bootstrap and comes with 30 pages and four available color palettes. The template also includes a handful of flat icons, illustrations and media stream plugins.

iOS7 app icon template ($4)

Any designer or developer with an app for sale in the Apple iTunes store is probably aware to the impending Apple iOS 7 design change. This icon kit can help you create a quick icon using the new style, which can be considered almost flat. Icons are retina-ready and the pack includes icon formats for iTunes, iPad, iPhone, Spotlight and Settings, plus a uniform icon grid.

Color schemes

Color is an important part of any flat design project. Color is often used in one of three distinct ways when it comes to flat design: bold and bright, as a monotone scheme or in multicolored panels. Flat design often uses combinations of three, four, five or more vivid color choices to create a palette, rather than the standard of only one or two dominant colors for most projects.

Bold and bright color is a way to create an element of fun in the design process. For the best results, stick to a certain color theme when selecting bold color, look for colors that have a similar saturation, tint or shading, or are from complementary positions on the color wheel. Bold color should look intentional.

Monotone color schemes are popular when it comes to flat design as well. The color palette often beings with a vibrant hue, such as emerald or peach, and uses both tints (the addition of white) and tones (the addition of black) to create contrast and variety.

Multicolored panels are another common option. Rather than mixing and matching colors throughout the design, each scrolled page or panel uses a different and singular color with black and white. The overall effect can be visually appealing and helps create a sense of organization and visual hierarchy.

Flat design color palette (free)

Grab the HTML and CSS for flat-style colors with pre-made code from Lucas Cobb. HTML and CSS is written and ready-to-use for 20 colors commonly used in flat design. Match each color to the named chart, grab the code and add to your site. The hues are the same as those highlighted by Flat UI colors.

Flat UI colors (free)

Flat UI colors is a simple site that showcases the most popular hues in flat design. Flat UI Colors highlights 20 of these popular colors and allows users to get corresponding RGB or HEX values for each color with just a click. Select the color format, click on the color, and the values are saved to your clipboard.

Adobe Kuler (free)

Users of Adobe’s Kuler color palette generation tool have created a variety of striking combinations using colors representative of flat design. From brights to more muted retro shades, there are great palettes for inspiration available. With a click, each palette is editable and downloadable. Make sure to check out “Flat Color Set 4,” “Icon with Flat colors 5,” “Logo Lockups 2,” “FLAT COLORS Ui Bright,” and “Cool Tone Flat.”

ColourLovers (free)

ColourLovers users have created thousands of color combinations using flat color concepts. This list is sorted by user rating and is a place to generate inspiration if you don’t want to use the “same old flat colors.” Make sure to check out “the world is flat,” “satin ballet flats,” new york flat,” “flat,” and “flat earth therapy.” Click on any palette for color names and RBG and HEX values.

Typography

Clean typography is an important part of the flat design trend.

Because flat design includes a focus on simplicity, type choices should be clean and simple as well. Most commonly, designers are opting for a simple sans-serif typeface and are using one or two weights. Some are branching out a little further and using one sans-serif and one novelty or speciality typeface. The trend, though, is characterize by a very limited number of typefaces per project, typically no more than two.

The best typefaces for use in flat design projects, create a distinct sense of contrast in conjunction with the background.

Type is often black or white, lacking additional embellishment or color. (Quite a few of the selected typefaces below are even advertised using this style and flat design concepts.)

In addition to basic typefaces, the words used should also be kept to a minimum. Language should also be simple and easy to read to stay on point within the minimal style of flat design.

Finally, make sure to give type plenty of room to breathe in flat design projects. This includes both space around the words themselves and letter spacing, which may be exaggerated somewhat for display type. If you opt for a thinner typeface, consider going oversized with it. Fonts with thin strokes, such as Helvetica Neue, might not create enough contrast to be clearly readable at smaller sizes or against certain backgrounds.

Bellota (free)

A sans-serif typeface that’s masquerading as a novelty font with small serifs, Bellota is easy to read and ornamental, a tough combination to find. It has a feminine feel and would work well against a high-contrast background.

Caviar Dreams (free)

This super-round typeface is both modern and simple. The letters are distinct and are readable at a variety of sizes. The stroke though is rather thin and requires a background with a lot of contrast for optimum readability.

Flex Display (free)

Apple stirred quite a debate in the design community about the use of an uber-thin typeface in its upcoming iOS 7 release (a decision that has been backtracked somewhat). But a thin typeface can work in certain situations. Flex Display includes a very thin stroke and has practical application as a large or oversized typeface in a high contrast situation.

Lato (free)

Lato is a simple typeface that works well at a variety of sizes and includes weights from ultra light to ultra bold. The typeface is quite popular among designers working on flat design projects. This is not the typeface to select if you want your type to look different from the mainstream.

Telegrafico (free)

Another all caps typeface, with a wide stroke that works well with plenty of space. The look is modern with a wide stance and sharp edges.

Proxima Nova (from $29)

Fonts from the Proxima Nova family offer plenty of options and are quite popular among designers. The simple and elegant style of the sans-serif typeface makes it easy to use and pair with other styles. The simple geometric style is consistent with the feel of flat design.

FF DIN (from $78 approx.)

Simple, plain and geometric, DIN was constructed by the German standards institute for use on road signs — the very definition of flat and simple. Its popularity lead to FF DIN a highly successful digital version.

Montserrat (free)

Geometric simplicity and a rounded almost light-hearted feeling, make Monserrat a great choice for flat design.

Primary Sans (free)

Flat design excels at simplicity and this great rounded typeface is simplicity itself.

Dense (free)

The core characteristic of flat design is the lack of complexity. When it comes to typefaces, that means geometric construction, like Dense.

Riona Sans (from $25)

If you’re looking for a slightly more serious typeface for business use, but still want a flat aesthetic, then look no further than Riona Sans.

Bariol (free)

Bariol is another friendly face with very rounded terminals. A much better option that Arial Rounded, its geometry feels not unlike a stencil.

Canter (free on request)

Connected perhaps to the ice-cream colors that unite flat design with modernism, modernist styles also creep into typefaces; Canter, with its top-heavy proportions is a prime example.

Deco Neue (free)

Another tribute to modernism, Deco Neue should probably be named Neue Deco, but let’s not hold that against it. It’s a great choice for striking display text.

Niveau (from $40)

Again, geometric simplicity is a great choice for a flat, even tone. Niveau provides an excellent example.

Tutorials

While flat design is more of a style than learned tool, designers can familiarize themselves with some of the tricks and techniques commonly used.

Video tutorials can be one of the easiest ways to learn something new. For the best results, choose a video that is on par with your knowledge level when it comes to software used and speed of the lesson.

Flat design video tutorial (free)

This 17-plus minute video from Designmodo takes you through the steps to create a simple website in the flat design style using Adobe Photoshop.

The video covers how to place elements, create a color palette and some of Designmodo’s top font choices. It also takes you though working on a grid and how to use a user interface kit in the design process.

(The video instructor uses parts from two Designmodo kits, Flat UI and Flat UI Pro, which we mentioned above.) The instructions are simple and easy to follow but you need to be comfortable with Adobe software to get the most from this video tutorial.

Flat web design video tutorial (free)

This video by 1st Web Designer takes you through building a portfolio landing page in the flat style in an almost hour-long video designed for beginners.

The tutorial walks you through using tools in Photoshop to create a basic landing page on a grid and using parts from UI kits.

The instructions are clear and easy to follow and the video moves at a pace that is good for those who may not have a lot of Photoshop experience.

How to create a long shadow (free)

This simple tutorial requires basic knowledge of Adobe Illustrator and takes you through the step-by-step process of creating a long shadow using either the pathfinder tool or blend option. With either method, you can create an icon with a long shadow in a matter of minutes.

Make my design flat (free)

Self-promoted as “the simplest flat design tutorial on the web” Make My Design Flat, provides simple before and after code that converts buttons into the flat style.

The site provides a visual example and shows the code for each type of button. You can copy the code or use it to help configure your own.

Zach Swinehart’s flat design tutorials (free)

In this two-part video series on flat design, video web tools trainer Zach Swinehart explains flat design concepts, gives you a few tips for using it, and showcases a few examples.

In part 2, he walks you through creating a simple flat website in Photoshop, including techniques for creating contrast, color blocks and type.

Flat design articles

There’s been some fascinating discussion on flat design across the web. If you truly want to understand the genre and how can best be applied check out these great articles.

The Flat Design Era

Flat Design: Trend or Revolution?

What is flat design?

Principles of Flat Design

Basic Principles of Flat Design – And Resources to Get You Started!

Get Pumped Up Over Flat Design

Flat Design: An In-Depth Look

Authentic Design

A Look at Flat Design and Why It’s Significant

How to Nail the Coveted Flat Design Look (9 Actionable Tips)

Flat design inspiration

All this talk of flat design wouldn’t be complete without a gallery for inspiration.

With new projects using flat design being published every day, there’s no way to keep up with every new site, UI pack or project, but these resources are cataloging some of the best with frequent updates. 

Awwwards flat design gallery

Behance flat design gallery

Dribbble flat design gallery

Flat design gallery

Flat design on Pinterest 

FlatDSGN gallery

Flat UI Design 

Flat trendz gallery

Conclusion

It’s easier than you think to get started with flat design techniques especially considering all the tools and resources readily available. But you should act quickly because trends can fade just as quickly as they start.

Flat design quickly developed from a designer trend to a mainstream technique, being used by large websites such as Google, Microsoft and Yahoo. If it can work for sites of that magnitude, it can work for a variety of projects. But it may not be for everything, remember when starting a new project to let the content and message of the site help dictate the design. Flat often communicates simplicity; keep that in mind.

Have you designed a flat project? What resources did you find more useful? Let us know in the comments.

Jollycons! 400 Fun Hand-Drawn Vector Icons – only $14!

By mapping the way patents cite each other, network scientists have been able to study how different technologies rely on each other and how new technologies emerge