Image

In previous videos, 0:01 we've covered design principles that are universal to most design systems. 0:02 Color, typography and space. 0:07 However, you won't typically find guidelines for using photographic imagery. 0:12 Apple's Human Interface Guidelines is one design system 0:18 that does provide a section on image size and resolution. 0:22 In order to make sure you're serving up images that look clear on 0:26 a high resolution retina display. 0:31 Material design offers thorough guidance on image choice with suggestions 0:34 on aspect ratio, choosing images for different types of storytelling. 0:40 And using hero images, And thumbnails. 0:50 Check the teacher's notes for more information on these design systems. 1:00 While most design systems don't cover photographic imagery, 1:07 many do provide guidance for using icons. 1:11 Usually icons that were created specifically for the design system. 1:14 Since many web applications are task-oriented, a number of design systems 1:20 include a set of custom icons to accompany interface elements and toolbar text. 1:25 Shopify is e-commerce software, so 1:31 its icons relate to financial transactions. 1:35 Bank, shopping cart, card reader tap, and various international cash 1:40 symbols are included in Shopify's iconography documentation. 1:46 As well as a series of explanation on why some icons are favored versus others. 1:51 Shopify recommends simple icons that read well at a small size and 1:57 that relate to the task at hand. 2:03 For example, a headset represents customer service. 2:05 A few universally recognizable icons appear under USE ESTABLISHED ICONS, 2:09 like the trashcan, meaning delete. 2:16 Or the magnifying glass, meaning search, along with these instructions. 2:19 Don't reinvent an icon that's already been accepted as the convention. 2:25 I like that last rule. 2:31 It captures the essence of why we use design systems, 2:32 to avoid wasting time exploring design problems that have been solved already. 2:36 Here are rules about size and color. 2:44 Note that usability considerations came first, 2:48 followed by appearance specifics. 2:52 Finally, links let you download these icons individually as SVGs, or 2:56 I can import the entire set of icons as a UI kit, if I'm a Sketch user. 3:02 Rules for illustrations in design systems are less common than rules for 3:11 iconography. 3:16 While illustrations are attention grabbing, they don't suit every brand. 3:19 And while iconography tends to be pretty general, 3:24 every page that needs a search can use the same magnifying glass. 3:28 Illustrations are usually more customized. 3:32 If a design system does allow for illustrations, 3:37 expect robust rules on how and when to implement them. 3:40 Firefox's Photon design system contains an illustration section. 3:46 Like any good set of usability rules, 3:52 these are all about empathizing with the user. 3:55 In what situations would illustrations make the user feel more confident? 3:59 Photon identifies three situations in which illustrations could be helpful. 4:05 Illustrations can encourage users who might be feeling frustrated or lost, 4:11 introduce or explain a complex new product or 4:19 feature, or celebrate the completion of a task. 4:23 There's also one big DON'T. 4:28 If the user needs to be alerted to danger, 4:30 a potential security risk, for example. 4:34 An illustration would be inappropriately light-hearted 4:38 to match the serious warning tone. 4:41