Tiny Tactic
How to Get Better at Visual Design
Get over your fear of pixels, UX designers
Visual design is overlooked by UX designers. Either designers think it’s someone else’s role, or they simply think it’s beneath them to care about it because they are worried about the “big picture stuff.”
The bar has risen for the field, driven mainly by the sheer number of things we can do with UI technology. Meanwhile, many design schools haven’t kept up with teaching designers how to make this a core part of their work. Today, UX designers have to be good at UI design but don’t necessarily know how.
The good news is that getting good at visual design for UX design doesn’t mean you must create dribbble-worthy shots. Instead, it’s simply about elevating your work to have passing visuals. Great chefs start on the line, great writers still have to edit their own work. UX design is no different. In this article, I will call out a few ways you can get better at the visual side of your design work so that you put together more competent designs, while staying true to your expertise in UX design.
Challenges
“It’s not my job to worry about visuals”
Cool. Then I suppose you won’t mind a developer saying, “it’s not my job to worry how well this is designed.” Not being your job doesn’t mean it isn’t something to be accountable for. If you are lucky enough to have a visual designer on your team, or even luckier — an entire visual design team that serves your company — you can still greatly elevate your product by raising the quality of work you produce. Just imagine how much easier your job is when a PM breaks down a user story for you. Or how happy a developer is when you have designed something that considers implementation feasibility. Visual design works the same way when you have a distinct role that owns this area.
“I’m not good at visual design”
You and me both! This was one of my biggest anxieties coming out of grad school. My design education focused almost exclusively on problem framing, research and developing solutions to complex problems. Visual design was a small piece of that. I believe many UX designers have experienced the same. There is only so much ground you can cover in a design program and compromises have to be made. But if you’re feeling this way, it may simply mean that you aren’t inherently skilled enough to create strong visual design languages, but you can easily get good enough to utilize them. We may not all have what it takes to become a master chef, but we can learn to execute a competent dish.
“Visual design isn’t that important to the value I provide with UX”
Yeah, yeah, yeah. This could be a product of visual design not making its way into the curriculum of design programs as much as it should. Or it could be a clever lie we tell ourselves to mask our underlying insecurity. I’m not going to spend this article proving the value of visual design but suffice it to say, visual design is absolutely critical to great UX (and if you counter with Craigslist as your own lone exception to decades of digital design then I can’t help you).
Tactics
Copy great products
I remember starting my career in design and having absolutely no sense of size, space and color when laying out a UI. I had a generally good sense of style but I couldn’t tell you what a standard button font size was, or how far buttons were spaced apart, or how large icons even were. I sense that many UX designers feel this way (at least early on).
It can really help by mocking up pixel-by-pixel, screens from great products. This is a distinct advantage to the field of digital design (you can’t easily replicate a building while learning architecture). You can even use extensions to grab fonts and colors automatically, then lay out the UI pixel-by-pixel to get a sense of your “materials.” Over a decade ago, I’d do this to learn how designers got the letter-pressed visual technique (ahh skeuomorphism, it’s been too long!). Today I find myself doing it to understand how great designers pull off soft drop shadows or subtle gradients. I’ll also do it for subtler techniques like understanding how a designer can pull heavy-weight fonts.
The point is, copying existing digital products can give you a sense of visual judgment while designing. And as you progress through your career, you may still finding yourself doing this to learn how trailblazing designers pull off new techniques.
Curate designers you follow
In grad school, I had a professor who pushed us to constantly curate examples of great design in a sort of scrapbook. I took this technique digital and employ it on Twitter, Behance, and Dribbble. I use the word “curate” carefully here because you should be revisiting who you follow both in terms of adding or removing as your tastes change. I’ve been consuming Dribbble for so long that I can see a visual history of how my tastes have changed through my Likes. But who I follow has changed so that I’m ensuring my visual eye is keeping up with large-scale trends.
I imagine the biggest objection to this will be something like, “designers shouldn’t follow trends,” or “great design is permanent and not trendy.” There is truth to this, and frankly, I often complain how trends move too quickly in digital design. However, I will counter that becoming more in tune with visual design will help you filter through the noise. You’ll get better at sorting through what’s a macro-trend, and what’s fashionable.
Edit your design work
Earlier, I used the analogy of a writer having to edit their own work. I think many UX designers could do more to edit their own work. This applies to copy and visual design. Interestingly, in all the dozens of design portfolios that show off designers’ processes, I have never seen “editing” as a stage. This should change. Designers need to set aside time in their process to edit their final production — whether it’s for a small Jira ticket, or a monumental concept.
Editing your work will force you to break away from thinking about the solution and now thinking about how its presented to the user — like plating in a restaurant. This is also an instrumental step in improving your visual design skills because this is where you celebrate the pixel-level detail and truly hone your eye for visual design.
Visual design is a key competency to UX and while design system innovation has helped relieve some of the burden on UX designers, being competent at visual design is required. Thankfully, the path to becoming better at visual design is not nearly as challenging as it may seem. And by simply focusing on simple ways to improve by watching others, you will start to make better design decisions in your own work. You may never be tasked with establishing a new visual language for an app, but you’ll at least have a portfolio you can be proud of.
When I’m not helping you be your visual best, I’m working on Sketch design tools at UX Power Tools to make you a better, more efficient designer.
