20 Free UI Kits to Download

Editor’s note: Juan Pablo (JP) Sarmiento is the founder of the ShockFamily (IconShock, DesignShock, and more). He’s also one of the biggest aficionados of design resources I know, curating them in his spare time. In this post, he highlights some fresh UI kits he’s come across recently as well as two free UI kits by DesignShock.

There are inevitable tasks that designers have to face daily, like the constant need to generate new ideas for user interface designs. If there are resources out there that can help, things can become less complicated.

This roundup contains a hand-picked selection of UI kits with different styles and file formats for mobile and web interfaces. All of them are free, fresh, and ready to be downloaded!

1. iOS 9 GUI (iPhone)

These are Photoshop and Sketch templates for the latest version of the iPhone. This kit is by Facebook. It has UI components such as buttons, menus, and whatnot.

iOS 9 GUI (iPhone)

2. Apple Watch GUI for Sketch

This is a useful freebie for any designer interested in working on the new Apple Watch user interface.

Apple Watch GUI for Sketch

3. Trend UI Kit

This free kit is a compact, but very useful, collection of UI elements.

Trend UI Kit

4. Groom UI Pack

Groom UI has a simple and clean style. The UI components are fullly editable with Photoshop.

Groom UI Pack

5. Pages UI Web Kit

This is an excellent set of UI components for website layouts. This kit comes in Sketch format.

Pages UI Web Kit

6. LIQUID: Free GUI Kit

A clean and versatile design kit that has responsiveness in mind. The kit supports many types of web content in different screen sizes.


7. Fashion UI Kit

This UI kit is perfect for e-commerce sites. It has a simple and clean interface. It’s available in Sketch format.

Fashion UI Kit

8. PerfectKit

This is a mobile and desktop UI kit that has a fresh, modern look. PerfectKit comes as a bundle of 20 PSD files.


9. Land.io UI Kit

This is a complete landing page UI kit with a great assortment of elements: video player, pricing table, social card, and more. It’s available in Sketch format.

Land.io UI Kit

10. Unique Design UI Kit

This is a free UI kit that is excellent for web apps. The design will look great on mobile and desktop screens.

Unique Design UI Kit

11. Free Dashboard UI

Dashboard UI is a kit for designers who want to create a clean admin interface. This UI kit can be edited with Photoshop.

Free Dashboard UI

12. UI Kit for Travel Apps

This free UI kit is designed for mobile apps. It has over 50 screens that your next app can use.

UI Kit for Travel Apps

13. Food & Drink UI Kit (PSD + Sketch)

This is a food-themed UI design kit. It’s totally free, and comes in either PSD or Sketch format.

Food & Drink UI Kit (PSD + Sketch)

14. Cardzz iOS UI Kit

Cardzz is a stylishly dark-themed design kit for iOS apps. it comes with 21 PSD screens.

Cardzz IOS UI Kit

15. Elegance iOS UI Kit

This UI kit comes with an attractive design that contains 12 templates. It’s available in PSD and Sketch formats.

Elegance iOS UI Kit

16. Lithium – Free Mobile UI Kit

Lithium is a massive free mobile UI set. This kit has three color themes: teal, amber, and lilac.

Lithium - Free Mobile UI Kit

17. Creative UI Kit

This is a responsive web design kit. It’s designed with a lot of user interface elements that make it easy to quickly mock up your designs.

Creative UI Kit

18. Ink UI Kit – Free Sample

This is just a free sample of the Ink UI Kit – Full Version. It’s available for Sketch and Photoshop.

Ink UI Kit - Free Sample

DesignShock UI Kits

And, last but certainly not least, here are two free UI kits from us, over at DesignShock. Please enjoy!

19. Windows 10 GUI for Mobile and Desktop

Windows 10 brings a new UI with great elements. Our massive kit includes vector files for Illustrator, 180 free icons, and more!

Windows 10 GUI for Mobile and Desktop

20. Flat Style GUI Set

Our flat-design UI kit has 500+ fully editable elements. All shapes are vector-drawn for scalability and flexibility.

Flat Style GUI Set

Read Next

Juan Pablo Sarmiento is the founder of the ShockFamily, a network of sites that includes IconShock, DesignShock, and more. Connect with him on Google+.

These beautiful websites exhibit how typography can drive designs.

