Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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. And if a design system does allow for illustrations, expect robust rules on how and when to implement them.
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
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
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