Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 01 2013


Free Resources for Creating a Flat Design

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

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, 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 created this aweome free UI kit for Webdesigner Depot. Enter your email address to download it for both commercial or personal use.


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!


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.


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.


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.


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.


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!

September 17 2013


106 Free Flat UI Kits to Boost Your Designs in No Time

Over the past several months, we have noticed that in web design the use of flashy illustrations, extraneous textures and drop down shadows were minimized if not totally removed. This is due to the growing influence of flat design – a user-centric web design style.

Microsoft, Google and now even Apple is digging this design trend. If you have observed that you were left behind and you still have those beveled, bulged and eye popping gradients, you can catch up by learning the Basic Principles of Flat Design .

And here is more to help you get started. I compiled 100+ FREE downloadable Flat UI kits to help you kickin’ in no time.

UI kits are great packages for starters for they can save you time, which is important when you are catching up the trend. These kits usually come in PSD file formats and include brushes, patterns and a lot of user interface elements.

1.  Flat AP UI Kit

From: Andrew Preble

2. Featherweight UI – A free, vector based and retina ready UI kit

From: Sara Hunt

3. Flat UI Free – PSD&HTML User Interface Kit

From: Designmodo

4. FREE flat UI kit.


5. UI Kit

From: Abhimanyu Rana

6. Polaris UI Free – User Interface Pack

From: Designmodo

7. Square UI Free – User Interface Kit

From: Designmodo

8. Freebie PSD: Flat / UI Kit

From: Sebastiaan Scheer

9. #flatlyfe UI Kit [FREEBIE]

From: Dylan Opet

10. Flat UI

From: Andy Law

11. Blog/Magazine Flat UI Kit

From: Raul Taciu

12. PSD Flat UI Kit Template Vol2


13. Simple UI Kit with Flat Colors


14. Free flat UI kit (.psd freebie)

From: Emanuel Serbanoiu

15. Flat Design UI Kit Vol. 1

From: Bloom Web Design


From: Adam Robertson

17. The Free Modern Touch Kit


18. Free Color UI Kit

From: Cüneyt ŞEN

19. Flat UI Kit


20. SmoothBerry – Free UI Kit

From: Mansoor MJ

21. Free Minimal UI Kit

From: Ramil Derogongun

22. Mega Flat UI Kit

From: Kim

23. UI Kit – Free PSD

From: Rebecca Machamer

24. Vertical Infinity – A Mega Flat Style UI Kit PSD


25. Flat UI Kit (Free PSD)

From: Devin Schulz

26. Metro UI kit


27. Flat UI Kit

From: Zachary VanDeHey

28. Beach GUI

From: Mike Clarke

29. UI Kit – Free download

From: Hüseyin Yilmaz

30. Dark UI Kit – Free download

From: Hüseyin Yilmaz

31. Flat UI Freebie Pack

From: Shaun Stehly

32. – Application Artboards (Free PSD)

From: Amit Jakhu

33. Flat Design UI Components

From: Raul Taciu

34. Free Flat UI Kit

From: Enes Danış

35. Flat dashboard. Free UI kit PSD

From: Prowebdesignro

36. Flat Web & UI Kit Final Pack

From: Dart 117

37. UI Kit

From: Jamie Syke

38. UI/UX Flat design – Free PSD

From: Julie Champourlier

39. Freebie PSD: Flat UI Kit

From: Riki Tanone

40. Freebie PSD: Flat UI Kit 2 (Blog)

From: Riki Tanone

41. Flat UI Design Kit PSD

From: Asim Craft

42. UI Kit (Free PSD)

From: Sanadas Young

43. Flat UI Kit – Freebie PSD

From: Ryan Bales

44. Avengers Flat UI Kit

From: Tristan Parker

45. flat UI kit

From: Daniel

46. Responsive UI Kit (PSD)

From: Emrah Demirag


From: PremiumPsds

48. Freebie: UI Kit PSD

From: Andreea Nicolaescu

49. Flatastic UI

From: Designerzbase

50. Flat UI Kit

From: Eric Bieller

51. Flatilicious User Interface Free

From: Patrick M.

52. Free PSD: Flat UI Kit


53. Flat UI Elements


54. Free Flat UI Kit

From: Wahib El Younssi

55. Free Deal: Flat User Interface Set


56. Flatter- A Free UI Kit

From: Andrew Coyle

57. Freebie PSD: Oniam UI Kit

From: Federico Espinosa

58. Flat UI Kit (free download!)

From: and

59. (FREE PSD) Flat UI

