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

2:07 min

Core responsibilities and deliverables of a user interface designer

Eleftheria Batsou Β· World Congress 2023

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

More from WeAreDevelopers LIVE

Fake or News - Claude's DNA Discovery, Quick Cloning & Crime on Insta thumbnail
6:07
4 days ago

Fake or News - Claude's DNA Discovery, Quick Cloning & Crime on Insta

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
4 days ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
18 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
26 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
27 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
about 1 month ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Related videos

It’s easy to create a good looking product, but what about a useful one? thumbnail
28:39
World Congress 2023 β€’ almost 3 years ago

It’s easy to create a good looking product, but what about a useful one?

Eleftheria Batsou

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Γ³

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.