50 Web Designs with Awesome Typography

These beautiful websites exhibit how typography can drive designs. In this showcase, you’ll find fascinating and unapologetically bold implementations of typographic elements.


Towards a Universal Mundane


Vince Frost


This Also

Photomap - Chris Wang




Pauline Osmont

Jean-Christophe Suzanne


Kyle Read

Lines Conference



Design Disruptors



Piet Oudolf

Fluff Festival


Rufina e hijas


Moonshine Grill

Palaxy Tracks

In Pieces

Metaverse Mod Squad





Jun Duffy


Rally Interactive

Kittie's Cakes


The Estate Trentham

Day of the Dead

Large Creative


Found them First

Trellis Farm & Garden

Julie Clute and Kurt Elster


Another Pony



Read Next

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

Maps may not seem to be the most glamorous of design commissions but if you're lucky enough to be tapped to design one, these are the ones to use as inspiration.

The World’s Most Beautifully Designed Subway Maps

Designing metro transit route maps is possibly one of the most challenging graphic design jobs one can have. These maps need to be legible, communicative, and almost universal — especially if designing for one of the world’s most visited and travelled cities. If you’ve ever travelled to a foreign city and have had to use their subways, you’ll know how important these route maps can be to getting around.

The subway maps we chose are from some of the world’s busiest cities with extensive subways and rail systems. Check them out and let us know what you think in the comments section. Click on the images to view them in full size.

Chicago, IL – USA


Being Chicagoans ourselves, Chicago’s “L” (short for “elevated”) transit system holds a special place in our hearts. While not entirely “underground,” the “L” offers some of the city’s best views and a truly fantastic way to experience Chicago.

New York City, NY – USA


The New York subway system is perhaps one of the most iconic in the world. New Yorkers will always have a story to tell about it and the rest of the world will always listen intently.

Moscow – Russia


Moscow is often thought to be one of the most beautiful underground systems in the world.

Madrid – Spain


The Madrid Metro is another beautiful underground transit system. It is also one of the longest underground metros in the world.

Paris – France


The Paris Metro is dense. It covers just 40 squares miles with 132 miles of tracks and a whopping 245 stations. With such a complicated network under the streets of Paris, having a fantastic route map is definitely essential.

Tokyo, Japan


Tokyo’s subways are surprisingly easy to navigate despite the intimidating language barrier. This subway route map looks complicated but with punctual trains and an organized subway rider population, navigating through Tokyo isn’t hard at all.

London, England


The London Undergroud or the “Tube” is another fantastically complicated subway system. Thanks to its subway map, however, it’s easy to get from point A to point B.

Berlin, Germany


Berlin is Germany’s capital and its cultural center and it has a subway system to match.

Tell us what you think in the comments below.

When to Use rel=”nofollow”

Assigning the rel="nofollow" attribute to a link informs search engines that the link is commercial in nature, or that it’s a link you don’t endorse.

Links that have the the rel="nofollow" attribute are often called nofollow links.

Just so we’re on the same page, here’s an example of a link that uses the rel="nofollow" attribute:

<a rel="nofollow" href="http://example.com">nofollow link</a>

The concept behind nofollow links came about in 2005, as a way of discouraging comment spam in blogs.

You might already know this if you’re familiar with SEO: One of the factors search engines take into account when ranking a website is the number of other websites linking to it (referred to as the site’s inbound links).

If there are many links from other sites pointing to your site, and those other sites are reputable, then there’s a good chance your site is also reputable.

To artificially boost their clients’ search engine rankings, spammers will try to place as many links as they can on other websites. An easy target for spammers are the “comments” sections of reputable blogs.

To help address the spam issue, the rel="nofollow" attribute was introduced.

The thinking went like this: If comment spammers didn’t get credit for their nofollow links, then they’d be less likely to waste their time posting those links on blogs.

Today, the purpose of rel="nofollow" has evolved slightly. It’s now also supposed to be used on links that are commercial/for-profit in nature. Links that fall into this category are:

  • paid links
  • banner ads
  • sponsored content
  • text link ads
  • affiliate links

The rel="nofollow" attribute started off as a microformat. However, the HTML attribute is now in the latest W3C HTML specification, in section Link type “nofollow”.

Here’s how the attribute should be used in accordance to specs:

The nofollow keyword indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages.4.8 Links — HTML5

