CS396: Spring 2021

Intro to Web Development

CS396: Spring 2021

Schedule > User Interface Design

Week 6: Mon, May 3
Exercise Files

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

Slides

Lecture Video(s)

Readings

  1. Design Resources.
    Just a few links and tips to get you thinking about design!
  2. Williams, Robin (2015). The Non-Designer's Design Book, Chapter 1.
  3. Williams, Robin (2015). The Non-Designer's Design Book, Chapter 2.

Exercise: Communicating values using visual design

Scenario: You are building an app and want to visually communicate your organization’s 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 your app / idea. 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 the style tile (from today’s lecture files) 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.