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 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 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 - Is CSS Catching Up to Flash? thumbnail
1:03:33
13 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
20 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
22 days ago

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

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
27 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
29 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
about 1 month ago

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

Chris Heilmann, Daniel Cranney, Marc Plogas

Related videos

One Color to Rule Them All: Relative CSS Colors in Practice thumbnail
9:04
World Congress 2026 Europe β€’ 3 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 β€’ over 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 β€’ over 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.