← Back to thoughts

All great design starts with grey boxes

Updated: 16 Sept 2019

# design

# 7 of 27


Start all design with grey boxes. Focus on usability for as long as possible.

Why? How?

There is such a thing as “designer block.”

When you open a Figma project and stare at your computer, blankly. When you don’t know where to put your first banner or what the footer should look like.

Just like outlines help writers overcome their block, so can boxes help designers.

All great design starts with a white background, grey boxes and black buttons.

When you aren’t sure where to start, divide your page. Put a grey rectangle as a nav bar. Place a white box where your banner will be. Create a black button for your main CTA.

Keep playing with grey shades and boxes until your page is divided into areas.

Each area should have a single purpose. And each page should have a single CTA.

Iterate over this grey layout as long as possible, with Lorem Ipsum text where necessary, and grey boxes to replace images. Show your customers. Ask them if the layout makes sense.

This process will allow you to focus on the user journey. It will force you to think of usability before design.

Consider questions like:

  • Is this button placement intuitive?
  • How many calls to action am I including on this page?
  • Where are my eyes naturally going when I look at a page and is that where I have the most important information?

All great design starts with grey boxes. They make the most reliable foundation.

Best of luck! And let me know how I can help.



Léa Oriol

I'm the CEO of Mivvy, a platform where women learn high-value skills from female experts. I'm a software engineer, product maker, and design geek. Let's connect.