From: Zeki Ghulam (Flat & Filthy)

60. Orange/Cyan UI

From: Marc Konno

61. Tablet-Friendly Almost Flat UI Kit


62. Flat + Transparent UI


63. Flat UI kit


64. Ecommerce Flat UI Kit Vol.1 (PSD)


65. Minimize UI Kit

From: Alessio Atzeni

66. Free Flat Design UI/UX Kit

From: Julie Champourlier

67. Human After All -UI Kit Free

From: Tim Meissner

68. UI/UX Flat Design Kit – Neon Theme – FREE PSD

From: Julie Champourlier

69. Flat UI Kit – Free Download

From: Mark Peck

70. Gideo UI Kit

From: Paul

71. Flat UI Kit Free

From: Giuseppe Severo

72. Free RockMedia Media UI Kit

From: Lester Gonzales

73. Free modern UI PSD

From: Fatih Ocak

74. Flat UI Kit


75. REDMILK FREE UI Elements (PSD)

From: Emile Rohlandt

76. Metrostyle Web UI Kit (PSD)

From: Josep Roselló

77. touch50px UI Kit (PSD)

From: Angelo

78. UI/UX Flat Design – Sorbet Theme – Free PSD

From: Julie Champourlier

79. Flat Design Buttons for Websites

From: Asim Craft

80. UI Kit

From: Sanadas Young

81. Grooveshark PSD (Flat redesign)

From: Zeki Ghulam (Flat & Filthy)

82. Metro Vibes UI Kit (PSD)


83. Free Flat Flags

From: Muharrem Şenyıl

84. “Pizza” UI Kit – PSD

From: Boris Valusek

85. Eerste – Flat User Interface Kit That Is Free To Download


86. Minimal Blue UI Kit


87. Weekly Freebie – Reservation Box


88. Metro UI Kit


89. Metro UI KitRegister UI — Free PSD included

From: Ionut Zamfir

90. Friends list UI (Free PSD)

From: Nicolas Mata

91. Sign Up Form

From: Dylan Opet

92. Flat Web Ui

From: Josep Roselló

93. Simple UI – Free PSD included

From: Ionut Zamfir

94. Simplistic UI Kit

From: Tanveer Junayed

95. Flattastic Free

From: Vlade Dimovski

96. Ui Kit [Free PSD]

From: Pele Chaengsavang

97. Freebie PSD: UI Kit

From: Patryk Adaś

98. Transparent freebie

From: Patryk Adaś

99. Simple UI Kit – Free

From: Sadat

100. Freebie PSD: Flat & Casted Long Shadow UI Kit

From: Jacopo Spina

101. RED UI


102. Leo


103. Almost Flat Dark UI Pack


104. City Break UI Kit

Free Flat UI kit 104

105. Arctic Sunset GUI Kit Free PSD (Exclusive)


106. Sweet Candy UI Kit


Having a library of UI elements can help you make your design process faster.
Download these Free UI kit now and you will never get left behind!
Hands down to our great designers who share their works for free!

September 12 2013


Giveaway: 7 Copies of Flat UI Pro by DesignModo (PSD & HTML)

Our friends at DesignModo are generous enough to give 1stwebdesigner readers a chance to win 7 copies of their Flat UI Pro ($69/copy)! If you’re a fan of flat design and you’re just itching to design as soon as you sit in front of your computer, then this is for you!

As of late, flat design has taken the Internet by storm. Not only that, the same style has been seen on interfaces of games, operating systems, logos, and you name it!

So, do you want to win this elegant kit?

Peek into the Box


  • Not only does it come with the PSD file, it also has a pre-built HTML site that you can easily tweak.
  • Since it’s based on Twitter Bootstrap (TBS), you won’t have to code anything from scratch ever again.
  • If you are familiar with TBS, then you’ll know that a simple class call can result to an entire navigation bar.
  • The same is true for almost every aspect of a website: articles, tooltips, warning messages, footer, and many more.
  • Flat UI Pro is built around Twitter Bootstrap is retina ready, and is designed with alignment on 940/12 column grid.
  • Aside from the glaring facts that every web designer and developer will love this because it’s a complete toolkit for rapid prototyping,

How to Participate:

To enter the contest all you need to do is fill-up the form below. Note that you can earn multiple entries!

Very easy, right? Good luck!

Can’t Wait?

If you can’t wait to get your hands on this Flat UI kit, I highly recommend that you get it now!

And as always, don’t forget to leave your thoughts about this kit on the comments section.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!