CS130: Spring 2020

Intro to the Web

CS130: Spring 2020

Lessons > 6. Intro to Visual Design - Part II

Week 4: Wed, Apr 22

Today we will be discussing a few different visual design and usability principles:

Review the Slides

  1. Color & Visually Communicating Values

Watch the Lecture Video(s)

  1. Visual Design Part 2 (lecture recording)

Do the Activity: Communicating values using visual design

Scenario: You are building your own personal website / online portfolio and want to visually communicate your own unique values and brand identity. Please (a) complete the values activity and (b) use these values to create a “style tile.”

A. Values activity

Using this list of values, select 5 that best describe the values that you want to communicate about yourself. Then narrow those down to 3 values (you don’t want too many or you will dilute your main message).

B. Create a style tile

Use this style guide template (CodePen) to create your own style tile, instantiating the values that you selected above. Ideally, you will create at least two style tiles, but let’s start with one. Based on the 3 final values you have chosen to convey from step 1, play around with colors, textures, fonts, etc. using the CodePen below to visually convey those values.