When you look at a design, and you hate it, it’s probably because you’re not the target audience. Designers often create great designs that people hate, the important thing is to understand the difference between good and bad execution.
How do you identify bad design?
I have a checklist that I run through which helps me determine if a design was rushed, unconsidered or just not executed properly.
What to look for in good design?
Here’s what I look for when I’m determining the quality of design:
- Typography & Kerning
- Physics & Nature
Is it centred, lined up and are the objects straight, if they are not, is it part of the design or is it just a lack of quality control? Was this design completed in haste, was it checked before it was launched? Is the the design cluttered, does it have the space it needs to stand alone?
You can never have enough quality control in design. Designers make errors in design. Constant deadlines and pressure are a big part of the error count, but also when you look at something long enough, and your focus is composition, it’s very easy to miss bad spelling.
Tip: Make sure you run things past an editor. Have a “back-up” editor.
Designers spend a long time choosing and matching type to your demographic, even more time making custom typefaces; treat it with respect. Choosing a perfect font is pretty much like matching fashion to a person. Be selective, be patient, make sure it’s a perfect fit.
If you want to grab a larger version of the deconstructed typography image, here you go.
For a comprehensive breakdown of all the elements that make up a Typeface, visit Typography Deconstructed.
Kerning is the space between letters. Computers and software generally don’t do a great job of auto kerning. A designer is required to match the spaces so words flow and don’t get split by a bad kern.
Kerning is the #1 mistake non designers make, which is understandable because they have never been taught about kerning. Bad kerning is a very poor mistake for a designer to make. What a waste it is to choose a fantastic typeface and then let something as simple as the kern let you down. All professional design software allows you to adjust the kern.
Tip: Kerning is something most designers should be concerned about. If you want to read more about kerning and pick up some great tips, this 99 designs blog is very good place to start.
Designers use caps because they’re easy to balance, because the bounding box is vaguely square shaped, especially in the vertical compositions being used these days.
Something you probably don’t know about using caps is that they are slower to read, and also considered bad etiquette. Using caps on the web is shouting. You might think shouting is okay because you want to be heard, but it quickly becomes noise and noise can be ignored.
If you want to be noticed, be noticed for the right reason.
Like everything in design there is a time to break rules, but you need to understand why those rules exist in order to break them with delicate proficiency. I’m not saying don’t use caps, I’m saying use them wisely.
Tip: Use sentence case
Balance your designs by learning from nature and using physics. Light sources, gravity, use of shadows are all affected by natural physics. Try follow these real world effects in your own design.
While physics in design should be taught, it’s not something that is. It seems to be something good designers and naturals have taught themselves. Pay attention to the real world to get better results.
The affect that gravity has on objects is quite apparent; over time almost everything has a denser base. Using gravity to pass along information in an image is not essential, but it’s believable. It’s what makes an object more real. So if you’re after reality in your design, you need to consider the effect that physics will have on the object.
Light sources need consistency.
All objects in the world are defined by a light source. The light source is responsible for the highlights and shadows on every object. When objects have a light source assigned, the physical attributes of that object and all the surrounding objects will be affected by the same “global” light source. The highlight will appear on the side of the object facing the light, the shadow will fall on the side directly opposite and any dimensional shape, like a convex on concave button, will be determined by the same light source shading values.
Don’t create confusion by using light from random angles in a single object, or even multiple objects on the same page. Treat all objects with the same light source properties.
Tip: Imagine a piece of string going from the light source to the object, create your highlights on the side where the string first touches the object and shadows on the opposite side.
Great designs are often ruined by bad negative space.
Layout is driven by so many factors; psychology, balance and even cultural elements. Even your target audience will impact you layout choices, so keep that in mind. Simple bounding box wireframes can help you find the best way to lay out your design and help balance your message.
Tip: I use the squint test* to help ensure I have layout balance.
Flow and continuity is the rhythm of the design of the way in which it reads; where you put your line breaks which words you add weight to. These elements can either emphasise your message or break it. A break in the wrong place will will lose your audience.
Flow is all about the rhythm of the design, and reading it how you see it. I liken flow to poetry, a broken flow (just like a broken kern) can harm your message by forcing stops at the wrong time.
Tip: I read a design out aloud and exaggerate line breaks to see if it makes sense.
Gestalt Psychology is the study of how individual items form or affect a global construct and it’s an integral part of design. The negative shapes your objects create, how objects interact with one another, are all part of Gestalt. It plays an important role in how you design an object that makes sense in a space shared by other objects. Gestalt is a powerful tool when used correctly, or can create bad mishaps when it isn’t.
There are many principles of Gestalt, here are some of the more common ones.
Aristotle once said “The whole is greater than the sum of its parts” and that pretty much describes Gestalt.
If you want to learn more about Gestalt, and I thoroughly recommend it, then please read more on Wikipedia.
Tip: I squint to blur objects* in my design to pick up on gestalt grouping easier.
Contrast is important because it makes reading things easier on every level.
Statistics show that as much as 10% of the world’s population are affected by some form of colour blindness, which is very important when you think about the objectives of your message. It’s not only the colour blind you need to think about in your design stages, think about poorly sighted people too. This is something is often affected by the age of your audience.
Visual accessibility is simply built around using the tools that are available to you, while understanding that good contrast is required to make objects stand up to the the surroundings they are designed on.
A contrast of at least 30% is required. It’s not that colour blind people see in black and white, the colour problem they have is affected more by contrast.
Tip: As I work on a design I constantly switch between colour and shades of grey.
Design consistency is integral to brand and campaign successes. Consistency helps create a distinctive tone in your brand.
Your designs should look like they’ve come from the same stack of pictures. It’s fine to show progressive change over time, but stark differences across imagery will highlight inconsistencies in your design. Those inconsistencies will translate directly into your brand and degrade any distinction you are trying to create.
This is especially relevant if these images are in the same story. When the images are in the same story, it’s easier to see inconsistencies. Make certain you look at all the images in your site regularly to check consistency.
Tip: I keep all my images in library system which means I can at a glance make sure images are consistent across a whole site.
Borders are a great way to create consistency and also hide substandard images.
Borders that are too elaborate however can sometimes steal from the quality of picture and create confusion. If you choose to use borders, ensure you are consistent in their application.
Tip: I create a border mask file and then place the images I need on a layer below so that I’m always on brand and consistent.
You do get great designs that break these rules, but those great designs are considered, balanced and normally made by experienced designers who understand the ramifications of breaking the rules. You seldom get a good design that breaks more than one rule at a time.
A key element of great design is simplicity so try to avoid over elaboration and keep it simple.
This is a pretty cool trick that I use to check block layout balance, gestalt, chunking and so much more. Read more about how and why we use the Squint Test in this Usabilla article.
Here’s a brief checklist I use for my images.