App Design Resource Sheet

Writing code is just a part of the app development process. Before you start writing code, you
have to come up with the nice app UI. It really depends on your budget and whether you work
for a company or build an app on your own. If you have a large budget, you probably hire an
app designer to help you take care of the app design, which is great.

However, it is not always the case. You may work as an indie developer that you have to take up
the design role when building an app. Or your team don't have a UI designer. With a limited
budget, you can't outsource the app design but you have to create the design by yourself.

How can you make the app look great?

How can I create the app icon?

Where can I find free icons for my tab bar?

How can I design great color combinations?

Once you take up the design role, you will face a lot of challenges. Thanks to the open source
and design community out there. Now there are quite a lot of useful design resources at your
disposal.

In this app design resource sheet, you will find a collection of links, services and tools that help
you design a better app UI.

Note: It's always good for developers to learn design. However, if budget
is not your concern, I highly recommend you hire a UI/UX designer or
outsource your app design. So, you can focus on developing your app.
App Design & Prototyping Tools
In the beginner book, I have a brief introduction of app prototyping. Sketch is definitely the
recommended design tool for creating the UI design. It is so easy to pick up even for
developers. The tool doesn't support app prototyping natively, but with plugin like Craft
(https://www.invisionapp.com/craft), you will be able to build an interactive app prototype.

Other than Sketch, companies such as Adobe, has released app prototyping tools for designing
high fidelity prototypes. Here are some of the tools you can check out:

Adobe Experience Design (http://www.adobe.com/products/xd.html) - Adobe XD (short

for Experience Design) is Adobe's new UX design and prototype solution. It is an integrated
design tool that supports both design and prototyping.
Figma (www.figma.com) - If you work in a team, you will probably like Figma. Unlike Sketch,
it is a browser based design tool. Therefore, it supports Windows, Mac or Linux. The tool is
particularly built for team. You can easily collaborate with fellow designers or developers
to create the design.
Flinto (www.flinto.com) - Flinto is another design and prototyping tool which works on Mac
only. Adobe XD provides basic animated transitions. If you need to create more
sophisticated animations, Flinto is the tool that may help you.
Principle for Mac (www.principleformac.com) - Designed for Mac, Principle is another
prototyping tools that lets you craft highly interactive app prototypes. With its timeline-
based control, you can easily create more precise and robust animations.
Proto.io (www.proto.io) - Similar to Figma, Proto.io is a powerful web based prototyping
tool. You can easily create mockups and prototypes by using its built-in standard
compenents.
Marvel App (www.marvelapp.com) - Marvel works great with Sketch. Similar to other
prototyping tools, Marvel lets you rapidly prototype a mobile app.
Invision App (www.invisionapp.com) - Invision is the creator of the Craft plugin, which
empowers designers to create interactive prototypes in Sketch. On the other hand, the
company has its flagship web application for designers to upload your Sketch design files
(or static images) and transform them into workable prototypes.
Protopie (www.protopie.io) - Protopie is a rather new prototyping tool, created by an
interaction designer at Google. Compared with the prototyping tools above, one advantage
of Protopie is that it lets you create interactions which involve two or more smart devices.
For example, you can prototype a chat app and send/receive messages between devices
without writing a line of code.
Designer/Developer Collaboration Tools
Your designer (or you) finished the UI design and passed you the images of the final design.
Now you are going to implement the design in Xcode. The question is you can't precisely
implement the UI design in Interface Builder or in code. There are a lot more you need to know
before implementing the design such as the font type, style, size of the UI components, etc. The
designer should provide developers with a visual design specifications to explain all these
information.

The design specification can appear as a document, but it would be a tedious task to create the
specification without the help of some modern design tools. Zeplin, Avocode and Sympli have a
similar purpose, which is to simplify the communication and collaboration between developers
and designers. They takes in a Sketch file, analyzes it and turns it into a powerful design
specification and guideline in minutes. While all these three tools cost you a fee (subscription /
one time), they can streamline the development process, and save both developers and
designers hours of time.

Zeplin (https://zeplin.io)
Avocode (https://avocode.com/)
Sympli (https://sympli.io/)
If you are looking for a free tool that generates the specification of the UI component, Sketch
Measure is a plugin you have to check out. Once you install this free plugin in Sketch, you can
easily add some markers in the design file.

Sketch Measure (https://github.com/utom/sketch-measure)

Assuming you have implemented the design in Xcode, how can you compare the app's UI with
the one created by the designer? Flawless (https://flawlessapp.io/) is an app that lets you
perform a real-time comparison between the implemented design and the actual design. You
can pass your design files (e.g. Sketch) to the app and it will overlay on the app UI running in the
iOS simulator. You can then compare pixel by pixel to see if your implemented UI is exactly the
same as the actual one.
Icons
As an indie developer, one thing that bothers you is where can you find some free icons for
your app design. Thanks to all the designers out there that contribute a lot to the community.

Here is a list of websites to check out. Most of them are free resources. Even if they are paid, it
won't cost you a lot. If you find the icons useful, why not support their work?

Feature icons (https://feathericons.com)

Free Icons by First-Class Designers (https://iconstore.co/)
Free cute icons with personality (http://www.toicon.com/)
Ego icons (http://ego-icons.com/)
iOS 11 Glyphs (https://icons8.com)
Evil Icons (http://evil-icons.io/)
Streamline Free iOS Icons (http://streamlineicons.com/free-icons-bigger-cta.html)
Material Design Icons by Google (https://github.com/google/material-design-
icons/releases)
Swifticons (https://www.swifticons.com/)
A search engine for 170,000+ vector icons (http://www.flaticon.com)
An open source icon pack made by PrestaShop ()
Another search engine for free and premium icons (https://www.iconfinder.com)
Futuramo Icons (https://futuramo.com/apps/icons)
Capitalist Icons (https://pixelbuddha.net/capitalist)
Icon Set Resources for Sketch (https://www.sketchappsources.com/category/icon.html)
Auto generated icon font library for iOS (https://github.com/dzenbot/Iconic)
The Noun Project (https://thenounproject.com/)
Color Schemes

As a developer without a good design skill, choosing the right color and a pleasing color scheme
for my app have been always a challenge for me. If you are like me, these excellent tools listed
below will definitely make your job a little bit easier. If you are in doubt, choose a flat color as
the main color and keep the background in white.

Common flat colours for UI (https://flatuicolors.com)

Color Hunt for inspirations (http://www.colorhunt.co)
Color Palette Generator (http://www.degraeve.com/color-palette)
Curated color palette inspiration
(https://www.webdesignrankings.com/resources/lolcolors/)
Color palettes curated by a designer (https://colordrop.io/)
Official colors of the world's biggest brands (http://brandcolors.net/)
A data-driven collection of color palettes (https://klart.co/colors)
A color contrast generator (http://jxnblk.com/hello-color/)
Color Farm, color inspiration from Dribbble shots (http://color.farm/)
A simple color selector (http://color.koya.io/)
Graphics

Okay, I know. Other than icons, you need some graphics for your app. Here are a few website
that provides both free and premium graphics:

Premium and free graphics (http://pixeden.com)

Free Sketch and Design resources (http://freebiesbug.com)
Tasty design resources for both personal and commercial use (http://graphicburger.com)
Free/Paid Stock Photos:

What if your app needs to some high quality photos to use in your own app? Here are a list of
websites that provides tons of beautiful photos. Most of them are free to use in both
commercial and personal projects.

The Stock (http://thestocks.im/) - A one-stop website that you can find free stock photos,
plus colors, icons, mockups and more.
Unsplash (https://unsplash.com) - Free, "do whatever you want" high-resolution photos
Magdeleine (http://magdeleine.co) - A free hi-resolution photo every day
StockSnap (https://stocksnap.io) - Beautiful free stock photos
Pexels (http://pexels.com) - Pexels are licensed under the Creative Commons Zero (CC0)
license. This means the pictures are completely free to be used for any projects.
Negative Space (http://negativespace.co) - Same as Pexels, all the photos are free to use
for any legal purpose.
Gratisography (http://gratisography.com) - Free high-resolution pictures you can use on
your personal and commercial projects.
Skuawk (http://skuawk.com) - A large collection of free and artistically loud photos
VisualHunt (https://visualhunt.com) - A search engine for stock photos. Most of them are
free to use and under CC0 license.
Good Free Photos (https://www.goodfreephotos.com) - A large collection of free stock
photos but the quality varies.
Tookapic (https://stock.tookapic.com/) - A paid service but all are high quality photos that
are ready to use in commercial projects.
App Design Inspirations

Need some design inspirations for your next app? There is no shortage of resources for you to
explore other people's design. Nearly all works draw inspiration from the work of others. That
said, you should not copy someone else's work directly. Here is the list of websites where you
can find tons of app design inspirations:

Pttrns (http://pttrns.com) - Best resource for app design inspirations

Mobile patterns (http://www.mobile-patterns.com) - A collection of the mobile app
screenshots
iOSUp (https://ios.uplabs.com) - UpLabs iOS curates the best of iOS inspiration, tools and
downloadable resources.
Dribbble (https://dribbble.com) - Dribbble is a community for designers to share their
work. Just search for "app" to see the app design created by others.
Behance (https://www.behance.net) - Similar to Dribbble, Behance is another community
website for designers to s howcase their creative work. Again, search for "app" to explore
other designers' work.
Muzli Design Inspiration (https://medium.muz.li)
App Animations (http://www.appanimations.com) - A collection of iOS animations to
inspire your next project
UI Movement (https://uimovement.com/) - Featured the best UI designs every day
Sketch App Resources (https://www.sketchappsources.com/category/mobile.html)
UI Design Kits

Still have no idea how to design your mobile app? These UI Design Kits will save you time from
creating the app design from scratch.

Tethr by Invision (https://www.invisionapp.com/tethr) - One of the most complete UIKIt for

designing iOS apps and it is free for download.
Do by Invision (https://www.invisionapp.com/do) - Another free UIKit from Invision
UI8.net (https://ui8.net/category/ui-kits) - Over 300 polished UI Kits for your mobile project
but most are required to pay.
KK UI Store (http://kkuistore.com/) - Include both free and premium UI Kits.
Elegant (https://pixelbuddha.net/freebie/free-mobile-ui-kit-elegance-ios) - A UI KIt which is
best for shopping and ecommerce apps