(short jingle)
(techno music)
- [Ricky] Hello, Ricky here from Design+Code,
and today you will learn iOS 11 design.
While flat design has become universal
over the past five years,
it wasn't so common before iOS 7.
It was the shift that shaped the design landscape.
But to say that it hasn't evolved would be inaccurate.
iOS design has adapted to bigger screens.
What started as the ultimate opposite
of hyper-realistic designs that proceeded it.
Flat design is now much more nuanced
giving way to gradients, drop-shadows, and cards.
Let's start from the beginning.
On the left, a hyper-realistic design,
also known as skew morphic.
It was effective to introduce strong metaphors
because in 2007 few were familiar
with having a supercomputer in your pocket.
In the middle, we got rid of all ornaments
in favor of flat colors, beautiful typography,
and high-resolution content.
Since most of us got increasingly comfortable
with technology, it was no longer necessary
to adorn our design with heavy decorations.
On the right, a screen from iOS 11.
Titles are much bolder, and as a result, more readable.
Because of the taller screens,
it is now much more common to see the bottom navigation
known as tab bar.
Designers today have to adapt their layouts
against multiple resolutions and pixel-densities.
The good news is that we have better tools,
like Sketch and X-Code to prepare us
for these modern techniques.
More than ever, iOS 11 is going back to its roots.
Bold fonts are everywhere, titles are big and black.
Since screens are now about twice as tall as they were,
it only makes sense to have large titles.
Another reason for large fonts is accessibility.
With billions of people using their phones daily
from all age groups, it is important
to make the content as clear and readable as possible.
Accessibility lets users set very large fonts
for apps that support it.
In iOS 11, all of Apple's stock apps support that option.
Because of that reason,
you'll find that users are now expecting it.
Bigger screens mean more space for content.
Before the bigger iPhones, it made sense to rid
of any container and give maximum space to content.
But with the iPhone 10 and 8, it is no longer the case.
We can make navigation easier by including
the status, navigation, and tab bars,
and use cards as a way to better organize sections.
Cards with rounded corners are a good way
to make the contents seem more tactile and approachable.
You can use blurred backgrounds and drop-shadows
to add depth and content to your design.
Design is now much simpler, allowing us to focus
on animation and function
rather than intricate visual details.
Before iOS 7, I spent a big part of my day
designing intricate textures like wood, leather, and chrome.
Today, I spend that same amount of time
on animation and code.
It is no longer about the static design,
but how to make it come alive,
engaging our users on a deeper level.
It is also the reason why this book was written,
to be more than merely about visual design.
Animations and code has never been this important
or feasible from a technical standpoint.
That's why we can witness a new prototyping tool
and coding framework almost every single week.
Design has become extremely broad,
but at the same time, interconnected
with many disciplines at once.
A single designer can grow to be independent
in their execution while being a better collaborator
with engineers as they better understand
the craft of each discipline.
I've been asked many times how to get started in design
and what the shortcuts are to becoming 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 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 goes back to its roots.
It reads 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.
Core philosophies.
Let's review the basics.
iOS is driven by three core philosophies:
deference, clarity, and depth.
Inspired by those design principles,
I've broken down their meanings
into actionable items that are much simpler
and more visual than those explained in the guidelines.
Your content should be the hero,
everything else is secondary.
Use elements that complement it
and avoid distracting visuals
that compete with your content.
For example, use beautiful animations
that gracefully transition from one screen to another.
Thus ensuring that the users don't get lost.
Blurred backgrounds keep context of where the user is
while allowing focus on the front content.
If in doubt, start from a provided template
and work from there.
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.
The content should fill the whole screen,
giving maximum space to its inner elements.
Avoid nested containers and maximize the scrolling areas
to allow more room for interactions.
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 brake your design.
Blue is a safe choice for buttons and states.
Also, a white or extra light gray background
against black text is recommended as a starting point.
This provides excellent contrast,
which is perfect for readability.
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, and color
to be visually pleasing and optimal for reading at any size.
The default San Francisco Font
is the recommended option as it was designed for legibility.
Apple uses it in all their apps.
Use negative space to bring focus to the content.
The less you see, the more you can focus
on a few things at once.
Negative spacing gives breathing room.
Don't overwhelm your screen with too much structure
or unneeded visual elements.
If in doubt, make use of the default margins in X-Code.
Apple typically uses between 8 points to 16 points
for their margins.
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,
espresso and brown colors of coffee.
Titles should be big and well-contrasted.
Captions should be short and easy to glance.
The body text should be well-spaced
and not too long per line to avoid reading fatigue.
Body text should also have a minimum size of 11 points.
The optimal size for reading is 17 points to 19 points.
Screen titles should be sized to 34 points or more,
while body titles should be set at 20 points to 30 points.
Align texts with other elements to make them easy to scan.
Finally, use black or dark gray
against the light background for the best contrast.
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 reuse another variation
of the same icon elsewhere, as that will confuse your users.
Likewise, don't use generic texts as back or submit.
Instead, be specific; back to home or sign up a new account.
Design sharp, vectorized icons to make it easy
to adapt to different screen densities.
Make sure that your assets work
for 1X, 2X, retina, and 3X super retina screens.
Each page should clearly explain what it does.
There should be minimal branding
that is replaced by a clear screen title
and highlighted state from the tab bar.
Be thoughtful with the selection of images
to best represent the sections.
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.
Buttons should be easily tappable.
Their sizes should be between 30 to 60 points wide.
The optimal size is 44 points.
On rare occasions, set to 22 points
for links inside texts.
But use cautiously, as they become hard to tap.
Even text buttons have a tappable zone
of at least 30 points.
When opening pictures, make sure
to include the ability to pinch to zoom
and take advantage of the swipe gestures
to easily navigate to previous screens one-handed.
Users often use the iPads and larger iPhones in landscape.
In that mode, apps will appear without the status bar,
and with smaller navigation and tab bars.
Sometimes it will show an extra menu on the left,
similar to what you'd find on the iPad.
A way to resize your layout based on screen size
is now common practice.
Thanks to our layout and size classes and X-Code,
modifying the layout based on device orientation
is fairly easy so don't be afraid
to support that in your designs.
Perhaps the hardest part to understand is depth.
It's a very abstract concept,
but at the same time very powerful and unique.
Depth is the idea that everything
should be contextual and transitional.
In real life, when you walk from a room to another
you get a sense of progression and distance.
That way you don't get lost.
That same concept should be applied to user interface.
Here is a great quote from Dieter Rams.
"Indifference towards people
"and the reality in which they live
"is actually the one and only cardinal sin in design."
One of the most exciting and unique aspects
of iOS is the animation.
Every screen transitions from one to another.
The home screen zooms into a folder,
then zooms into an app.
Animations used to be hard to execute,
but thanks to X-Code 9, they are made
more accessible than ever.
In fact, you will learn exactly these techniques
in the swift chapter.
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 becomes blurry.
Animations not only serve to transition
from one screen to another, but it also adds playfulness
and delight to your design.
It brings importance to an element
that would otherwise be ignored.
Notifications are more noticeable
and the weather is better understood
when there is rain pouring in the background.
Although animations are encouraged,
they should not be overdone.
They should not distract your users
from the content or give them motion sickness.
Gracious, forceful animations can become
overwhelming to your users.
Instead, make them discoverable
when users manipulate the content,
or use them to gracefully direct attention
to an onboarding process.
Finally, be realistic in the way
animations are demonstrated.
A moral that slides from the bottom
should be dismissed back to the bottom of the screen.
That way users can appreciate
the physicality of the elements, even if they're digital.
With the introduction of bigger screens
the back button is now too high
for the thumb to easily reach.
So while less obvious than a visible button,
a gesture can be an extension
to an already visible interaction.
It makes it easier for power users.
We're all becoming power users.
That's why we require less visual cues
and more user functions.
3D touch allows people to quickly access options
inside and outside of your app.
Think of 3D touch like the keyboard shortcuts on your MAC.
They enable people to do repeated tasks quicker.
You have to design shortcuts
that make power users more productive.
But just like keyboard shortcuts,
essential features shouldn't be exclusive to 3D touch.
Your users must be able
to operate your app normally without it.
For example, users can force press your app icon
to find frequently used items.
Inside an app, mail and links can be peeked
before entering full screen.
Sounds are minimally used in apps,
but when they're played, they can transform
a mundane task into a truly rewarding experience.
People can recognize your app without even seeing it
in the meaningful places such as the push notifications.
When the sound gives the right impression,
you win a lot with minimal amount of effort.
Good design is universal.
You don't need to explain
or overcompensate it with big words.
People just get it.
(swooshing)
(dinging)
Below we have attached a link
to a high level and essential read written by Apple.
It's always kept up to date and is pretty exhaustive
with its list of features.
I would suggest to at least skim through it
and only read the portions that you need,
as it gets very detailed.