Articles · 91
Craft notes on
visual design
Essays on motion design, UI patterns, typography, design systems, and the craft that connects them. Each piece names its sources and shows its working, not just theory.
Every article on this page was written by a working designer and peer-reviewed for accuracy before publishing. We link out to primary sources, the designer's own portfolio, the original release notes, or the studio site behind the work, instead of asking you to take our word for it. We do not run sponsored articles or accept payment for placement anywhere on this list.
Browse by topic using the filter below, or open the designers index for attributed portfolio work and the styleframes gallery for individual frames pulled from longer reels.
Modern UI Design: A Practical Craft Guide for 2026
The four skills modern UI design runs on: visual hierarchy, dashboard patterns, developer handoff, and tooling, in one practical craft guide.
Read article →02
More articles
An 8pt Spacing Scale for Long-Form Article Layouts
Seven spacing steps from one 8px base cover a whole article page:...
10 min read
Card-Based UI Layouts: Grids, Masonry, and Feed Patterns
Card-based UI layouts explained: when grids, masonry, or feed patterns fit your...
4 min read
Safari Technology Preview 249: Nine New CSS Features
Safari Technology Preview 249 lists nine new CSS features, from @function and...
10 min read
Safari Technology Preview CSS Animation Changes, 245-253
Safari Technology Preview 245 to 253 changed how named scroll timelines are...
13 min read
Editorial Type Scale: Why Blog Typography Skips the Ratio
A measured blog type scale (18/28 body, 40/44 h2, 56/64 h1) with...
9 min read
Safari 27 Stable Shipped 83 Features, Not the Beta's 58
Safari 27 stable shipped 83 features against the beta's 58. Scroll anchoring,...
9 min read
Accessible Typography: Dyslexia-Friendly Fonts That Work
Real dyslexia-friendly fonts, spacing rules, and layout patterns for accessible typography that...
6 min read
Accessibility Tokens: Baking Contrast Into Design Systems
How to bake contrast and accessibility directly into design tokens instead of...
5 min read
Smart Home Dashboard UI: Designing Control Screens
How home control panels break normal dashboard rules: four device states, room-first...
5 min read
Motion Graphics Production Workflow: Brief to Delivery
A repeatable eight-stage motion graphics pipeline from brief to delivery, with sign-offs,...
18 min read
Remote Motion Design Collaboration: The Working Stack
The tool stack, async review protocol, naming convention and timezone rules that...
12 min read
Responsive Breakpoints Strategy: Beyond Mobile-First
Container queries beat fixed breakpoints for real component design. Here is a...
4 min read
Figma Make vs Penpot 2.18: The AI Design Divide in 2026
Figma Make meters AI by the credit while Penpot 2.18 ships free...
9 min read
Safari 27 Beta: 58 Features and the Six That Matter
Safari 27 beta shipped 58 features. Customizable select, transform-aware anchoring and the...
9 min read
Easing Curves: The Shape, Not the Word, in Motion UI
What a cubic-bezier can and cannot draw, why linear() exists, what Material...
10 min read
Kinetic Typography for the Web: Where Motion Meets Type
A practical guide to kinetic typography for the web, covering CSS animation...
9 min read
Safari Tech Preview 251 Ships CSS random() Support
Safari Technology Preview 251 added CSS random() and random-item(). Here is what...
9 min read
Apple Intelligence Gradient in CSS: The Animated Glow
The conic-gradient and @property recipe behind the Apple Intelligence glow, with a...
13 min read
Figma Config 2026 Recap: What Matters for Designers
A filtered recap of Figma Config 2026, Motion, Code Layers, Shaders, and...
5 min read
Admin Panel Layouts: Advanced SaaS Dashboard Patterns
Advanced admin panel UI patterns for data-heavy SaaS tools: dense data tables,...
8 min read
Motion Work: When Blocking the Main Thread Is Fine
Never block the main thread is not a rule, it is a...
5 min read
Typography for Dark Mode: Weight and Optical Sizing
Why the same font weight looks different on a dark background, and...
10 min read
Modern Dashboard Design: 5 Real Examples You Can Open
Five modern dashboards you can open right now without a login: Plausible,...
8 min read
Safari 26.6 Is A Bug Fix Release Designers Should Read
Safari 26.6 shipped one WebAssembly tweak and eight bug fixes. Three are...
5 min read
Storybook for Design Systems: A Practical Setup Guide
Setting up Storybook for a design system, from a bare install to...
9 min read
Empty States and Error Pages: Designing the Edge Cases
How to design empty states, 404 pages, and error screens as first-class...
10 min read
CSS clamp() for Fluid Typography: No Breakpoints Needed
How to replace media query breakpoints with CSS clamp() for fluid type:...
5 min read
Styleframe AI: Where Generated Frames Help and Fail
AI reaches a styleframe faster than you can, then stalls. Where generated...
5 min read
Styleframe Animation: From Approved Still Into Motion
A styleframe is approved and now it has to move. What an...
4 min read
Chrome 150 for Motion Designers: What Actually Changed
Scroll-triggered CSS animations shipped in Chrome 146, not 145 or 150. Chrome...
10 min read
Building a Design Portfolio That Gets Interviews in 2026
Recruiters reject most portfolios within seconds. Here is what actually earns a...
5 min read
Common SaaS Landing Page Layout Patterns That Convert
A reference breakdown of the hero, social proof, and pricing teaser blocks...
5 min read
Font Loading Performance: Avoiding FOUT/FOIT in Product UI
Unoptimized web fonts cause FOUT and FOIT that hurt LCP and CLS...
5 min read
Design System Governance: Versioning and Changelogs
A practical guide to semantic versioning for design systems: breaking token changes,...
8 min read
Pricing Page Layouts That Actually Convert in 2026
Top-quartile SaaS pricing pages convert at 6.5-12% versus a 2.8% average, and...
5 min read
Jitter vs After Effects 2026: Which Motion Tool Wins?
Jitter vs After Effects compared on real work: browser speed, Figma import,...
6 min read
Motion Graphics in Product Design: The Complete Guide
What motion graphics means inside a product team, which principles carry over...
6 min read
Ideal Line Length in CSS: 65ch, Measure and Rhythm
How long should a line of text be? 50-75 characters, 65ch in...
7 min read
UI/UX Freelance Rates in 2026: What to Actually Charge
Junior UI/UX designers charge $35-60/hr in 2026, mid-level $60-120/hr, senior $120-200+/hr. Here...
6 min read
Dashboard Dark Mode: Patterns That Survive Real Use
Dashboard dark mode patterns that survive real use: chart color tokens, shadow-free...
10 min read
Dashboard Data Density Patterns: How Much Is Too Much
Dashboard data density patterns: comfortable vs compact row modes, when dense tables...
9 min read
Fintech Dashboard Design Patterns That Build Trust
Fintech dashboard design patterns: gain/loss color coding, numeric precision, staleness indicators, and...
8 min read
Mobile Navigation Patterns: Tab Bars, Drawers, Gestures
A visible tab bar beats a hidden hamburger menu for primary navigation...
6 min read
Type Scale Systems: A Modular Approach for Products
A modular type scale, built on a ratio like 1.25 Major Third,...
7 min read
Style Frame Templates: The Free Brief and How to Use It
Style frame templates explained: how to structure a briefing document, run the...
6 min read
Multi-Brand Theming: One Design System, Many Brands
Run several brands off one component library with layered design tokens and...
6 min read
Rive vs Cavalry in 2026: Which Motion Tool to Learn?
Rive vs Cavalry compared on real client work: state machines vs timelines,...
5 min read
E-commerce UI Patterns: Product Pages That Convert
Sticky add-to-cart bars can lift conversion, yet mobile still converts below desktop...
5 min read
Dashboard Design Patterns by Industry: A Practical Roundup
Dashboard design patterns compared across healthcare, logistics, POS, and HR software, with...
7 min read
Variable Fonts in UI: One File vs Static Weights, Tested
Variable fonts run on 41.3% of mobile sites. When one file beats...
6 min read
Dashboard Charts: How to Pick the Right Chart Type
Dashboard chart selection: line versus bar versus sparkline, real chart-library tradeoffs, and...
6 min read
Design Tokens: Style Dictionary and Figma, Explained
How Style Dictionary turns Figma design tokens into CSS, iOS, and Android...
11 min read
Styleframe Examples: What Great Ones Have in Common
Styleframe examples worth studying, and the shared traits that separate a frame...
5 min read
Styleframe vs Mood Board: How They Differ and When to Use
Styleframe vs mood board explained: what each one is, how they differ,...
6 min read
AI Tools for Frame and Motion Creation: A 2026 Guide
AI frame and motion tools compared for 2026: Runway, Kling, Sora, Luma,...
6 min read
Figma Motion: Native Timeline Animation Guide 2026
Figma Motion adds native timeline and keyframe animation on the canvas, launched...
6 min read
How to Implement Dark Mode in UI Design the Right Way
Dark mode isn't a color swap. Here's how to implement it in...
7 min read
Figma Variables vs Design Tokens: What Goes Where Now
Figma variables and design tokens explained: what each term means, where they...
5 min read
Framer Motion in 2026: A Designer's Guide for React
Framer Motion (now Motion) animates React UIs with layout, gesture, and exit...
7 min read
What Is a Styleframe (Style Frame)? Meaning and Process
A styleframe, or style frame, is the one still that locks a...
8 min read
Micro-interactions in UI: When to Animate and How Long
Micro-interactions in UI design: which moments deserve motion, duration ranges for common...
6 min read
Claude Design Beta: On-Brand Mockups From Your Repo
Anthropic's Claude Design beta turns your repo into on-brand mockups. Here is...
8 min read
Claude for Designers in 2026: Where AI Actually Helps
Claude is now one of the most-used weekly tools for designers. Here's...
5 min read
Figma Plugins That Save You Real Time in Design Work
A practitioner roundup of figma plugins for content, contrast, icons, tokens, and...
6 min read
Figma Components: Variants, Auto Layout, and Slots
Master figma components with variants, auto layout, and the slots pattern. Learn...
10 min read
The Designer to Developer Handoff Playbook in Figma
A practical guide to the designer to developer handoff: Figma Dev Mode,...
6 min read
Design Tokens From Figma to CSS and Tailwind in Code
Design tokens move from Figma variables to CSS and Tailwind. Token tiers,...
6 min read
Wireframing vs Prototyping: When to Use Each Fidelity
A practitioner guide to wireframing vs prototyping, covering low, mid, and high...
5 min read
UX Audit Checklist: 28 Checks Across Five Fast Passes
A 28-point UX audit checklist in five passes: scope, heuristics, accessibility, information...
8 min read
User Flow Mapping: Tools, Notation, and Real Examples
A practical user flow guide covering notation, tools like FigJam and Whimsical,...
5 min read
Usability Testing on a Budget: Cheap Remote Methods
Run usability testing cheap and fast. The 5-second test, guerrilla sessions, 5-user...
6 min read
GSAP 2026 Release Notes: Free License, SplitText 3.13
GSAP release notes 2026: the license went fully free, SplitText got a...
5 min read
The Best Prototyping and Dev-Handoff Tools of 2026
Figma, Framer, ProtoPie, Axure and UXPin compared for prototyping and developer handoff...
12 min read
Apple Intelligence UI: Colors, Glow and Design Patterns
The four Apple Intelligence colors in hex, how the shimmer glow signals...
19 min read
Penpot vs Figma 2026: Is the Free Rival Good Enough?
Is Penpot good enough to replace Figma in 2026? Native design tokens,...
6 min read
Web Animation in 2026: CSS vs GSAP, When to Use Each
CSS handles 80% of web animation in 2026, GSAP wins for timeline...
13 min read
Visual Hierarchy in Motion Graphics: 6 Key Lessons
How motion designers apply visual hierarchy in single styleframes - size, contrast,...
10 min read
From Styleframe to Working UI: The Designer Pipeline
How motion designers move work from a single styleframe through animatics into...
6 min read
Motion Design Tools: 5 Free After Effects Alternatives
Rive, Cavalry, Theatre.js and Lottie compared as free After Effects alternatives, plus...
8 min read
Color Palette Generators for UI Design: Tested Picks
Coolors, Adobe Color, Realtime Colors and Huemint compared on contrast checks, OKLCH...
10 min read
Godot 4.7 Visual Design: Game Art for UI Designers
How designers use Godot 4.7's theme editor, Control nodes, MSDF fonts and...
9 min read
Motion Design for Social Media: The Practical Guide
Platform specs, tool picks, and workflow tips for motion design on Instagram...
8 min read
Figma vs Canva in 2026: Which Design Tool Is Right?
Figma or Canva? Designers need prototyping and dev handoff. Marketers want drag-and-drop...
16 min read
Visual Hierarchy in UI Design: 7 Principles That Work
Visual hierarchy techniques for UI designers, size, contrast, spacing, and color strategies...
11 min read
Motion Design for the Web: When and How to Apply It
Motion design for the web, practical CSS transitions, scroll-driven effects, micro-interactions, plus...
11 min read
Modern Dashboard UI: 2026 Design Trends and Layouts
The 2026 dashboard patterns Linear, Stripe and Vercel all ship: a 256px...
17 min read
Best UI Design Tools in 2026: Figma, Sketch, and Penpot
Best UI design tools 2026 compared, Figma vs Sketch vs Penpot on...
15 min read
How to Build a Design System in Figma Step by Step
How to build a design system in Figma with tokens, components, and...
9 min read
Web Typography and Font Pairing: A Designer's Guide
Practical font pairing and web typography guide, variable fonts cut page load...
11 min read
CSS Layout Patterns in 2026: Grid, Flexbox, or Bento?
CSS Grid vs Flexbox vs Bento layouts compared. When to use each,...
13 min read