7

When Designing With Text, Don’t Make This Embarrassing Mistake

 3 years ago
source link: https://blog.prototypr.io/when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Image credit: Karatara

Before we begin, can you see a problem with this image?

That’s right. You we’ll know show you how to how to design lead.

You might be surprised by how often this kind of design mistake happens. But first, how does it happen?

Visual hierarchy

The problem is caused by text layouts that don’t take account of how the human eye follows text.

In common with readers of most languages that use Latin script (meaning the kind of letters you’re reading now), English readers naturally “begin” at the top-left of an area of text, and then try to read it as a sequence of horizontal lines, one below the other.

While it’s possible for designers to send the eye on a different visual journey, doing so requires very careful control of what’s known as “visual hierarchy”.

Visual hierarchy is the order in which the eye sees different elements in a layout. You can read more in this assignment about visual principles.

Text hierarchy disasters

Here are some more examples of where visual hierarchy has failed in text-based graphics, leading to nonsensical (and often comedic) messages:

0*5NQN0sH2S4jD4ldx.jpg?q=20
when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1

↑ “Leave as welcomef may all who guests came as riends.”

0*QPjIwTiSWXxAJaPa.jpg?q=20
when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1

↑ We’ll have the mash custard, then some crumpet pie, and finish with the ploughmans & squeak.

0*Rr9XmPftRL0B0dSq.jpg?q=20
when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1

↑ “Don’t be happy, worry.”

0*aaqGmTCdYfR62J0p.jpg?q=20
when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1

↑ “Attention students: you are allowed not to take our to help trollies you move.” No, wait! “Attention: you are not our trollies. Students allowed to take to help you move.”

0*v_bRov3RyymM7JQ1.jpg?q=20
when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1

↑ “We’re you’re not ’til not happy.” Or alternatively, “We’re not ’til you’re not happy.”

0*gbAMB3S8V0F_PDYH.jpg?q=20
when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1

↑ Right. Here goes: “When you order, grill to we smash sear that fresh ball of beef on a hot-buttered the burger you can taste and delicious burger.”

0*YbEwAI1xGuRVxPLJ.jpg?q=20
when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1

“If you hard. Then you hard. Work play.”

A related problem

Although it’s not usually as disastrous, designers can also run into problems when they fail to create enough visual separation between two or more bits of text that should be read separately.

Here are a few examples:

0*qcHLENBPhJ58d_cD.jpg?q=20
when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1

↑ “Turtles all the way down John Green.”

0*axf-e-l6KmbmruOy.jpg?q=20
when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1

↑“Baby needs beers and wines.”

0*cDn-u4DlwavgCHlh.jpg?q=20
when-designing-with-text-dont-make-this-embarrassing-mistake-e176e4c031a1

↑ “Do not exceed 20 children.”

Don’t let it happen to you!

Here are some tips to help you avoid any… misunderstanding… of your designs.

  • Try reading your design as horizontal lines of text, and check that the word order is correct.
  • If you’re arranging your text as separate columns or blocks, make sure that there is enough space to separate them clearly.
  • Check that there is enough space between words, and look for any unintended meanings.
  • Test your design by asking other people to look at it before it’s finalised.
  • Don’t try to be too clever! Simplicity wins every time.

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK