Learn colors, typography and layout for iOS

1. Learn IOS Design
-Created by
Gayatri Prajapati
Senior Graphics Designer
Learn colors, typography and layout for
iOS
1 1

2. • Two years ago, Apple completely revamped their design language
for the modern users. It is now much simpler, allowing designers to
focus on animations and function rather than intricate visual details.
• I've been asked many times how to get started in design and what
are the shortcuts to become a better designer. While there is no
silver bullet, there are however a number of tips and rules on
designing for iOS that will affect the way you design universally.
• Even if you're designing for a totally different platform, the same
design notions remain and you can apply the same techniques that
you've learned on the Web and Print. iOS is a platform where design
is going back to its roots. It feels like a modern magazine, with
beautiful typography and simple layouts. The things you'll learn in
this book will serve you tremendously well on your journey to design
the best products anywhere.
2 2

3. Simplify
Your user interface should be
stripped down to the core
aesthetic. Every time you add
an element, ask yourself "is this
necessary?". Unless your app is
a game or a specific theme,
temper your use of heavy
textures, 3D effects and multiple
shadows. Instead, focus on
functional colors, harmonious
gradients, and beautiful
typography.
3 3

4. Maximize content
The content should take the
whole screen, giving maximum
space to its inner elements.
Avoid multiple containers and
maximize the scrolling areas,
which will allow more room for
interactions.
4 4

5. Colors
Use a prominent color to
show that an element is
tappable or that it’s
highlighted. Picking the right
colors and neutral tones can
make or break your design. It
is an aspect of iOS design
that will be explained
in Great depth.
5 5

6. Typography is content
Because of the simplification
of the user interface and the
focus on the content, your
typography will occupy from
50% to 90% of the screen.
Therefore, it is paramount to
pick a beautiful font and set its
weight, line-height, color to be
visually pleasing and optimal
for reading. This particular
aspect will be explained in
greater detail in the
Typography section.
6 6

7. Negative space
Use negative space to bring
focus to the content. The less
you see, the more you can
focus on few things at once.
Negative spacing gives
breathing room. Don't
overwhelm your screen with
too much structure or
unneeded visual elements.
7 7

8. Icon states
The icons for navigation have 2 states: outline and fillmode.
The reason for the outline is to distract less. When an icon is
filled, it grabs more attention. It also means that the current page
is active
Clarity
Make things obvious. Buttons should be self-explanatory and
typography should be big and readable at a comfortable
distance. Your content should clearly indicate what your app is
about. For example, if it's a coffee app, then you should be
reminded of the coffee beans, espressos and brown colors of
coffee.
8 8

9. Make the text readable
In Retina, typography should have a minimum size of 11pt. The optimal
size for reading is around 16pt.
9 9

10. Use obvious icons
Icons should not be ambiguous, they should clearly indicate what the
symbol means. Whenever possible, use text to accompany the icon.
Once you use an icon, don't re-use another variation of the same icon
elsewhere as that will confuse your users. Likewise, don't use generic
texts such as “Back” or “Submit”, instead be specific: “Back to Home” or
"Sign up a new account".
10 10

11. Descriptive screens
Each page should clearly
explain what it does. There
should be minimal branding,
which should be replaced by
a clear title of the screen and
highlighted state from the tab
bar, if any.
11 11

12. Meaning in colors
Colors have meaning. Use
red, green, blue and neutral
tones wisely to indicate
destructive actions, affirmative
actions, links and inactive
states respectively. Avoid
confusing your users by using
these colors for different
purposes. For example, don’t
use green on a button that
indicates “Delete this page”.
12 12

13. Transitional interface
Personally, I find this to be the
most exciting and unique aspect
of iOS. Every screen transitions
from one to another. The home
screen zooms into a folder, then
zooms into an app. Traditionally,
such technique is hard to
execute, but thanks to Xcode,
they are made more accessible
than ever. The techniques are
explained in
the animations section.
13 13

14. Blurred background
Keeping context of the background UI
shouldn't compromise the clarity of
your content. Blurring the background
not only allows you to keep its natural
colors, but also brings focus to the
foreground. Blurring isn't an invention,
it's something that already exists in
real life; as you focus on something,
everything else become blurry.
14 14

15. Design for touch
Buttons should be easily
tappable. Their sizes should
be between 30-60pt wide.
The optimal size is 44pt. On
rare occasions, set
to 22pt for links inside texts,
but use cautiously as they
become hard to tap. Even
text buttons have a tappable
zone of at least 30pt.
15 15

16. Readability
Typography should have a minimum size of 11pt. The optimal
font size for reading is around 16pt. Use a line-height of 120-
145% to make the reading experience even better.
16 16

17. Adaptive Layout
You should now respect 3
resolutions: 320x480pt,375
x667pt and 414x736pt.
Make sure to use the extra
space, and understand how
your content can expand
based on the screen size.
17 17

18. San Francisco Font
With the release of iOS 9 and El Capitan, the default font is now
the San Francisco font, which is made in-house by Apple. I
encourage you to watch the video to understand how it affects the
design for iOS.
18 18

19. Thank You
Coming soon with iOS9 Design
19 19