How to Combine Usability & Beauty for an Awesome Website Design

What’s the mark of good design?

Is it the ability to stand subsequent to it with a glass of wine, reference a few pretentious French phrases, and crown your self the best particular person inside the room?


That’s the mark of good paintings. The mark of good design, whether or not or not it’s for an web website, an app, or a product, is the exact reverse.

Everyone ought to have the flexibility to stroll up to it, understand what it’s about, and use it precisely as meant. No interpreters needed.

Because design is improvement, and improvement that folk can’t use – or just don’t want to – is pointless. (It moreover doesn’t rank very properly.) Design have to be usable.

But that doesn’t indicate it may really’t be beautiful. It’s not a zero-sum recreation between magnificence and worth.

It’s additional like a Nash equilibrium. Everything works collectively for the utmost revenue and minimal losses.

Here’s how to make it happen in your web page.

1. Label All Your Iconography

Kids who crawled out of AOL chat rooms inside the early 2000s emerged from the primordial ooze of the net with a love of emojis.

Which was a love for footage. And then icons, similar to the stuff you see on Icon8.*


(*My historic previous could also be just a bit flawed. Don’t reality take a look at me.)

Unfortunately, iconography in web design is about as usable as an Ed Hardy shirt. You may make it work. Pair it with the exact elements, and it could even elevate your web site.

But as a rule, they’re the equal of that bedazzled flaming skull tumbler you will give you the chance to’t put by way of the dishwasher.

They’re exhausting for people to keep in mind, set off confusion, and sluggish prospects down.

In totally different phrases, they create friction. And friction is an subject.

But I do know I can’t pry iconography out of your arms solely. So for those that’re going to use them, merely protect this in ideas:

They need a number of layer of information. State change indicators like color may assist, nonetheless nothing trumps a textual content material label.

Check out this occasion from Bing:

Bing Icons

So why do textual content material labels with icons perform so rather a lot higher than icons with out them?

It’s most definitely due to the character of symbolism. It requires prospects to meet a set of cultural conditions by means of earlier experiences to understand the function being conveyed.

When you have a double-label like an icon paired with textual content material, you have a higher likelihood of triggering cues from prospects’ semantic memory.

Plain icons, then once more, may require prospects to leverage their notoriously unstable working memory, notably if the icon and efficiency aren’t a most well-liked combination. (e.g., within the occasion that they’re additional esoteric than the magnifying glass and search.)

So for those that’re going to placed on Ed Hardy – I indicate, use icons – as part of your web site design to enhance your aesthetics, escape your label maker and offers them a popularity.

It may very well be one factor straightforward like InImaginative and prescient does.

Invision Iconography

Or one factor additional sturdy like Sketch.

Sketch Iconography

Either strategy, an picture isn’t always value 1,000 phrases in web design. Remember that so your prospects gained’t have to.

2. Treat Visual Cues Consistently

Hot people and trendy web site designs have one factor in frequent:

People are rather more ready to forgive factors in every within the occasion that they similar to the look of it. Known as a result of the aesthetic-usability influence, prospects will permit you to get away with minor usability points if the aesthetic makes up for it.

But the influence is rather more pronounced when usability and aesthetics are working in reside efficiency.

So how do you make them work in unison? Keep your seen cues fixed.

Remember, mannequin is a function. It’s a language.

When you color your hyperlinks blue, you’re conveying one factor to the buyer: that’s clickable and opens one different net web page.

And everytime you use a drop shadow to elevate a button above the net web page, you’re talking that it’s an very important house and interactive.

This is the guideline behind their use in supplies design, by the easiest way.

Elevations perceptible between non-overlapping surfaces

But for those that take that exact same drop shadow influence and apply it to your photographs in the midst of an article (that don’t, presumably, hyperlink out to one thing)?

The inconsistency invalidates what it’s talking on every ends. It makes prospects be taught additional relationships than they want to have to in order to use your web page.

