How to design for emotions: a starter’s guide
Perfect for the lonely designer souls thinking KPI’s shouldn’t be your only worry.
Disclaimer : What first started as a pretty short post, quickly turned into a much more consistent piece than initially planned. Make sure you can spend at least 20 minutes of your time to go through it . Just sayin’
__
Here at Dogstudio, we’re constantly talking about the importance of emotions in design and how it always had such a central position in our thinking.
After more than a decade in the business, reading, and listening to numerous talks about the importance of data, stories, journeys and so on; I felt it was actually time to go beyond that point.
Wait a minute! Before being crucified on the altar of usability, I would just like to clarify :
I am convinced design’s first role is all about solving issues and making our life easier through on point and smart decisions. Right! Now I also truly believe we have a strong tendency to get obsessed with rules and forget some ground facts about us as human beings, the way we think and what drives us to take decisions.
Above everything, I am convinced that all this energy we spend trying to align elements, respect grids, ensure legibility and usability in fonts, colors, balance, whatever, is part of a way bigger picture which is much deeper than a set of logical rules.
Sit comfortably, because it might take a while.
The power of constraints
__
First, the boring part: I started designing websites about ten years ago, at a time when CSS2 was just kicking off and most HTML websites ( read here, not the catchy crazy flash websites ), were relying on the same patterns : large header with what we used to call « hero image », two-thirds column of your content with a few information, and one-third on the right with call-to-actions, news blocks and events. Finally, your usual footer with bulls*#! copyrights and legal mentions.
Back in the days, deciding to create a rounded-cornered button meant breaking down your button in 6 different parts ( 4 corners and 2 repeating elements ). Considering that you were not doing the development yourself, it would have most probably lead to a hot-headed slap-in-the-face, “do you really want to kill meeeeeee????!” discussion with your developer.
Well, I can say we surely don’t miss that time! That being said, I am more than ever convinced that from the greatest constraints often come the greatest results.
Why is that?
Because, if you wrap your mind long enough around a problem, your brain starts to dig into real creativity as it is forced to activate another of its zones : the pre-frontal brain, part of the neocortex, also know as “ “theoneyouonlyusewhenyouforceyourselflongenoughtothink”.
Going right back to the subject, it also meant that a lot of websites were looking similar and lacked a sense of true uniqueness.
Fast forwarding to today : mostly anything can be sliced, no more excuses, doing a rounded cornered button takes approximately 20 seconds and the web turned into something more organic, print-alike as wildly open as it has ever been.
We’re humans dammit!
__
Nowadays, everything is evolving around numbers, data, analytics, how much time people actually spend on your website, how much money they are going to spend, what is your rate of shopping cart abandonment, and so on.
While part of it absolutely makes sense, as nobody would want to spend a considerable amount of money without actually knowing how well spent it is, it seems like it has become the only factors for a digital project success.
Normal?
Not at all. because something we totally seem to forget is that we, at the very core of our human nature, are totally illogical creatures.
Indeed, we can measure, anticipate, calculate, target and retarget as much as we like, but there’s only so much we can plan before the biggest part of ourselves takes over. This illogical, emotional, purely heart-driven part of us finally takes over to help us make choices.
We can produce large amounts of research data and technically come up with the best user experience for an e-shop, relying on users browsing patterns, psychology, micro-interactions and so on. But what eventually drives a consumer to purchase on an e-shop is, before anything else his/her guts and the emotions that were created with the product/brand
Buying is often and by nature an impulsive behavior, and it is certainly not the logical part of our brain that takes over when we suddenly decide to buy that super limited edition of Nike sneakers online.
Soooo…wait ,what?
Why am I bringing this up?
Before jumping into it, I have first to introduce someone else to make a point : David Carson.
David is an american graphic designer who’s better known for having art directed the rock subculture magazine Ray Gun. For a dozen years he came up with and developed a style based on grunge-messy-and somehow busy typographical compositions ( which he himself referred to as being « Grunge typography ».
In his widely spread and popular TED speech, he is emphasizing the unspoken rules in communication layers.
I first saw him around 8 years ago, giving a talk at the « Offset Festival » in Dublin, and I remember disliking his work for being absolutely too messy and ignoring too much the design codes I was looking up to.
I recently re-watched his TED talk and you want to know the funny part about it? It now resonates in me so much more.
His whole point is about communicating information before our brain actually has time to consciously process what we’re looking at.
His theory is pretty simple and relies on several examples including those two garage doors he saw coming out of an airport, and asking « in front of which one would you absolutely NOT park? » and « who is the psycho killer in here?»
Still quoting him here:
“Don’t mistake legibility for communication. Just because something is legible doesn’t mean it communicates. More importantly, it doesn’t mean it communicates the right thing. So, what is the message sent before somebody actually gets into the material? And I think that’s sometimes an overlooked area.”
When designing for a project, the very first impression you are going to give users is going to leave a mark and surely you want people to go for « wooOOOooow » than « Meh ».
The next best thing? Once you are going to ask them if they still remember about that purple website they have seen 6 months ago with that webGL bubble ( *wink wink, selling our own shit here*), if their first impression was positive enough, chances are they will remember.
This is really simple and nicely summarized in this other quotation from Maya Angelou :
«I have learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.”
The road to hell is paved with good intentions
__
If there is a design-movement ( if we can call it like this ), which brought webdesign in the depths of this misunderstanding of human nature, we can all agree it is “flat design”.
Let’s backup a bit : after years of skeuomorphism ( what’s another leather-like UI, right? ), the two major players which are Microsoft and Apple, decided to get rid of the distraction and turned back to simpler design codes.
In its 7th version, IOS turned to a much flatter interface. Based on simple shapes, contrasts and colors, the Jony Ives led IOS design took out depth which existed so far.
A few years before, in 2010, Microsoft came up with what they called Metro UI, their design system already pre-existing in their late Zune Player and was the very basis of the 2012 Windows 8 look and feel.
Somewhere along the way, those two major u-turns from those leaders who got us used to bevel, emboss, gradients, shadows, wood and leather textures, influenced the whole IT world. People soon started to write articles and design websites, apps and interfaces heavily relying on those distraction and ornament-free design codes.
Soon, every single button, every single design element, started to look exactly the same. Websites which used to rely ( too much ?), on real-world codes ditched everything to be part of this big masquerade.
Following the usual « let’s go in the opposite direction than the previous trend » behaviour, there was a one-way degradation trip from being a system supposed to make everything simpler, to a system that was not only visually poor and lacking any kind of singular personality, but also a threat to usability.
With this new unchallenging approach, legions of self-acclaimed designers rose from nowhere and a plethora of websites popped up with clickable elements that look like non-clickable ones or colors randomly used.
This is part of an issue related in here by Kate Meyer from the UX experts from Nielsen Norman Group
…While young people seemed faster at navigating the designs, they also indicated they didn’t really understand the UI intuitively. In fact, for the most part they seemed to have, uh, pretty much no idea what they were doing.
“It’s hard when you think something’s a link and it’s not. And you have to figure out how to get it another way,” one user said. Meyer compares this behavior to lab rats in conditioning studies…
Of course, there are always exceptions and talented designers making the most of it and taking that whole stuff to another crafted level.
Towards a better understanding
__
Designing is an organic process. Far from numbers, far from all rules, and beyond ensuring that what we build is reliable, and usable….there’s also a little magic.
Every single designer can relate to this situation.
You start designing for a project and soon find yourself struggling to choose the right direction.
You would be moving elements, enabling layers, disabling them, changing colors, composition, and so on but nothing seems satisfying enough. Then, slowly, there is this « Hahaaaa » moment. Something which is first really subtle and light, but soon starts to get more stable and even more palpable.
Remember this feeling of doing the right thing and being on the right path? It is just as elusive as it is satisfying.
Then there’s still eternal struggle. Most people assume that design is merely sitting down on a chair and directly starting to lay down elements, fonts, colors, images etc.
A global misconception of the design process is that it follows a linear progression.
Now, reality is a whole different thing. Designing is messy and under that visible part of any design, there are thousands of micro-decisions.
Every single second, we decide to keep or reject a direction, sometimes voluntarily, sometimes even unconsciously. The very nature of this process makes it nearly impossible to fully figure out some elements before moving onto the next one.
The rookie mistake
__
By the time I landed my second position in an agency, I came from being Flash designer ( mostly doing banners and illustrating flash games ) to my first job as a webdesigner.
Bad news?
I had absolutely no idea what I was doing.
I was asked to design websites without having the slightest notion of user interface or usability.
I sadly remember spending hours trying to make a website’s header pixel-perfect. Hours to figure out the right image, font, size, colors. Well, it could have been amazing, if I then didn’t have to move onto the next elements of the page in scrolling order.
Trying to make that next element also perfect for a while and surprisingly noticing I was a total moron as I soon had to go back to the header, and rework things I thought were final.
Why?
Because of the absolute lack of context.
Once you get an element to visually work and look good on its own, you often lack of a clear vision of the bigger picture. You lack perspective, you lack context, and soon find yourself ready to face a shit storm of frustration, when all the elements you thought were supposed to be final, now have to be reworked to fit with all the other elements.
As stupid as I may be, turns out it actually took me a while to figure this out by myself, and it came as a surprise to see this exact same pattern in a lot of fellow designers’ process.
When interrogating designers about their skills and flaws, 90% are going to tell you the same thing : « You know, I’m a perfectionist… »
The real trap is when perfectionism gets mixed up with haste, and a will to look at the final result without the sweat it takes. A bit like a man or woman looking at the house he or she built with his/her own hands after hanging the last frame while being entirely oblivious of the most important part : the process.
As every organic process, good design takes time and dedication.
You cannot force it, you cannot decide to find the right idea at the right time because it all has to come to you through those micro-decisions you take. I think I can honestly agree that I am not the most patient person in the world (far from it, actually). It is not in my temper and I often would like things to go faster, but when it comes to design, I had to come to the conclusion that I couldn’t rush it, and even better, that its segmented process makes it a beauty.
Beating the creative block
__
*Elevator music* Hi and welcome to this short intermission about what people usually call the creative block. You know that feeling when you’re looking at a blank canvas and you have no idea how to start things up?
Yup, that very same!
Technically everybody is different but there is also a kind of group with seems to be a pretty popular one : “the scared perfectionist”
“The scared perfectionists” are the kind of people who are going to keep on staring at the blank page because they are scared that their next move will not be the right one.
You know, the kind who are going to think that if they do something wrong ( and what’s « wrong » after all?), someone is going to pop behind them, point at their work and laugh. The kind who expect to be able to draw a perfect circle on paper without trying thousands of time beforehand.
If you’re one of that kind…do not panic…breathe…I used to think the exact same way.
Quickly going back to how our brain works, I actually slowly understood that our capacity to think, to articulate elements and ideas is like a muscle.
Remember that « pre-frontal » part of your brain?
Well, let’s assume we are lazy by nature and that when we get presented with a challenging situation we are naturally going to refer to our own memories, to our previous experiences, to figure things out without trying too hard. It’s fast, it’s unconscious, and it’s a trap. You’re going to overlook the problem because your brain is a lazy little bastard. To get past that point, you need to force your brain and your creativity muscle to work.
Okay but technically, what should I do then?
It’s pretty simple : you have to keep on moving. While the first reaction would be to look at your blank canvas and only think of the potential moves you can do, the ideal way to actually get started is…getting started.
And what prevents you from doing that from the start?
Self-judgement.
You didn’t even start working that you’re already looking at your work, judging what you may do next, and redeeming those moves as not good enough.
Once you stop looking at yourself under this judgmental eye, you egomaniac pretentious prick ( read designer ), you’ll quickly notice you can start designing things, laying down elements, blocks, fonts, colors, images, and what not.
No, it may most probably not feel entirely relevant at first, BUT starting the movement, and producing small elements is going to slowly start activating different parts of your brain.
You’re going to create links which you did not see in the first place. You’re going to bounce on an element you designed thirty minutes earlier that felt inappropriate, and make it evolve into something already more interesting.
Keep moving and you’ll be amazed with how fast an idea, or an art direction can sometimes unlock itself ( sometimes…we’re not people of logics, remember? Sometimes it takes more time).
Best part of it?
You are not going to THINK or try to do the right thing, but you rather ere going to FEEL it, and this is one more reason why designing is an organic process, somehow stuck between your brain and your guts.
Little tip : never ever throw anything…If you’re unsure about something, store it in a group, hide it, and you’ll eventually come back to it later with a whole new perspective.
Then life happened
__
Now the boring part!
*Speaking with Michael Caine’s voice* After quitting university in my first year of a Computer Science degree, and finally realizing after 6 years of intensive high-school mathematics that I hated it, I found myself wondering what I really wanted to do with my life.
I always drew a lot in class, painted during my free time, built wooden cabins, spent half my childhood doing legos, but I never thought I actually could make a living out of a creative job.
On the other side, I performed quite well at school at the expense of any kind of popularity. Besides, I always liked to understand things, to challenge myself, and activate the rational side of my brain.
When reflecting on this, it is funny how sometimes you are so close to all those little parts of the puzzle that you are actually unable to bring them together. Years later and with another perspective on life, it somehow starts to make so much sense and you feel dumb for not understanding earlier.
Following University, I went to a Computer Graphics school with the intent of learning 3D design and special effects. Along the way, I not only discovered I absolutely hated webdesign and development, but I also developed a strong and personal interest for digital painting during my free time.
Photoshop 7, a small A5 Wacom tablet and I began studying light, textures, composition, anatomy. I spent countless hours reading articles about techniques, gathered hundreds of illustrations, references, elements I could use later on. Digital painting even ended up being my thesis subject with a 150 page document to teach its basics ( in french, sorry…but it’s freeeee).
Quite frankly, I still use those principles and techniques on a weekly if not daily basis when working on designs. This is also why it is something I would still, and absolutely recommend to anybody approaching webdesign today.
Learning about the basics of light, shadows, the theories to balance a composition, how to brush elements, textures, understand the way colors interact, and all those bits and pieces of theory and practice.
Speaking of that, there is this excellent reference from Arne Niklas Jansson
A simple process
__
Now, whether it’s in digital or traditional painting, if there’s something you quickly learn along the way, it’s that in order to build your image, you cannot focus on the left arm of the character you’re attempting to draw and end up being stuck on the other side of your canvas with no room for the other arm, simply because you didn’t anticipate.
So what do you do?
You start by blocking your shapes. You look at the overall picture and you quickly draw all elements.
Not over precisely, but just to get an impression of your composition, to make sure you will have enough room for everything you want to draw.
Then, without getting way too much into specifics, you are going to work your way through the painting in layers. After blocking the shapes, you are most probably going to identify your color palette, and then fill your canvas with a dark-ish background color which will act as the color base of your painting.
From there on, you’re going to keep on adding layers using lighter colors to better define volumes, all the way to the top layer containing the brightest elements of light of your illustration.
Side note : I am not the greatest expert in painting techniques, but methods can also vary with some people preferring to work out everything in black and white and then only add the colors at the end to concentrate only on volumes, light and building things in the right way.
So, now, see why I speak of layers ?
Simply because the point is to work on the overall picture, and to absolutely avoid working on the details and specifics of an element before moving onto the next layer. Working that way ensures consistency in your lighting, in your composition, in your overall result.
Now what in the hell is the link with you designing a website?
Getting things in motion
__
You just opened Sketch, Photoshop, Figma, Gimp, Paint, whatever you work on and you’re now staring at your blank canvas.
First step would most probably be to start blocking your design.
If you have a wireframe, we can assume this is going to be your base. If you don’t you can still grab a piece of paper and a marker and start sketching the main structure of your page.
You noticed how I used marker instead of pen?
It’s because a marker features a bigger tip. Something large enough to prevent you from getting into details, something which is actually going to help you block zones and elements but prevent you from drawing potential details too early in the process.
The point here is about structure, not design.
At this stage, you can also think about identifying the color palette you will use ( which is most probably going to be linked to your client’s branding, and possible constraints you may have from the start ).
Now, we can work our way to the top through the same process. Start by adding all your content, titles, blocks of text ( and “lorem ipsum” if your client wasn’t kind enough to give you content beforehand ( and we all know that’s bad omen but well…)), placeholder for images, fonts, etc.
Basically the idea is to focus on avoiding to try to fix elements permanently. You might have a super good idea over an element, fiddle with it, turn it to something, and if it’s not exactly what you expected, leave it there, maybe hide the element and keep moving onto the next elements. Once again, and as explained before, never throw away anything, because you never know how you’re going to think in the next couple of hours. You might need those elements back at some point.
There is a lot of fuzz about how part of design-thinking is into our capacity to iterate and although I may not entirely agree to every single part of the process, I can only agree to our capacity to improve a design through iterations and layers of rework.
If we can identify a difference with the painting process described above, it’s in the consistency of your layers of rework : it is perfectly acceptable to lay down the first elements of your footer and think about something you can do to improve another element of the page.
Actually, even better, it is the entire point of working this way : working out an element is hopefully going to help your brain make links to either things you can do, or things you have already done and can improve.
When insisting on the necessity to keep moving in order to beat the creative block, this advice is also the best way to work your way out of your current design.
Working this way, from the bottom layer ( the very base ) , up to the top one ( the super details ), you will ensure a consistency between your elements. Even if your layers of work are not purely homogenic in their level of detail, as long as you don’t judge yourself and accept nothing is perfect and can possibly be improved later on…then you are golden.
The Pinterest syndrome
__
As most designers, you most probably have a Pinterest account full of random stuff. On top of all illustrations, food recipes, tattoos, clothes and everything, you are sure to find a webdesign section.
It’s only last year, and through a series of discussions with Lorena that we came up with the idea that our way to work and our « style » ( if any ), was not only influenced by print design and painting, but also by the way we were gathering our inspiration.
Let me put it simply : when you are browsing a website on your computer, tablet, or any kind of digital touchpoint, chances are you are discovering it section by section. Scrolling down a page shows you more of this design, meaning you have an exploded perspective of the overall design you produced.
Now, when you are checking for inspiration on Pinterest, you’re most likely to see the entire page, from the header to the footer.
To make another link with painting, it’s exactly like working on your canvas, and deciding to step back to have a better look at it. Once we understood we were also subconsciously influenced by the way we were presented exciting design, it helped us see things under a totally different angle.
Now, not only could we work on separated elements to make them look good, but we also quickly noticed that if the total composition of your design ( the entire page ) was visually balanced, then chances were your design would also be nicely balanced when seen through the scroll of any digital touchpoint.
This was kind of our breakthrough to the importance of composition. Exactly like you would do when building a painting.
Composing your image
__
Even though your initial sketch for the wireframe is most probably pretty simple, symmetric and straightforward; it does not necessarily mean you should retain that « boxy » feeling when designing.
Well, it is not a rule of thumb ( actually, nothing I said is ) as it also all depends on the context, the kind of project you are dealing with and the constraints, but, working on the overall composition and balance often lead us to a better design.
Without getting in too much detail here again, let’s say that voluntarily trying to leave openings between sections of your website, is going to ensure it features an actual flow.
Leaving those openings is going to leave your content breathe. It is going to give you the feeling the path from the top to the bottom of your page is traced for you. You’re going to notice that once again it feels better.
The counterexample is having entirely different sections, all defined by closed blocks. There is no actual harm in that, not at all, but we are still speaking
As you may have noticed, It is actually funny how much all those terms we use get along pretty naturally : organic, flow, breathing,…
Doesn’t it all make sense that in order to evoke emotions, you need to go beyond the rational thinking and bring out something deeper? something natural ?
Alternate point of views
__
Another thing you might learn early on in the process of creating illustrations, is a constant need for a fresh look.
Let’s assume you work on a portrait, and after a few hours of work, you have the feeling things are greatly coming together, but the issue is that your eyes and brain are used to see things the way they have been for the last hours.
One of the best ways to challenge this, is too simply flip your picture horizontally. You will directly notice issues, you will see that the left eye which seemed to be rightfully drawn is actually super wonky.
All you needed to be able to see it, was a fresh look on this work you already knew too well.
I wouldn’t say this it makes a lot of sense while working on a design for let’s say, a bank website, but the simple fact to constantly zoom in ( 100% scale ) and out ( full-height of your design fitting the screen ), is part of this process to bring a new light on your work. You are going to discover potential flow issues, problems with color balancing or even composition.
Move often, move fast, and you’ll be in the right zone to improve your design, layer by layer.
This is just the beginning
__
There’s actually way more to be said about this « natural » or more « art-inspired » approach of creating design. I already know there will most probably be reactions arguing that design is not art, and I would actually half agree. Indeed, design is supposed to solve problems and to bring solutions to communication issues, but it doesn’t mean it has to be boring and entirely disconnected to the very nature of what makes us humans.
I want to believe there’s still room for excitement, emotions and more than ever a need to bring up those communication sublevels David Carson spoke about.
You want to make a difference ?
Be memorable to start with, and don’t come up with usable but soulless designs. Those who are going to win this race for people’s attention, are not the ones solely going for their brains but, above all, the ones that will be able to talk directly to their hearts.
If you’re into the subject, I also find this great article from Daniel Ruston treating the same subject from a higher perspective
I would love to get your reactions, comments, tricks, ideas or anything you feel relevant for this topic. And please feel free to follow for more upcoming articles soon!
Ho, and you also know you can find me back on twitter under @upskydown.
__
About dogstudio
Dogstudio is a design & technology firm with offices in Chicago, Brussels and Namur ( Belgium ) committed to crafting digital products & experiences that move people. Our clients and now friends include Microsoft ( Seattle ), The Museum Of Science and Industry of Chicago, Crypt TV ( LA ) , Quanta Magazine ( NYC ), The Kennedy Center ( Washington ), Chaumet ( Paris ).
Thanks for clicking the 💚 if you found this article relevant, it’ll motivate me to get onto the next one.
