Topic
Visual hierarchy, layout, spacing, type, color, and the craft of interface design.
UI design is the work of making a product readable, scannable, and usable at a glance. Hierarchy, spacing, type, and color decide whether someone can find the next action without thinking.
The best interface work is specific. A dashboard, a form, and a marketing page all use the same foundations, but they fail in different ways. UI Coach Learn collects the principles and then points you at practice.
UI Coach guides
How to direct attention in product UI with size, space, contrast, and sequence, without shouting.
Read the guide
The interface principles that actually change whether someone can scan a screen, find the next action, and trust the product.
Read the guide
From the community
Lea Verou · Jul 14, 2022
A few days ago I asked Twitter a seemingly simple question (I meant aria-pressed , not aria-selected but Twitter doesn’t allow edits…) : https://twitter.com/LeaVerou/status/1545712667515654144 For background, I was implementing a web component for an app I’m working on at work and I was getting into some pretty weird.
Prototypr · Carlos Yllobre · Mar 29, 2026
For Craft Sake: On the laws and principles behind good design. “Craft, craft, craft.” If you are a product designer, chances are you have seen this word coming up in posts, articles, conferences, podcasts, you name it. With the surge and constant development of generative AI, everyone and their dogs are trying to meas.
Jeffrey Zeldman · L. Jeffrey Zeldman · 4d
One Frenchman can’t be wrong. Push to the edge of what people will accept. Stop there. Raymond Loewy called it MAYA, and used it to design the modern world. The most important industrial designer you've never heard of. The post The Most Important Industrial Designer of All Time appeared first on Jeffrey Zeldman Presen.
Manuel Matuzovic · Jun 30, 2026
This post is a follow-up on my previous post. I was wondering whether it's safe to use Grid Lanes today. I came up with a solution I find okay, but there is a caveat. Note: This post contains interactive demos. If you want to see them instead of screenshots, enable the CSS Grid Lanes Layout flag in Edge or Chrome or u.
CSS Wizardry · Jul 26, 2026
Measure how entire components render with the Container Timing API: how it differs from Element Timing, where it helps, and how to try it today.
Ethan Marcotte · <name>Ethan Marcotte</name> · Apr 15, 2020
Stumbled across a little layout technique while working on my latest redesign . I think it’s helpful; maybe you’ll think so, too.
UX Planet · Nick Babich · 3d
Claude Design is an extremely valuable tool for quick design exploration. While many product teams use it to prototype web or mobile… Continue reading on UX Planet »
Material Design · Oct 25, 2023
Updates, refinements and a new way to transition between destinations
Eleken · Jul 6, 2026
Split buttons work well in the right context and fail quietly in the wrong one. Learn when the pattern succeeds, with examples from real B2B products.
.webp)
Smashing Magazine · hello@smashingmagazine.com (Durgesh Pawar) · May 21, 2026
Meet `sibling-index()` and `sibling-count()`. Staggered cascade effect in one line of CSS without `:nth-child()` rules or JS workarounds. Works for 5 items or 5,000.
Manuel Matuzovic · Aug 10, 2017
Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don't have to specify each track and we don't have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items. This is al.
Jeffrey Zeldman · L. Jeffrey Zeldman · Jul 24, 2026
The instant a business guy uses a sports metaphor to make his most important strategic point, I am lost. If you want me to understand your business idea, try wrapping it in Wendy Carlos’s secrets of synthesis or quotations by Orson Welles or the punchline to an old joke. The post You lost me at “infielder.” appeared f.
Practice this
Design an editorial fashion guide that helps readers combine a limited set of garments for different situations.
Design a service setup and inquiry flow that helps an emerging photographer present a specialty, price work, and qualify a client request.
Design a shared exhibit kiosk that invites brief exploration, supports different abilities and languages, and resets cleanly for the next visitor.
Useful resources
Apple Design Resources is listed as a UI kit resource for rapid prototyping and component exploration. Review the official site for current formats, availability, pricing, and license terms.
Material Design Kit is listed as a UI kit resource for rapid prototyping and component exploration. Review the official site for current formats, availability, pricing, and license terms.
Setproduct is listed as a UI kit resource for rapid prototyping and component exploration. Listed formats include Figma. Figma support is documented.
Untitled UI Icons is listed as an icon library or icon tool for interface icons and design systems. Listed formats include Figma. Figma support is documented.
Related roles
161 active roles currently match UI designer in the UI Coach job catalog.
Posted 17 hours ago
Posted 20 hours ago
Posted yesterday
Posted yesterday