Empathy in Design: How and Why Everything Looks So Friendly Now

<div class="p-lr mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Kindness, friendliness, and humanity in design</p></div></div></div>

<div class="p-lr mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Faced with seemingly impassable obstacles, we find solace in rote positivity. Living in, generously speaking, tumultuous times, we look for hope where ever we can get it. In response to this, brands have become friendly. All smiles, and cute emojis in your bank’s notification saying that you’re late on payments.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The role of the designers in all of this is to placate? to inspire? to follow societal tendencies, wherever they may lead?</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">2017, Jonathan Barnbrook, <a href="https://cameraarts.ch/positions/designers-should-be-problem-revealers/" class="underline">part of a series</a></p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Historical Background</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">A good story always stops in its tracks to give you half an hour of exposition (so that you could get nice and bored, and then when the things pick up again, it’s all the more exciting). In the first half of the 20th century, the design was machine-centric and futuristic: praising ingenuity and engineering, looking forward into space. In the aftermath of the worldwide trauma of the war, the 60s demanded to have hope again, to feel joy. In graphic design, the most telling example would be the album covers: barely existent as a form previously (usually the photo of the singer with the track list next to them), they’ve become colorful and often psychedelic in the 60s. This excitement somewhat continued through the 70s, but was cut short later on. Depending on where you look, the 80s were either drab and mournful, or entirely too garish.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">Note the typefaces on the 60s covers, which are now often evoked</p></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The introduction of the web was somewhat of a reset button. A whole new design space. Starting with stumbles, in both due to its novelty, and the technical limitations at the time, it settled down into something digestible soon enough. Here is a brash generalization: until about 2015, web design was focused on technology, and then the need for personal approach arrived. See where we’re going with this?</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">In our project for <a href="https://www.heartcore.com/" class="underline">Heartcore</a>, we’re bringing out that kindness by digging deep into childhood hopes and dreams, heavily inspired by Le Petit Prince. Behance case <a href="https://www.behance.net/gallery/113531463/Heartcore-Capital-Brand-Identity" class="underline">here</a></p></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">In the response to the stuffy 50s and the Vietnam war, the hippies arrived. Now, in the response to, well, everything, there’s a society-wide burning earning for kindness. Of course, there was an occasional friendly brand or website, but as a ubiquitous thread it became notable in about 2019. Visually, it was a response to the uniformity of 2010s. Yet more importantly, its underlying current is the cultural shift: we’re looking to be more ethical, to be kind, to be hopeful again. In design, there came a demand for more emotion.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">In its recent rebrand by <a href="https://www.wearecollins.com/work/match/" class="underline">Collins</a>, Match turned down default digital blue and neutral grotesks in favor of something a lot more personal and empathetic</p></div>

<div class="p-lr "><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Everyone Says "Hi"</p></div></div></div>

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The big shift in design is in moving the focus from the products onto the people who are going to be using them. Especially now, since we’re moving more and more into the digital spaces, we simply want these spaces to be pleasant to be in. This primarily results in softer color schemes, serif typefaces, cute illustrations.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">These days, we’re getting up close and personal (in a good way). It’s not just the visuals. In the following examples, note the tone of voice: it’s a lot warmer than anything from a decade ago.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr"><a href="https://www.lemonade.com/" class="underline">Lemonade</a>. Cute, friendly and kind insurance</p></div>

<div class="mt-16 mb-104"><p class="text-gr">Google recently changed its design system from <a href="http://material.io/blog/announcing-material-you" class="underline">Material Design into Material You</a>. The whole system went away from design that’s simply neat and functional towards something more emotional</p></div>

<div class="mt-16 mb-104"><p class="text-gr">Our project for <a href="https://www.behance.net/gallery/107997033/TL-Dental-Website" class="underline">TL Dental</a>. We use a warm color scheme, serifs and humanizing photos to make this clinic seem not only friendly and approachable, but also refined and sophisticated</p></div>

<div class="mt-16 mb-104"><p class="text-gr"><a href="https://www.upword.ai/" class="underline">Upword</a> ups your learning skills, and does so while remaining friendly and energetic</p></div>

<div class="mt-16 mb-104"><p class="text-gr"><a href="https://www.behance.net/gallery/124375497/Bluf-VPN" class="underline">Bluf VPN</a> stands out on the market with its usage of cute and exciting characters</p></div>

<div class="mt-16 mb-104"><p class="text-gr">Kindness isn’t just being friendly. On its website, <a href="https://mymind.com/" class="underline">My Mind</a> doesn’t have anything out of place, no excessive visual noise. It’s peaceful, even serene</p></div>

<div class="mt-16 mb-104"><p class="text-gr">In our project for <a href="https://www.kodland.org/" class="underline">Kodland</a>, a coding school for kids, we mesh photos with illustrations. Putting the focus on the people while making everything a little brighter. Behance case <a href="https://www.behance.net/gallery/107781119/Kodland-Website" class="underline">here</a></p></div>

