Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Getting Started With Human Interface Guidelines!
You have completed Getting Started With Human Interface Guidelines!
Preview
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