1) The document provides tips for designing mobile apps that are beautiful and user-friendly, covering topics like idea conception, user research, navigation design, interface design, accessibility, and testing. 2) It emphasizes the importance of understanding user needs through competitive research and usability testing, as well as employing best practices for navigation, visual design, animations, and empty states. 3) The goal is to make apps that are intuitive, engaging, and help users achieve their goals in 3 steps or less through a focus on good UX principles during the design and development process.

1. #RCApps
How To Make Beautiful
Apps People Will Love

2. Table of Contents
Idea
Research
Flow
Interface Design
Accessibility
Testing and Feedback

3. Introduction
Whether it’s sending an email, creating a reminder, playing music, or watching a video, a good
app makes the process quick, easy and fun.
With over 2 million apps in the App Store, design, usability, presentation and performance are
the key components to standing out from the crowd.
This guide will give you the tips, tricks and resources to make a beautiful app people will love.

4. Idea
Conception of your app
It all starts with an idea. New or old, your idea
is going to help make something easier for
someone.
As a developer, you need to identify the
primary goal of the app (your #appgoals) and
stick to it.

5. Research
Check if there are other apps similar to what you’re building. Download
these apps, try them out and see what you like/dislike about them. Pay
attention to the App Store listing and note the screenshots, description,
language, and cost. Think about what would make you want to
download that app - these are likely the same things users will notice
about your app.
Once you’ve downloaded the app take notes on your experience with it.
Here’s some key elements to focus on:
● Launch icon
● Splash screen
● Color scheme
● Fonts
● Icons
● Help screens
● Navigation
What works? What doesn’t? Write everything down and make a master
list of dos and don’ts. Look at reviews in the App Store and see what
people are saying about that app. Fortunately (or unfortunately?) app
users aren’t shy about vocalizing their feelings. Now that you have your
master list you have a frame of reference to check your app against.

6. Flow
With your #appgoal clearly defined, you need to map out
the actions a user has to take in order to achieve the goal.
Your app might have multiple goals, but just focus on the
primary goal to start with.
A good app enables a user to achieve the primary goal in 3
steps or less (unless you’re making a strategy gaming app!).
Identify what these steps are and create the navigation
flow.
Important Note: Do not confuse navigation with actions.
What’s the difference? Primary navigation items are tied to
a screen, whereas actions are tied to things you can do on
that screen or within specific elements of the screen.

7. Interface Design
A good interface is more than just a pretty, colorful layout. It can be simple and plain, as longs as it’s very user friendly. What
should you focus on?
● Navigation bars
● Tab and search bars
● Activity views
● Collections and controls
● Like buttons
● Pickers
Make it perfect by referring back to your master list to identify interface elements that you like versus what you don’t. Seek
inspiration from different apps to see how they create components and datasets. Inspired UI and Pttrns are both good
resources for examples of nicely designed components like those listed above. For examples of simple, yet elegant apps,
check out Kindle and Spark.

8. Color Scheme
Colors play an important role in giving your app a
personality. Colors evoke emotions and, when paired right,
can create a sense of harmony. Don’t shy away from using
bold colors - even for business or productivity apps - as
long as you don’t overdo it. Square Cash, musical.ly, Yahoo
mail and Clear are some of the popular apps that use
colors that most developers would typically avoid.
It is important to have a substantial contrast between your
background and text colors, as well as between the
elements using primary or secondary colors. This will
ensure better readability and also gives your app a clean
look and feel.

9. Color Scheme(continued)
Primary
Your primary color is the base color you’ll use for elements that are persistent throughout your app, such as the navigation and status bars. Oftentimes
this is your brand color and helps users easily recognize your app’s screens by association, like with the Facebook and YouTube apps. Your primary
color is also often used on calls to action, such as buttons or the tab bar.
Accent
Accent or complimentary colors help define secondary actions and are also often used for adding style highlights.
Supportive
Certain types of apps will also require tertiary colors to indicate different states of a particular action, element or screen. As a rule of thumb, red
denotes failure or error, and green denotes success or completion. While you might choose to use different shades of these colors, do not veer away
from them completely. Users associate these colors with good or bad actions, and while using different colors might make you stand out, it most likely
won’t be in a good way.
One of the most important aspects of choosing a color scheme it to make sure the colors you choose compliment each other. There are tons of
resources to browse color palettes, including these three popular options: Adobe Color, Color Lovers, and Coolors.

10. Typography
Font plays an equally important, if not
bigger, role than colors in providing an
enjoyable user experience and
enhancing the accessibility of your app.
Fonts help set the tone of your app and
also help associate your product with
your brand and style. For example,
overuse of bold and capitalized letters
can create an unpleasant experience
(imagine an app “yelling” at you with
words in all caps). On the other hand, all
lowercase letters could make the
experience feel unfinished or juvenile.

11. Typography
When choosing your font, it’s best if you
find a font family with multiple font
weights and options so you can easily
keep your style consistent. If you’re
married to a font that doesn’t have
multiple options, look for font pairing
options that go well with your primary
font. Whether you’re using one font or
several, make sure your font size, styles
and weights are consistent for similar
elements throughout the app. Your
navbar title, buttons, labels, and text
should be consistent from one screen to
the next for a clean user experience.
As always, make sure you’re using fonts
with proper permissions/licenses like
OFL - Open Font License - that permit
embedded use for apps etc., and check
the terms of use for the specific font
that you intend to use. Font Squirrel and
Google Fonts are good sources to find
fonts with these types of licenses.

12. Custom Icons
Icons help users quickly identify and make associations with
elements and actions. Using icons for common actions, such as
“delete” or “back”, as opposed to plain text, makes it easy for
users to quickly identify the intention of an action item.
However, it’s also good to have a label next to, or inside of, an
icon if it isn’t completely clear what its purpose is.
IOS provides a standard set of icons you can use, but, more
often than not, you’ll find that you need some icons beyond
what you get in the standard set. You can get these with third
party icon packs, but make sure you keep a close eye to them to
ensure consistency, especially if you end up buying more than
one pack. Icons8, Graphicriver, Creative Market and stock
photography websites are all great resources for good icon
options.
Interface Icons

13. Navigation
Your navigation can be flat/linear, hierarchical, or
content driven based on your type of app and the
intended user flow.
Flat Navigation
Flat navigation is ideal to represent all content at the same
level. This is great for apps where the actions go from one
to another and/or back again - like a photo gallery where
you use a swipe gesture to go from one photo to the next.
Flat Navigation

14. Hierarchical navigations have nested actions. You might
think - “Why would I hide my actions? I want my users to
be able to access everything about the app from one
place,” but this doesn’t always lead to good user
experience.
Too many options can make the navigation unclear for a
user and they could end up feeling like your app is
complicated and not user-friendly. The navigation
hierarchy must be clear to users so they understand
where they are in the navigation and what options they
have at that level.
The best example of a hierarchical navigation would be
Amazon, or similar e-commerce apps. These have
categories, subcategories, sub-subcategories, etc. that
help users navigate the different sub-sets of content, as
opposed to sitting all the categories at one level.
Hierarchical Navigation
Hierarchical navigation

15. Content based navigation is little more complex in
nature compared to the other popular types of
navigation, but it provides a natural interaction flow for
users of certain apps.
Games and mapping applications often make use of
content driven navigation where users interact with
elements on the storyboard to navigate from one view
to another.
Both Apple and Google do a good job of doing deeper
dives on navigation patterns.
Content Navigation
Content based Navigation

16. Wireframes
Creating a mockup - even if it’s just a
rough sketch of a wireframe on a piece
of paper - will help you visualize how
each screen will look and what elements
are needed for each screen. Each screen
should have one primary purpose and
one or more actions for a user to
interact with.
Draw each and every screen, including
elements that are visible only when
certain actions are performed (like
showing an alert when a user tries to
delete something, or an error message
when the user puts in bad data).
In addition to helping lay out your
design and identify gaps in its usability,
this exercise will also help you program
and organize your code better.

17. App/Launch Icons
Your “Launch Icon” is equivalent to a company logo. It’s the
first thing a user sees when they look at your app and the
image they’ll associate with your app.
App Icon Template is a wonderful resource for photoshop
templates to create your custom icon, and it includes
actions to export icons in all of the required sizes needed
for App Store submission.
If you’re not the artsy type, you can also get a designer to
help create your app icon and splash screen on sites like
Fiverr or Upwork.

18. Launch/Splash
Screen
The launch or splash screen is a static
screen that is bundled with your app,
and is a great placeholder to keep users
engaged while your app is loading.
Though it might be tempting to show
the launch screen for longer than
necessary and/or to show it everytime
the app is opened, doing so forces users
to wait to access the app, interrupts the
user’s train of thought, and makes your
app seem slower than it actually is.
Keep your splash screen design simple
and clutter free. Mobile patterns is a
good resource of curated splash screen
screenshots from popular apps that
follow design conventions and apple
guidelines.

19. Onboarding
Screens
Walkthroughs & onboarding screens
help users:
● Get a quick overview of features in
your app
● Provide a preview of how various
views of the application look when
populated with relevant data
● Encourage users to get on board by
signing up or getting started with
the app
● Prevent users from being deterred
by an empty screen if there isn’t
relevant data to show.
Smashing magazine’s article shows
everything there is to know about
onboarding screens, and UXArchive has
screenshots of popular app onboarding
screens. Check out Apple’s iOS design
guidelines for a list of suggestions for
making a user’s first launch experience
a great one.

20. Empty Screens
Showing an empty screen when there
isn’t relevant information to show yet
(like when the user hasn’t performed
the action required to populate the
screen) without any context as to why
there is no data is confusing and could
make the user wonder if something is
broken or technically wrong with the
app.
Instead, use this opportunity to engage
your users with informative messages.
Replace, “there isn’t enough data to
show here”, with something positive and
a call to action, like: “add friends to get
updates in your news feed” or “click
here to add your first picture”. Google’s
guidelines has a nice overview of how to
handle these screens to provide a killer
user experience.

21. Animations
Animation makes your app feel alive and dynamic.
Using animation doesn’t just add to the aesthetics of
your app, but it also makes it feel more responsive and
fun to use.
When a user takes an action in your app they are
anticipating a result or reaction. If your user presses a
button and the request takes more than a fraction of a
second to load, the wait is enough to make a user feel
that nothing is happening. This could cause them to
press the button multiple times or give up and exit out
of your app all together. Visual feedback in the form of a
spinner or loader lets them know their request is in
progress and makes the process feel smoother and
quicker.
In addition, transitions with animations makes the
experience of going from one screen to another, or one
portion of the screen to another, feel smoother and
adds an element of joy. Apple and Google have great
guidelines for using animation (and they both stress the
added value of using them).
Send
Send
Sent
Initial
On tap/press
Processing request
Request complete
Sending

22. Gestures enable users to easily interact with your app.
When transitions are used to mimic the behavior of
physical world, it provides natural interaction for a user.
Navigating through a photogallery by swiping is so
natural that even a 2 year old child can learn how to do
it just by observing. Pinch zoom is a similar natural
gesture.
Users have become accustomed to standard gestures
and will often expect your app to behave same way.
Apple has provided examples of some common
gestures that add interactivity to your app. However,
some apps take it too far and add gestures that users
aren’t familiar with. If you use new or uncommon
gestures in your app, be sure to provide helpful hints so
your users know what to do. As with anything in your
app, be sure to measure and monitor the activity to see
how users are interacting with it. If they’re not using
your gestures, or are using longer navigation routes to
achieve the app’s goal, then these gestures aren’t
adding value to your app.
Gestures & Visual Feedback
Tap Double Tap Long Press
Scroll
Zoom In Zoom OutDrag
Swipe LeftSwipe Right

23. Accessibility
Even though you might envision your app as targeted
towards one specific set of people, your app’s user
demographics could end up being very varied. Pay
attention to colors, shades, and the shapes of your icons to
ensure people can easily distinguish between different
elements and messages.
You should also ensure that your app follows guidelines
that allow users to use display customization, speech, and
similar features to make your app accessible - you can find
more information on this in the guidelines for iOS and
Android.

24. User Study and Feedback
During the app development process and once you’re ready to launch
make sure you have a system set up to capture feedback from users and
potential users.
Encourage honest, unbiased reviews and really pay attention to what
they liked, didn’t like, what they felt was challenging, and whether there
were features they missed or ignored.
In addition to asking for this information from your user base, there are
also services like UserTesting and TryMyUI that you can use to gain
insights on user interactions with your app.

25. Most Importantly:
If you design your app
for your users, you will
make something that
people will love.

26. Here’s to
building
beautiful apps
people will
love.