Design UI elements are important for a web designer. It makes designs look more beautiful, thus, increasing its usability. Choosing the correct icons, buttons, and other elements is important because it makes your designs look trendier, livelier and more beautiful, aesthetically. Web design resources are everywhere but choosing one among the loads online can be a bit overwhelming.

Looking for more premium UI kits and PSD templates?  If you didnt find what you are looking for, check this additional article after you are done with this one – 150 Best UI Kit PSD And Web PSD Template Collection.

Listed below are some of the resources available for download. They contain lots of PSD UI Elements –   ui kits, web UI elements,  icons,fonts, graphic free and some paid downloads! Try them.

Table of Contents:

  1. 120 + Flat UI Kits
  2. How To Use UI Kits?
  3. How to Design a User-Interface Element in Photoshop

120 + Flat UI Kits

It is necessary to be able to find great design elements. However, due to the massive number of resources available, it becomes difficult, nay, almost impossible to find what you need in the shortest possible time. That is why, 1stWebDesigner gathered the following web design resources for your usage.


1.  Flat AP UI Kit PSD

From: Andrew Preble
free-flat-UI-kit-1

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

This is one of the most amazing free ui kits you will find in this collection! DesignModo is famous of their high quality products and this ui kit psd is not exception!
free-flat-UI-kit-3

3. FREE flat UI kit.

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

4. UI Kit

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

5. Polaris UI Free – User Interface Pack

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

6. Square UI Free – User Interface Kit

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

7. Freebie PSD: Flat / UI Kit

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

8. #flatlyfe UI Kit [FREEBIE]

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

9. Flat UI

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

10. Blog/Magazine Flat UI Kit

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

11. PSD Flat UI Kit Template Vol2

free-flat-UI-kit-12

12. Simple UI Kit with Flat Colors

free-flat-UI-kit-13

13. Free flat UI kit (.psd freebie)

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

14. Free Color UI Kit

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

15. Flat UI Kit

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

16. SmoothBerry – Free UI Kit

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

17. Free Minimal UI Kit

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

18. UI Kit – Free PSD

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

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

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

20. Flat UI Kit (Free PSD)

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

21. Metro UI kit

free-flat-UI-kit-26

22. Flat UI Kit

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

23. Beach GUI

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

24. UI Kit – Free download

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

25. Dark UI Kit – Free download

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

26. Flat UI Freebie Pack

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

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

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

28. Flat Design UI Components

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

29. Free Flat UI Kit

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

30. Flat dashboard. Free UI kit PSD

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

31. Flat Web & UI Kit Final Pack

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

32. UI Kit

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

33. UI/UX Flat design – Free PSD

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

34. Freebie PSD: Flat UI Kit

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

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

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

36. UI Kit (Free PSD)

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

37. Flat UI Kit – Freebie PSD

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

38. Avengers Flat UI Kit

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

39. Responsive UI Kit (PSD)

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

40. UI KIT – 1 PSD SET (FREE)

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

41. Freebie: UI Kit PSD

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

42. Flat UI Kit

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

43. Flatilicious User Interface Free

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

44. Free PSD: Flat UI Kit

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

45. Flat UI Elements

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

46. Free Flat UI Kit

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

47. Free Deal: Flat User Interface Set

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

48. Flatter- A Free UI Kit

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

49. Freebie PSD: Oniam UI Kit

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

50. Flat UI Kit (free download!)

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

51. Orange/Cyan UI

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

52. Tablet-Friendly Almost Flat UI Kit

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

53. Flat + Transparent UI

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

54. Flat UI kit

free-flat-UI-kit-63

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

free-flat-UI-kit-64

56. Minimize UI Kit

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

57. Free Flat Design UI/UX Kit

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

58. Human After All -UI Kit Free

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

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

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

60. Flat UI Kit – Free Download

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

61. Flat UI Kit Free

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

62. Free modern UI PSD

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

63. Flat UI Kit

free-flat-UI-kit-74

64. REDMILK FREE UI Elements (PSD)

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

65. touch50px UI Kit (PSD)

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

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

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

67. UI Kit

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

68. Grooveshark PSD (Flat redesign)

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

69. Metro Vibes UI Kit (PSD)

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

70. Free Flat Flags

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

71. “Pizza” Free UI Kit – PSD

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

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

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

73. Minimal Blue UI Kit

free-flat-UI-kit-86

74. Weekly Freebie – Reservation Box

free-flat-UI-kit-87

75. Metro UI Kit

free-flat-UI-kit-88

76. Metro UI KitRegister UI — Free PSD included

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

