Illustrations in ACS are used across the website in a variety of ways to convey information to the users. Illustrations play a huge part in presenting complex instructions and text in an easily digestible format. Their purpose is to aid the understanding of the user in a succinct and clear manner.

Principles of Illustrations

1.   Emphasis on the message

Illustrations are designed keeping in mind the message they convey which should be apparent to the user. The graphics should be simple, approachable, and legible.

2.   Accurate representation of individuals and professions

While depicting chemists and other individuals in the illustrations, importance should be given that there is no stereotyping or exaggeration in the way the particular character and related profession is represented.

3.   Safety

ACS promotes safety for chemistry professionals and practitioners. While depicting chemists performing experiments make sure appropriate representation of safety gear like gloves and eyeglasses is made.

4.   Diversity

ACS believes in diversity in the field of chemistry and otherwise. The illustrations should ideally cater to the diverse population wherever applicable.

When to use Illustrations

Illustrations in ACS are used to compliment messages or instructions. They should be used in the following manner:

  1. Alongside category titles
  2. To support complex text or instructions
  3. Within informative banners or tiles
  4. Adding moments of joy to a page

Types of Illustrations

Dual tone spot illustrations :

These neutral yet intuitive illustrations are used as an accompaniment to almost all category types on the ACS website.

Design Specifications:

Each illustration is made up of a solid black outline supplemented by a dual-tone shading using the colors yellow and light grey. The objects in the icons are emphasized using yellow shading and grey is used as an undertone for the background.

Occasionally a darker grey is used to distinguish between multiple objects used within the same illustration.

  • Max. height: 60 px
  • Outline: solid black (#000000)
  • Primpary shade : yellow (#ffc054)
  • Secondary shade: light grey (#e0e6e9)
  • Additional shade: dark grey (#949494)

Usage Samples:

Within card styles

The “Finding & Landing a job” card in the Explore Careers pathway

Alongside categories

The “Resources by topic” section uses illustrations in a fun manner to display categories.

    

Banner Illustration

These illustrations are used as an accompaniment to instructions and categories or standalone. Their purpose is to be the main converyor of imformation with little to no text assistance.

  • Colors: ACS Brand (solid)
 

Usage Samples:

Alongside categories 

Banner illustrations used in an intuitively cropped format on the COVID-19 page

Featured Hero 

Banner is used here as a hero image for a featured item.