Thinking at the right level of resolution

Are you problem-solving at the right level of resolution?

The resolution spectrum

Imagine there's a straight line where on the left, there's a napkin sketch. On the right, there's a fully-coded, app.

We can call this line the resolution spectrum for problem-solving.

Along that line, there are multiple steps, each representing a level of resolution like a user flow, a wireframe, a Figma visual design, or a prototype.

Problem-solving with visual design

When problem-solving, many designers jump straight into the visual level, i.e., the visual design.

The problem is that they get distracted by nudging pixels and not seeing the forest from the tree.

As a result, they waste a lot of time solving visual problems before having clarity around the design outcome they want to achieve.

Thinking in the visual design phase is better suited for visual problems such as:

• Layouts
• Prioritization of information on a given screen
• Proportion
• Reading pattern
• Aesthetics

These problems, however necessary, have a small impact on the outcome.

Taking a step back

If you need more clarity about the outcome you want to achieve, it's helpful to think in low resolution.

Anything from diagrams to user flows to flowcharts to whiteboard sketches counts as low-res thinking.

This way of thinking eliminates the distractions that visual design can bring. At the very least, it postpones them for a later phase in your problem-solving process.

Don't stay in low-res mode for too long, though.

Low-res doesn't show you issues like insufficient screen space, busy layouts, constrained components, clutter, contrast, and other visual problems.

To summarize

Too high res and you'll get distracted by the details. Postpone it until you have more clarity.

Too low res, and you'll work faster, but you'll also ignore some important details, particularly around UI.