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 · World Congress 2026 Europe

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 · World Congress 2023

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
3 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
5 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
12 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
17 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
17 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail
48:06
24 days ago

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 25, 2026 · 14:50–15:20

Outdoor Stage

Your Brain Is Lying to You: Cognitive Biases in Development

Kate Astrid

Senior Product Engineer

Kate Astrid
Open session

World Congress 2026 North America

September 24, 2026 · 16:10–16:40

Stage 3

Sandboxing the Swarm: Building Secure, Serverless AI Agents with Wasm

Lena Hall, Thorsten Hans

Lena Hall
Thorsten Hans
Open session

World Congress 2026 North America

September 24, 2026 · 16:10–16:40

Outdoor Stage

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

September 25, 2026 · 16:30–16:40

Outdoor Stage

12 Names for the Same Thing: Why Developer Experience Can't Grow Without a Common Language

Artem Mukhin

Software Engineer at Microsoft

Artem Mukhin
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 6

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

Related videos

One Color to Rule Them All: Relative CSS Colors in Practice thumbnail
9:04
World Congress 2026 Europe • 2 months 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 • almost 3 years ago

What's new in CSS for Designers?

Onur Gumus

Design Principles For The Web thumbnail
29:11
World Congress 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.