Debugging Your Design

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 …

Kyle Van Deusen

Published:

Filed Under:

Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a new resident of the Commonwealth of Virginia.

debugging designs
This content contains affiliate links. View our affiliate disclaimer.

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!

Share This Article!
Kyle Van Deusen

Kyle Van Deusen

The Admin Bar

After spending 15 years as a graphic designer and earning a business degree, I launched my agency, OGAL Web Design, in 2017. A year later, after finding the amazing community around WordPress, I co-found The Admin Bar, which has grown to become the #1 community for WordPress professionals. I'm a husband and proud father of three, and a new resident of the Commonwealth of Virginia.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

August 4th, 2023

What’s New in Perfmatters?

Learn about all the new features, updates, and possibilities with an update from the plugin's co-founder, Brian Jackson!

July 28, 2023

Test, Build, & Deploy Websites with Ease

Join us to explore InstaWP, a game-changer for your WordPress workflow. Uncover how you can save time, reduce stress, and streamline web development during our live demo on July 28th.

July 6, 2023

Navigating HIPAA Compliance

Unlock the secrets of HIPAA compliance on July 6th! Don't miss our expert Paul Stoute as he guides web designers through the maze of regulations, saving you from potential pitfalls

More Articles

Yellow Toy Robot Manning Ai Chat Stand 2023 11 27 05 24 26 Utc Copy

AI Chatbots: A New Income Stream For Digital Agencies & Web Designers

Understand how AI chatbots can be a game-changer for your digital or web design agency in this blog, from enhancing customer service to boosting revenue.

Website Design Wireframe 2023 11 27 05 25 19 Utc

Extra, Extra! Read All About It! Crucial Web Pages to Include on Your Agency’s Website & How to Write Them

Need to overhaul your digital agency’s website or looking to create one from scratch? Find out what pages to include and how to write them in this blog.

Why Email Marketing Should Be On Your Radar

Why email marketing should be on your radar in 2024

Email marketing is the best way to connect and build trust with your audience. It’s easier to start than you think. Let’s talk about it.