So, When Should You Use rel=”nofollow”?

Based on the specs, the two cases in which you should use rel="nofollow" are:

  1. When the link is something you don’t/can’t endorse
  2. When the link is primarily commercial in nature

Let’s talk about these two cases.

Links You Don’t Endorse

A typical example of a link you can’t endorse is one that was placed on your site by someone else.

For example, if you have a blog, the comments on your blog are posted by your readers. Those comments often contain links. It’s not practical to review each and every link commenters post on your site. Using the rel="nofollow" attribute in the “comments” section of your blog essentially tells search engines, “Hey, I haven’t reviewed, and therefore can’t vouch for, any of the links you find here.”

That’s why, by default, WordPress (1.5 and above) automatically sets the rel="nofollow" attribute on user-generated links in the “comments” sections of WordPress-powered sites.

Wikipedia uses the rel="nofollow" attribute on all external links. Wikipedia can be edited by anyone. And because of the sheer volume of content on the site, it’s not practical for Wikipedia to verify, review, and endorse each and every external link posted on their site. So Wikipedia decided to categorically assign the rel="nofollow" attribute on all external links, much like how WordPress categorically assigns the attribute on all external links it finds in the “comments” section.

On Wikipedia, notice how an external link that goes to w3.org — which you and I know is a pretty reputable site — is a nofollow link.

External links in Wikipedia have rel="nofollow"attributes.With Chrome DevTools, we can see that external links in Wikipedia have rel="nofollow" attributes.

On Reddit, new link submissions are nofollow.

On Reddit, new link submissions are nofollow.

What’s interesting with Reddit’s implementation is that when an external link has been voted to the front page of the site, its rel="nofollow" attribute is removed.

On Reddit, front page external links do not have a rel="nofollow" attribute.

Reddit’s system of assigning rel="nofollow" attributes is clever because it’s democratic. Reddit makes the hypothesis that if a submitted link gets the required votes needed to propel itself to the site’s front page, then it must mean enough people have reviewed the trustworthiness of the link, and thus the link’s rel="nofollow" attribute can be safely dropped.

Links That Are Commercial in Nature (Paid Links)

When a link exists on your site primarily for profit, it should be assigned a rel="nofollow" attribute.

Simply put: If you publish paid advertisements on your site — banner ads, text links, sponsored content, affiliate links, etc. — the links going to your advertisers’ sites should be nofollow.

This is one way to discourage any site from trying to buy its way into better search rankings by paying other sites for links.

Why Use rel=”nofollow”?

The rel="nofollow" attribute benefits third-party services most. Search engines, for example, can use the information we give them about links on our site as a clue that certain links might be low-quality, or commercial in nature, or both. They can then use this knowledge to improve the quality of their search results for their users.

So what’s in it for us?

By disclosing which links on our site have been paid for and which ones haven’t been reviewed, we can reduce the chances of search engines penalizing our site for publishing low-quality external links.

It’s reasonable to assume that by diligently assigning the rel="nofollow" attribute on our unverified, untrusted, and paid links we can improve our website’s SEO, and our website’s trustworthiness as a source of quality content.

Learn More About Nofollow Links

Read Next

10 SEO Tips to Remember When Building Your Site

User-Friendly SEO

What Potential Impact Can HTML5 Have on SEO?

Fine-Tuning WordPress for SEO

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

5 Reasons You Need a Design Book Collection

While the design and art industries have quickly skewed towards the digital realms in the last couple of decades, that doesn’t mean printed work is down for the count. On the contrary, there’s just something about feeling a page in your hands and seeing a clear un-pixelated image or smelling the printer’s inks that will always be better than having a tablet or computer. No matter what happens with tech in the future, a real-life book will always have a place in the world.

Design books or art books or coffee table books — as some might refer to them — are especially fantastic. Here are a few reasons why you should start a book collection now!

1) High Production Values

Publishers of design books are notorious for their attention to detail and extremely high production values. Everything from the binding, the paper, the print finishes, and the layouts are all carefully and methodically put together to produce an extremely satisfying work of art.

Of course, sometimes these beautifully produced books come with a matching price tag like this $100, 16-pound Helmut Newton photobook:


but you often get what you pay for.

Also, having access to such beautiful materials is also a fantastic way to appreciate and learn about print design.

