Avoid the biggest design pitfall: cramming

I love open spaces. I’m a big fan. I have all their albums:

• Beach
• Sky
• Desert
• Empty Parking Lot

Whenever I find myself mashed up against other people in a confined space, I go a little berserk. The funny thing is, I don’t mind concerts, airports, parties, or malls – as long as I can clearly map my escape route. But I do enjoy open spaces quite a bit. In fact, I’ve always loved moving into a new home and hanging out in the space before the boxes arrive. It’s clean and full of possibilities.

There’s also a simple beauty to the spaces between objects. We see objects but it’s the invisible space that helps us separate those objects from the world. Our brains more easily recognize and define objects when there’s breathing room. We feel safe when things are clear.

As a designer, I think a lot about the space between things.

DIY: Are you designing for designers?

There are times when you need to design your own stuff. For example, your fire suddenly gets lit to create and launch a new teleclass for your clients over the weekend. Awesome. Go for it.

Even if you design it yourself, you don’t want it to look crappy. Of course. Then again, you don’t need anyone hiring you to design badges, you just want people to click on yours. Will they still click even if your badge looks like your cat made it? If they already know and love you, then probably. If they don’t know you, then maybe. There’s enough risk in business, why raise the stakes when you don’t have to?

In my web travels, I see a lot of badges for products and classes. As a designer, I have strong opinions about font choices, imagery, color, borders, etc. Chances are, I am way more finicky about these things then you or your clients ever will be. This is good news for you.

The thing is, you don’t need to create a web badge to please über-picky design geeks like me. You just need a badge that:

1. Clearly states your message
2. Gets people to click on it to find out more

Really, that’s it. You could use black and white with Helvetica and make a great badge. It’s not about getting fancy. In fact, most of the design issues I notice are when people try to get fancy and mess it up. Don’t get fancy. When you get fancy and mess it up, even the non-designers notice. Something seems… off.

Bottom line, don’t design your badge to elicit design kudos. Design your badge to get the job done.

Cram that funky web badge, white boy

The biggest and most frequent design issue I see on web badges is text cramming. Paying attention to this one aspect of design will kick your badge up more than a few notches. Let me show you what I’m talking about:

You can click on the badge to see it larger, but I want to display it here at 125 x 125 pixels, which is a good size for most sidebars.

Insider tip: While laying out your badge, zoom out from time to time to see how it will look smaller. Then zoom in to polish it up.

Here are my notes on this badge (which is kinda weird since I made it myself):

1. The main title text is touching the sides of the badge. I feel cramped. Claustrophobic. Severely lacking in space. Always leave spacious margins between your text and the edges of your badge.
2. Borders are okay, but use them sparingly. Borders contribute to the feeling of being boxed in. If you have to use a border to separate the badge from the web site background, use a different color than the text.
3. Angling the main title did not add excitement to the badge. It just feels “off.” I know you see designers do it all the time. There are too many rules to cover about this if you’re not going to make design a career. Trust me. Don’t angle your text. It doesn’t add enough punch to make it worth messing with. Our rallying cry is “Clear! Simple! Click!”
4. The text on the bottom is too small to read easily. Your audience is into scanning and clicking. Save the paragraphs for the page they get to after they click the button. I won’t even get into the fact that the paragraph text  is all centered and hyphenated. I would tell you not to do that, but you’re not going to put paragraphs into your badge anyway. Right?

Funky web badge redux

Now that I’ve completely destroyed the ego of the artist who created this (wait. that’s me…), let me show you my web badge redux:

And my notes:

1. I made “Clarity” the biggest word because that’s what will draw interest. If you wanted to evoke an even better response, you could use “Need Clarity?” For our purposes here I wanted to use the same text. Note that I didn’t change the font. It’s still Helvetica. Simple.
2. Bolding “Clarity” and leaving “Teleclass” alone creates a built-in hierarchy for your message. This is a similar strategy to using bolded headlines in a blog post. Help the scanners get the information as easily as possible.
3. No border. Doesn’t that feel good? We already had a colored background, so the border was unnecessary. If the web site background was blue, I might have just made the badge background white for contrast. Simple.
4. Learn more button. This could also say “Click for info” or something. I’m not trying to be clever with my marketing call to action phrases here. My point is that it’s short and sweet. I put a white box behind it to emulate a button. Nothing fancy. When we click around the web, we look for cues to click things. Underlined links. Bolded headings. Things that look like buttons to push. And we gave it plenty of space to float in.

Use space to make your message clear

The function of a badge on your site is to lead people to a page where you spell out the details for them. That’s why you can get away with design minimalism.

There is beauty and elegance in simple things. Space around objects creates beauty because it feels clean. Clean feels professional. Professional feels valuable.

There are times when you can’t afford or don’t have the time to hire a professional designer. You’ll have to put your design hat on and be the DIY entrepreneur. Acknowledging your limitations in design doesn’t mean you aren’t a pro in your own field. It means you’re a big smartypants.

Hey, non-designer DIY entrepreneurs! What software do you use to create designs for things like badges or web site headers? Let me hear from you in the comments.

Share