The Evolution of iOS Design4:51 with Anwar Montasir
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.
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
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 up