77. Friends list UI (Free PSD)

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

78. Sign Up Form

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

79. Flat Web Ui

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

80. Simple UI – Free PSD included

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

81. Simplistic UI Kit

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

82. Flattastic Free

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

83. Ui Kit [Free PSD]

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

84. Freebie PSD: UI Kit

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

85. Simple UI Kit – Free

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

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

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

87. RED UI Kit

free-flat-UI-kit-101

88. Leo

free-flat-UI-kit-102

89. Almost Flat Dark UI Pack

free-flat-UI-kit-103

90. City Break Free UI Kit

Free Flat UI kit 104

91. Arctic Sunset GUI Kit Free PSD (Exclusive)

Free-Flat-UI-kit-105

92. Sweet Candy Free UI Kit

Free-Flat-UI-kit-106

Google+ Icon Set

We have prepared a little gift for our loyal readers: Google+ Icon Set just for you! Download the PSD file now and learn how those popular G+ icons are created. This isn’t original work, just we are so  big fans of Google+ that we wanted to recreate this icon set! Mainly it is created you to check that PSD and see how such simple icons are created and maybe come up with something better than they did on Google! Enjoy!

We have released this icon set almost a week ago through our newsletter, so if you want to get instantly updated whenever a freebie and amazing giveaway is hosted just subscribe to our newsletter!

This icon set is masterfully crafted by Michael John Burns, a very good web designer and a great tutorial writer.

Download it now and don’t forget to spread the word!

Download Here!

With the explosion of flat-designed websites, web designers now follow the trend in a snap, adapting a cleaner and much simpler design which can be found in flat UI kits. We seldom see skeumorphic designs nowadays. In fact, all the depth and other 3D stuff have been slowly becoming flat.This is the reason why more and more design blogs have created flat design UI kits for web designers who want to follow the trend.

These kits will allow each designer to fully utilize the trend and produce eye-popping results. It also saves the designer a great amount of time because he doesn’t have to create each individual design element. He just needs a kit, which is usually a PSD file, and voila! and instant web design masterpiece.

These PSD UI kits come in easy-to-access and easy-to-use formats. You’ll never run out of ways to use these because as flat design grows and develops, so too does your keen sense of art. So better take advantage while it’s still relatively new.

Flat UI Kit by Riki Tanone

flat-ui-kits-and-forms-riki

Flat UI Kit by Devin Schulz

flat-ui-kits-and-forms-david

Eerste UI Kit 

flat-ui-kits-and-forms-eerste

UI Kit by Abhimanyu Rana 

flat-ui-kits-and-forms-rana

Flat UI Kit by Zachary VanDeHey 

flat-ui-kits-and-forms-zach

FREE Flat UI kit by Visualcreative.cz 

flat-ui-kits-and-forms-visual-creative

Flat/UI Kit by Sebastian Scheer 

flat-ui-kits-and-forms-sebastian

Splash of Color Premium Kit 

flat-ui-kits-and-forms-splash-of-color

Flat UI Kit by Design Modo

Flat UI Kit - HTML/PSD Design Framework

Flat UI Kit by Ben Moss

flat-ui-kits-and-forms-ben-moss

Free Flat UI kit by Emanuel Serbanoiu

flat-ui-kits-and-forms-eman

Vertical Infinity

flat-ui-kits-and-forms-vertical-infinity

Responsive UI Kit

flat-ui-kits-and-forms-responsive

Free Program Icons by Applove

flat-ui-kits-and-forms-applove

Flatilicious – 48 Free Flat Icons by Lukas Jurik

flat-ui-kits-and-forms-lukas

FREE Flat Social Icons EPS by Jorge Calvo Garcia

flat-ui-kits-and-forms-vertical-infinity

Free web icon by Zizaza – design ocean

flat-ui-kits-and-forms-design-oceans

Big Flat Icons (.sketch) by Luc Chaffard

flat-ui-kits-and-forms-lue

UI Kit by Mike | Creative Mints

flat-ui-kits-and-forms-mike

Simplistic UI Kit by Tanveer Junayed

flat-ui-kits-and-forms-tanveer

 Square UI – Interactive Components Board by Vladimir Kudinov

flat-ui-kits-and-forms-vlad

Free PSD UI Kit by Simeon K

flat-ui-kits-and-forms-simon

Flat Stroke UI Kit by Ryan Clark

flat-ui-kits-and-forms-flatstroke

Flat UI Login Form by David East

flat-ui-kits-and-forms-david-east

Sign Up by Dylan Opet

flat-ui-kits-and-forms-dylan

Your Username by Giel Cobben

