Hi, I'm
I design thoughtful user experiences,
create engaging user interfaces,
develop performant, responsive web sites,
and craft beautiful objects from wood.
A series of short animated videos and live footage showcasing agency work, design philosophy, and internal process.
A modular trade show booth designed and built for Siete Family Foods.
A tactile way to make an introduction to a design agency - providing a fun keepsake and a digital and physical example of our capabilites.
A digital ordering platform allowing patrons to order from multiple vendors from a single, integrated experience.
A prototype web application offering a more immersive, visual way to view traditional journey maps.
A modern, responsive agency website built with a NuxtJS frontend and headless Craft CMS backend.
An interactive brand guide and standards site for internal reference and new employee onboarding.
A promotional video for Porter, produced during the peak of the Covid-19 pandemic using entirely stock or legacy footage and motion graphics.
A series of short animated videos and live footage showcasing agency work, design philosophy, and internal process.
A modular trade show booth designed and built for Siete Family Foods.
A tactile way to make an introduction to a design agency - providing a fun keepsake and a digital and physical example of our capabilites.
A digital ordering platform allowing patrons to order from multiple vendors from a single, integrated experience.
A prototype web application offering a more immersive, visual way to view traditional journey maps.
A modern, responsive agency website built with a NuxtJS frontend and headless Craft CMS backend.
Google's PageSpeed Insights (PSI) "reports on the user experience of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved." Generate a new report to see how this site stacks up right now.
Or test on pagespeed.web.dev
I regularly use this tech to build for the web.
CSS
SASS
TailwindCSS
Semantic HTML
JavaScript ES6
Astro
htmx
Vue
Nuxt
React
Next
AlpineJS
Shopify Themekit
GreenSock Animation
Craft CMS
Curly Brace Templates
From wireframes and prototypes to photo editing and animation, these are my design tools of choice.
Framer
Figma
Illustrator
Photoshop
Premiere Pro
After Effects
Here are some technologies I've dabbled in recently.
Nginx
Node
Deno
Docker
Firebase
Supabase
MySQL
PostgreSQL
TypeScript
Prisma
tRPC
Human-centered design is just good design (unless you're designing for animals or robots...).
The better you know your audience, the better you'll know your product.
Design mobile first. Build for mobile first.
"Atomic" component libraries lead to more maintainable design systems.
Progressive enhancement delivers the best experience for a spectrum of users.
The fastest way to learn what you don't know is to prototype. Then test and iterate.
How could handoffs between designers and developers be improved?
What's your favorite keyboard shortcut?
If you could only use one power tool for the rest of your life, what would it be?
What are your thoughts on free will?
The Art of Learning: How Woodworking & Programming Inform Each Other
Themes on Easy Mode with CSS Custom Properties & TailwindCSS
'potision: static' — Improving Handoffs Between Designers & Developers
The Mouse Trap: How Keyboard Shortcuts Improve Flow State
Craftsmanship and the Pursuit of Deep Knowledge
Let's talk:
hello@drewcoffin.com