WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • May 12, 2023

Learn Enough Design to Be Dangerous

Kathryn Grayson Nanz

Think UI design requires a natural artist's eye? Discover the systematic, science-based rules behind color, layout, and typography to bridge the gap between functional code and stunning interfaces.

Pause
Mute Enter Fullscreen
#1 about 3 min

Bridging the gap between software development and design

Learning dedicated terminology enables developers to implement structured UI decisions and improve collaboration with designers.

#2 about 2 min

Debunking the myth of innate artistic talent

Design operates logically as an objective science built upon human visual and mental data models.

#3 about 4 min

Understanding RGB additive color formats for digital screens

Light-based RGB color models differ from subtractive pigment systems and accurately render vibrant UI elements.

#4 about 1 min

Evaluating color perception through visual context

Surrounding background colors shift human visual perception and necessitate careful contextual color decision making.

#5 about 3 min

Navigating the color wheel with hues, tints, and shades

Breaking down color relationships into primary, secondary, and tertiary groups enables clear separation of warm and cool emotions.

#6 about 6 min

Choosing effective UI themes with proven color schemes

Monochromatic, analogous, complementary, and triadic patterns effortlessly combine diverse interface elements into cohesive palettes.

#7 about 2 min

Ensuring interface accessibility with high contrast colors

Explicit visual contrast configurations offer critical readability support for color blindness and low vision needs.

#8 about 6 min

Structuring user interfaces using Gestalt theory principles

The human brain naturally organizes complex information via Gestalt rules like similarity, closure, continuity, proximity, and symmetry.

#9 about 5 min

Directing user attention through visual hierarchy

Manipulating element weight using size, placement, and contrast naturally routes users toward essential screen components.

#10 about 5 min

Achieving symmetry and visual balance in layouts

Distributing visual weight asymmetrically across user interfaces prevents visual tension and builds comfortable, stable user experiences.

#11 about 3 min

Prioritizing function over form using white space

Intentionally leaving empty space to separate specific content groupings prevents interface claustrophobia and clarifies functionality.

#12 about 4 min

Tracing typography history to understand font terminology

The historic movable type printing press defined foundational typographic concepts like physical characters, typefaces, and fonts.

#13 about 3 min

Adjusting text spacing and fixing common layout errors

Applying kerning, tracking, and leading parameter adjustments fixes distracting visual gaps like widows, orphans, and text rivers.

#14 about 5 min

Selecting effective typeface categories to match user intent

Choosing between serif, sans-serif, display, and script font variations alters content readability and establishes immediate brand emotion.

#15 about 3 min

Summarizing core UI design principles for developers

Mastering fundamental design conventions empowers engineering teams to logically execute visual decisions and enrich digital user interactions.

#16 about 7 min

Structuring UI boundaries with schemes and grid systems

Practical implementation of grid paddings, uniform container margins, and complementary schemes align layouts with natural Z scan patterns.

#17 about 5 min

Applying visual hierarchy paradigms to resumes and websites

Prioritizing information structures based on relevance minimizes visual clutter when customizing dense web platforms and resume formats.

#18 about 5 min

Transitioning initial UI prototypes from paper sketches to software

Drafting abstract interface logic on simple paper grids accelerates design iteration before migrating to dense vector software applications.

Matching moments

4:17 min

Balancing visual interface trends with accessibility requirements

Chris Heilmann +2 · LIVE

10:09 min

Transitioning from graphic design to large scale frontend architecture

Erasmo Hernandez Erasmo Hernandez · WWC Europe 2026

3:38 min

Showcasing web design capabilities through extreme user interface customization

Chris Heilmann +2 · LIVE

3:02 min

Navigating design trends and subjective aesthetic choices

Chris Heilmann Chris Heilmann +14 · LIVE

5:51 min

Making user interfaces perceivable with structural styling

Dennie Declercq · LIVE

58 sec

Bridging the gap between UX and frontend

Philipp Kremer · WWC 2023

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

Your Brain Is Lying to You: Cognitive Biases in Development

Kate Astrid

Senior Product Engineer

Kate Astrid
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova
Open session

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves

Related videos

One Color to Rule Them All: Relative CSS Colors in Practice thumbnail
9:04
WWC Europe 2026 • about 1 month ago

One Color to Rule Them All: Relative CSS Colors in Practice

Mert Akça

What's new in CSS for Designers? thumbnail
59:20
LIVE • over 2 years ago

What's new in CSS for Designers?

Onur Gumus

Design Principles For The Web thumbnail
29:11
WWC 2022 • about 4 years ago

Design Principles For The Web

Jeremy Keith

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more thumbnail
1:10:55
LIVE • over 1 year ago

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more

Chris Heilmann, Daniel Cranney, Jason Pamental

WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more thumbnail
1:02:33
LIVE • about 1 year ago

WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more

Chris Heilmann, Daniel Cranney, Elena Torró

WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more thumbnail
1:04:50
LIVE • over 1 year ago

WeAreDevelopers LIVE - 50 years Microsoft, Web Readiness Report, The German Web Community and more

Chris Heilmann, Daniel Cranney, Christian Schaefer

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.