flat-ui-kits-and-forms-giel

 Sign In Flat Design by Logoswish / Maxim

flat-ui-kits-and-forms-maxim

Signup Form by Prakash Ghodke

flat-ui-kits-and-forms-ghodke


How To Use UI Kits?


Let’s start by opening the UI Kit PSD file.

Unzip the file first to view the contents of the folder. You can see four folders and 2 .txt files inside. Open the UI folder and then view the flat-ui-free.psd file in Adobe Photoshop.

file-structure

photshop-opened

By default, there are three folders on the Flat UI PSD file:

  • Basic Elements – consists of a series of individual UI element folders.
  • Samples – consists of the actual application design of the UI elements.
  • Background – the white background of the UI elements.

psd-file-structure

Using the UI Kit Elements

Now that the UI PSD kit file is opened, we can now go on and use the UI elements. Click Auto Select on the Option Bar (on the top left section of Photoshop near the menu. Make sure Group is selected instead of layer) and then open the Basic Elements folder.

auto-select

open-basic-element

Next, select the UI elements that you want to use. For this example, we will select the menu, share status buttons, radio buttons and checkboxes. Click on the selected UI elements and then move them to a new Photoshop document file.

menu-ui

Re-sizing UI Kit Elements

To resize UI elements, click on the Direct Selection Tool on the toolbar on the left section of the Photoshop.

direct-selection-tool

And then select the path on the right side of the UI element you want to resize. For this example, we will resize the menu element, press shift and drag the path to the right to resize.

resize

Changing the UI Element Color Scheme

To change the color scheme, you need to select the specific element you want change then click on the shape and select your preferred color on the color picker. For this example, we will change the background color of the menu. Go to the Menu folder and look for the shape layer that has the same background color of the menu. Change the background color of the menu to hexadecimal color: #00acc0.

change-color

Using Vectors and Glyphs

Vectors and glyphs add a touch of  creativity to web design elements. Let’s use the existing vectors and glyphs of the Flat UI kit. Create a new Photoshop document file. Next, create a box using Rounded Rectangle Tool with the dimension of 372px by 372px.  Now drag the retina vector icon and static green button on the box you created. Then drag the round check icon glyph to the left of the static green button. You just use the vectors and glyphs of UI elements.

vector-glyphs

Exporting UI Elements for Web

Now that we already know how to resize and change the color scheme of UI elements, let’s export them for web use. Simply drag your preferred UI element in the new Photoshop document file with a transparent background. Make sure you will only select the layers of that UI element, not the whole folders themselves. For this example, let’s use the paginator. Drag the UI element in the new Photoshop document and go to Image then choose Trim.

trim1

The Trim window will then appear. Next, select the Transparent Pixels radio button and make sure that all of the checkboxes are selected on Trim Away section (Top, Bottom, Left, Right) and then click OK.

trim2

Then Go to File > Save for Web & Devices. In the Save for Web & Devices Window, select the type of preset you want to use. For this example, PNG-24 is used since high quality image with no transparent background is preferred. Click Save to place it on your preferred location.

save-for-web

Congratulations! You just learned how to use, resize, change color scheme, apply vectors and glyphs and export UI kit elements for web used.

How to Design a User-Interface Element in Photoshop

In this tutorial we will be creating a small user-interface element.  Most of the attention will be given to the slider, however we will do our best to improve the over-all look of the interface element. We will focus on the creation of a “filter” slider and a call to action button. We will try to achieve a nice color contrast by using a few tones of blue with a few gray tones. By adding really small details, we will improve the overall quality and look of our user interface piece. This tutorial is meant for designer of all levels, especially for beginners and intermediate level users with an approximate completion time of 20 to 40 minutes.


Final Result

Step 1

We will be starting this user interface element by creating a new document of the following size: 900px width; 500px height. It doesn’t matter what size you create your document, but it must be wide enough for us to have some “breathing space”. On the background, apply a pattern overlay style with a nice, subtle pattern. There are hundreds of awesome subtle patterns on SubtlePatterns.

Step 2

Create a white, rounded rectangle by using the Rounded Rectangle Tool (U). Mine is 310 pixels wide and 160 pixels high. Apply some drop-shadow to it, as shown in the screenshot.

Step 3

Add some white inner shadow.

Step 4

We will add some Outer Glow, which will be black. The outer glow with the stroke and drop shadow applied will give us a nice shadow all around the shape.

Step 5

