Free Resources for Creating a Flat Design
This page may contain links from our sponsors. Here’s how we make money.
Flat designs are taking over quite quickly it seems. I doubt anyone could argue against it being the latest and greatest for (fairly) new trends on the web, in mobile devices, and even in print. The simple description for a flat style of design is one that lacks 3D effects, such as bevels or drop shadows.
The stylistic details of a flat design can vary somewhat, just as with most design styles. Usually, though, a flat design is quite minimalist with primary-ish colors and lots of “white space”. The font is usually thin without too much flare. Boxes and buttons are, of course, without strokes or 3D effects. Some flat designs do contain shadows, but these are usually flat-ish as well.
Whether you are new to flat design or simply need some fresh, new resources for your next project, most should be able to find a few items below to help. The list below is divided into 5 categories: UI kits, icons, templates, WordPress themes, and tutorials. The best part? All are free. The ones that specifically mention “free for commercial use” are noted as well. Have fun browsing and be sure to let us know of any other amazingly free flat resources.
UI Kits for Flat Design
A UI kit is a user interface collection that comes with all the parts and pieces you need to design your own website. Usually, they are PSD but sometimes will come with other components as well. While you can use the color scheme in the file, you can create your own color scheme. They also come with patterns, brushes, and much more. Hence, UI kits save a web designer a lot of time, improving workflow and decreasing time spent on projects.
DesignModo Flat UI
This free (commercial and personal) flat UI kit from DesignModo comes with all of the basics you’ll need to create a flat user interface – buttons, menu, input, tags, switches, icons, color swatches, glyphs, and much more.
Modern Touch UI Kit
PixelKit offers this flat UI kit. It comes with a very unique, slick look and feel and the free version is for both personal and commercial use.
Flat Design UI Components
A beautiful UI kit, this one from GraphicBurger comes in a well-organized PSD file. The color scheme is nice for when you need a darker look for a website or application.
Free Flat UI Kit
This amazing free kit includes flat icons, buttons, and more in a blue/white color scheme. Just be sure to contact the developer, Enes Denis, about commercial use.
Featherweight UI
Designed by Sarah Hunt of sarahjustine.com, this kit is completely free for both personal and commercial use. It is both vector-based and retina ready, and the font works both online and offline.
Flat UI Kit
Freepik.com created this aweome free UI kit for Webdesigner Depot. Enter your email address to download it for both commercial or personal use.
Icons for Flat Design
Flat icons are, as mentioned already, are those that have no 3D pop. They are simply flat. Most come in the normal, flat style of primary-like colors. However, you can find a few that are line style and others that are even a bit uniquely colored, for a flat design. Icons are another great way to save time in both web and print design.
Metro UI Icon Set
This fantastic set comes with 725 flat icons that also come with a reflective quality if you decide to go less flat in style. The designer, dAKirby309, has generously make them free for use as long as you credit him in your project.
180 FREE Flat Icons
On a mission to providing Open Source resources for the WordPress world, WordPress Design Awards created this icon set for anyone to use in commercial or personal projects.
Free Flat Icons
This collection does not contain very many icons, but they are very unique. These are free for both personal and commercial use and are perfect for adding a unique touch to any flat design.
Free Flat Icons by Studio 4
In this free collection, you will find 47 icons designed with flat colors and style. The details are phenomenal!
100 Free Vector Icons
This set of line icons work great for a flat design. The precision in the icons are superb, and the best part is that they are completely free.
90 Royalty-Free Flat Icons
With round and square icons, social media icons, common objects icons, and more, this royalty-free icon pack is amazing!
Templates
For those with even less time, templates are a great way to quickly throw up a website in a matter of minutes. Unlike a UI kit in which you have to arrange every element onto a page, a template already comes with elements laid out. All you have to do is add content.
Free Flat HTML5 Website Template
This free template comes with a call-to-action section, header and footer, portfolio area, and menu. With it all located in a single HTML5 file, you can easily edit it for your own use.
Free Flat Design PSD Template
A very minimal, flat design, this template for a website is called Illustrate. A WordPress theme is also available in this design.
Free Flat Website Template
The colors in this flat template are very calming, making it a great website template to use for a company that wishes to instill trust in clients.
iPhone Flat Design UI Templates
This collection of iPhone templates come with different pages in a free sample project download. A sidebar, settings screen, activity feed, user profile, and login screens are all included. Each of the screens come with 2-4 design styles.
WordPress Themes
For those creating a WordPress website, there are a few new themes out there that fall under the flat category. All of the following themes, except the first one, are Open Source themes just like WordPress, so no need to worry about hidden prices or commercial-use.
Photo Free Responsive Gallery WordPress Theme
This absolutetly free theme is very minimal and flat in its design. It would be perfect for anyone needing a basic portfolio website.
Surfarama
Each of the content boxes in this Open Source theme can include an image to enhance the home page. You can even color code the categories, upload your logo, etc without coding.
StrapVert
This is a great flat theme for easily showcasing images with blocks of text. The theme now comes with the option to turn off either the featured section, just the top section, or just the secondary section off.
Attitude
This incredible Open Source WordPress theme is retina ready, responsive, and very clean. The other big bonus to this theme is that it is also available with 5 different translation options.
Iconic One
This WordPress theme is not only flat, clean, and simple but also it is responsive, has a page speed score of 95+, and implements SEO. It also uses Live customizer so that custom changes are easy to make.
Twenty Thirteen
This theme looks good on any device and comes in a blog format. The flat style gives it simplicity and the color scheme is a nice burnt look.
Tutorials
If you are just beginning or even if you have some areas in flat design you’d like to improve upon, the following tutorials are excellent. All give detailed instructions on how to create flat designs or flat elements in a design.
How to Create a Website in Flat Design Style
This 17 minute tutorial from Designmodo uses their free UI pack listed in the UI kits above. Learn how to create a flat website in Adobe Photoshop using an interface kit.
Flat Long Shadows
This step-by-step tutorial is from Awwwards and includes resources and examples as well. Easy to follow along, this is probably one of the best tutorials on flat shadow design on the web.
Make My Design Flat
This is not necessarily a tutorial but best fits under the “Tutorial” category simply because after using it several times, you will probably will learn how to change code around for flat designs. Using this tool, you can convert any button into a flat design. Simply upload your code to receive the “flat” version that you can then copy and paste or use as a guideline for your own flat code.
Flat Design Tutorial (part 2)
This video tutorial thoroughly walks you through how to create a flat design. The designer gets a little detailed on downloading the resources he uses, but once he gets to the designing part, he does a great job of making it easy to learn flat designing.
Mastering Flat Design
You’ll have to sign up on TutsPlus to see this full series, but it is very much worth it. TutsPlus provides a comprehensive video course on flat design comprised of over 2 hours worth of videos.
Remember to share in the comments below if you have a flat design resource you’d like to share with the rest of us!
