We decided to share goodies for those of you who work with mobile UI design or want to start. My co-founder and developer, Ahmed Sulaiman, has learned design from scratch. You can do that as well! Just check his great guide on the first step when beginning your design journey.
Prepared UI elements, screens, components or entirely app concepts, packed in a single UI Kit is a great option to begin with. You can modify any of the iOS UI Kits to fit your needs and goals. All components and screens are easily editable, like navigation bars, buttons, login forms. You probably already work in Sketch App, so having most of UI Kits in sketch format is a good bonus for you. To have more diversity, we also added some great UI Kits in Figma, Adobe XD, and Photoshop formats.
All 35 UI Kits here are free and made with a focus on iOS platform. We used some of them personally and others were carefully handpicked. To make your design journey easier, we also mentioned great learning resources on the way. Take a look at all these goodies!
iOS 11 UI Kits
It’s a comprehensive Sketch kit tailored to Apple’s Human Interface Guidelines (HIG). It contains text styles, resizable nested symbols and even a set of dark theme components. The naming convention of each component follows Apple Developer Documentation. You can easily customize the colours, icons, and content as you wish and everything will be fully adaptive!
Pro Tip: If you need guidance in learning design for iOS 11, look at Design+Code book. It has 44 hours of videos, 100 000 words & images and dozens of examples for Swift 4 app. It will definitely teach you how to work with Sketch and Xcode. Kudos to Meng To!
A huge collection of iOS 11 core components and over 60 (x2) selected screens. As well as a previous UI Kit, this one is done according to Apple’s HIG and has designs for iPhone X & iPhone 8. Sketch files are made with nested symbols and contain text styles with resizing options specified. Available for Sketch.
iOS 11 GUI for Sketch App
This kit contains iOS 11 designs, including 22 screens, 10 keyboards, fully vector elements and 100% vector shapes that are fully layered, organized and grouped. It’s an excellent resource for anyone starting a new design project for iOS 11.
A comprehensive set of files for Origami, Sketch & Photoshop providing you all needed to get started with iPhone X app. The Facebook team also created Origami components that mirror behaviour of the most important UI elements in iOS 11 as well as recreating elements found in the public release of iOS 11.
If you learning or working with Adobe XD, you will enjoy this little iOS 11 UI kit. Adobe XD kit includes 12 different screens, featuring some default iOS 11 designs like the Control Panel, Lock Screen, and several AppStore screens. Not as big as all previous ones but still useful.
Pro Tip: Check Apple’s documentation on Human Interface Guidelines and Apple UI Design Resources. You will learn a lot about Apple design principles, app architecture, user interaction, visual design and much more!
UI Kits for social apps
Bronze UI Kit
It’s a clean and customizable UI Kit with signup, login, user profile, blog screens and templates for articles. You will love its adventure colour scheme, shots and typography. Available in Photoshop format with free Google fonts. This kit is not purely for iOS platform, but its design is so vibrant!
Snap UI Kit
Fresh and colourful mobile UI Kit for photo sharing app, available in Sketch format. It includes over 50 screens and a lot of beautiful elements, from buttons, search bars, sliders to camera elements and notification bars. This kit can be a huge time saver if you are planning to implement a photo app. Check it out!
Moon heart UI Kit
It’s Adobe XD kit for an image sharing app. The kit has 23 app screens with different categories: Login, Register, Boost Message, Slideshow, Social images explorers, Gift, Vote and much more. The kit is very colorful and optimized for iPhone X. Oh, and the Kit name is so romantic :)
Pro Tip: Read guides on how to design for iPhone X (without an iPhone X) and Designing for iPhone X. After reading these, you will feel much more confident when working with iPhone X designs.
Travel UI Kits
Travel App UI Kit
Travel-inspired UI Kit with 15+ well-organized mobile screens for login, county view, place information, photos, map and much more. It’s packed with a clean design and stunning photos of your next dream destination. Available in Sketch format.
Navigo UI Kit
It is UI Kit for the transportation & travel app with social profiles. I loved its color scheme, nice travel photos and overall great looking designs. Navigo is a huge kit with 60 screens organized into 6 categories: Main App, Onboarding, Activity & Profiles, Stats, Info. Navigo is optimized for iPhone X resolution and available in Adobe XD format.
Travel Guide App UI Kit
The app concept has been designed for the iPhone X to showcase a better use of Location Filter and Travel cards. It’s not typical UI Kit but rather a real app concept, which is available for personal use. It has more than 10 brightly-design screens and animations, all prepared for .sketch format.
Pro Tip: All these travel UI Kits are so colourful! So let’s talk about colours in UI Design. It would be nice to check how to use them properly in your new app. Prototypr.io tutorial and Erik D. Kennedy’s guide will be great starters for you.
Travelisto UI Kit
Travelisto is representing an imaginary travel app with over 22 iOS screens designed in vector format. Available in White and Dark versions for Sketch App.
Harmony UI Kit
Location-oriented mobile app concept to find, share and rate hiking places around you. Harmony includes over 10 iOS ready core screens designed in vector format and based on symbols. While it’s not so big, it’s made using a pretty cool color scheme. So worth checking out.
Pro Tip: After you read about best practices to use colours, you might need some tools to work with it. These are great colour pickers: AI picker, Pigment picker, picker from popular products on Product Hunt, the latest & most popular colour palettes from Dribbble and macOS picker.
Food recipes UI Kits
Delicious UI Kit
UI Kit for a food recipes app. It includes 11 pixel-perfect screens in Sketch format. The meals in this UI Kit are so tasty! Actually, all UI kits in this category are simple, nice looking and can be used for your first learning project.
iOS UI Recipes App Kit
Nice iOS UI Kit with 11 screens for the recipe or cooking app (prepared for Sketch format). Simplicity and minimalism at its best!
1357 Recipe App UI Kit
Designed with user experience in mind, this elegant UI Kit consists of 25 basic screens. It has not only cooking recipes screens but also layouts for Menu, Search, Community, Quotes & 9 more pages. Available in Sketch format.
Edacious – Food App UI Kit
Edacious has an interesting story. It was a paid project but the client decided that he doesn't need it anymore. So creative designers from Bangladesh decided to make a free UI Kit from it. They shared 1 landing page and 18 iOS screens, that forms a food-inspired mobile app. Available in .psd format.
Pro Tip: You probably know that every meal consists of the basic components, as well as a good design consist of the basic elements. Please read this guide on the design fundamentals: type, spacing, visual hierarchy, colours.
Chat & Messenger UI Kits
Mochi — Chat UI Kit
Cute UI Kit for mobile chat interface that contains screens for logging in, signing up, scrolling through chat lists, full list of contacts and much more. Available in Sketch format.
iOS WeChat UI Kit
This UI Kit provides many assets, icons, screens, and interactions for Chinese premier messaging app: WeChat, or Weixin. Provided in both English and Chinese, with support for main 4 tabs (Chat, Contacts, Discover, Me), official account pages, Moments, Profile, QR Code and more. So it’s a really unique Sketch kit!
Pro Tip: You probably have noticed that almost all UI Kits are done for Sketch. Indeed, Sketch App is an industry standard for iOS app design. If you are totally newbie designer, you can learn how to work with Sketch here: Sketch App Crash Course, Sketch own documentation and already mentioned Design+Code book. Also, A Step-by-Step Guide for Starting a New App Design Project in Sketch post is pretty informative.
Telegram iOS UI Kit
Did you know that Telegram is a very popular messaging app in Russian-speaking countries? So if work with these markets and need to make Telegram bot, this UI kit will be very helpful. It includes 6 Telegram app views: Contacts, Contact Search, Contact Search - Query, Bot Welcome, Charts, and Dialog (available in Sketch format). Also, it comes with extensive Symbols.
Ego – Messenger UI Kit
Ego is not purely iOS UI kit, but it’s very clean and useful if you need to work with Russian copy. All texts there are done for a Russian-speaking chat app. The kit has 20 well-designed mobile screens, minimalistic icons, and cool colour pallet. Prepared for Adobe XD.
Messenger Platform Design Kit
Official UI Kit for Facebook Messaging bot, which includes components for both conversational and GUI-based experiences. Available for Sketch.
Pro Tip: Facebook design team also has an enormous website with lots of useful design resources like Desktop Design Kit, practical guides, Sound Kit and tutorials. And folks from UXPin publish many advanced and free e-books, which you can get here.
eCommerce UI Kits
Minimal Chic Kit
It’s a stylish mobile UI Kit designed for iOS. It’s perfect for anyone looking to create an e-commerce mobile app as it has views for product category pages and product pages, as well as the usual account settings and login screens. Available in Adobe XD format.
Portal freebie
A sample of a mobile portal app built for Sketch. It has a focus on big, bold heading typography and is visually stunning when paired with full-screen background images. An awesome little freebie!
Pro Tip: If you need a lot of photos & visuals for your ecommerce app, check these free photo-stock sites: Unsplash, Burst and AllTheFreeStock, which has free photos, mockups, sounds!
Wilhelm iOS UI Kit
Customizable UI Kit, which containing six categories: Walkthrough, Sign in / Sign Up, Menu, Reading, ecommerce, Media player. It has various Sketch screens, which will suit both ecommerce mobile project or social app.
Helen UI Kit
Helen is a professionally designed iOS ecommerce UI Kit for Sketch and Photoshop. All elements well organized into 11+ high-quality screens. Perfect fit for a fashion clothing app.
Mcommerce UI Kit
One more ecommerce UI kit with 120+ screens. As makers mentioned, Mercatus was inspired by 1980’s casual culture, European designer clothes and modern minimal aesthetics. The Sketch kit looks very stylish and clean. So you definitely can use as inspiration for your next ecommerce app.
Pro Tip: If you are working with ecommerce app, you would enjoy UX insights from Baymard Institute. They publish excellent free researches on everything around ecommerce design: navigation, search, product pages, checkouts, mobile ecommerce & more.
More cool UI Kits
iOS 11 Place UI Kit
If you’re planning to make ARKit mobile app, check this funny UI kit done by our good friend Volodymyr Kurbatov. It contains 22 iOS 11 screens and vector icons (sample free version). Place Kit has everything you might need: lists, catalogues, maps, tips and all types of camera views for every stage of AR experience (such as scanning, placing, and interacting). Made in .sketch format for iPhone X resolution.
Movies App UI Kit
Colourful movies based iOS UI Kit, which includes over 30 screens with fully customizable layouts and layers (for Sketch). It is designed for iPhone X and available both in English and Chinese. Pretty good start for your movie app!
Elements: iOS UI kit by Sketch
Designers at Sketch made an amazing job! Their iOS UI kit contains five different themes, 35 templates and more than 175 Symbols. This kit has all needed Sketch screens for Food, Social, Music, Photography, and Travel iOS apps. Everything is easy to customize, from colors to Symbols and beyond. This kit will definitely help you speed up your workflow!
Holo Music Dark and Light Kits
It’s very colourful and modern UI kit for a music app, done in dark and light themes. The free version has screens for a playlist and a player, available in Sketch format. Not so huge but nice-looking :)
Wonep Calling App
Pretty cool UI Kit of a complete iOS app for making international calls. Sketch file includes over 30 unique screens and several UX flows: Onboarding, Recent Calls and Contacts, Dialing, Billing, Selecting Favorites. It also has a Principle file with animation to clarify the user experience through the app.
Banking UI Kit
Neat banking themed UI kit for Sketch with 50 screens, ready to prototype templates, dozens of icons and buttons. It looks very fresh & clean and will be a great starting point for anyone wanting to create an online banking experience.
Personal Finance UI Kit
I loved playful style of this finance UI kit. The app concert covers managing your income, finding ATM’s near you, sending money to family & friends and many more. It’s Adobe XD UI kit with 40+ screens for iPhone 6,7 and X layouts.
Real Estate App UI Kit
Very clean UI Kit with 25 artboards organized in 8 pages and categories: Onboarding, Sign In, Permissions, Home, Discovery, and Posts. Available in Sketch format.
Pro Tip: As the final tip, please get the taste of design thinking: read classical design books, articles and blogs. Ahmed Sulaiman made a great beginner reading list for you in his guide. As must-read design blogs we will recommend checking Prototypr.io Medium blog, UX Collective, Smashing Magazine, HeyDesigner feed and Nick Kolenda’s Psychology & Marketing blog.
I hope these UI Kits and tips will make your work easier or even inspire you to start learning mobile design. You can also get more design freebies at such awesome resources:
Keep learning and making new things!
If you enjoyed this article, check out Flawless App Stories for more.
This post was originally published on Lisa’s Medium profile.
