A presentation at Registered Graphic Designers Webinar Series by Karen Hawkins
by Karen Hawkins on March 28, 2024
Meet Karen Hawkins
Today’s Goals
SECTION 1 Little Ditty about Design and Designs Systems
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. Nielsen Norman Group 5
Atomic Design Atomic design is a methodology for creating design systems. It is a framework to break interfaces down into fundamental reusable building blocks and build them back up in potentially infinite variations. Atoms Concept reference: Brad Frost Molecules Organisms Templates Pages 6
Atomic Breakdown of a Button Atoms Molecule 7
Atomic Breakdown of a Button: Further Analysis Atoms Properties Molecule Font Type Font Size Text Color Padding Border Color Border Size Border Corners Button Fill 8
Subatomic Design Design tokens are small, repeatable design decisions, that store a design system’s visual attributes. They ensure the same style values are used across design files and code. Subatomic Particles Atoms Molecules Organisms Templates Pages 9
Subatomic Breakdown of a Button Atoms Properties / Design Tokens Molecule Font Type: body-copy-semi-bold Font Size: body-copy-semi-bold Text Color: interactive Padding: spacing-10 Border Color: interactive Border Size: border-2 Border Corners: border-radius-2 Button Fill: color-background-light 10
Design Tokens Fill Some of the Gap Design Tokens Molecular States Border Color: color-text-dark Molecule Border Size: border-1 Border Color: color-focus Border Size: border-3 Border Color: color-error Border Size: border-3 11
Style Guides Map to Atoms and Subatomic Particles Focus on design tokens 12
Components Map to Molecules Focus on foundational aspects: • States • Variations • Keyboard interactions • Screen reader experiences • Etc. 13
Patterns Map to Organisms Focus on higher order thinking: • Reading order • Landmarks • Skip links • Interdependencies between multiple components • Etc. 14
SECTION 2 Design Tokens in Style Guides 15
Colours 16
Grid 17
Typography 18
Spacing 19
Border Thickness 20
Border Radius 21
Shadow 22
Grid Accessibility 1.4.10: Reflow • 400% zoom: 1280 / 4 = 320 • Mobile designs are on a 320px viewport for vertically scrolling content • Or 1024 / 4 = 256 for horizontally scrolling content • Benefits: • Ensures a design for 1 column of content • Enforces designing responsively / for mobile (1.3.4 Orientation) 23
Typography Accessibility Best Practices • Font type: Selected for perceived readability • Min font size: 12pt / 16px / 1 REM • Body copy font weight: Regular / 400 • Body copy line height: 1.5X font size • Heading font weight: Semi-bold / 600 1.4.4 Resize Text • 200% font size: 24pt / 32px / 2 REM • 200% line height: 3X font size 24
Spacing Accessibility 2.5.8 Target Size (Minimum) • Minimum target size for icons: 24px X 24px Best Practices • Aiming for 44px X 44px (2.5.5 Target Size) • Considerations for contextual spacing requirements for improved operability and readability 25
Colour Accessibility (1 / 2) Best Practices • Documented colour pairs that meet minimum standards with guidelines for usage • No placeholder text (1.4.3 Minimum Contrast, 3.3.2. Labels or Instructions) • No images of text (1.4.3 Minimum Contrast) 26
Sidebar: Dual Modality Design Colour Position Read means stop. Top means stop. Yellow means slow down. Middle means slow down. Green means go. Bottom means go. 27
Colour Accessibility (2 / 2) 1.4.1 Use of Colour Contrast • • Not using colour alone to indicate meaning, information, etc. • Particular attention to state design and chart design • Inline links underlined by default • Using at least 1 dimension to convey meaning, with or without the addition of colour Aiming for greater than 7:1 contrast for text (1.4.6 Contrast Enhanced) • Aiming for greater than 4.5:1 contrast for graphical objects and user interface components (1.4.11 Non-Text Contrast) • Aiming for greater than 3:1 contrast for inactive elements (1.4.3 Minimum Contrast) 1.3.3 Sensory Characteristics • Not using colour alone to indicate meaning, information, etc. in instructions 28
Focus Indicator Accessibility Best Practices • Focus indicator is always situated outside an element • Focus indicator is made of 3 rings which meets contrast requirements between the rings (white, medium pink, white) • Each ring is 2px thick (2.4.13 Focus Appearance) • Contrast is guaranteed with any adjacent colour in our design system 29
SECTION 3 Design Tokens in Component Libraries 30
Components Map to Molecules Design tokens help with: • State design • Variation design 31
Primary Button Design Token Example Font Type: body-copy-semi-bold Font Size: body-copy-semi-bold Text Color: color-text-light Padding: spacing-10 Border Color: interactive Border Size: border-2 Border Corners: border-radius-2 Button Fill: color-background-interactive 32
Primary Button Design Token Example Font Type: body-copy-semi-bold Font Size: body-copy-semi-bold Text Color: color-text-light Padding: spacing-10 Border Color: interactive Border Size: border-2 Border Corners: border-radius-2 Button Fill: color-background-interactive 33
State Change Design Examples Hover • Background colour change (token) • Underlined Focus • Background colour change (token) • Underlined • Focus indicator Inactive • Background colour change (token) Default 34
Hover State Options: Colour-Only Default Options 35
Hover State Options: Underline, Bold Text, Larger Text, Smaller Text Default Options 36
Hover State Options: Button Size Default Options 37
Hover State Options: Invert Colours Default Options 38
Hover State Options: Thick Lines Default Options 39
Hover State Options: Border Thickness Default Options 40
Hover State Options: Border Radius Default Options 41
Hover State Options: Shadows Default Options 42
Hover State Options: Animation Default Options 43
Versions Consider the Variations Types Mobile 200% and Long Text 44
Default Hover Focus Apply Design Decisions to Links 45
Default Hover Focus Inactive Error Apply Design Decisions to Other Elements 46
Patterns Map to Organisms Design tokens help with: • ? 47
Questions? Comments? 48
Slides, Contact Details, and a Guide Connect with me Get today’s slides Get heuristics guide Email and LinkedIn Deck on notist Downloadable document Karen Hawkins, CPACC https://noti.st/khawk27 Accessible design heuristics 49
Thank you Karen Hawkins karen.hawkins@levelaccess.com levelaccess.com
Design tokens are all the rage. They exist to efficiently power consistent experiences. It truly is a powerful thing to be able to deliver platform-agnostic consistent experiences, or to quickly update a style that propagates via inheritance, even across nested design systems. The resultant consistency and efficiency are the main drivers for their recent popularity.
But, have you thought about harnessing that power of design tokens to ensure these experiences are also accessible? Well, it’s true. Design tokens work at the base property level, at the level where the tiniest design decisions are made, for instance colour, padding, or font weight. How these micro-decisions work together, or rather don’t work well together, can influence whether the experience is accessible or not.
In this talk you’ll learn how design tokens can significantly influence the accessibility of your designs, and you’ll learn some practical ways to apply design tokens to do just that.
Audience Takeaways
for free. You
can too.