This summer we did our first van wrap which was an interesting challenge.

It started with the identity for my brother-in-law’s new plumbing company, which included a logo, business cards, invoice, t-shirts and hats. To promote this new business they decided a moving billboard like a van wrap would be a great way to get the word out. We agreed and got to work.

We were given loose illustrator templates of his model of van to work with for the design. This was a complete wrap, so all four sides were needed and additionally the rope in the logo needed to wrap all the way around the van. I will say I was concerned when handing off the art as I’m working on 4 flat sides, but the company that did it said not to worry and they pulled it off brilliantly. It’s interesting to see your work blown up so big, fortunately it looks great!

With Moo Cards Prinfinity they give you the option to print a different image on every card.
An excellent conversation starter and creative way to showcase your work or product. Check out their site for more ideas.

On first glance the huge slider in the top could be mistaken for an annoying ad, taking up the entire page, but you quickly realize that this is an integral part of the site with the fantastic photography. I don’t mind that they mix ads into this area since it’s weighted toward content.

Huge images, a clean interesting layout and clear navigational graphics make it a pleasure to click through.

And, here is the first iteration of the Vogue.com homepage in 2000, only a blush of what truly encompasses Vogue as a brand. But, we were nominated for “Most Stylish Dot.com Award” by the CFDA (although we did not win).

This just shows truly how far the web has come in technology and vision. Congrats to Code and Theory for a job well done.

More articles about the redesign on Mashable and WWD.

Most of these examples are homepages, often the starting point for most users, and the best place to establish a positive connection and sense of branding to your user.

Clear Messaging

Short and clear brand messaging, right up front. What does the company do? Why should someone look around more? Say it in one short sentence. Direct copy that incorporates words for SEO will increase the odds that the site will show up in search results.

Box.net conveys what it does in two short lines. I love the friendly illustration that reinforces the core business concept.

Visual Hierarchy

Make the prioritization clear on the page. Lead your visitors to core concepts and calls-to-action with contrast in color and copy size and a good use of whitespace.

37 Signals starts with their overall company statement in front and their core brands secondary, but clearly high in priority.

Concentrate Calls-to-Action

What is the single most important click you want your user to make? The 2nd most? Highlight calls to action in order of importance. Too many similarly weighted links all over the page causes unecessary hunting for important content. Help your users out and they’ll stay longer.

Keeping the page simple, typekit directs you to the main areas that they want you to head over to… ‘try it for free’. I wonder if they’ll change their button to red.

Grouping Content

Grouping similar content makes for faster page comprehension. And remember white space is good. Use it to focus attention in certain areas and add visual breathing space on the page.

If you can get past the amazing photography, natgeo does a great job of grouping it’s content simply but effectively. The yellow blocks by the headlines makes for an easily scannable page.

Clear Navigation

A few navigational items with short, clear names are more useful than long and hard to understand ones. Make sure the wording is clear to the user, not ambiguous industry terms or phrasing that is cute but unclear. Anticipate content your users may expect to see.

Rosettta Stone based their navigation on how their product is to used. Using clear words, the user can tell where to go based on their usage of the product and it allows Rosetta Stone to target messaging to that user type.

Simplicity

Make sure everything on the page, including all copy, has a purpose. Pages with excessive copy or distracting design elements are not helpful to the user. Like watching a typical hollywood movie, nothing happens without a reason, make it so.

Papernstitch simply states what they do at the top, clear navigation to reinforce the concept and get user to areas they are looking for. The rest of the page simply displays great products, which is what the site is about.

Recommended Reading

Book: Designing Interfaces by Jenifer Tidwell
Themeforest: Visual Hierarchy in Web Design
A List Apart: Contrast is King
Smashing Magazine: 10 Principles of Effective Web Design

INTERESTING POINTS

Users Scroll
The debate as to whether users scroll or not was one that came up often a year or two ago, so it’s great to see a study that says they do indeed scroll. Of course keeping key content ‘above the fold’ is still important, but all is not lost if it does fall below.

Blue is the best color for links
Good to know, but I’ll admit as a designer, a tough one to cater to at all times. It makes sense on sites like google and yahoo to have standard color links when you hope to have the world’s population clicking on them. But, if you have a specific look or branding that needs to be iterated on a site, it’s not going to be appropriate at all times. As long as a link is clearly delineated in some way, whether it be a much different color or underlining, it will still be usable. When appropriate, I try stick to blue.

Effective user testing doesn’t have to be extensive
That it doesn’t take many people to find the holes is helpful to know. I try to pay attention to the little voice in my head that might say ‘is this too ___’. Those nagging thoughts are usually right, but when working with large groups, there may be many people with valuable input and they don’t always agree. So it is extremely helpful to know that testing to a very small group is valuable and therefore, in many cases, actually doable.

As a designer, I don’t claim to be a copywriter, but it has helped in mockups to throw suggestive copy, for content and length, rather than lorum ipsum. Often, since I am coming in fresh to the brand, I can provide insight on what someone new (ok, i’m not always the target audience I realize, but i can pretend) is going to be looking for or what would make sense to them.

Here are a few articles that better articulate these ideas (written by real writers).

Web Design from Scratch: Writing for the Web
A List Apart: Learn to Write
Provenance Unkown: Principles of Good Copywriting