In previous videos,

we've covered design principles that are universal to most design systems.

Color, typography and space.

However, you won't typically find guidelines for using photographic imagery.

Apple's Human Interface Guidelines is one design system

that does provide a section on image size and resolution.

In order to make sure you're serving up images that look clear on

a high resolution retina display.

Material design offers thorough guidance on image choice with suggestions

on aspect ratio, choosing images for different types of storytelling.

And using hero images, And thumbnails.

Check the teacher's notes for more information on these design systems.

While most design systems don't cover photographic imagery,

many do provide guidance for using icons.

Usually icons that were created specifically for the design system.

Since many web applications are task-oriented, a number of design systems

include a set of custom icons to accompany interface elements and toolbar text.

Shopify is e-commerce software, so

its icons relate to financial transactions.

Bank, shopping cart, card reader tap, and various international cash

symbols are included in Shopify's iconography documentation.

As well as a series of explanation on why some icons are favored versus others.

Shopify recommends simple icons that read well at a small size and

that relate to the task at hand.

For example, a headset represents customer service.

A few universally recognizable icons appear under USE ESTABLISHED ICONS,

like the trashcan, meaning delete.

Or the magnifying glass, meaning search, along with these instructions.

Don't reinvent an icon that's already been accepted as the convention.

I like that last rule.

It captures the essence of why we use design systems,

to avoid wasting time exploring design problems that have been solved already.

Here are rules about size and color.

Note that usability considerations came first,

followed by appearance specifics.

Finally, links let you download these icons individually as SVGs, or

I can import the entire set of icons as a UI kit, if I'm a Sketch user.

Rules for illustrations in design systems are less common than rules for

iconography.

While illustrations are attention grabbing, they don't suit every brand.

And while iconography tends to be pretty general,

every page that needs a search can use the same magnifying glass.

Illustrations are usually more customized.

If a design system does allow for illustrations,

expect robust rules on how and when to implement them.

Firefox's Photon design system contains an illustration section.

Like any good set of usability rules,

these are all about empathizing with the user.

In what situations would illustrations make the user feel more confident?

Photon identifies three situations in which illustrations could be helpful.

[SOUND] Illustrations can encourage users who might be feeling frustrated or lost,

introduce or explain a complex new product or

feature, or celebrate the completion of a task.

There's also one big DON'T.

[SOUND] If the user needs to be alerted to danger,

a potential security risk, for example.

An illustration would be inappropriately light-hearted

to match the serious warning tone.