1 of 72

Design with �Accessibility in Mind

CSCI 344. Spring, 2025

1

2 of 72

Announcements

  1. Tutorial 2 due this Friday (2/7)
    • Please do not procrastinate – it’s fairly involved
  2. Tutorial 3 due Monday (2/10)
    • You should be able to finish it during class
  3. Quiz 1 next Friday (2/14)
    • Postponed from Monday to give you more time to study
  4. HW2 also due next Friday at midnight (2/14)
    • I strongly encourage you to complete it before the quiz
  5. Next Monday: transitioning to JavaScript

2

3 of 72

Outline

  • Principles of composition
  • Accessibility
  • Fonts & colors
  • Principles of Usability
  • UI Kits & Design Systems

3

4 of 72

Outline

  1. Principles of composition
  2. Accessibility
  3. Fonts & colors
  4. Principles of Usability
  5. UI Kits & Design Systems

4

5 of 72

Complex system, simple composition

Source: Ricky Holtz & Ellen Van Wyk

6 of 72

Complex system, complex composition

7 of 72

Building Hierarchy for complex systems

proximity / repetition

proximity / repetition

contrast (color)

contrast (size)

alignment / asymmetry

Source: Ricky Holtz & Ellen Van Wyk

8 of 72

4 Principles of Composition (of many)

  1. Proximity
  2. Alignment
  3. Repetition
  4. Contrast

8

9 of 72

4 Principles of Composition (of many)

  1. Proximity
  2. Alignment
  3. Repetition
  4. Contrast

9

10 of 72

Principle of Proximity

Physical closeness implies a relationship.

    • Group related items together
    • Separate items that are not related

​

11 of 72

Could you use the principle of proximity to redesign this?

11

12 of 72

Which is easier to scan and interpret?

12

13 of 72

What is the purpose of all this whitespace?

14 of 72

Use Whitespace

  1. Helps to group items
  2. Helps readers scan
  3. Suggestions:
    1. Put margins (white space) around all content.
    2. Maintain a sense of proportion between the object and its surroundings.
    3. Don’t crowd controls together (even if grouped).

14

15 of 72

4 Principles of Composition (of many)

  1. Proximity
  2. Alignment
  3. Repetition
  4. Contrast

15

16 of 72

Principle of Alignment

  • Nothing should be placed arbitrarily.
  • Every item should have a visual connection with something else on the page.

16

17 of 72

18 of 72

Alignment Summary

  • Main goal: unify and organize content
  • Be conscious of where you place items
  • Work within a grid. Please

​

If you’re making a Web interface and you don’t know about CSS Grid & Flex, please invest time in doing this (demo):

18

19 of 72

4 Principles of Composition (of many)

  1. Proximity
  2. Alignment
  3. Repetition
  4. Contrast

19

20 of 72

Principle of Repetition

  1. Repeat some aspect of the design throughout the entire piece.
  2. Unifies the design
  3. Could be any aspect of the design�(fonts, colors, design elements, proximity, alignment)

20

21 of 72

What is repeating?

21

  • Left alignment
  • Teacups
  • Triangles
  • Squares

(more about branding)

22 of 72

Repetition Summary

  1. Main goal: unify and provide visual interest.
  2. Create repetition by strengthening repetitions that already exist or creating new assets to enhance the design
  3. Avoid over-repetition (sometimes less is more)

22

23 of 72

4 Principles of Composition (of many)

  1. Proximity
  2. Alignment
  3. Repetition
  4. Contrast

23

24 of 72

Principle of Contrast

  1. Contrast to draw a reader’s eye to certain parts of the page
  2. Contrast can be created in many ways:
    • Size
    • Color (cool v. warm)
    • Whitespace
    • Asymmetry
  3. Be bold!
    • For contrast to be effective, it must be strong

24

25 of 72

Whis is easier to scan?

25

26 of 72

Whis is easier to scan?

26

27 of 72

Contrast Summary

Two main goals

    • Create visual interest
    • Effective information organization

Effective contrast is strong

    • Elements have to be styled very differently
    • Be bold!

27

28 of 72

What principles does this layout use?

Let’s deconstruct this template website: How does this website instantiate the principles of:

  • Proximity (think whitespace)
  • Alignment (think grid)
  • Repetition
  • Contrast

28

29 of 72

Outline

  1. Principles of composition
  2. Accessibility
  3. Fonts & colors
  4. Principles of Usability
  5. Design Systems

29

30 of 72

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”�

- Tim Berners-Lee, W3C Director, inventor of the Web

31 of 72

Accessibility Is Very Important

  1. 15% of the world population and 26% of the U.S. population has a some form of a disability
    1. Statistically: about 3-4 people in this class
  2. Most of us will become disabled at some point (temporary or permanently)
    • Usually by way of injury or age-related health conditions
  3. Inaccessibility is illegal

31

Credit: Victoria Chávez

32 of 72

Design with accessibility in mind

How do I design my website so that it…

  • Is easy to use?
  • Is pleasant to look at?
  • Does not leave user confused?
  • Serves its purpose (to sell, inform, catch someone’s attention, etc.)?
  • Is accessible to everyone?

32

Credit: Victoria Chávez

33 of 72

So, what can you do to make your website accessible?

33

34 of 72

1. Consider how various forms of disability might impact a person’s experience of your website.

  • Take a look at these accessibility posters.
  • What implications might these suggestions have for the website you want to build?
  • Many (but not all) of these suggestions map onto the principles of design that we discussed last week.

34

Credit: Victoria Chávez

35 of 72

