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

February 05 2014

14:00

25 Amazing Flat UI Kits to Use in Your Next Design

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.

After some time of searching and selecting, 1stwebdesigner.com has compiled these 25 beautiful UI kits for you to use. These 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

Featherweight UI

flat-ui-kits-and-forms-featherweight

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

Conclusion

These UI kits are made for the average designer who works alone or with a small team to save time. Now if you want to accelerate your designing stages, you will be given more time to work on more projects, which, in turn, will yield favorable results.

Now, after browsing these 25 Flat UI kits, what is your favorite? Why? Let’s talk about it.

January 29 2014

14:00

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

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.

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