Humans
Design
for
Small Ways to Humanize Your Website
5
re you telling your users that you don’t really care? Does any corner of your website say that you just couldn’t be bothered? Because that’s the message a generic site sends; it says that the brand hasn’t considered its users as fellow humans. Creating an engaging online experience isn’t just good business—it’s also an expression of empathy. It shows you cared about how visitors would experience your site. Certain aspects of every site (like copy and primary visuals) aren’t likely to be overlooked, but there are several “finishing touches” that can set your site apart from thousands of others and give your brand a distinct flavor and show that you're not afraid to flex your creativity.
Discover a few digital touchpoints that might not have gotten your full attention, and get some inspiration from brands that are making the most of them.
A
re you telling your users that you don’t really care? Does any corner of your website say that you just couldn’t be bothered? Because that’s the message a generic site sends; it says that the brand hasn’t considered its users as fellow humans. Creating an engaging online experience isn’t just good business— it’s also an expression of empathy. It shows you cared about how visitors would experience your site. Certain aspects of every site (like copy and primary visuals) aren’t likely to be overlooked, but there are several “finishing touches” that can set your site apart from thousands of others and give your brand a distinct flavor and show that you're not afraid to flex your creativity.
Discover a few digital touchpoints that might not have gotten your full attention, and get some inspiration from brands that are making the most of them.
404
404
Favicon
Even elements that take up just a few pixels are important to consider. The favicon (a portmanteau of “favorite icon”) is a graphic element that appears in browser tabs and within Google search results, auto-complete search suggestions, and browser histories. So yes, favicons are small, and their uses might seem insignificant. But they help users identify websites in a sea of other tabs. And since the average person has between 10 to 20 tabs open at once, standing out in the browser tab is essential.
Perhaps the most recognizable favicon is Google’s multi-colored “G,” the most recognizable part of its logo. The current favicon, its fifth iteration, was introduced in a September 2015 brand refresh. Over time, its favicons have gotten more bold, switching from lowercase to uppercase and adopting darker, more visible primary colors. Though it doesn’t come without controversy, because the brand has taken heat for its favicon’s similarities to a logo that Paul Rand, the designer behind the iconic logos of IBM, UPS, and Westinghouse, designed for Gentry Living Color.
Google
Trello’s favicon is especially notable because it’s dynamic—it changes color to match the theme of the board in which the user is working, even if the board background is customized. Like a few other sites, Trello also badges the favicon with a red dot to indicate new actions or updates in the tab. The flexible favicon is a small but powerful touch, one that Trello’s users enthusiastically support.
Trello
404 Pages
Landing on an error page doesn’t have to be frustrating, even though it marks a mistake on either the user or the company’s part. Yes, the 404 error page can satisfy users just like any other page on a website can. While most brands don’t consider designing a custom 404 page, a clever, helpful, even silly error page can keep your visitors from jumping to another site.
The mega-movie maker has several different 404 pages that cycle through different characters in the Marvel Cinematic Universe, and refreshing the page shuffles the graphics. Each page uses subtle but delightful elements to draw the visitor closer to the Marvel brand—the page featuring Black Widow, for example, includes an interactive Eye of Uatu that follows your cursor around the screen. Marvel knows to never pass up a storytelling opportunity.
Marvel
The Eastern Market Partnership is a non-profit organization that manages a historic food market in Detroit. Its addictive 404 page includes a game in which the user guides a flying potato through the streets of the storied city. Anyone who had an iPhone in 2013 will immediately remember the game the Market is parodying: the short-lived Flappy Bird, which managed to take the world by storm in just a few months.
Eastern Market
Custom Cursors
The cursor is like the middleman between your user and your website—the little arrow or hand that desktop users can move to interact with a web page. Typically, the cursor is that same generic hand or arrow, but it can be customized to set your site experience apart. If you provide your visitors with a unique experience on your website—the most important digital asset for any business—they’ll likely remember it and appreciate the effort.
This site, a personal project of Italian creative director Emanuele Milella and French developer Clément Roche, was created in 2020 to celebrate the 700th anniversary of Dante’s Divine Comedy. The site takes the user through each part of Dante’s work—Hell, Purgatory, and Paradise—and as visitors scroll through each section, the cursor reveals the negative version of the image underneath it, reversing the colors on the page.
Le Cantiche
This digital agency employs a custom cursor that builds upon the default. A roving dot trails behind the familiar arrow, enlarging over the most important sections and animating the elements over which it hovers. It’s a unique fusion of an element that we’re used to with an element that we’re not. And there’s also a section of the site that features a non-traditional drag-to-scroll interaction, and the CTA guiding users through the section fits neatly within the custom cursor.
Cuberto
1987 Masters is an event production company, and its site features a cursor shaped in the style of a comet. Each time the cursor moves on the page, a trail of plume smoke follows behind. And when it hovers over a section title, it also animates elements on the page, turning the letters white as the cursor hovers over it.
1987 Masters
Footers
Just because it’s at the bottom doesn’t mean it’s not important. One of the most unloved corners of the site’s core design, the footer is important because it’s a gateway to the rest of the sections of a website. It also prominently displays the most essential information. When a user doesn’t know where to navigate, the footer is their best opportunity to find what they’re looking for.
Wild Souls is a Greek company dedicated to housing and storing exotic nuts. The footer of their page features a rotating banner of several images and phrases that elaborate on causes that Wild Souls stands for, like “F*CK PLASTIC.” Though a minor touch to the site, it helps reinforce the anti-establishment and eco-conscious aesthetic of the Wild Souls brand.
Wild Souls
Mafanfa is a website on which people can buy hand-crafted Latin American goods. In the site’s footer, each subsection of the website is housed within various geometric shapes that spring to life when hovered upon. The site’s footer gives visitors a sense that the entire page is as custom-designed as its kaftans, premium ponchos made of handwoven Mexican cotton.
Mafanfa
An animated animal prancing across the screen is bound to catch a viewer’s attention. Blue Stag is a creative agency based in the UK that’s unafraid to push the boundaries, and that comes through in its website footer, which features the firm’s namesake stag running through a mountainscape. Bonus points for the website’s “Night Mode” toggle, which, when selected, rises a full moon over the darkness in the footer.
Blue Stag
Hand-Drawn Elements
Though not quite core features of website design like the examples to the left, adding hand-drawn elements to your site can make a site feel more personable, a touch often overlooked in today’s sleek, futuristic designs. Hand-drawn sketches and illustrations (drawn by an actual human, of course) add a sense of comfort to the site. The best part? You don’t need to be a professional artist to create them, and in fact, the creator’s amateurity is part of the art’s charm.
Jack Butcher spent 10 years working in Fortune 100 advertising in NYC as a creative director for multi-billion dollar brands. Then he left to start his own agency, but didn’t enjoy it. So he started Visualize Value, a media platform with an audience of over 500,000 people. A memorable aspect of his site is the case studies which include sketched drawings throughout that break up the writing.
Visualize Value
St. Malachy’s website looks like it was designed by children because, well, it was. The website of this Irish primary school is endearing and welcoming, and it speaks to the school community. It also proves that there’s no one-size-fits-all solution for website design—this playful look works perfectly for a school, but wouldn’t fly for a financial company.
St. Malachy’s Primary School
Find out with this essential checklist for marketers.
Are your digital touchpoints safe for human consumption?
Get the checklist
Find out with this essential checklist for marketers.
Are your digital touchpoints safe for human consumption?
Get the checklist