Fix a screen that isn't workingin 5 steps

The steps and the skill for each

1. 1

   Get a critique

   Get a critique first: what is unclear, where the eye goes and which states are missing.

   Skill: Product Designer

2. 2

   Fix the hierarchy

   Decide what matters most on the screen and make size, weight and position say so.

   Skill: Visual Emphasis And Hierarchy

3. 3

   Set one type scale

   Replace ad-hoc font sizes with one scale, so headings and body relate to each other.

   Skill: Modular Scale Typography

4. 4

   Tidy the colours

   Derive states and greys from the brand colour instead of picking them one by one, and check the contrast of each pair.

   Skill: Algorithmic Color Palette

5. 5

   Check it against the guidelines

   Review the reworked screen against web interface best practices before you call it done.

   Skill: Web Design Guidelines

• Design a screen that looks right

  Six steps, from idea to polished UI

  1. 01Brief
  2. 02Structure in grey
  3. 03Type and colour
  4. +3 more steps

  Free download6 steps

• From brand to polished UI

  Start from an existing brand and end with a reviewed, on-brand interface. Your agent extracts the brand, specs the UI, builds it and polishes the detail.

  1. 01Extract the brand
  2. 02Turn it into a UI spec
  3. 03Build the screens
  4. +1 more step

  4 steps

• From Figma to launch-ready asset

  Take a single Figma frame and ship the full set of assets a launch needs — copy, code, social, the lot.

  1. 01Read the Figma frame
  2. 02Turn it into code
  3. 03Make the hero artwork
  4. +2 more steps

  5 steps