Design craft
Type, colour, layout and the details that make a site feel cared for.
Performance is part of design
A slow site is a design problem, not just a technical one. Practical design decisions that keep pages fast and pleasant to use.
Design craftConsistency: building a tiny design system for one site
You don't need a big team to benefit from a design system. Here is how to define a small set of rules that keeps one website consistent.
Design craftDark mode done properly
Dark mode is more than inverting colours. Practical guidance on backgrounds, contrast, images, brand colours and respecting visitor preferences.
Design craftFooters are underrated
The footer is where many visitors go when they can't find something. Here is how to make yours useful, tidy and trustworthy.
Design craftNavigation patterns that don't get in the way
How to plan menus, labels and page structure so visitors find what they need on a small business site without thinking about it.
Design craftWriting microcopy for buttons, errors and empty states
How to write the small bits of text on your site, from button labels to error messages and empty pages, so visitors always know what to do next.
Design craftMotion with a purpose: transitions that help
When animation makes a website easier to understand, when it gets in the way, and how to choose durations, easing and reduced motion settings.
Design craftFocus states, keyboards and the people who use them
Why keyboard navigation matters, who relies on it, and how to design clear focus states that make your site usable without a mouse.
Design craftDesigning for thumbs: mobile layouts that feel natural
Practical ways to arrange buttons, menus and forms so your site is comfortable to use with one hand on a phone.
Design craftPhotography on small business sites: picking and cropping
How to choose photos that tell visitors something true about your business, and how to crop them so they work on every screen.
Design craftButtons people actually press: hierarchy and states
How to design buttons with clear hierarchy, useful labels and every state covered, from hover and focus to loading and disabled.
Design craftGrids: when to follow them and when to break them
How layout grids bring order to a page, how to set one up, and how to break it on purpose so the result feels lively rather than messy.
Design craftDesigning hero sections that earn their space
The hero is the most valuable space on your site. Here is how to fill it with a clear message, one main action and an image that helps.
Design craftContrast that passes and still looks good
How to meet WCAG contrast requirements for text and interface elements without making your website look harsh or generic.
Design craftPicking a palette: one primary, one accent, honest neutrals
A simple structure for website colour: one primary colour, one accent for actions, and a set of neutrals that do most of the work.
Design craftThe 8-point spacing system, explained plainly
What the 8-point spacing system is, why multiples of eight make layouts more consistent, and how to start using it on your own site.
Design craftWhitespace is not empty space
Whitespace groups, separates and directs attention. Here is how to use it deliberately instead of filling every gap on the page.
Design craftLine length, leading and the comfort of reading
Why long lines and cramped spacing tire readers, and how to set measure, line height and paragraph spacing so your pages read easily.
Design craftBuilding a type scale you can actually use
How to build a small, practical set of font sizes for your website, pick a ratio, round sensibly and adapt it for phones.
Design craftChoosing two typefaces that work together
A practical way to pair a heading font with a body font: start with the job each one does, then test contrast, proportions and weight.