Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Images in Design System

Images serve an important role in enhancing the messages being communicated in design. Design systems will need to define the usage of images in various aspects for designers who work on the same project so that they understand what to look for when sourcing images, directing photoshoots and how to use them once images are obtained.

In this lesson, we will learn how to define image guidelines by looking at Google’s Material Design system as an example.

Define Image Principles

The first thing we need to define is the principle characteristics of images that are appropriate for the design system. What kind of images do we want to show users that align with the brand? Images are meaningful, so we as designers must define the mood of images best suited for the design system we are putting together.

In Google’s Material Design system, they defined the general characteristics of images appropriate for the system as “informative, delightful and intentional”, with additional descriptions elaborating what each of these adjectives means in the context of this design system.

Define The Type of Images Allowed

The next step is to define what kind of images can be used in the design system. Does the brand or project only use photography or can designers add illustrations to the mix as well? The word “image” can encompass a variety of medium, not just photography, which is why we should define it clearly for the design system.

In Google’s Material Design system, it specified that both illustrations and photography can be used.

Define Image Compositions

Next, we should define the kind of compositions that images should stick to. The general good practice is to pick images with a clear focal point using the principle of Golden Ratio or Rule of Thirds. If you are unfamiliar with these principles, we highly recommend taking our Advanced Layout course where we dived deep into these topics.

It’s helpful to provide examples of images that adhere to these principles with a clear focal point and subject of interest and examples of images that don’t meet those criteria in a “do”s and “don’t”s comparison.

Define Image Size Requirements

When it comes to image size, there is no one-size-fits-all solutions, but it is still important to provide some guidelines for designers who will be using the design system.

Generally speaking, the smallest file size without compromising image quality is the preferred method. That may require designers to utilize image compression applications like ImageOptim in conjunction with Photoshop to strip images of its embedded metadata while preserving as much of the pixel information as possible.

In Google Material Design, it provides a general guideline describing what we just went over.

In some design systems, depending on requirements from developers, it may be necessary to specify minimum resolution and largest acceptable file size.

Don’t Forget Accessibility

Accessibility should always be a priority in any design and design system. When it comes to images, there is one simple addition that would help – adding “alt” text.

Alt text is a simple line of code which states what the image is about. For example, if an image features a tree, developers will add an alt text that says “trees”. That way, users who reply on screen readers will be able to understand what image is being displayed. It is important to use words that actually means something and descriptive about what’s happening in images. It would not be helpful to default to words like “image” as an alt text because it doesn’t describe what the image contains.

Define Ways to Use Images

Image guidelines in a design system should also define how images should be used.

In Google Material Design, it is specified that images should be used to educate users, allow users to make comparisons, delight users with decorative images when appropriate, and provide context to articles and other text-based descriptions.

Define Types of Images and How They Are Used

Finally, it’s important to define various types of images and how they should be used.

In Google Material Design, several types of images and their correlating usage are defined – hero images that are usually the big, full-screen image at the top of a website are defined and usage specified. Thumbnails, which are small images that represent information in tight spaces, are defined.

Other types if images that fall under the big umbrella include icons, informational gallery and diagrams.

Now at the end of this lesson, you will hopefully be more familiar with how to define images guidelines for the unifying advantage of a design system. Make a note that there could be more categories of information covered or fewer depending on your situations.

Scroll to Top