Many designers are quickly jumping ship from Adobe Photoshop into the wonderful realm of Sketch. This digital design program for OS X provides better tools for UI design, icon design, and offers pixel+vector support in one program. This has lead to a surge in popularity for freebies released by Sketch designers.
30 Free Web & Mobile UI Kits For Your Collection
Developing a new web design project from scratch is challenging, which is why designers like you and me…
Anyone familiar with the freebie marketplace knows that UI kits are some of the most popular resources for interface design work. I’ve compiled this selection of free Sketch UI kits for websites and mobile apps. Every kit is free to download and should work with any version of Sketch. Feel free to grab anything that catches your eye and see if you can put these interface kits to good use.
Web UI Kits
Websites are still the lifeblood of UI design, and mockups are often a requirement before coding. These UI kits will give you the resources you need to create digital interfaces of beauty and purpose that can be quickly coded into real website layouts.
This purely dark grey/blue UI kit was made specifically for Sketch 3+ and includes common elements like buttons, sliders, dropdowns and switches. Each element also features an on/off state so you can build interface elements with customized interactive states.
Here’s a unique kit that suits a wider audience with a dark and light background style. This kit focuses more on page widgets rather than simple elements, so you’ll find many more obscure items like loading bars and media players.
This summer UI kit is full of buttons, forms, dropdowns, and other very common page elements for enhancing digital mockups. Plus it’s a fully layered Sketch document so you’ll have no trouble making alterations to content as needed.
The Pearl UI kit follows a very simple flat design with basic page elements. Buttons, input fields, accordions, and tabs are just a few of the options at your disposal. If you’re brand new to sketch then this kit might be useful to help you deconstruct how to design your own kit.
This rather obscure freebie works best during the wireframing stage. These layouts are not fully rendered in Sketch, instead offering low-fidelity layouts with static block elements. The colors, shapes, and positioning of these layouts should help every UI designer to better understand the wireframing process.
A very simple UI kit based around the theme of Tesla motor vehicles, this freebie is much more detailed than the rest. You do have access to simple buttons but also have more complex interface items like a detailed table list and a calendar widget.
This is undoubtedly one of the most extensive UI kits you will ever find for Sketch. The live demo page counts 25+ different types of elements from image sliders to checkout forms and user comments. Definitely one of the coolest and most useful Sketch freebie kits you’ll find on the web.
UI designers are often left out of the loop when it comes to frontend frameworks which is why this freebie is a treat. This Bootsketch kit has vector elements for every Bootstrap element in existence. This makes it super easy to create Bootstrap-themed mockups in Sketch without even touching the browser.
This neat UI kit moves away from flat design to embrace the aesthetic of gradients and depth in page elements. It’s a fun kit to use in any project and demonstrates that anything you can do in Photoshop is equally possible in Sketch.
If you’re looking for more alternatives take a peek at this small list of web UI kits below.
Mobile UI Kits
The love for native mobile apps has continued to increase as more people move into the mobile economy. Although app downloads are dropping there’s still a need for quality interfaces for native apps to supplement desktop apps. These free Sketch UI kits will help you design quality mobile apps for all devices while keeping up with differences between resolutions and retina screens.
Apple’s continuing push towards greater innovation pumps out a new mobile OS almost every year. The current trend is iOS 9 and this UI kit features everything you’ll need for native iOS applications.
Salesforce1 is a popular dashboard app for client & customer management. This Salesforce1 UI kit offers all the common elements of their iPhone app for tinkering and reusing their design aesthetic.
Are you currently prototyping a mobile UX for an iPhone or Android application? Then this Sketch freebie will surely help you complete that wireframe with ease. It’s a free way to kickstart your wireframing/prototyping phase on a digital screen.
From Snapchat to Pinterest, dozens of social networks have ballooned in popularity over the past few years. This social UI kit could help launch the next major social app and scale quickly to a wide audience of iPhone users.
This Moon wireframing kit is a great mixture of rendered interfaces with a slant towards wireframing. The kit includes 50 unique mobile app screens that can be adjusted & rearranged for any project. You can use the Moon UI kit for basic wireframing, or for complete UI mockups.
Here’s a dark yet beautiful UI kit based on a travel app for Sketch 3+ users. It is made for anyone who wants to toy around with a air flight or travel mobile app concept.
Photo sharing mobile apps are saturating the market and some apps even include photo sharing features supplementary to the app’s main purpose. So it’s great to have this free Instagram UI kit available for Sketch designers to replicate photo functionality in their own designs. It is a basic iOS photo app UI concept pack.
There are far too many GUI kits to write about in this post, but I can’t leave any good ones behind either. So if you need even more mobile Sketch UI resources take a peek at these alternatives.
- Routes UI Kit
- iOS 7 UI Kit Light
- Uber iOS Wireframe Kit
- Photo Splash iOS UI Kit
- Phoenix UI kit – Vol 1
Find more web design articles here