The Admin Bar

Debugging Your Design

Jan 14, 2022

By: Kyle Van Deusen

Filed Under:

This page contains affiliate links in accordance with our affiliate policy.
☀ Read in Light Mode
This post is an excerpt from our newsletter, The Friday Chaser. Subscribe and get content like this (plus a recap of everything happening inside our community) delivered to your inbox every Friday morning!

When we have our “developer hat" on, it’s natural to debug problems step by step. If something isn’t working, we quickly make a mental list of the possible causes and test them one by one until we find the solution.

But when we have our “designer hat" on — the same methodology isn’t quite as intuitive (at least not for us untrained designers).

I can’t tell you how many hours I’ve wasted just moving things around on the page aimlessly hoping it will all of a sudden “click” and all come together. Sometimes I get lucky, but most of the time I just get frustrated.

Design is part art, where subjective factors (like finding the right blue that’s blue enough, but not too blue) play a role in our opinion of a design.

But it’s a science too, where objective factors (like space, contrast, alignment, and hierarchy) actually play an even more important role than your taste.

When you realize this, you can use it to your advantage to help “debug your designs” just like you would any other problem.

To do this, you need to examine the possible causes your design just isn’t working. Things like:

  1. Contrast - Is there enough? Is there too much? What is providing contrast (colors, sizes, spacing)?
  2. Scale, Proportions, & Proximity - Take a look at each element…Is it too big? Too small? Are related elements closer together than non-related ones?
  3. Color - How is color helping to guide people’s attention? Is the color consistent with the design?
  4. White Space - Try squinting your eyes — are things running together, or clearly separated? How much more space can you add until the design “breaks”?
  5. Alignment & Spacing - Is everything properly aligned on an established grid? Is the spacing consistent and appropriate?

It’s important to not look at a design or layout as “one thing” — it’s a lot of little things that are either working harmoniously or fighting with each other.

By examining these things one-by-one, you can quickly debug what’s wrong with the design (objectively) and improve it drastically.

Ask yourself “What are the possible reasons this is not working?” and run tests on all your hypotheses until you find the answer(s).

If you want to put your debugging skills to the test and practice this approach, check out this interactive game by Gary Simon at DesignCourse.com which tests you on things like color, white space, typography, scale, contrast, alignment, and visual hierarchy.

If you try it out, reply with your score and let me know how you did!

This post is an excerpt from our newsletter, The Friday Chaser. Subscribe and get content like this (plus a recap of everything happening inside our community) delivered to your inbox every Friday morning!
tab headshot ml
Kyle Van Deusen

Kyle is the co-host of The Admin Bar, the owner of a agency of one called OGAL Web Design and the co-founder of Docket WP. You’ll likely find him trolling The Admin Bar community.

Enjoy this? Become an Official Barfly!

More from The Bulletin Board

Questions To Ask a Contractor Before Hiring Them

If you’re hiring a freelancer or contractor for your project, fit is everything. Get the right freelancer for the job with these thought-provoking questions.
Abby Wood
Apr 18, 2022

2022 WordPress Agency Survey

In March 2022, we put together an anonymous survey for all of our community members to ask them questions about...
Kyle Van Deusen
Apr 08, 2022

What do web agencies use for the H1 on their home page?

A few weeks back I was talking to one of my buddies in the group who was workshopping different ideas...
Kyle Van Deusen
Apr 01, 2022

Join Our Community

The Admin Bar Facebook group is at the heart of what we do. Join in on the daily conversation and get involved.
Join the Community
tab phone 4k member
© The Admin Bar (a Division of OGAL Web Design) — All Rights Reserved