EX20 - Visual Foundation

The blank canvas, revisited

Visual tone is more exploration than science and while there are no wrong answers, your prior research should guide you to better solutions.

Updated May 14, 2020

There are at least two moments in every project where the options available are overwhelming. Sketching the first versions of an interface is one of them, and this moment is the other.

How do we even begin the process with an entire world of color and type at our disposal?

It is important to note that every designer has a slightly different way of approaching this moment.

Some designers begin thinking about color and type during the project pitch. At this moment, the designer is reacting to their prior knowledge of the industry or product. This isn't necessarily bad if a project has an established style that you won't be changing. In all other instances, it is dismissive of what you might find during research.

Many experienced designers have a list of favorite typefaces and colors they would like to work with if the chance presented itself. This disposition is no different from a developer wanting to create their next project with a new tool. While you might use that typeface you saw two years ago on this project, you have to be willing to discard it if it doesn't benefit the project.

New designers on new projects have the hardest time getting started. There is no prior style to utilize, and your experience with color and type is limited. Lack of guidelines might feel like a curse, but it is a blessing. You have an opportunity to build around the research performed when old ideas don't contain you.

A million different factors could guide your typographic and color selections, but only two matter.

  1. Will this be legible?
  2. Will this be accessible?

The exercise below will help you answer these questions.

Resources for review

Please use the following items to guide your exercise attempt:

Article/Video Source/Author
Type Anatomy and Structure New Pragmatic
Working with Type in Figma New Pragmatic
Color for Everyone New Pragmatic
Color at Work New Pragmatic
Working with Color in Figma New Pragmatic


Length: One-to-two hours to complete.

Exploration is the core focus of this exercise, as it is vital to generate options for consideration.

You're focusing on both type and color in this exercise. Aside from legibility and accessibility, there are a few additional considerations of note:

  1. Do these options remind me of a competitor to this product?
  2. Do these options match the tone of our product?
  3. Are these options overused in design today?

Use the attached Figma file to generate multiple sets of type and color options. The attached document will guide your decision making in the next exercise, so don't worry about making a final decision. Just make sure your selections pass the qualifications listed above.

Once complete, update your Program Journal with links to the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.


Up next Fresh Market: Branding

Receive daily feedback and weekly meetings with Chris Courtney by signing up for monthly mentorship today!

Sign up today!