UI/UX
Interfaces, flows, research and design systems.
Designing with AI without losing your voice
Generators are fast at making something. Your job is still deciding what's right. A working method for keeping taste in the loop.
Add auto layout in one keystroke
Select layers in Figma and press Shift + A to wrap them in an auto layout frame.
Figma
Browser-based interface design with real-time collaboration, components, variables and prototyping.
Set big nudge to your spacing unit
Change Figma's Shift + arrow nudge from 10 px to 8 px so every move lands on your grid.
A practical guide to motion easing
Linear motion looks mechanical because nothing in the world moves that way. How to pick curves and durations that feel physical.
Penpot
Open-source design and prototyping tool built on web standards, which you can use online or self-host.
Colour systems that survive dark mode
Inverting your palette isn't a dark theme. Build colour as roles and tokens so both themes stay readable and on-brand.
Spline
Design interactive 3D scenes in the browser and embed them on websites without writing WebGL.
Flux Academy
Web design process, layout, typography and building sites in no-code tools.
Check hierarchy with the squint test
Blur your eyes at the layout. Whatever you still see first is what readers will see first.
Rive
Build interactive, state-driven animations that run in apps, games and websites from a tiny file.
Figma
Official feature walkthroughs, Config talks and tutorials on components, variables and prototyping.
Writing a design case study people finish reading
Hiring managers skim. Structure your case study so the skim tells the whole story and the detail rewards anyone who stays.
Review type at its real size
Zoomed-in canvases lie. Check body text on the actual device before you sign off.
Framer
Design and publish responsive websites visually, with animation, CMS and hosting built in.
DesignCourse
UI design and front-end development side by side, with frequent design critiques and live redesigns.
Name layers the way developers will
Layer names like button/primary/hover become component and variant names. Your handoff gets easier.