Articles · 59
Craft notes on
visual design
Essays on motion design, UI patterns, typography, design systems, and the craft that connects them. Each piece comes from production work, not 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
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,...
5 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...
4 min read
Jitter vs After Effects 2026: Which Motion Tool Wins?
Jitter vs After Effects compared on real work: browser speed, Figma import,...
5 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
Readable Line Length and Vertical Rhythm for UI Text
The 50-75 character line-length rule comes from print typography, not app UI....
6 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...
5 min read
Dashboard Data Density Patterns: How Much Is Too Much
Dashboard data density patterns: comfortable vs compact row modes, when dense tables...
4 min read
Dashboard Dark Mode: Patterns That Survive Real Use
Dashboard dark mode patterns that survive real use: chart color tokens, shadow-free...
5 min read
Fintech Dashboard Design Patterns That Build Trust
Fintech dashboard design patterns: gain/loss color coding, numeric precision, staleness indicators, and...
5 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,...
6 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...
4 min read
Dashboard Design Patterns by Industry: A Practical Roundup
Dashboard design patterns compared across healthcare, logistics, POS, and HR software, with...
5 min read
Variable Fonts for UI: What They Are and When to Use Them
Variable fonts now run on 41.3% of mobile sites, up from 34%...
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...
5 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...
5 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...
6 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...
6 min read
What Is a Styleframe? A Practical Guide for Designers
A styleframe is a single still that locks the look of a...
6 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 Review: On-Brand Mockups From Your Repo
Claude Design is Anthropic's new beta AI design tool. My honest take:...
5 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...
5 min read
Figma Components: Variants, Auto Layout, and Slots
Master figma components with variants, auto layout, and the slots pattern. Learn...
5 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: Evaluate a Product Step by Step
A practical UX audit checklist for designers. Run heuristics, accessibility, IA, and...
5 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...
4 min read
Designing for Apple Intelligence: AI UI Patterns 2026
Apple Intelligence reshapes iOS UI in 2026. Visual guidelines, glow states, deference...
16 min read
Penpot in 2026: Honest Review and Figma Comparison
Penpot 2.0 brings CSS grid, native design tokens, and a genuinely free...
4 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...
12 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 for UI Designers Crossing Over (2026)
After Effects, Cavalry, Rive, Theatre.js, Lottie, which motion tool fits a UI...
7 min read
Color Palette Generators for UI Design: Tested Picks
Every UI color generator worth using, tested: Coolors, Adobe Color, Realtime Colors,...
10 min read
Godot 4 Visual Design: Game Art Direction for Designers
How designers can use Godot 4's visual tools, theme editor, Control nodes,...
8 min read
Motion Design for Social Media: The Practical Guide
Platform specs, tool picks, and workflow tips for motion design on Instagram...
7 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...
9 min read
Visual Hierarchy in UI Design: 7 Principles That Work
Visual hierarchy techniques for UI designers, size, contrast, spacing, and color strategies...
10 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
Dashboard Design Patterns for Modern Web Apps 2026
Best dashboard design patterns for 2026: sidebar navigation, KPI card layouts, data...
9 min read
Best UI Design Tools in 2026: Figma, Sketch, and Penpot
Best UI design tools 2026 compared, Figma vs Sketch vs Penpot on...
14 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...
7 min read
Web Typography and Font Pairing: A Designer's Guide
Practical font pairing and web typography guide, variable fonts cut page load...
10 min read
CSS Layout Patterns in 2026: Grid, Flexbox, or Bento?
CSS Grid vs Flexbox vs Bento layouts compared. When to use each,...
7 min read