And on the beautification aspect, design consistency inside and all through producers yields the perfect rewards with the minimal amount of risks (i.e., a minimax approach, or a Nash equilibrium).

Medium is one amongst my favorite examples of design cohesion.

Headlines are always the similar dimension. Subtitles – related. Font – related. The icons – related.

No matter the place you land or the place you go, you’ve obtained a continuing Medium experience.

The solely variation you encounter is color, and even that’s saved to a minimal.

As an occasion, take into consideration this textual content on structural typography by Medium’s private Head of Design.

Now, check out one different article on a really fully totally different publication.

There’s no guesswork involved. You know which elements are what and the best way to interpret each because of they’re the similar all through the positioning.

And that makes it fantastically usable.

Bottom line:

Make a design choice and stick with it. Visuals aren’t solely a function of attraction: they’re part of the language of your web page. Standardization benefits everyone.

3. Squint at Your Design (Seriously)

Squint your eyes precise fast.


What are most likely an important components of this net web page?

The headers and navigation menu, correct?

Let’s use Josh McCoy’s fantastic article about UX pet peeves as an occasion. When you’re squinting, these are the climate that ought to stand out:

Why do they stand out? Because they’re styled in a clear seen hierarchy. You know what’s very important primarily based totally on its dimension and the spatial relationships on the net web page.

And, think about it or not, you’ve merely run a bonafide usability check out referred to because the squint check out. It’s an vital (low price) methodology for determining points collectively along with your data construction.

It’s moreover a quick and dirty strategy to determine if in case you’ve got too many ‘important’ elements competing for consideration. (Shout out notably for you, promoting and advertising mates.)

If it takes you (or a client) longer than a few seconds of squinting to set up the relationships between net web page elements, your web page design is working an extreme quantity of just like the federal authorities.

Cluttered with elements that assume they’re additional very important than they are surely, and within the occasion that they actually need a podium, ought to most definitely go to a singular dialogue board to make their case.

Here’s a singular occasion.

Let’s run this related check out on MailChimp.

Eyes huge open:

MailChimp Visual Hierarchy

And now, at a squint: did you determine the climate of significance within the similar order?

MailChimp Visual Hierarchy

But, a phrase of warning about this tactic.

While this check out is simple to run and you’ve got to be using it for every new net web page in your web page, you need exterior influences for this.

In totally different phrases, you will give you the chance to’t dogfood it. Not totally.

The people in your workers already know what to look for inside the hierarchy.

They’re cognitively primed to go this check out the easiest way you want them to.

Remember, the mark of good design isn’t if someone with an superior diploma can interpret it.

It’s if someone can stroll in off the street and use it with none (or minimal) assist.

So squint at your design. Identify which elements are an vital and look at them in direction of which ought to be an vital.

Then ask one other particular person to do the similar issue.

If the outcomes are fully totally different, you’ve obtained a usability state of affairs in your arms. And most definitely a crowding downside, too.

So squint, edit, and squint as soon as extra.


Form with out function is paintings.

Function with out form is an abstraction.

Neither is right for your web page design.

Not so as for you anyone to have the flexibility to use it.

If you’re going to use iconography in your web page, give it a label. A rose by one other determine isn’t actually merely as sweet.

Visual cues aren’t merely window dressing, each. They’re part of the dialogue shared between your web page and your client. Make them fixed. Otherwise, you’ve obtained phrase soup.

Channel your inside Clint Eastwood and squint at every net web page in your web page. Every time you modify one factor, squint at it as soon as extra. Then ask one other particular person to do the similar.

The additional harmony your web page has between aesthetics and worth, the additional people will use it.

And that’s the aim, isn’t it?

More Web Development Resources:

Image Credits

Featured Image: 
Screenshot taken by author, October 2018

Subscribe to SEJ

Get our weekly publication from SEJ’s Founder Loren Baker with reference to the most recent data inside the commerce!


Tags: , , , , ,