I realize that it has nothing to do with website design directly, but still I found it inspirational. Makes me want to finally break open my piggy bank and buy an iPhone!

In this post, I’ll be presenting some very cool logos that use negative space to their advantage. As you study the images, take note how your eyes seem to fill in the white space with the missing content. These logos were created with that firmly in mind.

(ED – Elettro Domestici, Home Appliances)

---

---

(Kerzner Marine Foundation)

---

---

(World Wildlife Fund)

---

(The famous “right-arrow” in the FedEx logo)

---

(Can you see the continent of Australia?)

---

---

---

(Victoria & Albert Museum)

---

---

(There are 11 teams in the “Big Ten”)

---

(Ryan-Biggs Associates)

---

---

(R2B Architects)

---

(TUL is a tool Manufacturing company.)

The blog Your Logo Makes Me Barf is a wonderful place to gander at some of the world’s worst logo designs. I came across this the other day and decided to pull some valuable design lessons out of the garbage heap of logos.

Let’s begin today’s “what not to do” lesson:

No-no #1: Confusing acronyms

If you’re going to take your company name and make it an acronym, please, PLEASE, make sure that it doesn’t look like some other common acronyms.

No-no #2: Bad letter substitution

Substituting a letter (or letters) in your logo for an image can be quite effective — when done correctly. Just make sure that the image actually looks like the letter it’s replacing or that the non-image letters don’t spell out something else!

(The Eiffel Tower makes a bad letter “h”.)

Yes, I know that “arousel” is correctly spelled “arousal”. But at first glance you might not pick up on that.)

(Is that “St. Rage” or “storage”? Don’t confuse people!)

(C’mon! A cat’s hind end makes a truly disgusting letter “A”! And why is it for a women’s clothing store?)

No-no #3: Art unrelated to your industry

Yeah, I know. “Swooshes” are cool and “interstellar globes” are hip. But please don’t use them when they have no relation to your industry! (They are already overused to begin with.)

(In addition, the upper case “D” overlaps the lower case “a” making it difficult to read the photographer’s name.)

No-no #4: Bordering on indecent

Be careful of how you place people and animals in your designs. One mistake and you might give people the wrong image about your company! Also, please be careful when you choose the artwork… it could be taken the wrong way.

(That dog is getting just a little too friendly with the cat.)

(It might be a logo for a physical therapist…)

(Nothing says “Family Dentistry” like a tooth flashing his privates…)

No-no #5: Choose a color scheme, please!

Do I really need to say anything about this?

Wanna see more?

If you’d like to see more of the “best of the worst” then check out Your Logo Makes Me Barf.

To really appreciate this website’s navigation, head on over and click on some of the links in the main navigation (located at the top in the green bar.)

Check it out here: dConstruct 2009

As you watch the video, you’ll easily see the what not to do parts. If you’re not quite sure which is which, here’s a hint: the ‘before’ versions of the designs are better than the ‘after’ versions.

View the video here: Make My Logo BIGGER Cream!

What can we learn about design from this video?

Bigger isn’t better

Your company logo isn’t as important as the message your design is trying to tell. This is especially true for little-known companies. Of course, if you’re Nike (the “swoosh”), MacDonald’s (the “golden arches”), or Apple (an “apple”), then your logo already speaks volumes.

White space is good

White space is the empty space in a design. Proper placement of white space can make a design look cleaner, make it easier to read, and even force the reader’s eyes exactly where you want them to go.

Large “sparkles” can annoy

The only thing that large, obnoxious “sparkles” do to a design is create a dated image. Yes, long ago these were used almost everywhere. But nowadays they actually lessen the image of your company or your product (unless that’s what you’re shooting for.)

Neon – OUCH!

Do I really need to say anything about the awful neon colors? No? Good.

Too many images spoils the design

Maybe you’ve seen it, I know I have: print ads or websites that use too many over-sized images. The most effective designs only have one large or medium-sized image. Any other images or graphics are much smaller and kept to a minimum. (The website I discussed in the Boxes – the building blocks of websites is a good example of how to use images.)

Once you learn exactly why good design is CRAP, then you, too, will see vast improvements in your designs as well.

“CRAP” stands for: Contrast, Repetition, Alignment, and Proximity. And as my chemistry teacher in high school once said, “Etch these onto your forehead so you’ll never forget.”

Here’s an overview of each:

Contrast

When you apply the rule of contrast to your designs, you are striving to do just one simple thing: if you are going to make two things different, then make them VERY different from each other. Contrast is important because it adds visual attraction to your designs.

Repetition

Make sure to repeat certain visual elements throughout your design. Some elements include color, shape, texture, size, and even the spacial relationship of objects. When you repeat elements, you add continuity and unity to your design.

Alignment

Every element on your design should be placed with a clear reason in mind. Every element needs to have a visual connection with every other element. Having proper alignment gives your final layout a clean and sophisticated look.

Proximity

Rule of thumb: elements relating to each other should be grouped in close proximity to each other. By doing so, you can make several items appear as a single coherent group of related material or information.


The Design & Layout category here on Newbie Website Design will continue to further explain and expand upon the CRAP that makes up good design. In the meantime remember this: you should always be able to explain your reasons for every element on your designs. Never, ever say “I did that because I think it looks cool.”

Now, many years later, the answer to that question has become crystal-clear. But, the answer is usually the one that most people don’t like to hear. If you really want to know what it takes to become better at design and website design then read on…

Surprising to most of my clients, I studied music and music composition in college. Design and layout had very little to do with degree. My normal day was spent locked away in a small, musty practice room pouring over the musical compositions of the great composers and then trying to duplicate them with using my own personal style.

My music composition professor often told our class the following:

“The first time you do a homework assignment you don’t internalize anything — you’re just going through the motions. Later, and not part of any homework assignment, you have to try to create the same thing again. It’s not until the third or fourth time that you do the assignment on your own that the lesson that was intended to be taught will become part of your creativity.”

This is the key to becoming better at design.

During a typical year at my freelance design job, I create about twice as many “practice websites” as the number of actual client websites that do make it online. These practice websites never see the light of day. I make them to experiment with new design concepts and creative ideas. I believe this to be a vital part of the learning process — to practice until you can internalize the new information.

Of course, reading books and visiting websites and blogs on design is an important part of the learning process. But true learning and mastery only occurs when you apply over and over again what you learn.

What you can do:

Here are some things that you can do starting today that will help you to improve your design abilities:

• Buy books on design and DO the exercises
• Read tutorials on blogs and websites and actually DO them.
• Find websites with designs you like and duplicate them as practice
• Ask others to critique your work

Becoming better at anything requires work. The good part is that the more you work at something the better you become and the easier it is to let your true creativity flow.

Now, this cool effect only works when you manually resize your browser window (meaning that most people won’t even know that it’s there while casually surfing around) but it is still worth checking out!

To view:
Click on any of the links below (a new browser window will open automatically.) Then resize your browser window by clicking and dragging on the lower right-hand corner of the browser window. (Note: This won’t work on all browsers! Notably, Internet Explorer 6.)

Starry Night by CSS-Tricks.
Dumago website.
Silverback website.

(One more note: I’m not promoting the products on these websites, just showing you the cool effects there.)