Design tips

quick tips from the last year or so of intentionally learning design and software engineering: from working at Granola, re-vamping this site, from perusing the internet.

• for new projects, before you start, think about what you're trying to communicate. what colours would evoke that. what fonts. what shapes. modern or old. setting intentions at the beginning helps guide the vision for the project
• font choice matters more than anything else. use typewolf, pangram, etc. for inspiration. doesn't have to be expensive but it has to be right.
• spacing matters more than you'd expect. I am lucky to have been taught the eye for this from the design engineers at Granola last summer: but make sure all content is suitably horizontally or vertically aligned with other elements. this post talks about a lot of things but I like most their modular spacing system.
• typography-driven designs > illustration-driven ones for beginners. easier to execute at a high standard.
• adapt from inspiration rather than trying to be original. blend styles. copy bar-for-bar if you're learning. taste develops through imitation.
• save references. note what you like about each.
• has to be responsive or don't bother
• test every interaction. click every button. eliminate flickers (so common in react re-renders)
• don't be afraid of colour!
• consistency > novelty when working in existing projects
• astro renders fast for simple sites
• slow image loading kills experience. if something must load slowly, custom loading screens. but avoid this entirely if possible.
• animations that cause unnecessary waiting are bad (e.g. over-animated number selectors used repeatedly). latency > prettiness for high-frequency interactions.
• but good animations can hide latency and make sites feel more designer
• physics-based interactions feel natural (ios sheets, buttons that compress/bounce, toggles with sound)
• hover states on everything clickable. users need feedback. make your own hover states for a unique feel
• if using icons, pick one consistent set (feather, lucide, heroicons). mixing icon styles looks amateur.