Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Apple has three key iOS Design themes: clarity, deference, and depth. To understand each theme, it’s helpful to look at how iOS design has evolved since 2007, the year Apple introduced the iPhone.
Further Reading
- https://www.interaction-design.org/literature/article/skeuomorphism-is-dead-long-live-skeuomorphism
- Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users
Vocabulary
- Skeuomorphism: user interface elements that mimic a real-world object
- Affordance: actions users consider possible as suggested by the design of an object or interface
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The iOS design of 2007,
the year Apple debuted the iPhone,
0:00
was heavily skeuomorphic.
0:06
Skeuomorphism refers to user interface
elements that mimic a real-world object.
0:08
The calculator from the first iPhone
is a clear example of skeuomorphism.
0:16
The shiny highlights and
deep shadows suggest raised plastic
0:22
buttons you might press
on a real calculator.
0:26
How about this calculator
from a more recent iOS?
0:30
Although the buttons now look flat
instead of three-dimensional,
0:33
this is still a skeuomorphic design.
0:38
The arrangement of the buttons still
resembles a physical calculator. And
0:40
that's okay.
0:45
While calculator apps such as Soulver make
no reference to any physical object,
0:46
the ability to jump right in and
0:52
start making calculations as I could
with the skeuomorphic app is missing.
0:54
Soulver's website contains a lengthy written
explanation of how the app is used.
1:00
This seems like a pretty
steep learning curve for
1:07
a user who just wants
to multiply 586 by 718.
1:12
While the faux wood and
leather textures of the first iOS apps
1:18
may seem dated to modern eyes, references
to everyday objects like bookshelves and
1:23
desktop calendars offered
usability clues to audiences
1:30
who had prior to 2007 never
encountered a smartphone.
1:35
The launch of iOS 7 in 2013 represented
a major shift in Apple's design aesthetic.
1:40
Gone were the decorative textures and
the illusion of depth,
1:48
replaced with a slicker flat design.
1:53
While flat surfaces reduce clutter and
speed loading time,
1:56
not everyone was a fan
of Apple's new approach.
2:01
Don Norman, User Experience
Architect at Apple from 1993
2:05
to 1998, and
co-founder of the Nielsen Norman Group,
2:10
wrote a 2015 editorial in
Fast Company Magazine criticizing Apple's
2:15
flat design as concealing affordances
in favor of a minimalist style.
2:21
Affordances are the actions users
consider possible when viewing a design.
2:29
For example, here is a screenshot of the
primary navigation for Apple.com in 2007,
2:36
designed to look like physical folder tabs,
a popular metaphor for
2:44
organizing site content in
the early days of the web.
2:49
By 2012, the tab metaphor was gone,
2:53
but the buttons were still
individually separated and
2:56
retained a glossy look and
a level of visual depth.
3:01
But by 2015, the entire nav bar
including the logo was completely flat.
3:05
The only remaining affordance or
3:13
indication that these elements are
interactive is the conventional location.
3:15
The links are placed in a thin colored
stripe across the top of the page,
3:21
where primary navigation
links are often found.
3:27
The 2017 release of iOS 11 saw
Apple address criticisms
3:30
of flat design by embracing
what's been termed Flat 2.0.
3:36
While iOS 11 is more
minimal than the first iOS,
3:42
interface elements are no
longer entirely flat.
3:46
Subtle highlights, gradients, and shadows,
indicate depth and signify clickability.
3:51
Skeuomorphism suggesting tactile
objects even reappears on occasion,
3:58
such as a page curl transition
while reading longer documents.
4:04
This semi-minimalism with hints of
depth is still a part of iOS 13,
4:10
the most recent operating system
at the time of this video.
4:16
If you'd like to learn more about the
differences between flat design and Flat
4:21
2.0, I've included a reading from Nielsen
Norman Group in the teacher's notes.
4:26
Now that we've learned how Apple arrived
at its current design aesthetic,
4:31
in the next video we'll examine the three
guiding design themes I mentioned earlier,
4:37
clarity, deference, and depth,
4:43
and learn how these themes inform your
work designing for iOS applications.
4:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up