2) A “New” Way of Experiencing Your Favorite Designers’ and Artists’ Work

The internet is great. It has enabled us to connect, learn, communicate, and express ourselves like never before — all through our computer screens.

For a lot of us today, the internet is the only way we’ve been able to experience the work of our favorite artists and designers. Having access to art books or coffee table books (while based on more traditional media), however, offers a “new” way of experiencing the work you’ve admired through the internet for so long.

If you’ve never seen a designer’s work in anything but a computer screen, you might want to try getting one of their books.

I’ve never seen a real Ansel Adams photo even though I consider him to be one of the reason I wanted to be a photographer. This book might just be the next best thing.


3) Books Last

If you take care of them, your books can last a very, very long time. Digital resources, on the other hand, can get corrupted or they can fail for no reason whatsoever. This means that work of designers and artists that we all enjoy online on our computers are effectively impermanent. They’re only as good as the hard drives they’re stored on.

Printed works, on the other hand, allow you to appreciate and marvel at the work of designers and artists you admire, indefinitely.

Bought in 2008, holds up extremely well.


4) Inspiration at Your Fingertips

We can do hours and hours of research online and sometimes still come up with no new ideas. However, taking a little bit of time to look at a few books in the office gives us a sudden burst of energy.

There’s just something very stimulating about seeing works of art printed on a nicely done book. Reading a passage, feeling the paper, smelling the inks, and flipping through the pages of a book is an experience you just can’t get anywhere else. After a little while with your design books, your mind starts to race and suddenly you’ve got new ideas brewing in your head.

I bought this book years ago and I still flip through it today.


5) They’re Really fun.

Finally, design books are just fun. They’re fun to have. They’re fun to read; to look at; to talk about. And they often explore new ideas in very concrete and meaningful ways that just can’t be done on any other medium.

The truth is, this article is somewhat of a love letter to the printed word and the printed image. Nowadays, anyone with access to the internet has access to a very large collection of knowledge and  data. With enough of the right keywords, one can gain access to a whole lot of stuff. There’s definitely value in that.

However, a book is a much more grounded object. It exists physically and can be felt and experienced as it is, on its own. There’s a sense of finality to a book. Once it is published, it is done. There are no search engine algorithms; no updates over wifi; no loading times; no revisions. It takes commitment and conviction to publish a book — typos and all. And that really is one of the best things about them.

Tell us about your favorite design and art coffee table books in the comments below.

7 Free Books That Will Help You Become More Productive

Do you want to produce more in less time? These free ebooks contain a wealth of insights, tips, and strategies for achieving high levels of productivity.

Book cover of The Productivity Manifesto

The Productivity Manifesto

By . 24 pages.

In this short ebook, Nathan Barry — a designer, book author, entrepreneur, and Six Revisions contributor — discusses the productivity habits and techniques that have enabled him to focus and create "on another level".

Book cover of Focus


By . 121 pages.

From the book’s description: "Focus is about finding simplicity in this Age of Distraction. It’s about finding the focus you need to create, to work on what’s important, to reflect, to find peace."

Book cover of Mind Hacking

Mind Hacking

By . 112 pages.

Mind Hacking uses analogies and concepts from computer science to help us analyze and enhance our way of thinking.

Book cover of Productivity: How to Get Your S*!% Done

Productivity: How to Get Your S*!% Done

By . 47 pages.

This free ebook is a compilation of short essays about being productive. The essays are written by bloggers.

Preview of GTD For Hackers

GTD For Hackers

By . 18 pages.

Getting Things Done (GTD for short) by David Allen is a bestselling book about a personal productivity system developed by the author. GTD For Hackers, an online book by Lars Wirzenius, a self-labeled "computer geek", is a guide on how the GTD system works.

Book cover of Getting Real

Getting Real

By . 92 pages.

This free ebook discusses a philosophy for building web apps more effectively. However, I believe that the insights, concepts, and techniques found within this book can be applied to things beyond web app development. For me, Getting Real is a methodology for working productively. It’s about focusing on the right tasks and priorities. It’s about being aware of the things that waste our time so that we can improve our way of working.

Book cover of The Little Book of Contentment

The Little Book of Contentment

By . 112 pages.

From the book’s description: The Little Book of Contentment is "A guide to becoming happy with life & who you are, while getting things done."