Jun 06 2011

20 Free Top Shelf UI Kits for Web Designers

Advertisement

When it comes to web design, the UI elements that are included can, at times, make or effectively break (in more ways than one) the overall piece. Compromising the aesthetics and even the functionality of the design rendering it virtually useless. So we have to choose the UI elements carefully. Too subtle, and some users may not pick up on them. Too bold, and you risk compromising the fine balance between elements that can really tie the entire piece together.

So today we have brought our web design readers a little treat. We have collected 20 top shelf UI kits that can help you add that special touch of class to your web design projects. All of these fantastic kits are available for free for both personal and commercial use. Most of the downloads consist of layered psd files unless otherwise noted.

Get Your Kit On!

Got Wood UI Design Elements by Tony Thomas

UI Kit by Raj Ramamurthy – The link will take you to the comment where you can download the UI kit. The kit is almost entirely CSS (only two small images are used)

Black UI Kit by Alex Patrascu

Moonify UI by jlofstedt

Black UI Kit by Jonathan Moreira

Fuel UI Design Kit by Jeff Olson

Snow Modern UI Kit by MediaLoot

Web Elements by Dillen Verschoor

Dark UI Element Set by Ryan Forgan

Sepia GUI Elements by takuji ikeda

Light UI PSD by Matt Wadsworth

Simple UI Elements by Adrian Pelletier

Spring GUI by Jon Ovander

E-Commerce Steps UI by Mateusz Dembek

Web Kit Interface Layout Pack by Gianluca Giacoppo – Comes in 6 colors (blue, yellow, gray, green, red and purple)

Modern Web UI Set by Dimi Arhontidis

Soft UI Kit by Design Kindle

UI Kit by Dany Duchaine

Big Block UI by Adrian Pelletier

A Hand Coded Designer CSS UI Kit – Another CSS kit using HTML5 and CSS3

(rb)

You might also be interested in the following articles:

About the Author

Robert Bowen is an emerging author, celebrated podcaster and poet, and most recently the co-founder and imaginative co-contributor of the creative design and blogging duo at the Arbenting and Dead Wings Designs.

Comments and Discussions

  • Ryan Forgan, 06 June 2011

    Thanks for including my Dark Purple Ui set :)

    This is a very nice collection and i hope to make more clean light designs,thanks

    • Robert Bowen, 06 June 2011

      Glad that we could feature it! Awesome work!

  • Nathan, 06 June 2011

    Very nice collection! Moonify UI by jlofstedt is definitely my favourite, great work.

  • Mateusz Dembek, 06 June 2011

    E-Commerce Steps UI by PixelsDaily – This ui is not made ??by PixelDaily – just by me ;) ! Please change this!

    • Robert Bowen, 06 June 2011

      Thanks for the heads up, Mateusz (not to mention the awesome work). It has been changed. ;)

      • Mateusz Dembek, 06 June 2011

        Thanks Robert :)

      • Robert Bowen, 06 June 2011

        No, I thank you. I completely overlooked the icon on the site indicating who made it. It wasn’t until seeing your avatar here on your comment that I recognized the icon on PixelsDaily for what it was. :)

  • Justin, 06 June 2011

    This is a very handy resource, especially for the less design orientated web developers among us!

    I like the E-Commerce Steps UI form validation styles.

  • Mason Hipp, 06 June 2011

    Hey Guys,

    Thanks for including so many MediaLoot resources on the list! Freebies are pretty awesome :-)

    Also, in case anyone is interested, the “Got Wood” UI kit at the top is designed by Tony Thomas.

    Cheers,

    — Mason

    • Robert Bowen, 06 June 2011

      Thanks, Mason. MediaLoot certainly has some great resources!

      Also, I appreciate the name of the designer. I looked around on the site but didn’t see it anywhere. I’m glad you dropped that by!! :)

  • nik, 06 June 2011

    Uhm, Scrollbars?

    • Robert Bowen, 06 June 2011

      Yup! And buttons, and progress bars, and menu elements, oh my!

  • Dimi, 06 June 2011

    Thanks for including my Modern web UI kit hope you guys find it useful! Cheers!

  • George Dina, 07 June 2011

    Thank you very much for sharing these resources.
    As always, you on noupe are awesome.

  • appsease, 07 June 2011

    this is really cool, heaven for me

  • inspirationfeed, 07 June 2011

    Great collection, wish our UI PSD we recently published would be mentioned.

  • Robert Kleffner, 07 June 2011

    Really great stuff here, I’ll definitely think about using some of these in my future projects. Much credit to all the great designers.

  • Crowdfinch, 08 June 2011

    I’m impressed very informative.thank you for this blog.

  • Mario, 08 June 2011

    Any suggestion what UI kit should I use to design a social network for travel? Thanks

  • Paul, 16 June 2011

    sick, thanks!

  • Bindi, 17 June 2011

    Nice collection! and very useful.. thanks

  • darryl brocklesby, 17 June 2011

    Been looking for these sort of UI for ages and then you get them all on one website

  • Sarah Meares, 24 June 2011

    These are beautiful. Thanks for the time-savers! Great work everyone.

  • alex, 27 March 2012

    VERY NICE BUT, HOW DO YOU INSTALL THEM………..

  • Jack, 10 April 2012

    thanks for this share.
    i like the silver and red one.

  • Robert Bowen, 06 June 2011

    ;) Gotcha! Not sure how I missed that, but I appreciate it. Taken care of.

    And thanks for the awesome set!

  • Robert Bowen, 07 June 2011

    You save the images you want to use from the PSD file, upload them, and point to them in your CSS. If you need a more in depth breakdown, then you are going to need a tutorial to glance through. :)

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form

search form
 
image description image description