Avoiding Design Disasters 101

Avoiding Design Disasters 101

We live in an intensely visual-design driven world. And yet many budding designers, sizzling start-ups and even established companies still disappoint their users with their criminal approach to basic design principles.

The truth is that your website, your app, and your documents are read by people who don’t have time to navigate their way through dishevelled mazes of poor design. Their attention is too limited. There’s too much competition. In the blink of an eye, your fickle audience will catch sight of your pastel Comic Sans title and swipe away from your homepage forever.

“We just don’t have time,” I hear you saying. “We’re focused on other things.”

But there are no excuses that can justify terrible design. Because basic design courtesy is paramount to the 21st-century marketplace. We live in a digital world — bad design doesn't say ‘I'm not able”, it says “I don't care.”

But here’s the thing: you don’t need to be a photoshop wizard or a Jedi Knight of UI design to create good work. It can help to have one of these on staff, but it’s not necessary.

Good, basic design starts with very simple foundations. Brush up on basic design etiquette (and, more importantly implement it) and you’ll be miles ahead of the competition.

Here are three ways to refresh your design approach, and they will work regardless of who or what you’re designing for:

Don’t give in to font frenzy

I remember using Word 97 in high school to write my first ever piece of typed homework. With a typing speed of about 20wpm it was all very simple. Until I found that magical drop-down list with a plethora of different fonts. I was enthralled, and subsequently used no fewer than sixteen different typefaces on that single piece of homework.

My teacher, unfortunately, wasn’t as enthusiastic about my font choices as I was.

She responded with a shiny red ‘F’ and a memorable comment: “Unreadable.” Well played, Teach. Lesson learned.

As arbitrary as it may seem, font choice is actually one of the building blocks of great design. It’s also one of the key components of digital communication. With no correlation, harmony or thought about the feel of your font choice, the end result will have no distinct structure.

Getting it right starts with understanding basic font theory:

Serif Fonts

The most classical fonts (think Times New Roman). They usually have sensible ‘feet’ on the base of each character, aka the ‘serif’. These are ideal for formal letters and can give a traditional, corporate, newsy feel.

Sans Serif Fonts

Modern and clean, these fonts are well used in digital media. Think Helvetica, Arial or Century Gothic. These are perfect for clean, modern and zen styled newsletters, websites and press releases.

Script Fonts

These look hand-written and are often cursive and flourishing. Think Brush Script. Used thoughtfully they can be great for formal invitations and calligraphy elements — or used to highlight actionable items throughout your UI.

Display Fonts

Decorative and fanciful, like the Jokerman Font. These are ideal for titles in logos, posters and flyers, but should be used very sparingly.

When beginning your design process, first choose which font family is the most appropriate to your design and audience. You should be able to choose 2-3 fonts and create maximum impact.

Once your fonts are selected, learn to make the most of basic manipulation tools like bold, fine, italic and justification to add variety when necessary. There’s really no need to pick another font!

It's incredible, for example, just how much difference ‘character justification’ (bringing letters closer together or further apart) makes to a font!

For more insight on exactly what fonts to use and when, check out Dan Mayer on Smashing Magazine or stay tuned for our upcoming Typography white-paper.

 

Rein in your colour palette

Carefully selected colours draw in the eye and frame your design elements. Just like with fonts, however, if you overuse them you’ll be bringing your user into a world of pain that they won't easily recover from — or forgive you for.

Picture-2-770027.png

Source: speedoox.com

As a general rule: less is always more.

A piece of design will commonly have between three and five colours that either harmonize or contrast with each other. The former are ideal in neutral, clean and professional designs, and the latter in more dynamic, loud and impactful designs.

To find a directly harmonizing colour, first look at a colour wheel and choose your main colour. The colours next to your main colour are your harmonizers and will work well to compliment your main selection.

For contrasting colours, take a color that directly opposes your main selection. (On the color wheel, follow the diameter of the wheel directly across, and select the exact opposite colour.) This contrasting color can be used to bring synergy and balance to your design.

If you’re finding that you don’t have a good eye for color choice, leverage tools like colour wheels or harmonizers to give you some initial concepts or to help you all the way through your design. They’re free, they’re easy to use, and they can get you started with relative ease. You can find a good one of these here.

If you want to delve into what effects certain colours have on our emotions, I’d recommend taking a look at Steven Bradley to start. He’s got a perceptive view shared in detail here.


Intentionally balance your work with whitespace

This is arguably the most game-changing building block of the three. If you get white space and balance right, then you might get away with improper font choices or inappropriate, garish colours (although I still wouldn’t recommend it).

It’s interesting to note that what you don’t see can actually be the most noticeable part of your design. White space represents the negative space where nothing exists. It simply frames everything else.

Every element in a piece of design, be it an image, infographic chart or piece of text, needs intentional space around it. This gives your user so many positive benefits — from allowing your design to breathe, allowing your users eyes to focus in, giving pause for thought and more— that it’s a design element that should never be overlooked.

chanel.jpgSource: Chanel

Balance is achieved when the white space and the elements are held together in harmony. When the eye has time to connect and focus. When the user feels at ease with your design.

There are no tools to help you with this, but there are a ton of resources. To understand more about how this impacts your UX start out by reading Gisele Muller. She offers a quick explanation of how to use white space in design.

 

Hit refresh on your design game

Sometimes we need to wipe the slate clean and re-focus on the basics. They are the foundation that your design is built upon.

If you’re interested in going deeper — or exploring some of the key areas that we look at when it comes to Interaction Design — check out our free resource called the IxD Checklist. It’s one of the ways we covers our basics and more.

And finally, if you forget everything else, just don’t use Comic Sans on your web design. Ever.

Written by

Cahill Puil

Cahill Puil

Sign up for our newsletter