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

November 01 2013

13:41

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 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

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!

September 17 2013

13:00

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
free-flat-UI-kit-1

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

From: Sara Hunt
free-flat-UI-kit-2

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

From: Designmodo
free-flat-UI-kit-3

4. FREE flat UI kit.

From: Visualcreative.cz
free-flat-UI-kit-4

5. UI Kit

From: Abhimanyu Rana
free-flat-UI-kit-5

6. Polaris UI Free – User Interface Pack

From: Designmodo
free-flat-UI-kit-6

7. Square UI Free – User Interface Kit

From: Designmodo
free-flat-UI-kit-7

8. Freebie PSD: Flat / UI Kit

From: Sebastiaan Scheer
free-flat-UI-kit-8

9. #flatlyfe UI Kit [FREEBIE]

From: Dylan Opet
free-flat-UI-kit-9

10. Flat UI

From: Andy Law
free-flat-UI-kit-10

11. Blog/Magazine Flat UI Kit

From: Raul Taciu
free-flat-UI-kit-11

12. PSD Flat UI Kit Template Vol2

free-flat-UI-kit-12

13. Simple UI Kit with Flat Colors

free-flat-UI-kit-13

14. Free flat UI kit (.psd freebie)

From: Emanuel Serbanoiu
free-flat-UI-kit-14

15. Flat Design UI Kit Vol. 1

From: Bloom Web Design
free-flat-UI-kit-15

16. EVEN: A FLAT UI KIT

From: Adam Robertson
free-flat-UI-kit-16

17. The Free Modern Touch Kit

free-flat-UI-kit-17

18. Free Color UI Kit

From: Cüneyt ŞEN
free-flat-UI-kit-18

19. Flat UI Kit

From: JAN DVOŘÁK
free-flat-UI-kit-19

20. SmoothBerry – Free UI Kit

From: Mansoor MJ
free-flat-UI-kit-20

21. Free Minimal UI Kit

From: Ramil Derogongun
free-flat-UI-kit-21

22. Mega Flat UI Kit

From: Kim
free-flat-UI-kit-22

23. UI Kit – Free PSD

From: Rebecca Machamer
free-flat-UI-kit-23

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

From: cssauthor.com
free-flat-UI-kit-24

25. Flat UI Kit (Free PSD)

From: Devin Schulz
free-flat-UI-kit-25

26. Metro UI kit

free-flat-UI-kit-26

27. Flat UI Kit

From: Zachary VanDeHey
free-flat-UI-kit-27

28. Beach GUI

From: Mike Clarke
free-flat-UI-kit-28

29. UI Kit – Free download

From: Hüseyin Yilmaz
free-flat-UI-kit-29

30. Dark UI Kit – Free download

From: Hüseyin Yilmaz
free-flat-UI-kit-30

31. Flat UI Freebie Pack

From: Shaun Stehly
free-flat-UI-kit-31

32. remember.me – Application Artboards (Free PSD)

From: Amit Jakhu
free-flat-UI-kit-32

33. Flat Design UI Components

From: Raul Taciu
free-flat-UI-kit-33

34. Free Flat UI Kit

From: Enes Danış
free-flat-UI-kit-34

35. Flat dashboard. Free UI kit PSD

From: Prowebdesignro
free-flat-UI-kit-35

36. Flat Web & UI Kit Final Pack

From: Dart 117
free-flat-UI-kit-36

37. UI Kit

From: Jamie Syke
free-flat-UI-kit-37

38. UI/UX Flat design – Free PSD

From: Julie Champourlier
free-flat-UI-kit-38

39. Freebie PSD: Flat UI Kit

From: Riki Tanone
free-flat-UI-kit-39

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

From: Riki Tanone
free-flat-UI-kit-40

41. Flat UI Design Kit PSD

From: Asim Craft
free-flat-UI-kit-41

42. UI Kit (Free PSD)

From: Sanadas Young
free-flat-UI-kit-42

43. Flat UI Kit – Freebie PSD

From: Ryan Bales
free-flat-UI-kit-43

44. Avengers Flat UI Kit

From: Tristan Parker
free-flat-UI-kit-44

45. flat UI kit

From: Daniel
free-flat-UI-kit-45

46. Responsive UI Kit (PSD)

From: Emrah Demirag
free-flat-UI-kit-46

47. UI KIT – 1 PSD SET (FREE)

From: PremiumPsds
free-flat-UI-kit-47

48. Freebie: UI Kit PSD

From: Andreea Nicolaescu
free-flat-UI-kit-48

49. Flatastic UI

From: Designerzbase
free-flat-UI-kit-49

50. Flat UI Kit

From: Eric Bieller
free-flat-UI-kit-50

51. Flatilicious User Interface Free

From: Patrick M.
free-flat-UI-kit-51

52. Free PSD: Flat UI Kit

From: Blazrobar.com
free-flat-UI-kit-52

53. Flat UI Elements

