What’s the first thing you think of when you hear the word web designer? Most people immediately start thinking about interfaces surrounded by pretty images. While this is partially true it is by no means all true.

When you are designing a website there are a lot of things that have to be taken into consideration. The layout of the page, the placement of content, the use of color and text , how pages interact with each other, scalability, navigation and so on. Just to think that design is merely limited to the visual realm is shortsighted. Design covers the look, feel and function of an object. Everything man made on this planet was designed by someone. Let me say that again, Everything man made on this planet was designed by someone!

The designer must decide how the user is going to interact with the interface and what kind of visuals he will use. In Other words, the designer must engineer the experience as well as make it look good.

Take a minute and think about your car (or your parents car). Get beyond the look of it for a second (I’m not talking about those sweet chrome rims) and think about how it works. You put your foot on the brake and then put the key into the ignition and turn it. The car starts, you shift gears and then put your foot on the gas as you manipulate the steering wheel. That’s the basic workflow of the car, most vehicles operate in this way.

Did you notice that the workflow has very little (if anything) to do with the way it looks? Your car will operate the same way regardless if the paint is green or red.

I can’t stress how important workflow is. Think about this scenario, you’re in a car lot and you spot a shiny new Bentley off in the distance. When you go up to it you realize it has no engine, the steering wheel is gone and you’re not allowed to replace them. This car has limited workflow and is useless to you. It may be a Bentley but if it doesn’t work you might as well go with a Subaru station wagon.

In the scenario above the pretty chassis may have attracted you above but the workflow turned you off. So keep that in mind, visuals may sell the product but workflow is what makes it last.

So let’s begin to design the workflow for the website. Flowcharts are a good way to get your brain around where the content is going to go and how the pages will interact with each other. You may have gotten an idea of what you want your site to look like in part one but now you’re really going to get a clear picture.

To begin, think about all the sections, and any additional subsections that you may want to add. Such as under the portfolio section you would want some sub-sections for Acrylic or Oil. Or perhaps organize them by date.

When you’re designing your flow charts think of each square as one click. In general it’s a good practice to have no more than three clicks. If you require more than that then perhaps you should implement a different strategy or provide some tools (such as a search).

Here are some of the most common work flow strategies.

All in One:

With this model all information goes on the home page. It is by far the easiest model to use but also the most limited.

Flat:

In this model is very commonly seen in simple sites. The visitor can access all of the pages from anywhere in the site. If you don’t need to present a lot of information then this is an elegant solution for you.

Index:

This model is good for browsing through lots of content. It’s often organized in some way in order to make finding the content easier. For instance perhaps you have an inventory of authors and you want to order them by name.

Strict Hierarchy:

In this model you access the childs by the parent and not by any other means. This style is common throughout the internet, such as online forums, threads and posts. We used this model for TutorialQuest.com where you select the category then sub category.

Keep in mind that though your content may follow this real world model it may not be the best way to navigate your content. Think about your visitor's goal.

Don't Limit Yourself:

You don’t have to stick to just one model either. You can mix and match as you see fit. I used a combination of flat and index in my project.

Isn't it amazing how an image can make something much more simple?

You could have the most advanced features on the internet but if it looks bad then people will have a hard time trusting your product. Think about it, you wouldn’t eat something that looked rotten would you?

Your website as an emotional experience:

Believe it or not, viewing a website can be an emotional experience. I know what you’re thinking “josh you’ve gone crazy.” But here me out. Take out a photo album and flip through the images. Notice the feelings you get as you look at the images, perhaps you stumble across one of you as a kid when you caught your first fish. You’re holding the fish in one hand and the fishing reel in the other. Doesn’t this kind of give you a good feeling? Next you stumble over a picture of a bike you used to have and then you remember that time you got hit by a car on your way to school and you had road rash all up and down your body and then your mom came into class and completely humilia. . . . . nevermind I’m getting side-tracked. You get the idea, these images conjure up memories and thus emotions.

Interfaces can do the same thing. When you see the color blue what kind of feeling do you get? I think of ice cubes, or a clear sky with a cool breeze. Perhaps that’s why this is considered a “cool” color. If you use a lot of green and brown you’ll conjure up feelings of nature, if you use a lot of saturated red and yellow you’ll get an unsettling feeling of alertness.

Look at the interface below, this is the interface to AtomicCartoons.com an online cartoon animation gallery. Notice their use of highly saturated colors and large shapes to give it that "cartoony" feel.

The next image comes from http://anniesgourmetkitchen.net, a company that provides cooking training to individuals. The warm color of the wood and limited color palette gives it a warm and cozy feeling.

So a good rule of thumb is always ask yourself “how do I want this interface to feel?”

Why do we name things? Is it so we can communicate effectively? That’s part of it. Names serve as a way to conjure up mental pictures of things. It’s a way of remembering. When I say the word “hippopotamus” you immediately think of a big animal in Africa taking a bath. Why is this so effective? That pattern of words, is only associated with that animal, when we hear it we don’t associate it with a plant or your neighbor’s house. It gives it identity.

So how can you give identity to your website? How are you going to get people to remember it? You could have naked pictures of women on every page but I don’t think that would encourage someone to contact you about a job. What’s a way to separate yourself from the rest?

Using emotions to reinforce your brand:

Beyond anything else, your website must provide a pleasant experience that they will then associate with your brand. Be sure that your website serves its primary purpose, to deliver information.

When we say a website is “good” we don’t say it’s good because of the pretty graphics but because it serves its purpose quickly and easily. If someone says your website is good they are experiencing positive emotions and instantly your brand is strengthened. However if the visitor can’t find the information they are looking for they will quickly (within seconds) leave and look for another site.

Ironically, if the visitor finds your website easy to use and informative then the experience becomes fun. The “Fun” factor of your website isn’t determined by graphics or flash animation It’s about the ease of use at providing the information they’re looking for.

When I think about my I-Pod I revel at how small it is, how easy it is to use and how good the music sounds. My I-Pod is fun to use, not because it makes silly sounds or jokes but because it does everything I tell it to do. In the end, I’m proud of my purchase and will probably buy another one in the future. This is successful branding because the I-Pod is a successful experience.

Every person has their own mannerisms, phrases they say, style of clothes etc. We say this reflects their personality. Their outward appearance reflects their inner being. Your website must do the same thing.

Take a look at the Apple company, they are probably the best branded popular company today. All of their products have that “apple” feel.

Look at the image below.

Apple has become famous for their smooth edges and the glossy white surfaces. Also notice that both the products above share a similar name syntax. I-Mac and I-Pod.

In fact, Apple inc. has become so popular today that it isn’t uncommon for people to think you’re talking about the company when you’re really talking about the fruit.

Symbols:

Take a look at the pictures below.

Can you name the companies associated with these images? I bet you can!

Each of these companies has given itself a universally recognizable symbol. Notice that they are all very simple without any complex illustrations involved. I bet that if you ask almost anyone they could draw a rough idea of what these icons look like. Now that’s branding!