Methods for Better Visual Design Solutions

Designing visual systems for digital products is a process grounded in exploration, constant refinement, and creative problem solving. Decisions about color, typography, and interaction patterns must all align to create a compelling visual experience that is both highly functional and immediately memorable. While there is an obvious amount of direction-giving design needed at the start of a project, the best designed sites and apps are often the result of continuous, intentional refinement as the product is built and tested. It’s during this later stage of a project that small issues arise in implementation which can hurt the overall consistency and quality of experience. This is the time when design teams must be the most intentional about finding the best solution, not just the quick fix.

The most effective visual solution to these later stage issues is often what I call the inconspicuous answer. This is the elegant solution that takes a bit of work and thoughtful evaluation to discover. For example, a recent project required the use of a branded header bar across the top of the page to mesh with existing applications and provide context for incoming users. This worked fine for the initial screens but we soon realized that the interior pages of the application had specific size constraints that made the same header bar seem like wasted space. After brainstorming a few different solutions we made the decision to remove the header bar from the interior screens and simply use color and layout to reinforce the brand. Users would never arrive at the interior pages without coming from a page with the branded header bar, and this solution allowed the interface on each page to be most targeted to its specific role in the app. By evaluating the collective job of each screen, our team was able to find the inconspicuous answer that maximized space, established brand, and clarified the overall experience.

As demonstrated on this recent project, extra thoughtfulness helps find the balanced solution that addresses the full problem, not just one part. The inconspicuous answer is this graceful resolution when the current element isn’t working, but the first proposed fix is heavy-handed and out-of-line with the rest of the visual experience. Finding this answer is never easy, but it takes the design of the product to a new level and is always worth the extra investigative effort. Below are two of the many methods our design teams use to pursue these inconspicuous answers. Keeping these principles in mind helps us stay intentional in the refinement of visual design as the complete digital experience is brought to life.

Finding this answer is never easy, but it takes the design of the product to a new level and is always worth the extra investigative effort.

Explore the Underlying Issue, not just the Proposed Fix

Visual feedback is often received in the form of a proposed solution. Good design teams look beyond the proposed fix though, and attempt to fully understand the underlying circumstances that are causing the problem. Sometimes there is larger complexity buried within a specific comment. For example, if a user struggles to read instructional text presented in one part of a site, it is critical to understand if this is caused by a display problem or tied to a needed improvement in the site-wide typographic styles. A simple padding adjustment to one screen might resolve the issue, or a broader modification to the line-height of all H5 elements might be needed. Without looking past the proposed fix to the root of the problem there is no way to identify the best answer.

Don’t Settle for the First Solution

This concept is ingrained in our basic design philosophy, but it’s worth repeating in this context. The inconspicuous answer is rarely the first option created, and even when it is, testing other options helps us better understand and communicate why it works. There are many ways to present form validation messages for example, but we must consider the types of inputs and the specificity of error messages to be able to present the user with a simple and clear next step. Forms are also an area where testing is critical. Don’t settle for the first answer during the initial design, and don’t stick with the first fix that comes to mind when feedback comes rolling in. By developing a process of iterating and testing we can continue to better solve the unique challenges of specific elements, be they form validation or otherwise.

Visual design isn’t a front-loaded activity that departs after the initial phase of a project is complete. Keeping methods like these in mind as we tweak and improve visual designs over time helps polish a visual experience so that it is increasingly consistent and compelling. Stay tuned next week, as I share two additional methods we’ve found invaluable in finding the inconspicuous answer.

Do you have additional thoughts on these two design methods or examples of when a similar approach has helped your team? I’d love to hear about them. Reach out on twitter @samMdesign or email me to share your thoughts and best practices.