Design: Simplification

Problem

The biggest friction/drag on development is design. Partly this is because I’m less experienced in this area, and partly because there aren’t a lot of natural constraints as the solution space is so wide.

I’m also spending a lot of time going from Figma iterations -> code and back. This not only takes time, but also results in duplicate design state, with Figma designs quickly becoming out of sync with the site and vice versa. I’m intrigued by Derrick Reimer saying he doesn’t use Figma for SavvyCal and iterates directly in code. This sounds like a promising approach for a solo founder to take. NB. He has a huge amount of authority with such opinions given the quality of his design work and the speed at which he builds.

Solution

Firstly, add more design constraints to speed up design. This means:

• fewer colours
• fewer spacing options
• fewer typography sizes/styles
• fewer patterns

And secondly, experiment with designing directly with code and not using Figma to evaluate if this is more efficient.

Style guide

Overall we go for a minimal style in keeping with our ‘simple’ product pillar.

• Colours: We mostly use white with greys to let the content shine. Colour is used sparingly to draw attention to important elements such as buttons or warnings, and is always saturated and bright. In general, only the primary colour is used.
• Spacing: We use whitespace generously to separate content areas
• Borders/lines: We use borders and lines sparingly where whitespace alone is insufficient to separate content, with radius 6, or 8 for larger elements.
• Background colour: We avoid background colour except for interactive elements such as buttons
• Typography: With the exception of user generated markdown content, we have a small number of typographic styles: xlarge (48/56), large (24/32), body (16/24), small (14/20), xsmall (12/16). Bold is used sparingly, primarily for titles/headings. NB. Bold text is only used with our default text colour, never with lighter grey.
• Buttons: Always with background colour to differentiate them from content, generous padding to allow easy click/touch.
• Interactive elements: Always have a hover effect.

Final todos

1. Icons (all inline SVG, remove unused)
2. Remove custom font (performance, platform native feel)
3. Update logo/favicon files to new colours
4. Update emails to new styles