<div class="mt-16 mb-104"><p class="text-gr">Colorful and affectionate visual identity for <a href="https://www.behance.net/gallery/128749411/Aaply-Visual-Identity" class="underline">Aaply</a></p></div>

<div class="p-lr "><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Inclusive and Accessible Design</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The whole trend isn’t just pretty colors and adorable drawings. It’s a massive shift of the focus in design. It’s now unquestionable and self-evident that digital spaces have to be inclusive and welcoming to everyone. Up until a few years ago the web designers didn’t even check whether a website is readable for the colorblind, which is, luckily, no longer the case. Websites are properly structured to be accessible for screen readers, websites are optimized and so can be viewed in the areas that still have poor internet connection. Web is now for everyone, all due to empathy.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr"><a href="https://www.microsoft.com/design/inclusive/" class="underline">Microsoft Inclusive Design</a> methodology, where you can see their approach to it</p></div>

<div class="mt-16 mb-104"><p class="text-gr"><a href="https://www.getstark.co/" class="underline">Stark</a> is exactly the kind of software that designers need to keep their work accessible</p></div>

<div class="mt-16 mb-104"><p class="text-gr"><a href="https://www.formfree.com/" class="underline">FormFree</a> focuses on people right off their first screen, and just look at all the accessibility adjustments available on their website</p></div>

<div class="p-lr mt-24 mb-32"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Be advised: this part of the article is pure speculation. Founded in reason, but speculation nonetheless. We can’t predict the future.</p></div></div></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">The shift to focusing on the emotions isn’t going away anytime soon, as well as making digital a welcoming place to everyone. However, this current friendly iteration is going to be history in two or three years, tops. It’s already getting tiresome to those in the industry. So, what’s next?</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">On <a href="https://www.instagram.com/embacy.io/" class="underline">our instagram</a> we go for a bit more than just being friendly. We keep a consistent, yet flexible style, that allows us to lean into different things depending on our goals at the moment</p></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">If the history rhymes with the 80s again, what comes next is the stark divide between the gloomy and the gaudy. We don’t mean that the 80s nostalgia is going to be the trend: you can rest safely, knowing that everything won’t suddenly look like Miami Vice. And we’ve already had an 80s retread quite recently, with brief and localized trends on cyberpunk and neon. What we mean is that on one hand, the needed emotional response will be achieved with unexpected clashes. E.g. the use of traditional media and fine art in digital, vibrant colors, and more to come. Things to bring out emotions and empathy, but aren’t necessarily friendly in the purest sense of the word.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr"><a href="https://the-brandidentity.com/project/regrets-onlys-atmospheric-identity-system-moss-reflects-infinite-potential-creativity" class="underline">Regrets Only’s identity for Moss</a> uses fine art next to tennis balls, butterflies next to digital UI elements. In spite of this variety, the identity is remarkably cohesive, and never feels too busy</p></div>

<div class="mt-16 mb-104"><p class="text-gr">Brazilian studio <a href="https://bloomers.com.br/" class="underline">Bloomers</a> on its website looks as nostalgic as it does cutting-edge</p></div>

<div class="mt-16 mb-104"><p class="text-gr">There are things that you simply can’t talk about with bright eyes and wide smile. Like cancer. <a href="https://dnco.com/work/the-francis-crick-institute" class="underline">dn&co</a>., in its visual identity for an exhibition on cancer, brings out empathy in us without anything that could’ve been called friendly. And they do so while inventively mixing traditional media with digital</p></div>

<div class="p-lr mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">On the other hand, if everything’s keep happening as it does, bright-eyed optimism will seem naive at best, and disingenuous at worst. To keep up with the negative, digital brutalism might come back in some new form. While right now you might think that something overtly negative simply wouldn’t work in branding for any company, let’s just see what tomorrow looks like.</p></div></div></div>

<div class="mt-16 mb-104"><p class="text-gr">The recent redesign of <a href="https://www.autodesk.com/" class="underline">Autodesk</a> is as professional as it is aggressive</p></div>

<div class="mt-16 mb-104"><p class="text-gr">The recent redesign of <a href="https://www.behance.net/gallery/96557191/Dustin" class="underline">Dustin’s visual identity</a> focuses on ambition, which is hardly the kindest thing in the world</p></div>

<div class="mt-16 mb-104"><p class="text-gr">The recent redesign of <a href="https://www.norgram.co/work/alva-labs" class="underline">Alva gets serious</a>, as it is a product that focuses on making the hiring process honest</p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">It Takes Strength to Be Gentle and Kind</p></div></div></div>

<div class="p-lr mt-24 mb-104"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">Designers aren’t politicians to give empty platitudes on remaining hopeful in the darkest times, et cetera. But designers do have a responsibility: a good design is something more than just functional and pleasant on the eyes. A designer should keep in mind not only the final user, but the audience at large. Good design is honest and empathetic.</p></div></div></div>

Empathy in Design: How and Why Everything Looks So Friendly Now

You might also like