Design Tips from a Non-Designer

I, by no means, hide the fact I do not consider myself a web designer. Although I know my way around Photoshop and can alter someone else's design to match a client's needs, I am not someone who can sit in front of a blank canvas and come up with something compelling enough to garner clicks. I am a web developer. To clear up terminology, a web designer is the one who creates the look and feel (or "picture") of your website. A web developer is the one who makes it work behind the scenes. If you've ever watched the show Orange Country Choppers (about a company that builds custom motorcycles) you see this division of labor expressed in every episode - detailed, intricate painting is done by one set of guys whereas a totally different set of people assemble the painted objects, along with the engine, into a working bike. I am the second group - taking someone else's pretty pictures and making them work together as a website.

You would think that would disqualify me from giving design advice. However, I am beginning to realize just the opposite. Working with so many designers and being at the helm of the resulting websites' analytics give me the unique position of seeing what "works" and what doesn't, without getting defensive since I am not personally invested in the design. I wanted to share a few of these realizations with everyone, in hopes I can help your websites be more successful.

1. You need a hero picture on your splash page

When someone clicks onto your site, you have roughly 2 seconds to grab their attention before they hit their Back button and go onto the next website result. That means you need to sum up everything you want the consumer to know in 1 image and make that image the most prominent on the page. This is often called your Hero Picture. It should be above the fold (meaning the user doesn't have to scroll to see it - it is within the top 600 px on the page) and tell your story imediately.

2. You need to direct the user around the page

There is nothing worse than a page where every element is the same size and you have to really concentrate to figure out what the webmaster expects you to do next. As a designer, you can actually lead the consumer around the page by making elements of different sizes. First their eyes should jump to the Hero. Then there should be an element half as big as the Hero they will jump to next. Then another one or two half as big as that, etc. In addition to getting smaller, the images should get less busy/colorful so the eyes aren't distracted by competing elements. A great example is http://www.bathandbodyworks.com - you see the large (Hero) image first, then immediately jump to the big red blocks, then the white boxes which are the same size as the red ones but lighter in color, etc. Essentially I don't have to do any work, before I know it I have read the entire front page without any confusion or floundering around. They basically held my hand and directed me around their page via the size and color of the images they used. If you click through all of their main top links (i.e. "Spa and Aromatherapy"), you will see great examples of how they use this concept on inside pages as well.

3. Emotion

One way to get someone to stay on your site longer is to make an instant connection with them. Trigger some sort of emotion when they first glance at your page. If possible, make it an emotion that results from using your brand. Most emotions are triggered most readily by human to human sharing. For example, compare these two sites: http://www.thepapermillstore.com/ and http://www.myprintworks.com/ . They are both selling the same thing - paper. Paper isn't something normally associated with emotion. However, MyPrintWorks.com taps into the emotion of a family gathering around a printer and sharing their creations with the consumer whereas The Paper Millstore just shows paper on a shelf. Which one catches your attention most in that critical first 2 seconds?

4. Navigation

Yes, every designer wants to be new an innovative. But on some elements, sticking to what the consumer is used to will reward you with more clicks. For example - navigation. Users first seem to look for it across the top of the page. If it is not there, they look to the left side next. Don't make them hunt around to figure out how to go further into your site - give it to them where expect it for higher click throughs. If you use sub menus - keep the sub menu going in the same direction and very close to the main menu. For example, if your main menu items are across the top, then make your sub menu items along the top just under the main menu. If your main menu is along the left, make your sub menu expand under whichever main menu item is clicked. Lastly, always keep your Main Menu consistant and viewable on every page. Don't remove a link just because you are on that page, or make the menu jump around depending which page you are on. Consistency with the Main Menu means the user only has to learn where each link is once and then can easily navigate the whole site.

5. Search

Any site that has multiple products/services needs to have a search box and it needs to be located somewhere in the top right section of the page. Most e-commerce sites statistics show the Search being the first thing consumers use - before even trying to navigate the categories and menus you provided to them. Think about it - if someone comes to your site knowing exactly what they are looking for, wouldn't you want a simple one-click way for them to find it rather than making them guess at menu options and possible get frustrated and leave?

If you can't tell, the big theme of design is to make things easy for the consumer. Show them what to look at, keep things where they expect them and let them know immediately what your site is about. There are a ton more tips I have learned over the years - heck, I think I might do an entire blog post in the future on just navigation - but for now, these should get you pointed in the right direction. Any major design issues I missed?