2. Follow the rules of composition

  1. Poor use of proximity may prevent neurodiverse users from easily navigating your site. It can also prevent screen-readers from properly reading a site aloud for blind users
  2. Low or bad contrast prevents color-blind users and low-vision users from accessing your site
    1. Use lightness to create contrast, not just hue
    2. Avoid complementary hues (e.g. red and green, orange and blue) and bright colors for backgrounds.
  3. Misaligned sections (alignment) can be confusing and make it difficult for users with mobility issues to access your site

35

Credit: Victoria Chávez

36 of 72

…but, good visual design is not necessarily accessible

  1. While bad design is inaccessible, accessibility is more than just good design
  2. Other accessibility considerations include:
    1. Descriptive alt-text and captions for media
    2. Resizable-friendly
    3. Screen-reader friendly
    4. Keyboard-friendly (no mouse)
  3. There’s actually a whole set of standards for web accessibility: Web Content Accessibility Guidelines (WCAG)
  4. Fret not, plenty of accessibility resources are available to help you get started!

36

Credit: Victoria Chávez

37 of 72

3. Consider Content & Structure (beyond the CSS)

  1. Use semantic HTML
  2. Describe tables, graphs, and figures
  3. Write in plain, simple, concise language
  4. Describe images using the alt attribute of the img tag
  5. Always set the language of a webpage (i.e., <html lang="en">)
  6. Use descriptive links (i.e., “accessibility resources”, not “more info here”)

Credit: Victoria Chávez

38 of 72

A few quick notes on color blindness

38

39 of 72

Color Blindness: Ishihara Plates

39

If you’re colorblind, you can’t see the bottom of the left pair, the top of the middle pair, and neither of the right pair.

40 of 72

Color Blindness Guidelines

41 of 72

Use accessibility tools to help you

41

42 of 72

Demo: Using the WAVE Browser Extension

  • To check the accessibility of your website, please install the WAVE browser extension
  • Let’s try installing, and then using it to do an accessibility analysis…

42

43 of 72

Outline

  1. Principles of composition
  2. Accessibility
  3. Fonts & colors
  4. Principles of Usability
  5. UI Kits & Design Systems

43

44 of 72

3 Dimensions of Color

Source: Ricky Holtz & Ellen Van Wyk

Hue: The tint

Saturation: intensity of the color is. When color is fully saturated, the color is considered in purest (truest) version

Value: lightness or darkness of a color

45 of 72

Primary

Secondary

Tertiary

46 of 72

47 of 72

Monochromatic

48 of 72

Analogous

49 of 72

Complementary

50 of 72

Triadic

51 of 72

Tertiary

52 of 72

CSS Colors > Demo

  • Hexadecimal
    • Hexadecimal Digits (base-16)
    • 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f (0=0 and f=255)
    • 2 digits for each color channel
    • #33aaff (51 red; 170 green; 255 blue)
    • Shorthand: #3af is the same as #33aaff
  • rgb
    • Example: rgb(255, 255, 255)
    • Each channel represented by a number between 0 and 255
  • rgba(255, 255, 255, 0.5)
    • Allows transparency
  • Named colors (e.g., hotpink, aqua, black, blue, fuchsia, etc.)
    • Best avoided

53 of 72

Resources: Color Palette Resources

  1. Kuler
  2. Colour Lovers
  3. Coolors.co
  4. ColorBrewer.org
  5. Palette from image

​

53

54 of 72

Outline

  1. Principles of composition
  2. Accessibility
  3. Fonts & colors
  4. Principles of Usability
  5. UI Kits & Design Systems

54

55 of 72

Norman’s Design Principles

  • Very famous book – came out in the 1980s
  • Shaped the field of product / interaction design
  • Basic idea: designs should be so intuitive that you don’t have to think about them!

56 of 72

Door Quiz

Say out loud what action you use to open the door

“Push” or “Pull”

57 of 72

Door Quiz

58 of 72

Door Quiz

59 of 72

Door Quiz

60 of 72

Door Quiz

61 of 72

Door Quiz

62 of 72

Door Quiz

63 of 72

Door Quiz

64 of 72

Door Quiz

65 of 72

Who cares about everyday things?

  • We make “push” and “pull” decisions every time we interact with computers.
  • We come across badly designed “doors”, and signs don’t change what we do.
  • Norman’s principles apply to all interfaces and interactions

66 of 72

Norman’s Design Principles

  • Affordances
  • System visibility
  • Feedback
  • Conceptual Models
  • Natural Mappings
  • Constraints
  • Consistency

67 of 72

Other Usability Guidelines and Design Patterns

  • Nielsen - Norman Group:
  • Deceptive Designs & Dark Patterns:

68 of 72

Outline

  1. Principles of composition
  2. Accessibility
  3. Fonts & colors
  4. Principles of Usability
  5. UI Kits & Design Systems

68

69 of 72

Design has become a well-established field

Design principles are fairly well-established, and tech design is its own subfield / specialization within the tech world. Because of this:

  • Many different organizations have codified best practices in interaction design, accessibility, usability, visual design, etc. in UI Kits and design systems.
  • The big idea: instead of making common UX/UI widgets “from scratch,” why not “bootstrap” your website from a baseline set of common widgets and design patterns?

69

70 of 72

Design Systems in Industry

Increasingly, design is becoming separated from implementation in larger tech shops:

  1. Design team works with a baseline “Design System” in Figma (a prototyping tool). This is customized to fit the website’s look-and-feel / brand. Example of Figma
  2. Components and CSS are exported from Figma and “synced” with front-end stylesheet.
  3. So long as the front-end developer is using the correct class names, the design team can work in parallel, with periodic syncing.

70

71 of 72

Examples of UI Kits & Style Guides

71

72 of 72

Introduction to Friday’s Tutorial

72