1
00:00:00,467 --> 00:00:06,326
The iOS design of 2007,
the year Apple debuted the iPhone,

2
00:00:06,326 --> 00:00:08,942
was heavily skeuomorphic.

3
00:00:08,942 --> 00:00:16,626
Skeuomorphism refers to user interface
elements that mimic a real-world object.

4
00:00:16,626 --> 00:00:22,078
The calculator from the first iPhone
is a clear example of skeuomorphism.

5
00:00:22,078 --> 00:00:26,638
The shiny highlights and
deep shadows suggest raised plastic

6
00:00:26,638 --> 00:00:30,002
buttons you might press
on a real calculator.

7
00:00:30,002 --> 00:00:33,878
How about this calculator
from a more recent iOS?

8
00:00:33,878 --> 00:00:38,231
Although the buttons now look flat
instead of three-dimensional,

9
00:00:38,231 --> 00:00:40,727
this is still a skeuomorphic design.

10
00:00:40,727 --> 00:00:45,387
The arrangement of the buttons still
resembles a physical calculator. And

11
00:00:45,387 --> 00:00:46,344
that's okay.

12
00:00:46,344 --> 00:00:52,410
While calculator apps such as Soulver make
no reference to any physical object,

13
00:00:52,410 --> 00:00:54,763
the ability to jump right in and

14
00:00:54,763 --> 00:01:00,577
start making calculations as I could
with the skeuomorphic app is missing.

15
00:01:00,577 --> 00:01:07,582
Soulver's website contains a lengthy written
explanation of how the app is used.

16
00:01:07,582 --> 00:01:12,690
This seems like a pretty
steep learning curve for

17
00:01:12,690 --> 00:01:18,060
a user who just wants
to multiply 586 by 718.

18
00:01:18,060 --> 00:01:23,110
While the faux wood and
leather textures of the first iOS apps

19
00:01:23,110 --> 00:01:30,180
may seem dated to modern eyes, references
to everyday objects like bookshelves and

20
00:01:30,180 --> 00:01:35,028
desktop calendars offered
usability clues to audiences

21
00:01:35,028 --> 00:01:40,091
who had prior to 2007 never
encountered a smartphone.

22
00:01:40,091 --> 00:01:48,309
The launch of iOS 7 in 2013 represented
a major shift in Apple's design aesthetic.

23
00:01:48,309 --> 00:01:53,444
Gone were the decorative textures and
the illusion of depth,

24
00:01:53,444 --> 00:01:56,624
replaced with a slicker flat design.

25
00:01:56,624 --> 00:02:01,429
While flat surfaces reduce clutter and
speed loading time,

26
00:02:01,429 --> 00:02:05,302
not everyone was a fan
of Apple's new approach.

27
00:02:05,302 --> 00:02:10,553
Don Norman, User Experience
Architect at Apple from 1993

28
00:02:10,553 --> 00:02:15,607
to 1998, and
co-founder of the Nielsen Norman Group,

29
00:02:15,607 --> 00:02:21,851
wrote a 2015 editorial in
Fast Company Magazine criticizing Apple's

30
00:02:21,851 --> 00:02:27,819
flat design as concealing affordances
in favor of a minimalist style.

31
00:02:29,537 --> 00:02:36,667
Affordances are the actions users
consider possible when viewing a design.

32
00:02:36,667 --> 00:02:44,284
For example, here is a screenshot of the
primary navigation for Apple.com in 2007,

33
00:02:44,284 --> 00:02:49,251
designed to look like physical folder tabs,
a popular metaphor for

34
00:02:49,251 --> 00:02:53,327
organizing site content in
the early days of the web.

35
00:02:53,327 --> 00:02:56,767
By 2012, the tab metaphor was gone,

36
00:02:56,767 --> 00:03:01,290
but the buttons were still
individually separated and

37
00:03:01,290 --> 00:03:05,529
retained a glossy look and
a level of visual depth.

38
00:03:05,529 --> 00:03:13,304
But by 2015, the entire nav bar
including the logo was completely flat.

39
00:03:13,304 --> 00:03:15,679
The only remaining affordance or

40
00:03:15,679 --> 00:03:21,463
indication that these elements are
interactive is the conventional location.

41
00:03:21,463 --> 00:03:27,048
The links are placed in a thin colored
stripe across the top of the page,

42
00:03:27,048 --> 00:03:30,971
where primary navigation
links are often found.

43
00:03:30,971 --> 00:03:36,804
The 2017 release of iOS 11 saw
Apple address criticisms

44
00:03:36,804 --> 00:03:42,430
of flat design by embracing
what's been termed Flat 2.0.

45
00:03:42,430 --> 00:03:46,871
While iOS 11 is more
minimal than the first iOS,

46
00:03:46,871 --> 00:03:51,326
interface elements are no
longer entirely flat.

47
00:03:51,326 --> 00:03:58,824
Subtle highlights, gradients, and shadows,
indicate depth and signify clickability.

48
00:03:58,824 --> 00:04:04,452
Skeuomorphism suggesting tactile
objects even reappears on occasion,

49
00:04:04,452 --> 00:04:10,326
such as a page curl transition
while reading longer documents.

50
00:04:10,326 --> 00:04:16,173
This semi-minimalism with hints of
depth is still a part of iOS 13,

51
00:04:16,173 --> 00:04:21,139
the most recent operating system
at the time of this video.

52
00:04:21,139 --> 00:04:26,241
If you'd like to learn more about the
differences between flat design and Flat

53
00:04:26,241 --> 00:04:31,901
2.0, I've included a reading from Nielsen
Norman Group in the teacher's notes.

54
00:04:31,901 --> 00:04:37,091
Now that we've learned how Apple arrived
at its current design aesthetic,

55
00:04:37,091 --> 00:04:43,011
in the next video we'll examine the three
guiding design themes I mentioned earlier,

56
00:04:43,011 --> 00:04:45,460
clarity, deference, and depth,

57
00:04:45,460 --> 00:04:50,580
and learn how these themes inform your
work designing for iOS applications.