Designing Interfaces Like Master Painters
For one of the Product Design team building excursions, we decided to go to a painting workshop. To set the stage: we’re engineers, not artists. We don’t have much visual talent, really…our drawings speak to our artistic abilities:
Why a painting workshop?
We decided to challenge ourselves and try something out-of-the-box from what we do every day (you ask what we do every day? Quite a lot, we’ve written several blog posts about it).
Our two teachers during the workshop were two artists: Dinara and Stephanie Dindarova. One of the first things they explained was: “We don’t teach realism, impressionism or another style. We teach the artistic language.“
This language is used not only in painting but also in music, theater — it’s universal for all the arts. And as we’ve realized, while we were painting our masterpieces, it can also be applied to designing interfaces.
Beginners may think the clue to good UI design is to follow the newest trends, may it be “flat design” or “neumorphism”. While it’s important to keep the look and feel up-to-date, the trends pass but what stays the same are the principles — the aforementioned language.
We want to share what we learned about art and how we see it applied in interface design.
Find Your Master
Did you know that the famous painter Peter Paul Rubens had so many disciples who actually painted the works he later only signed? Fellow painters called his studio “a factory”. Since forever, art was a discipline where masters passed their knowledge to disciples. The student would have to first observe how the masterworks, then copy their works, then help paint some less important parts until they learned all the craft.
Painters learn from masters, UX designers should too.
No one starts as an expert, even though nowadays it may seem like people expect that. Find someone with more experience and ask them to mentor you. If you don’t know anyone like that personally, use networking, go to meetups, take a course, get to know recognized UX experts by reading their publications and follow what they preach. Having a mentor will make you a better professional faster and with less stress.
Don’t Start Without the Idea
Painters must ask themselves: why do I want to paint that particular topic? What message or story do I want to convey? What do I want my audience to think or feel or see when they look at my art?
When starting designing an interface we also have to first ask: what’s the goal? What is this screen, page, or pop-up for? What do we want the users to do? How can we help them achieve their goal? How do we want them to feel?
I Have an Idea…Now What?
When her students stare at an empty canvas and ask her, “what do I paint first?”
Dinara responds jokingly: “God started with creating the earth and the sky, and only then rivers and mountains, then plants, animals and so on. You should do the same.”
And the same applies to designing interfaces. You don’t start with the position, style or the copy of each UI control, sometimes you don’t even know yet which UI components will be best.
You start by sketching the main areas of the interface using boxes and just draw some lines where the text will be. Then some small rectangles where you foresee having input fields or buttons. And you don’t even think about any exact images, you just draw a square with a cross in it.
Adapt the Style to the Time you Have
Realistic painting takes many days to complete. Impressionists painted their works in one afternoon. And you can take the same approach with interface design. At first, you want to quickly test your ideas so you want little time investment in preparing the interface. You can do the first round of user testing using a wireframe prototype, focusing on the most important parts only.
Iterating wireframes is fast and that’s what you need in this phase of the project when you’re learning a lot. It’s like impressionism. With time you go more into the design details but keep low-fidelity. When you’re confident that your solution is the right one, then you finish it in pixel perfect detail, like a realistic painting.
Paint What You See, Not What You Know
It’s easy to tell an amateur painter from a professional — the first paints what they know, the latter what they see.
A beginner approaches painting with the brain, rational thinking. We have to paint everything with all the details and every detail has the same importance in the overall composition. An observer doesn’t know what to look at, there’s no central thread that tells us the story.
An experienced painter, on the other hand knows there’s no need to show everything — they highlight what they decide to be most important in the composition. They’ll place in the shadow what doesn’t matter and will lead the eye of the observer across the painting just as they want them to do, without the observer even being aware of it.
In the interface, the user doesn’t know the mental model of the system. They don’t even care about it, nor should they even have to know it. Instead, they only need to focus on what they see and interact with. The role of the designer is to hide the underlying complexity, giving the user only the controls that matter to them to complete their task.
When is Your Masterpiece Finished?
Leonardo da Vinci retouched Mona Lisa’s face several times, repainted her hand and changed his mind about the background at least once. He made the changes painting on top of his masterpiece several times and it was only recently revealed thanks to X-ray analysis.
Retouching or even repainting is a common practice in art, and so it should be in interface design. It’s an iterative process that may never end. Just take a look at how the interface of Service Studio has been changing over the years…
So, here are our masterpieces:
Our colleagues in the office don’t believe it, but we did these paintings in only two hours!
In the end, they look great. But we struggled quite a lot throughout the process. We had many doubts, didn’t know how to paint some of the parts, or know which parts we should focus on next. In those moments, our teachers reminded us about the rules of the artistic language.
As you can see, even engineers can become painters! You don’t need to be ridiculously talented if you know the rules and practice patiently. The same applies to designing interfaces — everyone can learn to do it.
So, sorry to let you know developers — no more justifying bad interfaces with the lack of visual skills, and no more excuses to avoid working on UI with designers! If you’re still unsure about it — we highly recommend taking up painting as a hobby.