Add the stroke to the shape. It must be a light-grey color (#b2b0b0). This will be the “base” rectangle which will be a shadow for the upcoming layers which will be placed over it.

Step 6

Create a new rectangle shape, it must be of the same width but the height must be 10 pixels more. Be sure that the new rectangle fits the upper part exactly, then apply some black drop shadow to it. Set the Blend Mode to: Multiply, Opacity to 25%, Distance to 1, Spread and Size to 0. Duplicate this layer then move it up by 2 pixels. Duplicate the last layer one more time and move it by 2 pixels up as well. Now you have a nice “stack” of well-styled rectangles placed one over the other. And, as you can see, the shape we’ve created in the first step now works as a shadow for all sides, except the bottom part (the effect we wanted to achieve).

Step 7

It’s time to create a new shape that we’ll color grey, again, use the Rounded Rectangle Tool (U). Be sure to set the Radius to 10px as we want to have our corners fairly round. This shape will be the base of our slider. Apply some gradient overlay styling as shown in the figure. I’ve chosen this light-maroon color because it will perfectly contrast with blue and grey colors, the ones we are going to use a bit later.

Step 8

Apply some stroke to the shape with a little bit darker color, which is: #c4b8b5

Step 9

Create a simple square of about 12 x 12px and align it on the slider bar. Apply all the styling shown on the screenshots below for a nice final result.

Step 10

Create 3 lines using the Line Tool (U). Two of them must be the same size while one should be 2 pixels smaller in height. This will make our buttons look better and they won’t have the “blank” look. Apply some white drop shadow to make the lines even more noticeable.

Step 11

Duplicate this pin and leave some space between them. You can leave as much space you’d like, because this will be our “marked/checked” area which is going to be highlighted.

Step 12

Use the Rectangle Tool (U) or Rectangular Marquee Tool (M), followed by the Bucket Tool (G), fill the space between the pins with any color. Apply some Gradient Overlay style of a nice light and dark blue, which looks awesome in combination.

Step 13

Add some dark blue stroke to the highlighted area to make it stand out and grab attention.

Step 14

By Using the Line Tool (U) and holding the SHIFT button you can create straight lines. Create some 5-7px sized lines and be sure to have an equal spacing between each. I have a spacing of 19 pixels between each line. Create enough lines to fill the upper part of the slider. All of them must be light grey colored (#ebeaea). If you’d like to make the “checked” part of the slider stand out more, you can create those blue colored lines under the slider. They will only cover the blue part of the slider (from the ending of the first pin till the beginning of the second one).

Step 15

Add some price tags over the lines. If you want to add the price over each line, you can, but you should keep in mind that this will mess up the layout a lot and will distract the user, that is why I decided to add the price tags only over the first and the last grey lines (the beginning and the end of the slider) and to the first and last lines which belong to the highlighted area.

Step 16

While the slider looks pretty nice, it doesn’t look very attractive by itself, that is why we will add some extra elements to make the interface stand out. By using a Sans-Serif font (I am using Helvetica, but Arial may work just great for you), add some text above the slider. Let’s assume this interface is for an e-commerce website; therefore we will add the name of the buyer and how many items are in his cart. As you can see there are 2 different rows of text, with different styling. The font size used for the name is 14px while the size for the cart statement is 12px. This will add more importance to the name, rather than the cart, that’s why it won’t bug the user about seeing a huge-sized text about how many items he has in the cart. The “cart” text itself is going to be highlighted by a applying a darker-grey color to it and adding some “underline” paragraph styling. Take a look at the screenshot for exact details.

Step 17

I have added a nice grey icon at the top right corner to show some extra info. My icon says that the website is using some kind of “Super-fast-shipping method”. You can find all kind of icons (vector, png, psd) on IconFinder

Result So Far

As you can see, we have done a pretty nice job tweaking the slider interface, but as you can notice, there is too much space under the slider and the bottom of the rectangle. We can either make the rectangles fit the current space used, or we can improve this piece of user-interface elements by adding a few more things which will make it definitely stand out!

Step 18

Create a black rectangle by using the Rounded Rectangle Tool (U) with a radius of 3 pixels. This will be the base of a “Call to Action” button. Apply some black shadow with an opacity of just 18% to give it a light-grey drop shadow look.

Step 19

Add some Inner Shadow to the button base. It won’t be so clearly seen right now, but when we change the base color to blue, the shadow will be clearly seen.

Step 20

Add some gradient overlay to the button as we obviously need to get rid of the black color. For this gradient overlay styling we are going to use exactly the same colors we have used to apply the Gradient effect to the highlighted area of the slider.

Step 21

We could add a simple stroke but because of the gradient effect applied on button, it won’t look all that good. For the stroke, we are again using the gradient effect, with a bit darker blue colors: #15488b and #1c60b9.

Step 22

Finish up this button by adding some “Buy Now” text with black drop shadow effect applied.

Success so Far:

As you can see, we have almost finished our slider. It isn’t a final result yet because there are some pixel-imperfections. While the pixelation isn’t a big deal for some, it should not be ignored. If you have a really quick look at the interface, you won’t see any imperfections, however, if you look at it for 10 seconds you can spot some really unattractive spots like the ends of the slider bar and the bottom corners of the base rectangle shapes.

By zooming in you can clearly see the pixelation that we talked about. This can be solved in a few ways, but we will go through a simple one. This isn’t the best solution because we are going to change the shapes a little bit, but we’ll easily get rid of these pixel imperfections. Grab the Rectangular Marquee Tool (M) and Bucket Tool (G) and start fixing pixel by pixel.

It works for us in this case because it’s a pretty small area to fix and won’t require a lot of effort. After you are done with one side, you can move to the other side and repeat the exact steps in order to get an acceptable result.

Final Result

Hope you’ve enjoyed this tutorial. Do share your thoughts with us in the comments!

Now lets talk about UX and how to make it unforgettable.


Secret Ingredients to an Unforgettable User Experience

User experience (UX) is an important facet of website development, though, it is often neglected. The reason is that most web developers focus on the technical features of the site. However, when one forgets to build a website that is easy to navigate, the user tends to shift his or her attention to other websites and would not ever come back.


On the contrary, when a website is well-thought of, a favorable and long-term impression is created, together with the preference of your website over that of the competitor’s. It is in this reason why it is pertinent to plan and prepare the experience a user will have when they browse through your website.

You need to consider if your site will provide the information a user needs as well as how your site is able to provide the information. Truly, you can never tell how this tiny and often ignored detail can gravely influence the views of your users.

To address this concern, let us look at the essential UX tools that can help us achieve an unforgettable and lasting user experience.

Maps and Charts

This is the foundation of everything, even in areas not concerning web design. You need to have a goal and a way to attain it.

Why maps are needed:

  • A project will be left astray without having a sound and foolproof plan.
  • Without a plan, you will be lost; you will tend to go in all directions like a hiker who opted to walk in the woods instead of the tracks. 

Planning will give you the following benefits:

  • Be able to determine the goal of the website
  • Develop a flexible design that works on your target audience
  • Maximize reusability of the web site through appropriate use and reuse of web pages

Planning tools like mind maps, flowcharts and sitemaps are great tools that you will need for guiding your goal.

  • Mind maps and flowcharts are effective in organizing your mind and filing each plan in a way that you can ‘see for yourself’ how your plan would work.
  • Sitemaps can utilized when defining the navigation structure of a website.

Concept Draw

conceptdraw

Concept Draw is a powerful tool for diagrams as it provides you with flowcharts and mindmaps both on Windows and Mac. It comes in three programs, namely:

  • Concept Pro 9 – gives you diagrams and charts, vector illustrations and maps
  • Concept Draw Mind Map 7 – allows you to do mind mapping, brainstorming and presenting
  • Concept Draw Project 6 – has features like Gantt charts, project and resource planning

Xmind

xmind

XMind is an open source project by Lifehacker.com. It is the most popular mind mapping tool that offers the following features:

 Features:

  • Local Network Sharing – helps you to communicate better with your teammates via LAN.
  • Export to MS Excel/CSV – you can start the plan via XMind and export it to Excel for task management.
  • Export to PDF/EVG as vectors – maps are always printable in any scale.
  • Useful templates – there are loads of useful presets; you won’t worry how to start your plan.
  • Beautiful markers – differentiate thoughts and ideas with style.
  • Clip-art – another way to design your plan.

Gliffy

gliffy

Want a professional-looking flowchart, diagram, floor plan or technical drawing? You can do that all in your browser using Gliffy!

Features:

  • Drag and drop interface – combines the power of a desktop software with the lightweight and easy to learn browser based application.
  • Compatible via Mac or Windows – you will never worry if the program works for your OS; as long as you have an Internet connection and a browser, Gliffy can run in your computer.
  • You can also share your work with others

OmniGraffle

OmniGraffle

OminGraffle is a great iPad and Mac OS X tool for making eye-gasmic graphic documents. It provides you with great styling tools. It even organizes your diagrams in one click. You can now create flow chats, diagrams, UX and UI interaction and more!

Features:

  • Document syncing – allows you to share your files with other users
  • Comes in with GraphViz Layout Engine – you can do wireframes
  • Has great graphic tools like lines, shapes, templates and custom stencils
  • Can do multi-page, multi-layer and multi-canvas documents,which can all be stored in one Graffle document
  • Has Presentation Mode – you can easily relay your proposals to clients and workmates.

Wireframes and Prototypes

Prototypes allow you to work on building elements, positions and design before moving further on the development. This will save you a lot of time as it will give you a clear goal of the design before the development phase.

UXPin

uxpin

UXPin offers a new way of prototyping websites and iPhone apps. It is a complete system for designing user experience with collaborative app for wire-framing and paper prototyping.

UXPin is used by the people from Google, Apple, Microsoft and IBM. It has earned reviews by Wall Street Journal and The Next Web.

Features:

  • Uploads UX and project files such as Model Canvas and Project Canvas 
  • UI design
  • Collaborative work in real time – no more emailing to team back and forth
  • Visionary wireframing and protyping tool
  • Easy UI design process 

Power Mock Up

powermockup

Did you know that you can make mock ups using MS PowerPoint? Oh yes, you can! Using Power MockUp, you can sketch your wonderful ideas without the hassle of learning a new software.

Features:

  • Create designs using hundreds of stencils and icons
  • Stencil library – provides you with a wide variety of templates for all the typical elements of a website design or application
  • It works with PowerPoint 2007, 2010 and 2013, both 32 and 64-bit

Balsamiq

balsamiq

Balsamiq offers fast and functional way of prototyping websites and apps. It is not inexpensive, yet it provides plenty of revenue to your business.

Features:

  • Drawing is easy using the four major blocks (Application bar, UI library, mockup canvas, file browser)
  • Team members can come up with a design and iterate over it in real-time in the form of a meeting.

Balsamiq price varies depending on the versions you need. You can check the pricing here.

Invision

invision

Transform your designs into high-fi prototypes both for web and mobile interfaces with Invision. This powerful tool is integrated with Photoshop, Fireworks and Illustrator so you can use it whatever platform you might want to.

Features:

  • Upload images and use hotspots to create interactions like a real app does
  • Send the link of the project to your client so that you can get their own say about the app or site that you are developing

Wireframe Sketcher

wireframe-sketcher

WireframeSketcher is an offline desktop wireframing tool that comes with fast and native UI on both Mac, Windows and Linux.

Features:

  • Standalone application but also acts as plugin-in for any Eclipse IDE
  • Cross platform and has a native fast UI on Windows, Mac and Linux
  • Built-in refactoring lets you rename and move files without breaking links
  • Flexible UI lets you work on multiple monitors
  • Extensive library of UI controls
  • Flexible wiki formatting (style any widgets that supports text)
  • Large set of vector icons
  • Storyboard use cases

Notism

notism

If you’re into collaboration, Notism is a recommended tool for you. For one, it lets you obtain and share designs efficiently. You can also create interactive prototypes, and notes, discuss these prototypes and be notified about it in real-time.

Features:

  • Upload and share design work with your team members easily
  • Works with your favorite design tools like Photoshop, Fireworks and Illustrator
  • Receive live feedback from team members
  • Comment in realtime via Sketch
  • Create working prototypes of your static design templates by setting up hotspots and linking screens
  • Add to-dos lists

Mockingbird

mockingbird

GoMockingbird is a web app that makes it simple for web and app developers to create, link together, preview and share mockups.

Features:

  • Drag and drop UI elements to pages, rearrange and resize them
  • Link users to multiple mockups screens, allowing them view each others work
  • Share link to team members and clients in real-time
  • Export mockups to PDF or PNG files

Creately

creately

Creately is another useful wireframing UX tool. Aside from the wire-framing features and mock-ups, you can use it to draw flowcharts, mind maps and many more diagram types.

Features:

  • Sharing diagrams with other users
  • Great diagram customization
  • Font and object can be altered in variety of ways
  • Text can be turned into links

Indigo Studio

indigo

Indigo Studio is one of the fastest and newest prototyping and interaction design tool. The tool itself is interesting in that it has two modes of working: screen and storyboard.

Features:

  • Designing prototypes for mobile devices
  • Full support for any device that runs HTML5 including iOS devices
  • Utilize supported touch gestures and documents designs through these new features

LucidChart

lucid

Lucid Chart is another great tool that provides collaborative online diagramming. It draws flowcharts, organizational charts, wireframes, UML, mind maps and more. It is a web-based, visual thinking application that has unlimited number of ways to create diagrams in real time.

Features:

  • Enterprise-level security and admin controls
  • Import and export Microsoft Visio documents
  • Intuitive user interface and seamless collaboration

GUIToolkits

guitools

GUIToolKits is a prebuilt tool for everything from web to mobile devices. It is the next major UI template released by Amir Khella who also brought Keynotopia. GuiToolkits is apparently the largest collection of user interface in the planet.

Features:

  • It’s loaded with UI components of various platforms such as Android, iPad, iPhone, MacOs, etc.
  • You can create wireframes and turn them into high fidelity pixel perfect prototypes by switching the UI component style.

Pidoco

pidoco

Pidoco is a web-based prototyping software for rapidly creating clickable wireframes and UI prototypes for web, and other applications. It’s easy to use with its smart sharing and collaboration features, a convenient specification generator, exports and much more.

Features:

  • Design prototypes as simple as playing blocks
  • Ready to use once you sign up
  • Rapid application prototyping
  • Share work together other team members in real-time
  • Get feedback real-time

FlairBuilder

flairbuilder

FlairBuilder has the tools you need to wireframe a website or iPhone apps. There are a lot of built-in widgets to get you started from having simple page-to-page links to more complex functional interactions tool.

Features:

  • Simple and easy to use
  • Wireframes are organized in pages
  • Instant Site Map (Site Map View)
  • Easy to add comments to your pages

SimpleDiagrams

simple-diagrams

SimpleDiagrams is a small and simple software program that enables anyone to quickly describe their thoughts or capture business processes visually. Consisting of an elegant design and simple feature set makes it a perfect tool for business.

Features:

  • Drag, drop and size symbols from libraries
  • Add photos and post-notes
  • Various background styles (chalkboard, whiteboard, etc.)
  • Create multi-diagram documents with tabs
  • Save diagrams on your computer
  • Export your diagram to PNG and PDF
  • Create custom libraries

HandCraft

handcraft

Handcraft is a great tool to build and share better prototypes with HTML, CSS, Javascript, Coffeescript, LESS and Markdown. HandCraft is now available in Chrome Web Store. This means that if you use the Google Chrome browser, you simply install it and it will appear on your tab screen.

Features:

  • Design in the browser
  • Include state changes, error messages and alternate designs directly in prototype
  • Support for HTML, CSS, Javascript, LESS
  • Secure and Private Prototypes

FileSquare

filesquare

FileSquare offers web-based tools for creating prototypes by linking uploaded mock-up images together. With FileSquare, you can simplify the prototype process with click-through mockups and collect feedback on your designs.

Features:

  • Drag and drop screens right into the editor window
  • Link up sketches, wireframes etc. quickly
  • Track progress drill down into details

User Testing and Feedback

Feedback and user testing are important too. Once you have done the project, you will get actual users to use it. In this manner, they will be able to identify the possible errors and bugs so you can improve or troubleshoot them.

Forrst from Zurb

forst

Forrst, maintained by ZURB, is a great resource for designers and developers who want to share their work and get feedback from others in their field. Compared with Behance and Dribble, Forrst generally works better if you want complex feedback instead of just recognition.

Features:

  • Get feedback on your visuals
  • Interactive discussion about the design project
  • Get help from other developers
  • Share design or developer concepts with your peers

Intuition HQ

intuition

Intuition HQ allows you to share user feedback with clients in a visual and simple manner. You can get results to show the things that work in your website and the things that don’t. This way, clients are being given extra value by offering them new and improved services. It’s like involving the clients without over-involving them.

Features:

  • Test designs quickly and easily
  • Share user feedback with clients in an uncomplicated system
  • Add value to clients by offering a new service
  • Improve leads, sales & your reputation for the user-centered design

Silverback

silverback

Silverback is a “guerilla” usability review application. This means you can review the feedback at at your own preferred time and place. It is a software that aims to empower people to develop applications. The best part of this is that it comes as ready-to-use, right out of the box.

Features:

  • Capture screen activity
  • Video the tester’s face
  • Record the tester’s voice
  • Add chapter markers on-the-fly
  • Control recording with the remote
  • Export to Quicktime

Verify

verify

Verify gives you the opportunity to gain valuable input regarding your users’ expectations.

What does Verify do?

  • It also provides reactions to your designs before writing a single code by uploading test screenshots.
  • Your team will have an easier time in making design decisions.
  • Fast in collecting and analyzing your feedback, it is also easy to use because you can set up your Verify account and start surveying in less than three minutes.

Features:

  • Collect and analyze user feedback on screens or mockups via design surveys
  • Collect data that informs your design decisions
  • Create and share Actionable Reports
  • Collect Demographics

Browserbite

browserbite

Browserbite provides screenshots and report cross-browser results with differences. It comes with a price but, on the other hand, it reduces testing time, making the whole process more efficient.

Features:

  • Launch your site in many computer browsers
  •  Take snapshots and compare these using patent pending algorithm
  • Report visual bugs to the language you understand

PollDaddy

polldaddy

With Poll Daddy, you can easily create surveys and polls that suit your brand, budget and goals. It comes with an easy-to-use survey editor that lets you create surveys from 14-question types, ranging from multiple choices to free text.

Aside from that, you can view your results real-time as they are being delivered. You can even filter them to properly analyze your data and share them. Polldaddy also is customizable using CSS.

Features:

  • Easy-to-use survey editor
  • Powerful reporting and filtering
  • Customized survey look

Five Second Test

usability

The name itself would ring curiosity but, honestly, Five Second Test is a very simple tool to get feedback. This is a service that gathers feedback by asking its users to recall the elements of the website after they have fast-seen it in five seconds.

Features:

  • This is a great method in gauging the attention-fishing capability of your website.
  • It can reveal the strong and weak points in the design.
  • It could be a fun way to check if your design is really attention-catching.

I quote,

“Fivesecondtest could easily get addictive. With so much UI feedback available so cheaply, you could try a much riskier UI & iterate.”

– Kent Beck, Three Rivers Institute

Usersnap

usersnap

Usersnap is a screenshot tool for web development. With this tool, you’ll get annotated screenshots of the current browser content directly delivered to your bug tracker or project management tool. This tool helps you deal easily about the issues and share feedback between developers and clients.

Features:

  • Enables Google analytics on pages
  • Supports CMS platforms like WordPress and Joomla
  • Works on all browsers

BugHerd

bugherd

BugHerd is a web-based online bug tracker for web projects. It’s comprehensive feature set ensures the bases are covered from development all the way through to delivery.

Features:

  • Simple bug reporting interface
  • See visual bug reports on your website
  • Kanban board for easy management
  • Automatically capture client-browser information

Visual Website Optimizer

visual-website

Visual Website Optimizer has a sleek user-interface and friendly navigation bar. Being a dedicated testing tool, it is also packed with options to provide more data- ideal for the marketer who doesn’t have advanced coding and technical skills. 

Features:

  • A/B testing
  • Multivariate testing
  • Behavioral targeting
  • Heat maps
  • Usability Testing
  • Revenue Tracking

Conclusion

So there you have it guys, the essential UX tools you need. I hope you’ll pretty much get the idea of how user experience is important in our field. Let it be known that without these tools, we’ll be lost. What do you think? Which of the tools is intriguing to use? Which of these services are helping you already? Let’s talk about it.

Editorial Team

Written by Editorial Team

9 Comments

  1. I found the use of the gender-specific pronoun “his” in the second sentence slightly distracting. Just a heads up, author.

    Reply

    1. Dainis Graveris February 2, 2016 at 07:31

      Thanks, Alex! We fixed the mistake. Appreciate the heads up :)

      Reply

  2. Great collection and incredibly useful for me, as a designer. Thank you.

    Check your link to Freebiespress. It isn’t working.

    Reply

    1. Rean John Uehara April 11, 2014 at 05:42

      Hi Pete! Looks like the site is currently offline. Thanks for telling us!

      Reply

  3. Interesting! Useful resources that help me a lot :) Thanks once again

    Reply

  4. Thanks for your well researched post. By the way do you know any good websites that have good resource for css and css3? I’ve been using http://www.generatecss.com because it has a wide range of generators, but I’m looking for osmething a bit more.

    Reply

  5. These all designs are very unique . . . . . Nice collection . . Usually i like Google Fonts but Font Fabric also good.

    Reply

  6. I totally agree that finding free or affordable graphic resources for websites can be very time consuming and your gathering of information is very useful. But care is usually still needed with this type of resource in terms of whether it can be modified, if it can be used on commercial sites and if an attribution link has to be included.

    As an alternative, which I have used several times, I would like to recommend the 25 a day ‘daily quota’ subscription service from Fotolia.com. I start by putting 750 images that I would like into my wish list. Then with discipline, I download 25 images every day and get all 750 images for £149 (the 1 month subscription), i.e. just under 20p each. My only notes of caution are (1) it’s use it or lose it on a day by day basis so make sure you force yourself to take your 25 each day, (2) don’t wish-list images not marked with an ‘s’ indicating that they are available as subscription downloads, (3) ensure you make your subscription non-reating, so you don’t get caught for a second £149.

    Reply

Leave a Reply