Briefle

Course 1 of 6

UI design

Brief AI for screens that look and work right.

Room 1· Free0/10 works

Essentials

The ten ideas that change every screen you ask an AI for.

  1. 1Start here
  2. 1.14 words
  3. 1.25 words
  4. 1.34 words
  5. 1.44 words
  6. Lesson 2
  7. 2.15 words
  8. 2.25 words
  9. 2.35 words
  10. 2.45 words

Room 20/10 works

Hierarchy & emphasis

Decide what people see first, second and never.

  1. Lesson 1
  2. 1.14 words
  3. 1.24 words
  4. 1.34 words
  5. 1.44 words
  6. Lesson 2
  7. 2.15 words
  8. 2.24 words
  9. 2.35 words
  10. 2.44 words

Room 30/10 works

Typography

Sizes, weights and line lengths that make text easy to read.

  1. Lesson 1
  2. 1.14 words
  3. 1.25 words
  4. 1.34 words
  5. 1.44 words
  6. Lesson 2
  7. 2.14 words
  8. 2.23 words
  9. 2.34 words
  10. 2.43 words

Room 40/10 works

Color

Use color for meaning, not decoration.

  1. Lesson 1
  2. 1.14 words
  3. 1.23 words
  4. 1.34 words
  5. 1.43 words
  6. Lesson 2
  7. 2.14 words
  8. 2.25 words
  9. 2.34 words
  10. 2.44 words

Room 50/10 works

Spacing & layout

Whitespace, grouping and alignment: the invisible structure.

  1. Lesson 1
  2. 1.14 words
  3. 1.24 words
  4. 1.33 words
  5. 1.44 words
  6. Lesson 2
  7. 2.14 words
  8. 2.24 words
  9. 2.33 words
  10. 2.44 words

Room 6· Premium0/10 works

States & feedback

Loading, errors, success and everything in between.

  1. Lesson 1
  2. 1.14 words
  3. 1.25 words
  4. 1.34 words
  5. 1.44 words
  6. Lesson 2
  7. 2.14 words
  8. 2.25 words
  9. 2.34 words
  10. 2.44 words

Room 7· Premium0/10 works

Forms & copy

Inputs, labels and the words on buttons.

  1. Lesson 1
  2. 1.14 words
  3. 1.24 words
  4. 1.34 words
  5. 1.44 words
  6. Lesson 2
  7. 2.14 words
  8. 2.24 words
  9. 2.33 words
  10. 2.44 words

Room 8· Premium0/10 works

Components & data

Buttons, icons, tables and charts that explain themselves.

  1. Lesson 1
  2. 1.15 words
  3. 1.24 words
  4. 1.35 words
  5. 1.44 words
  6. Lesson 2
  7. 2.15 words
  8. 2.24 words
  9. 2.35 words
  10. 2.44 words

Room 9· Premium0/10 works

Responsive layout

Make one design work from a phone to a wide screen.

  1. Lesson 1
  2. 1.14 words
  3. 1.23 words
  4. 1.34 words
  5. 1.43 words
  6. Lesson 2
  7. 2.14 words
  8. 2.24 words
  9. 2.33 words
  10. 2.44 words

Room 10· Premium0/10 works

Accessibility beyond contrast

Screens everyone can use: structure, labels, focus and motion.

  1. Lesson 1
  2. 1.14 words
  3. 1.24 words
  4. 1.34 words
  5. 1.44 words
  6. Lesson 2
  7. 2.14 words
  8. 2.24 words
  9. 2.33 words
  10. 2.44 words