How to Use UI Kits – Plus Free UI Kits to Choose From!

Posted in HowTos, Quick Tips, Tutorials, Web Interface, WordPress • Posted on 2 Comments

UI kits can be seen anywhere on the Web. But what is this UI kit thing? Do you know how to use UI kits? You can see a lot of resources with beautiful interface elements such as buttons, sliders, breadcrumbs, media players, forms and the likes. Perhaps it crossed your mind how these elements came to be.

Let me give you first a brief introduction about UI kits. A UI kit stands for “User Interface Kit”, which are PSD files that are composed of user interface elements. These come in a variety of colors, patterns and asl files that are being integrated on web and mobile designs. Though sometimes there are UI elements that are included on the package that you don’t think you will be using. That being said, UI kits will vary according to your web design needs. Usually the premium versions of UI kits come with a lot of user interface elements than the free ones.

Using UI kits is all about improving and speeding up the workflow without giving a lot of time thinking what to design. This allows you to focus more on the functionality and usability of the website you are working on.

OK, enough for introduction. I know you’re all fired up and want to know how to use UI kits. So let’s rock!

Choosing a UI Kit to Use

There are a lot of UI kit resources on the Web that you can use, depending on what you need. But for this tutorial, we will be using Flat UI PSD format by Designmodo.com since it has a lot of user interface elements that we can choose from.

Feel free to check these out too!

Flat UI Pro, a professional design framework

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 Design UI Kit Vol. 1

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

4. FREE flat UI kit.

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

5. UI Kit

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

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 Flat UI PSD 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

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

Conclusion

UI kits are very helpful to both web designers and web developers. If you are a freelancer, using UI Kits will save you a lot of time since you don’t need spend more time thinking for the design. It can please your clients too because you can deliver the project faster. You can explore more UI kits here. The web is composed of hundreds of UI Kits, both in free and premium versions. You just need to choose the UI kit that suits your needs. You might also want to try to apply it on your actual web or mobile design and then later on code it using HTML and CSS.

46 Written ArticlesGoogle+

is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

2 Comments
  • Amit

    Monday, February 17th, 2014 01:03

    2

    Great help, indeed. Along with UI kits, you’ve threw in a nice tutorial to learn and get started. Would appreciate a lengthy tutorial to create just one basic HTML template using the any of the UI kits aforementioned.

    Thanks though. :)

    +1
  • Jenn

    Wednesday, January 29th, 2014 09:24

    1

    This is a great tutorial – I know our users would benefit from reading this, too. UI kits are such amazing timesavers.

    -46
  • Amit

    Monday, February 17th, 2014 01:03

    2

    Great help, indeed. Along with UI kits, you’ve threw in a nice tutorial to learn and get started. Would appreciate a lengthy tutorial to create just one basic HTML template using the any of the UI kits aforementioned.

    Thanks though. :)

    +1
  • Jenn

    Wednesday, January 29th, 2014 09:24

    1

    This is a great tutorial – I know our users would benefit from reading this, too. UI kits are such amazing timesavers.

    -46

Comments are closed.

23.20.43.165 - unknown - unknown - US