From: andrewbeckwith.com
free-flat-UI-kit-53

54. Free Flat UI Kit

From: Wahib El Younssi
free-flat-UI-kit-54

55. Free Deal: Flat User Interface Set

From: inkydeals.com
free-flat-UI-kit-55

56. Flatter- A Free UI Kit

From: Andrew Coyle
free-flat-UI-kit-56

57. Freebie PSD: Oniam UI Kit

From: Federico Espinosa
free-flat-UI-kit-57

58. Flat UI Kit (free download!)

From: webdesignerdepot.com and freepick.com
free-flat-UI-kit-58

59. (FREE PSD) Flat UI

From: Zeki Ghulam (Flat & Filthy)
free-flat-UI-kit-59

60. Orange/Cyan UI

From: Marc Konno
free-flat-UI-kit-60

61. Tablet-Friendly Almost Flat UI Kit

From: Monkee-Boy.com
free-flat-UI-kit-61

62. Flat + Transparent UI

From: Monkee-Boy.com
free-flat-UI-kit-62

63. Flat UI kit

free-flat-UI-kit-63

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

free-flat-UI-kit-64

65. Minimize UI Kit

From: Alessio Atzeni
free-flat-UI-kit-65

66. Free Flat Design UI/UX Kit

From: Julie Champourlier
free-flat-UI-kit-66

67. Human After All -UI Kit Free

From: Tim Meissner
free-flat-UI-kit-67

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

From: Julie Champourlier
free-flat-UI-kit-68

69. Flat UI Kit – Free Download

From: Mark Peck
free-flat-UI-kit-69

70. Gideo UI Kit

From: Paul
free-flat-UI-kit-70

71. Flat UI Kit Free

From: Giuseppe Severo
free-flat-UI-kit-71

72. Free RockMedia Media UI Kit

From: Lester Gonzales
free-flat-UI-kit-72

73. Free modern UI PSD

From: Fatih Ocak
free-flat-UI-kit-73

74. Flat UI Kit

free-flat-UI-kit-74

75. REDMILK FREE UI Elements (PSD)

From: Emile Rohlandt
free-flat-UI-kit-75

76. Metrostyle Web UI Kit (PSD)

From: Josep Roselló
free-flat-UI-kit-76

77. touch50px UI Kit (PSD)

From: Angelo
free-flat-UI-kit-77

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

From: Julie Champourlier
free-flat-UI-kit-78

79. Flat Design Buttons for Websites

From: Asim Craft
free-flat-UI-kit-79

80. UI Kit

From: Sanadas Young
free-flat-UI-kit-80

81. Grooveshark PSD (Flat redesign)

From: Zeki Ghulam (Flat & Filthy)
free-flat-UI-kit-81

82. Metro Vibes UI Kit (PSD)

From: Pixelkit.com
free-flat-UI-kit-82

83. Free Flat Flags

From: Muharrem Şenyıl
free-flat-UI-kit-83

84. “Pizza” UI Kit – PSD

From: Boris Valusek
free-flat-UI-kit-84

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

From: Designyourway.net
free-flat-UI-kit-85

86. Minimal Blue UI Kit

free-flat-UI-kit-86

87. Weekly Freebie – Reservation Box

free-flat-UI-kit-87

88. Metro UI Kit

free-flat-UI-kit-88

89. Metro UI KitRegister UI — Free PSD included

From: Ionut Zamfir
free-flat-UI-kit-89

90. Friends list UI (Free PSD)

From: Nicolas Mata
free-flat-UI-kit-90

91. Sign Up Form

From: Dylan Opet
free-flat-UI-kit-91

92. Flat Web Ui

From: Josep Roselló
free-flat-UI-kit-92

93. Simple UI – Free PSD included

From: Ionut Zamfir
free-flat-UI-kit-93

94. Simplistic UI Kit

From: Tanveer Junayed
free-flat-UI-kit-94

95. Flattastic Free

From: Vlade Dimovski
free-flat-UI-kit-95

96. Ui Kit [Free PSD]

From: Pele Chaengsavang
free-flat-UI-kit-96

97. Freebie PSD: UI Kit

From: Patryk Adaś
free-flat-UI-kit-97

98. Transparent freebie

From: Patryk Adaś
free-flat-UI-kit-98

99. Simple UI Kit – Free

From: Sadat
free-flat-UI-kit-99

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

From: Jacopo Spina
free-flat-UI-kit-100

101. RED UI

free-flat-UI-kit-101

102. Leo

free-flat-UI-kit-102

103. Almost Flat Dark UI Pack

free-flat-UI-kit-103

104. City Break UI Kit

Free Flat UI kit 104

105. Arctic Sunset GUI Kit Free PSD (Exclusive)

Free-Flat-UI-kit-105

106. Sweet Candy UI Kit

Free-Flat-UI-kit-106

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

13:00

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

flat-design-flat-ui-kit-giveaway

  • 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.

Don't be the product, buy the product!

Schweinderl