Bridging The Gap: UX/UI

Getting started with visual design

As a Product Designer working within a consultancy it’s critical to understand the business and talk to users in order to understand their behaviors and pain points. We can then begin to ideate, validate, and iterate on solutions to specific problems that surface throughout this discovery. So what happens when it’s time to start thinking about the visual design of the UI? How do we bridge the gap between solving problems and creating a beautiful user interface?

Visual design is just as much of an iterative process as the user experience. Exploration is essential to understanding what works well, and what doesn’t.

Visual Design isn’t some magical dust that’s sprinkled onto wireframes hoping they grow into beautiful products. It’s a process that craves exploration in order to see how we can push the boundaries of brand colors, typography, and information hierarchy into new territories.

Several visual iterations for a profile card component.

In a recent post, fellow Pivot David Ghent recently wrote about the 3 Tips for better visual design on an agile team. David recommends setting aside time during your week to explore visual design directions and I couldn’t agree more. By exploring visual implementations alongside the problems you are trying to solve, you will ultimately reduce the time it takes to arrive at a visual style you and the client are happy with.

Defining visual styles early in a project ensures designers and developers have a baseline for using colors and typography consistently. Even when they change over time.

In order to assemble a baseline of styles that developers can get started with we need to start simple. Gather a list of colors, fonts, and logos into a library to get the wheels in motion. Over time, these styles will grow to include more items such as iconography, forms and inputs, patterns, grids etc. Below are some scenarios you may find yourself in when trying to assemble these items.


Existing Brand

If the brand has an existing guidelines document you can use this as your starting point to extract the information you need to get started with visual explorations.

Be careful! These guides are often built by branding and marketing teams that often do not have the greatest context when it comes to building mobile or web applications. Treat them simply as a starting point. Create color combinations that have sufficient contrast and define type combinations that scale well and create proper information hierarchy. Marketing sites are NOT web or mobile apps, and thus, it’s important for you to define your own set of guidelines.

Existing brand guidelines are a great resource for locating existing colors and type choices

No Guidelines — Existing Logo & Website

You won’t always have the luxury of having access to existing materials so in order to get the answers you need you’ll have to get creative. You can use a color picker app or browser extension extension to pinpoint the colors and fonts used on an existing website or document. Personally, I really enjoy Sip by the Olá Brothers (copies color code to the clipboard!) and the What Font browser extension for Chrome. Otherwise, pop open your browsers web developer tool to inspect the CSS and see what colors and fonts are being used.

Your browsers web inspection tool can be very handy for obtaining the information you’re looking for

No Existing Brand

You may have the opportunity to make recommendations on the visual direction for the brand and product. Lucky you! There are several exercises you can run with your client to get them involved in the process.

Competitive Brand Audit
Take some time to look at the existing market and competitors to see where there is opportunity to set your product apart. Look at things like logos, color schemes, visual aesthetic and tone of voice to understand where the opportunity is for your brand and product to stand out.

Mood Boards
By assembling a mood board of color palettes, imagery, and other visuals pertaining to your brand and posting them up in your workspace you will allow the team to gain visibility into the aesthetic direction you’re aiming for. I recommend using a tool like niice.co or Pinterest to aggregate visual search results from multiple sources, but you could always keep it simple and use Google.

Visual Style Research
Take some time to get inspired. There are a lot of great products out there that have beautifully thought out visual design languages. Explore what’s been done and assess what could work well for your product. At the end of the day you will have to figure out what works for you and your team and why it works. Don’t be afraid to explore multiple directions.


Managing Design Debt

As you begin to explore the endless possibilities for visual design direction you will inevitably end up with a lot of discarded explorations within your files known as design debt. These explorations, while incredibly important, can begin to clutter the overarching visual direction for your product. Keep an active page or art board for ideation where you can play around while allowing the rest of your file to remain clean and focused.

Create art boards within your style guide for color palettes, typography, form fields

The thought of visual design can be daunting when all your focus is on solving the problems pertaining to the product. By starting the discovery early and iterating often you’ll allow the necessary time to explore and see what works well for your product. Your pattern library is going to grow as you’re solving different problems over multiple user scenarios. Keep things as tidy as possible and take a step back every once and a while to make sure you’re remaining consistent with your design decisions. Your team will thank you for it.


Do you work at a consultancy, agency, or on a internal product team? I’d love to hear what has worked well for you and your team! Leave a comment or hit me up on Twitter.