Considered. Consistent. Built to be used.
UI, UX and brand design
Interface design, design systems and brand identity, drawn to be built rather than admired: every screen comes with its states, its spacing and the tokens behind it.
What this covers
Laid out on the grid it is arguing for.
Interface design
Every state, not only the happy path.
Screens designed with the empty state, the loading state, the error, the long name and the small phone already accounted for, because those are most of what a real user sees. Drawn against a type scale and a spacing scale rather than nudged into place, so what gets built matches what was agreed.
Design systems
Tokens, components, and the rules that keep them honest.
Colour, type, spacing and elevation defined once as tokens, then components built from them, with the rules for when to use which written down beside them. The point is that the tenth screen costs a fraction of the first, and that two people designing separately still arrive at the same place.
Prototyping
Clickable before it is expensive.
A prototype you can click through and put in front of somebody, at the point where changing it costs an afternoon rather than a sprint. Used to settle the arguments worth settling early: the navigation, the flow through a checkout, whether one screen is doing the work of three.
Brand identity
A kit, not a logo file.
Logo, colour, typography and the rules for using them, delivered as a kit: mark variants, social avatars, and document and presentation templates. Built alongside the product where we are building one, so the brand and the thing it appears on are designed as one job.
Tools
- Figma
- Photoshop
- Illustrator
- React
- Next.js
- Tailwind CSS
How a project runs
- 01Discover
- 02Define
- 03Design
- 04Develop
- 05Validate
- 06Deploy
- 07Evolve
Questions
Do you design without building?
Yes. Design and handover on its own is normal work, and the handover is a real one: tokens, components, states and specs, in a form a developer can build from without needing a meeting first.
Figma, or straight to code?
Figma where a decision needs to be seen and argued about before it becomes expensive. Straight to code where the design lives or dies on how it actually moves and responds, which on a marketing site is most of it.
Can you work with our existing brand?
Usually that is the ask. Extending a brand into a product it was never drawn for is a different job from inventing one, and the first thing we do is work out which of the two you need.