Like most things what is a blessing can also be a curse. Sometimes unevolved ideas get picked up and spread like wildfire causing a whole new wave of practice that simply needs more thought. Yes, I am referring to “content strategy.”

What Is It and Where Did It Come From?

I will be honest and admit that I am not sure where “concept strategy” came from. While it has largely been considered to have been born out of user experience design it seems as if it has been picked up largely by the marketing community. Either way it has violently pushed it’s way into books, blog posts, tweets and conferences. It seems that you would be hard pressed to be a part of a web project with out hearing or reading the term at least a dozen times.

The most common way I see it described (in more or less words) goes something like this the practice of planning for content creation, delivery, and governance” and “a repeatable system that defines the entire editorial content development process for a website development project.” (referenced from Wikiedpia).

The following high regarded A List Apart article describes the an ideal content strategy as the following:

• key themes and messages,
• recommended topics,
• content purpose (i.e., how content will bridge the space between audience needs and business requirements),
• content gap analysis,
• metadata frameworks and related content attributes,
• search engine optimization (SEO), and
• implications of strategic recommendations on content creation, publication, and governance.

They follow up with a quote stating that “The main goal of content strategy is to use words and data to create unambiguous content that supports meaningful, interactive experiences.”

This all sounds good right? right??

I will admit at first I was delighted to see more people worrying and focusing on content. Most of the time content is severally neglected in favor of more “sexy” aspects of the web such as design, social interactions and other fluff. However the more I saw how most were treating the practice of so-called “content strategy” the more that it bothered me.

My Issue with Content Strategy

What has ended up happening is a very mechanical and system driven “strategy” for the handling of content. This is likely due to the fact that the most “deliverable friendly” way to create a content strategy is to make one that is very mechanically focused. Think about it, if you are a marketing or web agency and you need to deliver a content strategy to clients the most repeatable structure would state:

• Communicate “XYZ”
• Distribute to sites “ABC”
• Tone should be “blah”
• Talk about these searched subjects
• Publish at “X” frequency

Now there is nothing inherently wrong with developing a system that covers those important subjects. These are all things that we should be concerned with and plan. After all neglecting these items can have a poor outcome on our content.

What I have issue with is that this sort of strategy fails to address the most important element of good website content. I would even go so far as to say this sort of strategy actively promotes poor website content through it’s neglect.

This mechanical step by step process towards content leaves out the critical integration of creativity. As a huge Seth Godin fan I am always quick to quote his mantra of “to be successful you must be remarkable.” Simply outlining key messages, post frequency, tone, etc… completely ignores the most important part of content, it’s quality.

What a Content Strategy Should Be

The web is littered with lack luster and boring content. How many sites do you come across where the primary headline and message is “Hello! We are company XYZ and we do A, B and C?” I would rather read the dictionary one page at a time than actually read most web content.

It is easy to see how it came to this when you look at the “content strategy” approach. I can see the strategy document that says “The tone should be friendly and personal, the key messages are outlining what our services and key differentiators are.” The result is a generic “Hello we are…” statement that you see in so many places.

I propose that content strategy should focus more on the creative development of remarkable and interesting content, rather than the mechanical details. I would even argue that if you are making remarkable content schedule, keywords and tone really don’t matter all that much. People will find and share your content, remember your brand and come back when you post something new.

If we look at some of the recent examples of successful and remarkable content you can see that the mechanics of the content have very little to do with how well it has performed.

Don’t Be Ugly By Accident

OK Cupid, an online dating site recently published a stellar piece of content that looks at a study between what camera is used to take profile pictures and your level of perceived attractiveness. This content was hugely successful, passed around on social networks and bookmarked by thousands. Not only is it interesting regardless of your interest in online dating, but it also is relevant to the site and does a great job branding the website into readers mind.

This content was interesting, unique and compelling. The concept of this article, collecting the data and displaying it in an interesting way are all what made it so successful. These are all aspects of the article that are not at all covered in your “typical” content strategy.

Will It Blend

This is often the “classic” case study for viral content, but that doesn’t make it any less relevant. The Will It Blend campaign is a series of videos produced by the Total Blender manufactures in which they blend expensive high tech gadgets like iPads, iPhones, etc…

Again this content is interesting, unique, funny and relevant. Not only do you get enjoyment out of watching them blend some fairly ridiculous things but you are also learning about the blender and how powerful it is. Again a typical content strategy at best would outline the key message of “powerful blender” but it would do nothing to assist in the development of this creative concept. The tone, keywords and publish schedule have nothing to do with the success of this content.

The Oatmeal

It is hard to find someone more talented at developing clearly remarkable content than Matt Inman. Through the use of clever content he was able to gain massive amount of attention to his self developed dating website which was then later sold as a result.

He continues to gain massive amounts of attention through unique content at his website, The Oatmeal. With entertaining comics and commentaries like What it is like to own an Apple product, How a web design goes straight to hell and 15 things worth knowing about coffee it is easy to see how his content not only gets attention but has many opportunities for marketing efforts.

By this point it should be obvious that a common approach content strategy would do nothing to help create the type of content that Matt Inman is so adept at. However Matt Inman could give you some insight into his strategy that actually would. In fact he recently did a five minute ignite presentation that is much more useful than your common content strategy document.

So What Should Be Delivered

What I am trying to communicate through this rant is that the content strategy document that you deliver to your clients, boss or board should contain very different information. I do believe it is important to identify key content, missing content and some of the other mechanics but I would call this more of a content “audit” than “strategy.”

The strategy itself should read more like a creative brief in which ideas and concepts for unique, creative and remarkable content are presented. This ideas should be presented and formed in terms of campaigns and series. If you look at the more successful content strategies a lot of them build and work off of a few key themes. The Oatmeal clearly has a formula that works through content, humor and quizes. The make it blend guys clearly have a theme that works and can be built upon over time.

Beyond the concepts and ideas the document should also outline the resources that would be required to make it happen. This doesn’t have to be exact, but it is critical to understand what sort of undertaking would be required for the concept to work. You wouldn’t want decision makers to select a time and cost intensive concept if they needed something cheap and quick.

What are Your Thoughts?

Have any ideas on how content strategy can be improved? Think I am off my rocker? I would love to hear and discuss your thoughts… it is the open discussion of ideas that helps our industry involve, so let’s discuss.

Sometimes the ramification for post design approvals are relatively minimal and sometimes they are significant. However to many clients it doesn’t seem like that big a deal and they have no reason to know any better.

So what we need to do is improve our methods of educating clients as to the implications of approving a design concept. Now with my web design firm, we have gone about this in many different ways and honestly none of them have been perfect.

Common Approaches

1. Get it in Writing

Back when I first started the company we had a hard copy paper that we printed out, faxed to the client and had them fax back to us. This felt VERY official and it really communicated the gravity of the situation.

However it also was a huge hassle and caused just as many coordination and time delays as it solved. Especially when the seriousness of it caused the client to take a second look, resulting in several additional faxes back and forth.

2. Tell Them / Get It in Person

This is a great way to do it in theory… you present the design, they love it and sign off right away. You had the approval form ready and you can move right into the next stage. The problem here is that it almost never happens. Almost every single design project is going to have some rounds of revisions, expect it and deal with it. This means you either have to setup another meeting to review / approve and hope it goes well, or drop off the form yourself. Neither really works well.

3. Get Approval via Phone / E-Mail

This is what we had been doing for some time. Calling or e-mailing the client, explaining and then asking for approval. Much easier than dealing with scanning / faxing forms and you can still educate them as to the implications of design approval. However I have found that this also, is not ideal.

Calling them requires that you spend time reading off your rehearsed “approval talk.” This takes more time than is necessary and really doesn’t feel genuine because it is boilerplate.

Sending it via e-mail is a bit better, it takes less time and you can write an approval template that sounds pretty genuine and caring.

Oddly enough even though the phone / email approach has always been easier and faster I have found that it is much less effective compared to the signed document approach. Ultimately a verbal or e-mail “approval” doesn’t feel concrete. This is a critical flaw because the client should know that making changes after this point could be difficult. It seems that the lack of taking an “official action” makes it feel very casual and non-important. Rather than a “I agree this design is exactly how I want it” it feels more like a “looks pretty good, go ahead and code.” The later mindset completely ignores the fact that the idea is the design is finalized.

4. My Latest Solution, Webforms

It struck me earlier today that this could be simplified by sending clients to a simple page explaining design approval and requesting they fill out a form to approve it. This really combines the best of both worlds in terms of commitment, communication and convenience. It doesn’t take time or hassle to send them to a URL, you can explain everything you want about the process and the action of going to a specific page and filling out your name makes it feel very official and concrete.

Now of course this probably doesn’t count as a “legal signature,” but are you really going to end up in a legal battle over design changes? Probably not.

You can see our simple design approval form here to get an idea and I expect to create a “my content is final” form shortly.

What’s Your Experience?

Have any tricks, tips or techniques to communicate the design process to clients? I would love to hear them. This is always a very tricky process and the more we can learn from each others mistakes the better.

Clients Perspective

To the client the logo is really important to them. It is the identifying mark of their company. The company they spend so much time nurturing, growing, living… so it makes sense that they want the logo to be big and proud. They also want to make sure it commands enough attention that people notice it, recognize it, remember it. This also makes a lot of sense.

So despite the fact that I titled this post “nobody gives a shit about your logo,” it is understandable that the client wants the logo to be large and important.

The Users Perspective

From the users perspective the logo just isn’t that important. Sorry, but it is true. Despite the fact that I hate “mirror-personas,” think about any time you have visited a website and really been concerned or even thought about the logo at all? It doesn’t happen, users don’t care… they come to your site to perform tasks which has nothing to do with the logo.

Now the logo does play an important part in usability. The logo and tagline help identify and establish what website the users is on, so from that sense it is no doubt important to make the logo visible enough for users to see and identify it. However the size required for visibility is often overestimated.

Breaking it Down

Almost all websites tend to put the logo in the top left corner of the site. This is a good idea because it is a long established convention. Users expect to see it there so they can easily look to the top left and identify where they are.

For that reason, if you put the logo in the convention spot you immediately reduce the requirement of size and impact that is needed. Users will be able at any point, to glance and identify what website they are on. Remember that they are on your site to perform a task, not be “branded” so you will actually have a more effective and successful site by emphasizing the completion of the task vs trying to push your brand on them.

Additionally, if you look at most heatmap studies you will find that the top left portion of the site gets high level of user focus. This is probably reenforced by the fact that we read top to bottom, left to right. If you look at additional heatmap studies your will see that on interior pages users tend to skip over the header area completely and focus more on the content. This means that they no longer care about what site they are on, or your logo and are focused on finding the information they are looking for.

By making the logo more visually dominant and taking up more space you are actually distracting the user and preventing them from achieving their objectives. The end result is that your site feels more cluttered and difficult to use, both which negatively impact the brand.

So all that effort that has gone into making sure the logo is visible actually impacts the brand in a negative way.

Examples

There are plenty of great designs out there that don’t have an overburdening logo, yet there is no question what site you are on nor do you miss the logo completely. Take a look and observe how they make use of placement and whitespace to ensure they are apparent but not intruding.

You will note that in all of these cases one could easily skip over the logo as it is far from the most dominate element on the page. However you never have to hunt or look for it, or question where you are.

1. Sidebar Creative

2. Rokkan

3. Virgin Airlines

4. Zappos

5. 37 Signals

Using clear and effective design laws as guides we can use proven formulas for better design. These laws both assist in the usability / experience of our design as well as the aesthetic values. Furthermore being able to refer and cite these laws when presenting or discussing design you can further establish yourself as a expert with justified reasons for your design choices.

1. Hick’s Law

Hick’s law states that with every additional choice the time it will take for one to make a selection increases. This means that the more options a user has when using your website or web application the more difficult it will be to use. This law really speaks the importance of simplicity.

The classic case study for Hick’s law involves a grocery store which put out free jam tasting for customers. In one case they had 40+ jams to sample and choose from, and in the other only a few samples. What they discovered is that customers purchased more jam when presented with three to four options over the forty plus. Most customers opted not to purchase jam at all rather than pick from such a large selection.

What this means for us designers is that we should minimize the amount of choices a user has to select from. Removing any unnecessary pages, links, buttons or selections will make your designs much more effective.

Read more about Hick’s Law.

2. The Pareto Principal, or the 80 / 20 Rule

The pareto principal stipulates that a high percentage of users will perform a low percentage of actions. Meaning that most of your users are going to go to a small percentage of pages. Or in terms of web applications that most of your users will perform a small percentage of tasks.

Using this principal we can identify what that small percentage of actions that most of the users are performing (using analytics, research, interviews, etc…) We can then put higher emphasis on those tasks and actions to make the site easier to use. Sometimes this can lead to the inclusion of a new navigation, or altering the homepage to make finding and accomplishing those tasks easier.

This can also lead to the pair down and removal of content and features from a website. If the users are not accessing or using the information, then you can improve the site by removing it. This ties into Hick’s Law and Occam’s Razor.

Read more about the Pareto Principal

3. The Rule of Thirds

The rule of thirds is a method of composing elements to be visually pleasing in addition to identifying ways that users eyes will scan across  the page. Photographers have been using this principal for years to create more visually interesting compositions.

The rule of thirds is used by breaking up a design into thirds both vertically and horizontally. This builds a grid of intersecting lines. The rule states that a viewer is more likely to be drawn to the intersection of those lines. Additionally it is a good rule of thumb to place elements along the lines and intersections as well as avoid placing anything in the dead center of the composition or have a horizon diving the composition in half.

Placing elements so that they take up 1/3rd or 2/rds of the space will be more visually pleasing to most viewers.

Read more about the Rule of Thirds.

4. Proximity

The law of proximity is often neglected, even by experienced designers. This law states that elements that are near each other will appear related. This sounds like a very simple and obvious law but it is so often overlooked.

What this means is that you must be very aware of how much space you are placing between elements with in your design. If you have a series of elements that are too close together, users will assume that this was done so on purpose and that those elements are related. This is often an issue with web applications, where buttons or controls are grouped together yet have unrelated functionality. The result is that users get confused when trying to use and understand the application.

For example a search button that is too close to a save and cancel will likely get the assumption that the search is related to saving or canceling. Some users may think that the search is for searching previous versions of your work or that it is specific search for help, etc…

Proximity should be used carefully as it is extremely powerful. One simple example of good proximity use would be placing headlines closer to the paragraphs they are related to them than the paragraphs previous. You can look at the headlines in this blog as an example.

5. Feedback

Feedback is a concept that industrial designers have mastered for decades. Feedback is giving a user clear indication that something has happened, is happening or could happen. This communication is essential in the design of many products, consider a coffee maker that didn’t have a light indicating it was on. You would probably be burning coffee constantly!

Since users interact with our sites and applications we need to be aware of providing adequate feedback. This means providing loading bars, hover states on all links, using the visited link property,  :focus states on form elements and :active states on links.

Sometimes designers will neglect to have hover states on links out of laziness. However it really does improve the usability and quality of your design.

6. Fitts’ Law

Fitts’ Law can be described as “The time required to move to a target is a function of the target size and distance to the target.” We can apply this to web design by looking at the hit area of our objects. Meaning the larger we can make the clickable area of key links and navigational elements the easier they will be to click on. Remember that while as web designers we may be extremely proficient at using the mouse and the web, there are a lot of users who still have trouble with these basic functions.

A common misuse of Fitts’ law is when a design is coded so that the text of a menu bar is clickable but the tabs themselves are not. Rather than just making the text clickable it would be a great idea to add padding to that link element to increase the clickable area. Sometimes this means turning the anchor into a block level element and wrapping details inside.

This can work in the opposite way as well, meaning items we want to be difficult to be clicked on (such as cancel buttons / links) should have a smaller clickable area. This is why you often see forms or actions that have large “save” buttons but text based “delete” or “cancel” links. Wordpress uses this law extremely well.

Read more about Fitts’ Law.

7. The Golden Ratio

The golden ratio is often confused with the rule of thirds, but make no mistake they are different. The golden ratio looks at what proportions are naturally most visually appealing. This ratio has been used in design, architecture and engineering for hundreds of years. It even has been tied to what features we find most attractive in people (both facial features and body types).

The golden ratio can be described as a ratio with in the elements of a form, such as height to width, approximating 0.618.

When applied to rectangles you can continue to create smaller disections of the shape using the .618 ratio, which creates a natural spiral pattern. This can be seen in nature by examining sea shells.

This ratio has been used through out history, in everything from the craftsmanship of violins to the design of the Parthenon and Stonehendge.

It is unlikely that some of these items were created with the golden ratio in mind, rather the creators likely preferred the visual appeal of the design when using these ratios.

Ultimately the golden ratio is more likely to produce visually pleasing compositions.

Read more about the Golden Ratio

8. Occam’s Razor

Occam’s Razor put simply, states that “the simplest solution is almost always the best.” With the flexibility and power of the web and our design tools, it is easy to get carried away. The result is a very complicated site or design that may have a lot of functionality and information, but is difficult to use, build and maintain. Despite the fact that one might think the site can do more, it actually accomplishes less.

This is commonly an issue where companies feel the need to put everything they possibly could up on the website in the rare case that someone wants the information. What gets ignored is that the overwhelming majority of the users will access about 20% of the content on the site (see the 80/20 rule earlier).

Being ruthless about the value that a page or piece of content provides and removing anything that is unnecessary will make significantly stronger and more effective designs.

Additionally this rule speaks to the age old saying that “A design isn’t finished when there is nothing more to add, but when there is nothing left to take away.” Design simplicity is elegant, sophisticated and much more effective than the complex decorative style that is so prevalent on the web these days.

Read more about Occams Razor.

9. Fibonacci Sequence

The Fibonacci Sequence is a series of numbers in which each number is the sum of the preceding two. For example if you started with 1 it would go like this:

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, etc…

This is significant as it has been found in many classical creative works, is found commonly in nature and is often used in addition to the golden ratio. Patterns based on the sequence are intrinsically aesthetic and therefor should be used in the composition of our designs.

This sequence can be used to create visual patterns, create shapes, organic figures, build grids or dictate sizing and ratios. The Fibonacci sequence is considered to be one of the most influential patterns in both mathematics as well as design.

Read more about the Fibonacci Sequence

10. Mental Models

The Mental Model law states that it is significantly easier for users to understand and learn something new if they can model it off of something they already understand. This is why the concept of tabs works so well and why operating systems are modeled off of real world office situations (folders, files, desktop, etc…)

We can use this concept in making our designs easier to use as well as more effective visually. There are times where it would be effective to model our designs off of real world situations or objects. Consider designs that mimic desktops, papers or offices. Users can learn, understand and draw meaning from these types of designs because they can relate it to their understanding of the objects in real life.

Use the Laws, Design Better

Are there any laws or design principals that you use when crafting your designs? I would love to hear about them.

It may seem honest and innocent enough but that really is just shooting yourself in the foot. As designers we should know better. Come on, aren’t we the ones always talking about how design can influence and change perceptions? Well guess what, e-mailing JPG concepts gives the perception that there wasn’t much time and thought put into it.

Consider it like this… You are going to buy some new designer clothes for a large pitch. A friend recommends a local designer who supposedly does amazing work. You decide to check out her work as it sounds like a great place to get a new outfit or two. When you arrive to her store you are surprised to find all of the clothes sitting in piles on the floor.

Now at this point regardless of how well they were designed you would probably be significantly less likely to trust the detail and care put into the clothes. Additionally you would probably expect to pay less as a result. After all you went in expecting to see “high quality and custom” and were presented with something that felt more like “second hand store.”

How is this the Same?

Sending off concepts with out taking the time to DESIGN and PLAN the presentation is more or less like throwing designer clothes on the floor. You don’t care how people see them, they can pick them up off the floor and choose to look at them however they like. High end clothing stores put a lot of care and attention into how items are organized, the lighting, how they are hung, the window displays, the type and placement of mirrors, the type of hangers, etc… How you see, experience and encounter the product is extremely important. Why should this be any different for graphic or web designers?

Actually, it is Worse

As designers we face even larger challenges than most clothing retailers (even designer ones). Since we are doing complete custom work, an ineffective presentation can lead to unnecessary and ineffective revisions. If the presentation doesn’t convey that you have carefully thought about, evaluated and tried many different options and scenarios before arriving at what you feel is the best solution to the design problem, why would the client assume that is the case?

If you are not a designer and you are presented a visual with out being educated into the design process and there is nothing that is communicating such why would you think any different? This can easily lead to design requests. With out the experience and knowledge of a graphic designer it is easy to make assumptions and suggestions with out understanding the consequences. Experienced designers will agree that every single element on the page somehow effects everything else, as a result even minor changes can have significant impact on the overall design.

How to Present Effectively

Ultimately you need to design the presentation experience. When the client looks over your work they should have a clear idea and impression of how much work and thought went into arriving at that situation. Additionally it should be clear that your design isn’t a starting point, rather what you are recommending as the best solution to their problem. Now that isn’t to say that you shouldn’t be open to feedback nor that I expect design to be a “one pass process.” I am saying that it should be concrete that everything was done for a reason.

Present in a Contextually Relevant Way

For this reason I always recommend the design is presented in the most relevant way possible. Logos should be printed and matted and shown in several real world situations such as on a letterhead, business card and envelope. I use a specific template that is carefully designed to present all concepts in a way that conveys detail, intent and care.

Web designs should be presented in a browser so that the client can see how it fits with different resolutions, relative sizes and where the fold is (for better or worse). Looking for an easy way to do this, check out the Mock Up Present tool we created. Cameron Moll does an excellent job of this with his mock-ups.

Provide Explanation

Many designers will send over a concept as if everything speaks for itself. However the client can read your mind and doesn’t know that you made the call to action button an odd color because it will draw more attention and convert better. Yes it is a lot of work to type out your entire thought process and not everyone can afford to have an in person meeting for design presentation but it is so critically important.

This also establishes yourself as an expert as you are able to articulate your design decisions, which goes a long way to convey that nothing was done with out reason.

Give it a Try

Next time you have a large project that you need sign off for, try putting these techniques in place. I assure you there will be a noticeable difference compared to your typical process. I have seen design approves go flawlessly that I expected to be a disaster as the concept presented suffered for countless design issues.

Do you have any methods or techniques for improving your design presentation? I would love to hear them.

It probably sounds like I am framing this in a negative light, but that is not my intent. I actually do see this as a huge strength for our industry. In any field or skill you are going to have newcomers and veterans. Having rewarding early experiences will results in a higher likelihood of sticking with the industry, which results in a greater number of skilled experts. This higher level of experts then leads to a more mature industry and a greater mind pool to help advance and improve everyones work.

That Being Said, There Are Drawbacks

Because the web is so new and fast paced, there are not a lot of great educational programs for design and how it relates to the web. Additionally many designers are self taught, so even if there was a great program they might not get the insights of experienced instructors. Now again, this is not necessarily a bad thing… I will be the first to admit that I do not have a formal education in design and there are a lot of other amazing designers in the same boat.

The major problem I see is that as an industry we are really good at focusing on some things but completely miss the boat on others. This means that those self teaching become very adapt at the “popular” news and information and many educational programs are shaped around these as well. Critically important aspects of design receive very little attention.

What We Are Good At…

There was a time when we were really good at talking about the better ways to “build” a website. You should use web standards, make it accessible and ensure that is usable (OK somewhat design related). As these topics become more common new “sexier” news become popular.

Where we once talked about the importance of accessibility, standards and the like we now are now pumping out tutorials and lists. Tutorials cover how to make fancy graphics, how to do the next cool jQuery trick or integrate a fun Wordpress plugin. Lists of “cool styles of design” seem to sprout up every week and are shared around the web at lightening speed.

What We Are Not Good At…

I am always shocked at how little attention is given towards communicating the right message. There are tons of tutorials out there that talk about how to make “such and such” style of design and lists of “such and such” amazing designs. However there rarely is talk about when to use such a style. The web is such a highly visual medium and I think this leads to it. It is easy to overlook the context and the message when you are scanning through sites purely to see what looks good to you.

So we end up forgetting that users make very brash assumptions about our sites based on our graphics. Those assumptions can increase or decrease sales, brand value and the effectiveness of the site.

Design Can Communicate As Much as Words

Every piece of design on your site communicates something. As a whole the design can communicate more than the words you chose to place on your site (especially considering some users do very little reading). If you are communicating the wrong message it doesn’t matter how beautiful your design is, it still sucks (harsh but true!).

I would even go so far as to say that a design that communicates the right message but is not so visually pleasing will ultimately be more effective than a beautiful design that is completely off message.

So How Do You Know if it is On Message?

Determining how “on message” a design is can be tricky for a few reasons…

1. As the designer we are often too close to the design
2. We are also rarely the target market of the design
3. Design is subjective
4. The client (who ultimately gives approval) suffers from the same issues

However there is a great way to find out. We have usability testing and we should have design testing as well. It is much easier and less expensive than usability testing and can have a huge impact. The process is very familiar to usability testing as well:

1. Identify your target market so you can get qualified test subjects
2. Develop a list of specific questions
3. Develop a set of instructions to get the highest quality feedback
4. Perform the tests, record the results

Crafting the Questions

Obviously getting people with in your target market that will be using the design is a critical step. However the quality of the questions and instructions is equally important. Because people are so opinionated about visuals and design there will always be a tendency to just starting freeform talking about what they like or dislike about the design. However this is not helpful, what you want to know is what the design communicates to them.

I find that it is best to identify what you want the design to communicate then craft very specific yes or no questions around it. Sometimes you can get away with short answer questions as well, but the more freedom you give the further out your answers will be.

For example if you want the message to be “Child friendly restaurant with classic american food” you could develop a whole series of questions around it, such as:

• Would you expect to see this design used for a grocery store?
• Does this design feel like it is targeted at adults?
• What sort of food would you expect to find here?

Now the first few questions might have thrown you off, but a high quality question shouldn’t lead the test subject. You wouldn’t want them to think “Oh they said restaurant so of course it must be a restaurant.” By asking a question that you WANT them to answer false too you will really know if the design clearly communicates your message.

Something is Better than Nothing

Simply being more aware of the design message and crafting the right design, but I really do encourage you to take it a step further and do some testing just to see what reactions you get. I bet you will be surprised. Furthermore it will make you a much stronger designer as well.

• If you know your site is predominantly web designers or earlier adopters
• You have other technology that can take advantage of the improved semantics
• You need to use ARIA and want it to validate

So given that you do feel a need to use HTML5 it is important to do so in a way that actually functions cross-browser. There are a few different techniques for doing so, each with their own advantages and disadvantages.

1. Use the HTML5 DocType

The easiest way is to simply use the HTML5 DocType and MetaCharset. This is the simplest way to create a HTML5 document, a little change of code and you are ready to go. Instead of using the standard XHTML or HTML DocType you replace it with:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

Advantages

• You can now use ARIA and validate
• Even non-modern browsers will render things properly

Distadvantages

• Using the new tags (<section>,<article>, <header>, etc…) will break on older browsers and Internet Explorer 8 and below

2. Use Javascript for IE

As it turns out most browsers when confronted with a tag they don’t understand the behavior of they simply treat it as a block level element. This is perfect for the use of HTML5, as we can now start using the new semantic tags and apply styles to them as needed. Even though the browser may not understand what a <nav> element is natively, we can use it for all intensive purposes through CSS.

There is a hitch of course, one browser doesn’t treat unrecognized tags as block level elements. Instead this browser simply ignores them, preventing us from applying any styling to them at all. You guessed it, the browser in question is Internet Explorer.

This leaves us in a situation where you can code an HTML5 document, however in Internet Explorer it will end up looking like completely unstyled content. Not ideal considering the high percentage of users who are still on IE.

One work around that has been presented is the use of Javascript to create the elements in internet explorer. The HTML5 enabling script will cause Internet Explorer to create all the new elements available in HTML5 so that you can style them like any other element.

The code to use it is simple and straight forward:

<!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Advantages

• Simple and easy
• Minimal amount of additional code, no additional HTML markup
• You can use all the new elements in HTML5

Disadvantages

• IE users who have javascript turned off will see a very, very ugly website…
• Questionable support on other less common browsers (mobile, etc…)

3. Wrap HTML5 elements with a <div>

There is a more full proof approach that will let you use the latest HTML5 elements, ARIA and still be compatible with older browsers (including IE of course). It is a simple concept, so much so you may be kicking yourself for not thinking of it earlier (I know I was). All you have to do is use the HTML5 elements as wrappers for DIVs, and then you style the DIVs.

The idea is that the HTML5 elements are block level with out any styling, if you wrap a div with an ID of header in a <header> tag and then style the #header element all of the browsers will render it properly. Even though Internet Explorer will ignore the <header> element they will see the <div>. This example should illustrate the concept:

<header>
   <div id="header" class="header">
     <nav>
       <ul id="main-navigation" class="nav">
          <li><a href="/">Home</a></li>
       </ul>
     </nav>
   </div>
</header>

So as you can see every time you have an HTML5 element such as <nav> or <header> you have a supported element such as a <div> or <ul> that you can style cross browser as a backup. I recommend using HTML5 naming conventions on the related element class as to make it easier to distinguish which supported HTML element is being used as the backup for the HTML5. For example the <div> that will be styled for the <header> element, simply give it a class name of “header.”

Advantages

• Pretty fail safe, all browsers will be able to use this
• You can use ARIA and all HTML5 elements

Disadvantages

• You end up doubling your mark-up anywhere that there are HTML5 elements

Any Other Methods?

Know of any other methods to publish HTML5 documents in a safe and compatible way? Let me know, I may add them to this post or to a follow up blog post.

I always dismissed microformats as a “tool that had no real place yet,” and with HTML5 and a whole new layer of semantics becoming available it just became easier to ignore them further… buuuut in reality a lot has evolved with Microformats and there are plenty of business cases for them.

We Set the Standard

If for no other reason, I am embarrassed to have let Microformats go so long because as designers and developers we should shape the web through practice. That is to say that if people use Microformats, tools will be built to take advantage of them. With more tools and greater usage they will gain popularity and reach. We shouldn’t ignore a great concept because it “isn’t ready yet,” after all aren’t we supposed to be the earlier adopters?

Now I realize that you selling microformats to your boss or client with “We can be the cool earlier adopters” might not be the most effective approach. So here are some other business cases:

Microformats Encourage Engagement

We are now all hunting for that magic way to engage users with our sites. Some try and do this with design, others with content and some with interactivity. Now these are all great ways, don’t get me wrong… by why pass up an opportunity to build more engagement?

If a user browsing your site has software that is capable of interpreting microformats you are instantly making your site more engaging. A user can now easily take the information from your site and seamlessly import it into their desktop software with less time, effort and hassle. This increasing the likelyhood that the user will actually download your data.

If you look at what Microformats are available there are plenty of great ways to use them to build engagement.

• Contact information
• Dates & Events
• Reviews & Polls
• Licenses

OK yes, not every user has this software on their computer but it is growing and think about how much of an impact your site will have on them if they do.

Microformats Benefit Search

There are very few websites out there that can ignore the search engines. Free targeted traffic? Yes please. Google recently announced “Rich Snippets,” the inclusion of extra data about a search listing that is populated by Microformats. While they have not claimed that it will actually make your site rank higher it will help the site stand out from the crowd. The more attention your search listing commands the higher your click through rate (CTR) will be. That is to say all other things equal you will get more traffic with a rich listing compared to a standard one.

While currently there are only select sites that Google is using for microformat results, Google is including new sites all the time. Now is the best opportunity to be one of the early adopters (there is that term again!) who takes advantage of the first wave of a new technology.

If you are currently using Microformats or plan to add them, make sure to let Google know. They do let you apply to have your site included as a rich snippet website.

Microformats Establish a Framework

Better code, in less time? Doesn’t sound like a “css framework” does it? I continue to avoid using “standard” CSS Frameworks because of the non-semantic naming conventions. But don’t dismiss the idea of frameworks yet, they actually can increase the quality and reduce the time of your development.

Rather than reinvent the wheel every time you are coding contact information, events, reviews, etc… you can simply throw your prebuilt code snippets based on microformats and fill in the blanks. Additionally every time you need to make a change, style or work on your frameworked content it will take less time to look up and recall class names, formating, etc… It may not be huge blocks of time but it will all add up.

Microformats are Extendable

It might be hard to believe but there are times where you either want to aggregate or distribute some content. All jokes aside the aggregation or distribution of content is what has made RSS so popular and useful. In the last few years we have seen a huge surge of Twitter feeds on websites, blog posts on Facebook pages and the aggregation of several news sites into one. Microformats, like RSS makes this possible. You can now write scripts that look for the mark-up designated by Microformats and use that to extract or distribute data.

Microformats are Quick and Easy

I know what you are thinking at this point “sure that all sounds nice but they are probably difficult to implement.” When in reality they are actually really easy, often times it won’t take more than a minute or two to change existing high quality mark-up into Microformats. Look through these quick tutorials to learn how easy it is.

• hCard
• hCalendar
• hReview & hVote
• Licenses

I encourage you to start adopting them in your own process. Know of any good examples of Microformat usage and benefits? Post them in the comments…

Font Stack

Pros
Works in all major browser
Cons
Extremely Limited Font Choices

We all know about the font stack and probably use the same 8 fonts time and time again. Technically you can throw as many fonts as you want in the font stack it’s just that the odds a user is going to have that font on their system could be slim to none. But some fonts such as palatino and century gothic are on around 80% of users computers, the full list of 8 fonts you should be using in CSS and few others you could be using like futura (for mac users) and garamond as well. Smashing magazine also has great article providing some better font stacks you could be using as well.

Code Example:


<html>
<head>
<style type="text/css">
.garamond { font-family: garamond, century-gothic, palatino; }
.centuryGothic { font-family: century-gothic, garamond, palatino; }
.palatino { font-family: palatino, garamond, century-gothic; }
</style>
</head>
<body>
<h4 class="garamond">Garamond</h4>
<h4 class="centuryGothic">Century Gothic</h4>
<h4 class="palatino">Palatino</h4>
</body>
</html>


Rendering:

Garamond

Century Gothic

Palatino

Image Replacement

(the right way)
Pros
Guaranteed to display desired font (as long as images are turned on)
Cons
Extra span tag
Text shows through transparent images
Desired font is not displayed if images are turned off

The benefits definitely out way the extra mark up due to the empty span tag. The only issue I’ve come across using this technique is the text peaking through transparent images. You have to use a different image replacement technique in those cases. Here is a tutorial for 9 image replacement techniques. But don’t forget this technique will get the content across to a user under all circumstances including adaptive technologies.

This technique works under the following circumstances:
CSS and Images On
CSS On and Images OFF
CSS OFF and Images On
CSS and Images OFF

Code Example:


<html>
<head>
<style type="text/css">
h2 {
width: 351px; height: 65px;
position: relative;
font-size: 100%;
overflow: hidden;
}
h2 span {
background: url(images/logo-example.jpg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>3.7 Designs<span></span></h2>
</body>
</html>


Rendering:

3.7 Designs

Font Embedding

Pros
Guaranteed to display desired font (with css turned on)
Cons
It’s illegal to embed purchases fonts
Limited font choices

This is the future of fonts on the web. Along with some CSS3 techniques and the increase in free fonts typography can be designed using code instead of Photoshop skills. Nice Web Type’s article on How to use @font-face is great introduction to this technique. Take advantage of the @font-face Kit Generator to generate all the formats necessary to display your desired font face. Just make sure you have the right to embed the font type on your website. Or choose from hundreds of free to use, open source @font-face kits available at Font Squirrel.

Code Example:


<html>
<head>
<style type="text/css">
@font-face {
font-family: 'MinotaurPhatte';
src: url('minotaur-webfont.eot');
src: local('minotaur'), url('minotaur-webfont.woff') format('woff'), url('minotaur-webfont.ttf') format('truetype'), url('minotaur-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
#minotaur { font-family: 'MinotaurPhatte'; }
</style>
</head>
<body>
<h2 id="minotaur">Embedded Font</h2>
</body>
</html>


Rendering:

Embedded Font

Cufon

Pros
Use any font you want
Guaranteed to display desired font (with javascript turned on)
Cons
Font can’t be highlighted (copy and paste)
Can be slow to load
Doesn’t work with javascript turned off

This approach is the only technique that uses javascript and you don’t have to be skilled programmer to get it functioning. Following the cufon usage guide is a simple 3 step process. Download the cufon javascript file, generate the fonts and typefaces from files on your computer, then link to the files and declare which elements you want replace.

Code Example:


<html>
<head>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Modeno_LX_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('.font-replace');
</script>
</head>
<body>
< h2 class="font-replace">Cufon Replaced Font<h2>
</body>
</html>


Rendering:

Cufon Replaced Font

Conclusion
With these four tools in your arsenal you can help make the web a better place by using new fonts and experimenting with typography. These techniques also allow you to maintain proper markup for accessibility and SEO with out slapping images all over your sites.

We actually have the capability to be very proactive in keeping our companies and work green.

If you are not convinced you could always consider the marketing benefits. Both businesses and consumers continue to respect and choose companies that are green and environmentally friendly. Additionally it positions your company as aware, caring and proactive. Even if you are choosing to be green for marketing reasons it still benefits us all and that is fine with me.

So the question is, how can we go green?

Green Hosting

Simply hosting a website uses a fair amount of energy. The server must be on all the time and can use a significant amount of energy if the sites hosted require a lot of processing power. There are several companies that offer “Green Hosting” where energy for the servers is generated through renewable sources such as wind or solar, or alternatively balanced out through the purchase of carbon offsets. For example I have long been a fan of Dreamhost which has green hosting solutions.

Carbon Offsets

Of course there is no reason you can’t purchase carbon offsets for yourself. Even if you are not covering 100% of your carbon footprint you are at least working towards solving the problem. Carbon offsets are described as “Instead of reducing their own emissions, a polluter can receive credit for supporting a project that either reduces emissions abroad or reduces emissions in an industry domestically that is not mandated to reduce emissions.” So rather than ditching your car for transportation you could purchase carbon offsets to balance out the pollution it creates.

Green Printing

This is not as applicable if you are strictly designing for the web, but if you do print work there are several options for environmentally friendly printing. You can opt to print onto recycled paper or use soy based inks. Both of these will reduce the amount of waste that is created through your printed work.

Recycling Equipment

The design industry is extremely technology centric, which means the purchase and upgrading of equipment on a regular basis. I am willing to be that there are plenty of times where you have found yourself in a situation where you have equipment that simply doesn’t seem worth having around. Maybe it is too old to sell and you really don’t know who you could give it too. Maybe it doesn’t work anymore. Sure you could throw it away, but putting those types of components and materials into a landfill is extremely bad for the environment.

Rather than throwing them out, please take the time into finding a good electronics recycling company to help you get rid of your equipment.

Use of Energy

One of the easiest and best things you could do would to simply be aware of the energy that you are using and do what you can to reduce it. This means turning off your computer when it is not in use, turning down the brightness on your screens, not leaving lights on, biking to work (or using public transportation), etc…

It is amazing how much energy can be saved by being aware and proactive about reducing your usage.

It Is Easy and Worth While

It really isn’t hard to make your business a little greener and you are contributing to the future of our world. Do you have any other ideas or methods for making your design business green? Please post them in the comments!

Upon tweeting my skepticism of the need for an HTML5 book I received a variety of responses (as one would anytime they disagree with some of the “web celebs.”) While all of them were valid I still can’t help but wonder if there really is a place for the book at this time. Don’t get me wrong, I have the utmost respect for all of those involved with this book, and interviewed Jeremy on WebAxe about HTML5 some time ago. He no doubt is one of the most knowledgable people on the subject around, if anyone is going to write the book he should.

However there in lies my skepticism, “if anyone is going to write the book”… should anyone write the book?

Yes it is possible to write in HTML5 now, some browser support it quite well. Firefox, Safari and Chrome all do a good job of handling the new capabilities of HTML5. However IE requires Javascript to make it work, which is a root level a hack. What is interesting to me is that Jeremy Keith talks a lot about progressive enhancement, which is the practice of building a site so that it is functional in all browsers and modern browsers see an enhanced version. However this technique is designing for modern browsers and trying to patch the other browsers (even ones that could be considered “modern”) into working.

I am sure Jeremy did not write this book with the intention of telling people to ignore the progressive enhancement model, but many designers / developers may take it as such.

I don’t see how HTML5 is ready for main stream use. Sure there may be a few instances where you KNOW users will be on a browser that fully supports HTML5 but it is going to be the vast minority. Additionally, the HTML5 spec isn’t finalized. So if we are not at a point where we can regularly use HTML5 for our sites and the HTML5 spec hasn’t been finalized, why do we need a book?

Because it is being published by HappyCog and because Jeremy is involved I am sure it will be a high quality book and will sell well. I get the sense that the goal was to be first to market, if it is established as “THE book for HTML5″ it is easy to publish new versions when it becomes more relevant to how the web is actively being developed. I simply don’t see it’s relevance to the average web designer or developer.

The problem with most (if not all) project management solutions is they are entirely too complicated and complex. Sure if you are managing a team of 100 you need some very complex capabilities. Then again if you are managing a team of 100 then you probably like doing project management and are a trained professional. In my case, I would much rather be painting, dreaming up the next design and thinking about a blog post. I simply don’t have the time or patience to be fiddling with priority levels, due dates, etc… Now that isn’t to say that those elements are not important (because they undoubtedly are), just that at this point of my business we are a small enough team that we don’t need a dedicated project manager and we seem to benefit greater by working rather than planning to work.

I have tried the GTD approach, paper to-do lists, plus a handful of other software and “kit” solutions but I always seem to come back to basecamp. There are a few key reasons that even though I have additional PM tools, basecamp is still the product of choice.

1. It is Simple

This is one of the key elements. It is simple to the core and that is a good thing… a very good thing. There is no doubt that the gentleman at 37 Signals boiled down the product into the core essentials of project management and fought off any urge to try and bloat it up with unnecessary elements. What are the key things that basecamp does well?

• To-do lists
• Task assignment
• Due dates / Milestones (calendar-esk approach)
• Writeboards (saved documents / information)
• File storage / management
• Messaging

Why do you need anything else? If you think about the core requirements of managing a project it doesn’t need to be any more complicated than that.

2. It is Intuitive

There has never been a point when using Basecamp where I have thought “how do I do this?” I have never read an instruction manual, never watched a training video, never looked at a tutorial. Granted my company does web design, I should have a high understanding of the web… but I have never had an issue with clients being unable to use or figure the system out. It really is that simple, regardless of your level of skill you will instantly know how to use the application.

3. It Allows Collaboration

Technology has given us the gift of “meeting free” collaboration. Not to be a grump but meetings are unnecessary and underproductive. There are plenty of ways to keep projects moving forward, while collaborating and working on a team that doesn’t require interruptions. This allows higher levels of concentration and more productivity, after all on average it takes 15 minutes to get focused. If you are interuppted with e-mails, phone calls or meetings it takes longer and longer to regain focus.

By being able to check in when you are between tasks you can see and make updates with out losing focus or interrupting someone else.

Basecamp is perfect for telecommuters and remote teams. Additionally it can be a great resource to work with your clients, as they can add to-do’s, upload files and make edits and changes to documents through your writeboards.

Project Management Made Easy

Basecamp does exactly what I need it to, which is to make project management easy. Previously I would spend twice as much time trying to delegate and keep track of everything going on, additionally it was a constant frustration when something would slip through the cracks. If you are a small business owner and want to focus on growing your business and what you are passionate about rather than dealing with the day to day management details then you should give Basecamp a try. They offer a free personal account in which you can try out one plan to see if you like it, certainly worth a shot.

The Voices That Matter team contacted me about going and also wanted to provide an offer to readers of this blog for early bird registration. See the details below:

New Riders’ Voices That Matter: Web Design Conference, now in its fourth consecutive year, will take place June 28-29 in San Francisco and the timing couldn’t be better! Web design is undergoing an historic transformation: while the basics of HTML, CSS, and JavaScript haven’t changed, the new and evolving functionality in the HTML5 and CSS3 specs, the number of new ways in which people access the Web, and the rise of social media mean that Web designers need to know more than ever.

Don’t miss this opportunity to meet face-to-face with industry greats and discuss Web design’s most critical topics! We’ll open with a keynote address from Jesse James Garrett, author of The Elements of User Experience: User-Centered Design for the Web and close with a keynote address delivered by Steve Krug, author of the well known book Don’t Make Me Think and the brand new book Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems. From start to finish this conference will blow you away.

SPECIAL SAVINGS! As someone that reads this blog, you can save $150 off the conference fee by providing priority code WBNBLGA when registering. Register before May 14th and save $250 as this $100 discount is combined with the early bird pricing!

If you plan on going let me know so that I can plan to say hello and thank you for being a reader of this blog!

Designing with specific intentions is one of the easiest concepts to nod your head and agree with, while one of the most difficult to put into practice.

Design is Sensory

Design in any situation is a sensory experience, industrial and product design more so than graphic / web. Usability elitists often overlook this important detail, claiming that “If it is easy to use it doesn’t matter what it looks like, just look at Criagslist.” While there is some nugget of truth to that, it ignores the fundamental fact that we experience everything through at least one sense and often through multiple senses. Like it or not the sensory experience of your design matters. In industrial design this means everything from how it looks to how it feels (texture, size, weight, etc…). In web design the visuals are extremely important, it is the primary way in which we experience a website. I won’t go into the theoretical feeling of a keyboard or mouse click…

Because we experience websites in a visual matter, the visuals are extremely important. What many fail to realize is making a site visually stimulating is not effective design.

The Right Visuals

What is important is using the right visuals to make a site stimulating. The example I often give pulls from classical color theory. Color is one of the most effective ways to visually communicate. Look at the use of color in simple traffic lights, green indicates to us that we can go where red tells us that we should stop. Every color that you see has some meaning behind it that you intemperate whether you realize it or not. This also changes from culture to culture as well, white for example is often associated with “purity” in the United States but is a symbol for morning in many Asian cultures.

If you are looking to create a design that has the objective of being high impact you are most likely going to be using bright, vibrant high contrast colors. If your approach in design is simply focusing on making the visuals stimulating then any number of colors would be adequate. Red for example can be bright, vibrant, warm and provides the capability to be high contrast.

You might end up with a visually stimulating design that get’s into all your beloved CSS galleries… only there is one problem. What if you design called for a situation where you were looking to convey a sense of empathy, care and concern? Red is not an appropriate color for empathy. Red is often associated with love, passion, heat, blood, anger… none of these feelings remotely convey the correct message.

The Approach

The point is that when you are designing you should design with extreme intention as to the goal of the project. Every choice in image, color and font should be intentional well beyond the aesthetic value of the component. Yes the design should be pleasing to your senses but in an intentional way.

To compare this to industrial design, there are many times when a nice soft, felt like texture is a nice touch. For example the interior of cars, the cover of a notebook or with furniture. However if your iPod had the same feeling it would seem strange and out of place, disruptive and maybe even offensive. It is not because the texture isn’t pleasing to your senses, it is that it is the wrong approach for that design.

I encourage that on your next project, when you think you are done designing take a step back and evaluate every element of your work for intention. Did you pick the colors, images, textures, type and information with deliberate intention? or did you pick them because it looked nice?

But You Can’t Redesign Constantly

While it is important to update and redesign your site you can’t do it constantly. Not only for cost reasons (as the price of a site redesign can be costly), but it would also confuse users and make it difficult to navigate your site. Over time as people visit your site they become accustom to where things are placed, how content is organized and how to use your site. They literally have to learn how to use your site much like they would any other piece of software. A Redesign means that users have to start from scratch and relearn to use your site.

Website Redesign Criteria

Having worked in the web design industry for over twelve years now, I have done my fair share of web redesigns. Getting an in depth look at the before and after of web redesign has unveiled a common set of elements that were consistent in successful redesigns. Successful meaning that objectives were met in a measurable fashion. After analyzing these elements, I have been able to identify a clear set of criteria for successful redesign.

1. Outdated Design

Some designers will say that great design is timeless. While this is true in some sense, the advancement of technology can make great designs look out of date. Even in the last two years the improvement of screen quality has allowed web designers to use higher quality images and more screen space (resolution). A website designed to look optimal on an older, low resolution CRT monitor will look dated compared to new modern designs.

Having a design that looks out of date decreases the credibility of your site dramatically. With high speed connections being the commonplace, it is way too easy to hit the back button and skip on to your competitors website. A dated or ugly design tells your users that either you can’t afford a credible design or your products/services have just as little attention to detail as your website. In either case your website will fail to perform at it’s highest potential.

2. Missing Essential Functionality

When the web first gained popularity in 1998 – 1999, rich website functionality was expensive and often impossible. These days, by using open source software we can easily add engaging and interactive functionality that will provide more value to our users. From integrating customer relationship databases to invoicing systems, there are plenty of ways to increase revenue or decrease expenses through the addition of website functionality. That being said I don’t want to ignore the importance of adding expected functionality.

The best example of this would be social media integration. The use of social media continues to head towards the most common activity online, and because of this there is a high adoption of social media throughout websites. This has become so common that many users have come to expect and look for social media integration as an indicator of credibility. Failing to demonstrate that you use social media you may lose the trust of your target audience.

3. Malfunctioning Portions of your Website

While it may sound obvious, there are a lot of websites that are currently online and not functioning correctly. This goes back to the cost and capabilities of website programming ten years ago. Previously if you didn’t have a large budget chances are you ended up with some poor quality programming behind your website. As servers upgrade and web browsers improve, that poor quality program breaks more and more often. Many companies take their website for granite and ignore these functionality issues.

If your website has error messages, broken links or a malfunctioning design, users will lose trust in your company and leave your website with the click of a button. A malfunctioning website is a clear indicator that a redesign is necessity.

4. You Can’t Update It Yourself

A website needs to be updated, maintained and cared for to generate results. Paying your web design agency every time you need a change is expensive and slow, despite the fact that constant updating is necessary. Content management systems allow you easily update and add pages, post news, blog posts and other listings. The right content management system is easy to use and functionality rich, so you can easily keep your website up to date and alive.

If your website fails to have a content management system and you can’t make changes in house, you should look at redesigning your give you that capability.

5. It is not Search Optimized

Search is the second most common activity online (beat only by e-mail), and if that doesn’t get your attention nothing well. The fact is that users now head to Google when they are about to make a purchase (in both business and consumer situations). If the users can’t find your site they are not going to buy from you, instead they will go to your competitors who have had their site search optimized.

While it is possible to optimize an older website, improvements in technology and changes in the search engine algorithms make it advantageous to build a search optimized site from the ground up. If search engine traffic could benefit your business you should consider redesigning your website.

Conclusion and Other Criteria

While there are clearly additional reasons to redesign your website (scalability, brand identity changes, etc…) I have found that these are the top five reasons that websites are not succeeding. I have consistently seen the results of a website redesign grossly out weight the cost in redesign and redevelopment.

Of course If you are in need of help in your redesign, we recommend you contact the Web Design Agency, 3.7 DESIGNS.

What have been the primary reasons that you have done a redesign (either your site or your clients)?

Simple data formats designed for humans first and machines second. Pre-defined classes developers can add to their xhtml tags adding semantic data that can be used by multiple applications.

Why you should be using Microformats.

The web is currently in it’s third generation and Web 3.0 is all about semantics. Microformats are just one of the pieces helping make information on the web more meaningful. When google announced last year they would parse stable microformats such as the hCard, hReview, and hProduct, listing them in search results the flood gates opened. Some research states that implementing the hCard microformat increases your local search ranking with google, especially in cities with higher populations. Implying they will a have a positive effect on your SEO campaigns.

90% of legitimate websites have contact information listed some where on their site. It only takes a few minutes to add the necessary hCard classes to your current contact information allowing other applications to interact with data. Firefox, Internet Explorer, and Safari all offer plugins with intuitive user interfaces allowing users to import the marked up data to other desktop and/or online applications.

If you have an account on any popular social network then you already have an hCard. All of the major social networks support and implement the hCard microformat.

As microformats become more common place more applications will be developed taking advantage of them. Alex Faaborg a User Experience Designer at Firefox explains in this article how microformats will eventually transform your browser into an “information broker” between the web and your desktop/online applicatons.

Helpful Tips for implementing microformats on your websites.

Don’t forget to declare the microformat you are using in your head tag. It won’t work without it.

Example: <head profile="http://microformats.org/wiki/hresume-profile/ http://purl.org/uF/2008/03/">

Microformat Cheat Sheet

Use the Operator plugin for Firefox to ensure your microformat is active. The green button will be highlighted.

Don’t always follow the examples. Occasionaly the examples use nested list for important information. In the case of nested classes that are important you should implement a <span> tag within a heading or paragraph tag.

Post your finished code on the microformats wiki to draw traffic to your site and increase your credibility. The hCard list is pretty long but the less used microformat listings are fairly short.

Conclusion

Web 3.0 is still in it’s infancy and the wide spread support for microformats has only occurred with in the last year. They are easy to implement and help make the end users experience more enjoyable. Now you don’t have any excuses not to be using them.

While we have used everything from blank paper to grid paper at my design firm, I always felt there had to be a better way to do it. Something just didn’t feel right, especially when it came to understanding how your concept was going to look in a browser window or on a monitor.

To get feedback on the product (as we certainly will be evolving it over time) we are excited to be giving away 5 initial copies. To enter for the give away simply leave a comment on our StylizedWeb.com blog, right now there are only 17 comments so your likelihood of winning is pretty high!

It should be a great refresher for those who are well versed in web strategy and a good intro for those who don’t know much about it at all. Please take a look at the LA2M site here.

The problems with traditional mockup presentation

When I first started 3.7 DESIGNS we did everything from e-mailing JPG mock-ups to printing them out and mounting them. While these methods can work fine, they often cause problems and issues. The major fault for presenting mockups this way is that it does not give the client a clear understanding of how the concept will look in a browser on a computer.

How we have improved

To improve on this problem we started creating “holder” pages that just had the mockup as a large background image in an HTML document and putting that on a staging domain for the client to review. This improved the process in a lot of ways:

• The client could be instructed on how to view it at different resolutions
• The client could see the fold and what content would / wouldn’t be visible
• The client could get a real expectation for relative sizing, legibility, etc..

It still isn’t perfect

Despite getting much better results working this way we ran into a few issues.

• Creating 5 – 6 “mockup pages” and stitching them together was cumbersome
• We had to send instructions with every new client and navigation wasn’t completely intuitive
• There was no clear idea of how far you were through the concepts, how much concepts there were, etc…

Introducing “Mockup Present”

Spending a little time with CSS and JQuery we have developed “Mockup Present” a simple and rapid tool for integrating your design concepts into a brandable, browser rendered presentation. Fully equipped with an auto populating navigation bar, mockup counter and indicator. After download it should only take 5 – 10 minutes to get your mockups into the framework and online.

I already have a handful of ideas to improve on the concept, but I would love to hear any more thoughts or ideas.

• See the demo
• Read about it on 3.7 DESIGNS : Workshop
• Download version 1.0

What is Thesis?

Thesis is a theme and framework for the wordpress platform. Andrew had used it before for some client sites and liked the features that it contained. In a nutshell it gives a wide range of controls and options through the wordpress admin interface, so that a user has more control over their site with out a developers assistance.

It is partially a theme, as it has it’s own customizable design. However it also functions as a framework as it has the ability to be extended and built upon. This way you can get the new and latest versions of the thesis theme as it is released with out worrying that it will negate or overwrite the work you have done to the site thus far.

What are the benefits of Thesis?

Thesis is easy to install and configure. Simply uploading it into your themes folder and activating it will give you a few new control panels that have 90% of the functionality and control you will need. Beyond that there are two files, a custom css file and a custom functions file that will allow you to customize and extend the site in any way that you see fit.

After working with the framework I found a few core benefits of Thesis from a designer / developers standpoint:

• Giving the user a bit more control reduces support time and ongoing tweaks / alterations
• Built in SEO tools such as meta data, titles, etc…
• Easy control of typography for the designer as well as end user
• All of the styling and templates are in one place (the custom folder)
• Easy image control with in pages and posts

What are the drawbacks of Thesis?

Some of the strengths of Thesis also are potential drawbacks. Because it is a framework you have to take a different approach to things such as separate templates and some plug-ins may be less than compatible. It also means that you will have to relearn how to go about things (again creating separate templates). However I found that once you have learned this new method of creating different page templates it can actually move faster than the traditional way of new .php files.

The only major item I couldn’t find a good way to accomplish in Thesis was giving the user control over what template they would use. This is something that a traditional wordpress install can do very easily.

Finally the theme is not free so it does increase development costs even if you do pass it on to the end client. While it is not expensive, it is a significant draw back from the completely free installation of wordpress.

Overall

Thesis is a great option for basic wordpress CMS websites. After your first site design and development it will reduce your time spent and leave you with happier clients.

If you need to develop a complex and intricate wordpress website you may want to stick to the conventional wordpress installation.

You can find more information about thesis and purchase it here.

• What: “Usability Tweetup”
• When: 7pm, Saturday, July 18, 2009
• Where: Ann Arbor Brewing Company in downtown Ann Arbor [Google map]
• Why: To discuss web usability, web accessibility, Twitter; socialize; drink beer

Note that this is the night of the last day of the Ann Arbor Street Art Fair.

I have now learned and realized that it is also a great tool for client approvals. As designers we know that a web page is not pure aesthetics, there is both form and function. However this is a difficult concept to grasp and separate for the average person. It is very easy to get hung up on little details that may or may not be important or relevant to a finished design concept at hand.

The Problem

If you have ever been in a design review session you have no doubt experienced this in one form or another. At some point or another someone will get hung up on an element of a concept that is not the look, feel and mood of the site. A full photoshop comp is actually looking at two separate aspects of a site. The book “The Elements of User Experience” describes this well by stating there is the skeleton plane and the surface plane. The skeleton plane is what needs to be on a given page, how important it is and how it should be organized. The surface plane looks at aesthetics, proportion, texture, color, typography, rhythm, etc…

The final design composition combines them both in way that maximizes the visual communication with the functional needs of the skeleton plane. However to an untrained person it is difficult to separate these two concepts, and often times it can lead to the altering of an important skeletal element because of a surface issue.

The Solution

To prevent this from happening, thus leading to a smooth design approval process we recommend looking at both planes separately. This is done with wireframes and mood boards. I won’t go into wireframes in this post, I will just say they are rough outlines of a page with out looking at or considering visual design.

Mood boards are just a mock up of how the site should “feel” with out considering what will be on the exact page. What should the design communicate and how should it be communicated? They can be created by scrap booking, through collages, painting, drawing or most commonly in photoshop. The idea is to find and combine colors, photos, textures and work with typography to develop a defined visual feel. This is often driven or part of a brands “identity” (or the common look and feel that allows you to identify the brand even if it is not outright mentioned). You can make it look somewhat like a web page or it can simply be more artistic in nature.

By showing the client the mood board first you get buy in on the aesthetics with out having to work through the separate issue of the skeleton plane.

The Golden Ratio

The Golden Ratio is described as “two quantities are in golden ratio if the ratio of the sum of the quantities to the larger one equals the ratio of the larger one to the smaller. The golden ratio is an irrational mathematical constant, approximately 1.6180339887.” Simply put, the golden ratio is about proportion and the size and placement of one element compared to another.

With the golden ratio if we look at an element we determin the ratio of one section to the other (in this diagram the left hand section compaired to section 1) we arrive at the size based on both the height and width of the element (of which are equal when removing the left hand section) and it is not determined by a ratio of a third.

This rule specificly deals with astheticly pleasing proportions and ratios between two elements.

The Rule of Thirds

The rule of thirds however deals with a whole different design theory. The rule of thirds instead is a way to place elements with in a design as a way to control where a viewers eyes will travel and what they will see. “The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections.”

The idea is that by placing and arranging elements with the rule of thirds in mind will create a more interesting design and that a users eyes will flow through the intersections of the grid thus creating a design that has more energy and tension.

You may have noticed that this description of the rule of thirds does not talk about nor focus on proportion. You may also notice that an element taking up two out of three columns does not equate to the mathematics that determine the golden ratio.They are two completely different rules.

Design and Use Design Intentionally

While it may seem like splitting hairs, I believe in designing intentionally. By using design rules incorrectly or unintentionally you will end up with a less effective design. it just takes a little bit more care and understanding but it is well worth the effort to use these rules correctly.

If you are an accessibility buff make sure to follow WebAxe on twitter and give us some feedback on the new WebAxe intro song.

Due to the nature of the industry and vast range of contributors to it, it can often be hard to find and monitor the great content that is being published. I used to find myself hunting through countless different websites and RSS feeds, trying to ensure I didn’t miss any valuable information, articles or techniques. Even trying to sort through them in an RSS reader is more difficult than it should be.

So to try and make finding the best web design news easier, we have launched Today In Design. Today In Design aggregates the most popular design articles from sources such as delicious, digg, design bump, etc… additionally it pulls in hand selected news articles from sources such as CSS Globe and Design Newz.

Any feedback or suggestions would be more than welcome.

There is a fundamental problem with this approach. It creates a wide range of issues that make your website less effective and usable.

• Typically you end up with content that has no real purpose
• Even if it has purpose it is not clear what that purpose is, which leads to ineffective development of content and poor or non-existent calls to action.
• The icing on the cake is that by giving the user more content to sort through you are actually making their decisions when navigating the site harder.

Studies have shown that the more options that you give someone the harder and longer it will take to make a choice, in many cases users will decided not to make any selection when there are too many options.

Content is King, in the Right Doses…

It is no secret that the content on your site is the reason that users come in the first place. It is also no secret that more good content has lots of value and by all means you should put it on your site. However all content should have a clear purpose and value. Content that doesn’t address any user goals or objectives is self serving, won’t get viewed and will just add to confusion. Sometimes less is more.

How to Approach it

Any site is going to have both user needs and site objectives. User needs are what the users actually want out of the site, where site objectives are what the site owners want out of the site. In almost all cases site objectives can be boiled down to either saving money or making money. Sometimes in the cases of non-profits it may be spreading awareness or knowledge, but those tend to be rare exceptions.

What you will actually find out is that by addressing user needs you will often also address the site objectives.

Step 1 : Define Your Users

The process for this step could be several blog posts with in itself. I will leave it to be covered another day. In order to build an effective website you need a keen understanding of your users and target market.

Step 2 : Identify the User Needs

Based on what you know about your users and target market it is time to actually outline what people will be using your site for and what they hope to get out of it. In my example I listed four goals that a user would have when visiting the site. Some of them will have very clear resolutions where others will be addressed in ways other than a single page or item of content.

example:

1. Find information on prices
2. Learn about the background of the company, get a feeling of comfort regarding the company
3. Find out where products supplied by the company can be purchased
4. Learn about the differences between companies products and the competitors

Step 3 : Identify What Content Would be Required to Meet Those Needs

example:

1. Product details and content – addresses needs 1 and 4
2. Company history and staff biographies – addresses needs 2 and 3
3. Location, map and directions – addresses needs 2 and 3
4. Contact information – addresses needs 2 and 3
5. Testimonials – addresses needs 2 and 3

In this case you can see that building trust, comfort and report is done in little bits over a lot of different types of content. For example knowing that a company is real, has a location and a phone number can help build trust.

The Next Phase in the Strategy

At this point you will have a clear idea of what types of content you need on the site in order to appease user needs. From this step you can start developing the messaging and calls to action to get users from a point of resolution to a conversion point.

I have included a diagram that outlines the process that you should go through to achieve zen like simplicity to your website content.

Earlier in March I had signed up to discuss and talk about how to use blogs to help build your business. Each event gets recorded and eventually posted and podcasted through the LA2M website. For those interested, I cover the basics of what a blog is, the different strategies you can use to blog for business and how to craft an optimized blog post.

Feel free to listen here.

What I am talking about is the ‘:active’ selector for links. An important aspect of usability is getting feedback on the interactions that we have. Feedback lets us know if the action we have taken was successful or not, and this would include clicking on links or buttons.

I have posted an article on stylized web that discusses the importance of :active and how we can go about using it on our websites.

Upon first hearing of the book I wondered how it differed from The Principles of Beautiful Web Design which is also published by Sitepoint. Upon reading the first few pages it became clear. Where Principals of Beautiful Web Design is intended as a book that teaches the fundamental rules of graphic design and how they apply to the web– Sexy Web Design is more about developing a mood, theme and aesthetic quality that fits the context of your work.

What’s Inside

Reading through the book you learn about the different methods and techniques of designing a “sexy website” by following the story of a fictitious client and the site that is designed for them. This way you can see every step of the process that Elliot recommends and how it applies in a real world situation.

The different stages include:

• Interfaces
• Research
• Structure
• Navigation
• Aesthetics
• Deliverables

What I Got Out of It

While I am sure that everyone will get different things out of the book based on their past experiences and level of education, what I found most inspiring was the discussion about creating a specific mood and how to go about doing so. There is a saying that if all you have is a hammer everything looks like a nail.

Often I find that designers rely on current design trends in their work, hashing together different elements that “look cool” with out thinking about what mood they are trying to develop. The process of thinking about and planning that mood is critical in the success of a design.

I also found a great amount of value in the external resources that Elliot provides. Between references to inspiration flickR pools, valuable articles on subjects and specific websites to examine there is plenty of “beyond the book” reference material to keep you busy even after you read cover to cover.

How It Could Be Improved

While I loved the book and found a lot of value, I almost felt as if it was trying to cover too broad of a reach in subject matter. There was a lot of material about a lot of topics that were not specifically focused on Sexy Web Design. I am not talking about the necessary process that leads up to the actual “sexying” of the design like wireframes or the brief, but rather the talk about the development, changes to the scope, and organization of layers in photoshop that felt a bit off topic.

I would have liked to hear more about the actual design and had gotten the impression that the book was going to be more than a brief introduction to color theory, grids, etc…

Should You Buy It?

I would say yes, absolutely. If you feel like your design abilities could use improvement than absolutely, this book is for you. If you feel that you are at the peak of design capabilities then you may want to find some books that are focused on a given area of design where you can find more detail. Overall I think it is worth a read.

For example when a company begins to go through a redesign process they usually start by planning and brainstorming the following areas:

• What pages do we want on the site?
• What features do we want on the site?
• How should the site look?
• What functionality should the site have?
• What cool whiz-bang widgets can we integrate
• We gotta use facebook, facebook is all mighty power

It seams reasonable enough and some might even begin to consider what goals they have for the site and what pages they decided upon and how they all work together. This is still a backwards approach, as the pages have been chosen before the goals and the strategy.

The problem here is that decisions are being made with out thinking about how everything on the site works together as a system towards a common set of goals.

What I Suggest

What I suggest instead is table all of the thoughts about what needs to be on the page, what features should be incorporated and try and clear the planning teams mind. Focus instead on what you want to get out of it first. What are the 1 – 4 goals that the web site should actively accomplish. Smaller companies and websites may only have 1 or 2, ie: “sell more stuff” or “get me leads!”

Then based on those goals figure out how you are going to measure the success of the goals. What metrics can be used to actually prove or disprove how successful the website is.

How this helps

What you will find is that these two items will create a road map of what should be on the site and why. To over simplify the process:

• Metrics will let you know the conversion points
• Conversion points will let you figure out points of resolution and persuasion
• Points of resolution will lead you to calls to action
• Calls to actions will lead you to user paths
• User paths will dictate what content, features and functionality will need to be on the site.

Of course all of this will also depend on target markets and an understanding of the user, their motivations, needs and capabilities. However it is a much stronger approach than rattling off random things that the team thinks should be on the site (rather than KNOWS should be on the site.) We probably have all been in meetings where random things are proposed with out justification or cause, “We should have a forum!”

Signal vs Noise

I am a huge advocate of keeping a site as simple and small as it possibly can be. Less really is more. The ease of publishing on the web lends itself to huge masses of content, pages and information on most websites. What ends up happening is you generate more noise than you do signal. Your key messages and information gets lost among content that is irrelevant to most users of a site. By working in a reverse manor you can ensure that what ends up on the site is truly valuable in addition to the key objective for every page on the site. You will now know:

• Why a user has clicked on to this page
• What question are they looking to have answered
• What they will want to know next
• What is their end goal
• How to get them there efficiently
• If the process is working or not, and at what step of the way

Give it a try

Think about your current website and go through this exact process. What you are likely to find is that you have pages that are unnecessary. Additionally you probably have pages missing (they you likely wouldn’t have thought of). Finally you will have a better understanding of how users are likely to navigate through the site and what questions they are looking to have answered, and with that you could make changes today that would improve your websites success.

What is Art Direction?

Lately it seems that the discussion of art direction centers around using different layouts and arrangement based on the shape and size of the imagery used. While this is definitely a part of art direction, it actually completely misses the big picture. I found a quote on Wikipedia that sum’s it up closely, “The ability to formulate and communicate the message, rather than simply stylize it, is one of the qualities that distinguishes an “art director” from a “graphic designer.” That means that the design should be more than just slapping gradients and stock photos together. It should be the careful marrying of the proper graphics, illustrations, photos and diagrams. At times that means using more complex and varied layout based on graphics and copy – however it is more of using design to communicate the message rather than just stylize it.

How Does One Art Direct?

In order to art direct you must think about what graphics and imagery is going to compliment and communicate the message in a way that has impact. This is something that the print advertising excels at. Flip through a magazine and you will be confronted with advertisements that have one image and one or two lines of copy, yet the combination is clever, has impact and is memorable. To art direct think about the following:

• What is the message
• What is the tone of the message
• What are the benefits that the message
• What are the obvious images could would be used (so you can plan on not using them)
• What are the not so obvious images that could be used
• What spin could you put on the message?

10 Strategies to Art Direction

While there are no rules as to what you can / can’t show, nor what method you want to go about it. There are some proven ways to pick out imagery and visuals that will enhance the communication of the message.

1. Demonstrate the Product in Use

Using the product in your visuals is often referred to as using “the product as the hero.” You are basically glorifying the product as the savior to all your needs, making it more than an object and giving it life. Using the product in use is really only effective if the product has some motion or drama.

2. Show the Product with an Unusual Association

This is a common yet effective approach. Rather than showing the product in a typical usage scenario, show the product in an unusual context. In these two examples you can see that the product is used in an an abnormal context but it goes a long way to convey the benefits. In the case of the nail advertisement the obvious (and ineffective) image would simply be a hand with beautiful fingernails. But by showing the product in an unusual situation, being used as a can opener, it conveys the benefits in a memorable and stronger way. In the case of the headphones, the obvious image would be someone enjoying the headphones with out hearing loud people around them. Sure it might be a simple way of saying “these make listening to music better,” but it is not as effective as the concept of drowning out the Niagra falls right before you go over them.

3. Focus on a Critical Part of the Product / Service

This is particularly effective when you have product that has a value added feature. Rather than show the whole product, zoom in and focus on one feature, detail or aspect of the product. It could be as simple as a resealable lid that no other product on the market has, or as complex as a new engine technology that improves gas mileage.

4. Uncover a Part of the Product / Service Story

Every product or service has a story behind it. Stories are particularly effective in being persuasion and developing interest. From a young age we learn to be captivated by stories and we remember them far beyond features and benefits. This might be focusing on the interesting plant the product is made in, or the person who invented the product, potentially even the culture that it came from.

5. Highlight the Person Connected to the Product / Service

Rather than highlighting the product itself you can instead highlight a person who is connected to the product or service. People are much more likely to connect and emphasis with a person than a static object. This is one of the situations in which celebrity endorsements are particularly effective.

6. Highlight the Benefit of Using the Product / Service

Rather than showing the product at all, you could instead show the pleasures of using the product. A website for a productivity program might be tempted to use images of workbooks, finished checklists, and lots of completed work. A more effective way of communicating the same message would be photos of people not working at all, because they have completed it all. Another great spin on this concept is to show the negative effects of NOT using the product. In our motivational program the imagery could convey being distracted all the time, bogged down in work and never having time to enjoy life.

7. Feature the Lifestyle That the Product / Service Offers

Appealing to higher levels of Maslov’s hierarchy of needs is an effective way of being persuasive and generating interest. One of the ways you can do this is by featuring how a product or service changes your lifestyle for the better. The new shoes turn your life into one of being athletic, active and healthy. Frequent massages could communicate a lifestyle of being free of tension, stress or worries.

8. Use the Split-Screen Effect

Split-screening is a great way to do comparisons. It might be comparing one product or service to another, or more commonly it is used as a “before and after” situation. It could also be used to tell a story like a comic book frame, or highlight something unexpected.

Psychology has proven that we as humans react and identify with stories. We have grown up being surrounded by stories, and it is how history has been preserved up until the invention of mass printing. Split screening is a great way to use images to tell a story. When we hear see, or interpret a story we are much more likely to remember and ingest it.

9. Use a Metaphor for the Product or Service

You can create a powerful message by showing something dissimilar that stands for the same benefit. This becomes a metaphor for the same product or service, but communicates it in a compelling and interesting way. This can be effective by making the viewer think about the benefit of what you sell in a familiar way, or by thinking about the benefit in a new way. In the duruex advertisement you can see how effective this is. Would you go into combat unprotected? It causes you to related to the benefit of the product in an easy to understand familiar way. No one would argue the ridiculousness of running into battle naked. After viewing the advertisement you now related the product they sell relates to this very level of ridiculousness.

10. Pair understatement with overstatement

If your imagery and messaging are both understated your viewers may miss the point. If your imagery and messaging are bother overstated viewers may not take you seriously. An effective way to catch your viewers attention is to match understatement with overstatement. This technique has been extremely effective in comedy since the beginning of time. Comedians have long been able to get laughs by understating one element of a story and then overstating another. It seems the wild contrast between the two extremes gets our attention and stimulates our interest. In the advertisement displayed that communicates “Don’t be stuck in the wrong job” they use an understated message of “in the wrong job?” with an overstated image of a construction worker in a dentists position. The extreme understatement mirrored with the extreme exauguration (or overstatement) gets your attention and makes a memorable impact.

What to remember

If you take anything away from this post, it is that art direction is not simply creating a unique layout for every page. It is the practice of mating the proper imaging and layout with the content and context. A site could have the exact same layout on every page and still be beautifully art directed. It is more about using both word and image to communicate the right message rather than making a design look unique or “cool.” Really think about every page in terms of what it should communicate? what is the message? how can I contribute to that message?

Marketing expert Ross Johnson explains why Internet media are a viable replacement for print from Jordan Brown on Vimeo.

What makes it more interesting is that the website is required to be accesibile by the section 508 guidelines, yet clearly fails to do so.

Today on the web in order to really have an effective website you really have to think about all aspects of the site. Failure to do so means providing an ineffective solution, so every time you create a site or work with a client you should be considering:

• Who are the potential users?
• How you will get users to the site?
• What do users want when they get to the site?
• What questions will they have that you can answer?
• How do you lead them in the direction you wish them to go?
• How you will measure the success of the site?
• How you will continue to optimize the site?

This effectively is the strategy behind your website. This means that the site should be designed in such a way that you have thought about and planned every element described above.

With out going through the process of this planning you are simply slapping a coat of paint on a box rather than delivering a tool that is created to help the business/organization who has hired you.

How to go about it

Typically web design companies ask the client what they want to be built, ask for copy and photos to be delivered, create a visual image and build out the site. Working in this manor is akin to a construction company building a home using blueprints created by the non-architect home owners. Doesn’t sound like a great idea does it?

First you must research

The first step in this process is to do some research. I know, I know, most of us as creatives hate this idea and would much rather just create some stunning and well organized visuals. However this is a critical step that you must take.

The first aspect of research is working with the client to discover as much about their business as possible. This will include the target market, the typical sales funnel, who the clients are now and what their concerns are. Find out the goals of the site and what expectations the client has for the level of impact on their business.

Although the clients input is important it shouldn’t stop with them. Chances are they see their business in a very close up skewed manor, not that they are wrong or their information is not valuable. Rather it is more important to learn as much as you can from their clients.

Once you have learned who the target market is you can start asking them questions. Sometimes the client will be willing to give you a list of names and numbers of those who you could interview, if not you can always take a look at your own network of contacts and politely ask them if they would be interested in answering a few questions at their lesiure.

Crafting the questions

Every situation will require a different set of questions so I can’t give you a boilerplate set of questions. Ultimately you should look at the goals of the site and develop questions that will help you figure out how to encourage users to accomplish those goals.

The common scinereo would be a company that is looking for more sales/leads/clients. There are a wide range of questions that you could ask their target market to help you find out what is most important to them when picking a product/service provided. Here are some examples:

• What factors are you considering when you are looking to hire someone to do X?
• How would you rank those factors in terms of importance?
• How do you go about finding someone you wish to hire in this situation?
• Do you value (insert unique value of client here)? why / why not?

I am sure you can think of much much more once you get started.

Look around and see what else is out there

Once you have a good idea of what the target market wants and what your client provides it is time to do some competitive analysis. See how their competitors are marketing themselves and what sort of features or information they have on their website. You can get a lot of ideas in terms of “wow this is a convention we should include this” to “here is something that everyone is missing but really should have.”

Additionally this will help you develop a unique selling position for your client (if they haven’t already decided on one). By marketing themselves with a unique value that no one else is they will effectively attract more sales by people who really care about that value element.

Using the research to develop a plan

Doing the research is only half the battle, the second half is to develop a plan based on the research. Yes I do realize that first I am not only recommending that you do research (barf) but now advising you to also write a paper (double barf). I assure you that it is worth it and your business will grow as a result of it.

I break my plans into the following sections:

• Goals / Objectives
• Target Market + Personas
• Competitive survey
• Points of resolution (questions, concerns and desires of users)
• Unique value proposition
• User paths (how a user would navigate through the site to complete a goal)
• Objective support (how we will encourage a user to navigate through the site to complete a goal)
• Measurement and success criteria

You could probably take it further than I do, as I am continually improving my strategy document and process. However I find that the most valuable part of the document ultimately comes out of the user paths and support.

This is because it takes the information about and from the target market and incorporates the goals of the site, then strategies of how we can mesh the objectives of the user and the site owner together. Consider the diagram I crafted for a client recently as an example of how this could work:

As you work through the user path you not only discover what should have the most visual emphasis on every page, where you should have a call to action (and what it should be) but you also tend to discover the missing “what would they want to do next?” link.

It makes good business sense

This document will not only help your clients succeed (which will in turn help your company), but it will also become something that you can bill more for. I have yet to come across a client who has looked through one of my example strategies and said “No, I don’t think I would pay for that.”

Not only does it bring in more work per client, it also differentiates my company vs my competitors.

Resist the need to “over design”

I often refer to this as “over designing.” When things start to feel plain and normal we just gotta throw in some more design. What often gets missed is that by page five or six when we get board and decide to “spice things up,” our users have just started to understand and interpret our design decisions from page one.

All of our headings communicate an order and hierarchy, by altering their look we risk confusing users. Our grid systems and photography styles convey a message about the website/company/brand/application/etc… switching to a new style sends a complete different message.

Think in terms of modules

I started writing this post about a week ago and between the time I started writing it I came across Nicole Sulivan’s object oriented css. A lot of Nicole’s points (if you click through her powerpoint presentation) is that too often there are minor design differences used through out a site where it would be more efficient to simply reuse the existing design elements.

In this case she is talking about code efficiency (both in terms of size and maintenance). However I believe that it also applies to the actual design effectiveness as well.

Rather than design page by page where you have a tendency to thing in terms of total composition, you should instead design in terms of modules. How do paragraphs and headings work together? What about images in paragraphs? What do comments look like on any page rather than a specific page? How do banners behave on every page?

This is not to say that you should ignore the overall composition of a page, just that rather than micro designing every page instead come up with a system that dictates how elements are laid out by their type. This will ensure that everything is consistent as well as increase design and development time.

How I go about designing a module “system”

Almost any design can be segmented into different content types.The easiest ways to start thinking about it would be to just decide what are the margins and proximity of elements to each other.

• Different areas of the design will be separated by 40px (eg: content and footer, header and content, etc)
• Different blocks of content will be separated by 20px (eg: the margin between heading / paragraph pairs)
• Heading to related paragraph will be separated by 10px

This is a pretty generic example, but by the second or third page the user will start to know that the larger gap between header / paragraph symbolizes a different subject or type of content. This creates a very unified and stable design.

Take it as far as you need

From there you can take the modules as far as you need. Really there are two parts to this concept. There is no need to reinvent the wheel when it comes to design, in fact you get a strong design by remaining consistent vs trying to spice things up or add too much decoration. The second part is how easy and agile the development of your sites (from a front end standpoint) as a result of developing in a modular sense.

Together it makes too much sense not to design and develop in this manor and it applies to both brochure sites and large scale web applications.

You should not do work for free, and you should bill for absolutely everything you do

When I first started out I constantly was giving away “bits” of work for free. Sometimes this can sound like a great idea, you are giving the client a little “bonus” of a better product with out paying a premium for it. However I have come to realize that this practice is bad for you or the client.

Why is this a problem?

When you first start giving away work, you may not have a fully booked schedule. You might not mind taking the extra time to deliver some extra value. It might make sense, after all… what else are you going to be doing (apparently not going out and looking for more clients).

There are really a few core reasons that this is bad for you and your client:

1. As a long term strategy, the best way you are going to develop a long term working relationship is providing a win/win value. Of course you should do everything you can to provide great service to your clients, but ultimately if you are not getting value in return you will reach the point where you simply have to drop the client.
2. It sets a precedent that your work is not valuable. After all you don’t deem it worth charging for. Ultimately the client will listen to you when you say “I am not worth your money,” and start treating you that way. Your quality will slip, resentment will build on both sides.
3. Eventually you will try and burn through the free work as fast as possible. Less detail means more mistakes, this will frustrate a lot of clients and in turn frustrate you. “Why are they being so difficult? I am doing this for free!”

The alternative

While it may be hard, it is important to confront your client when scope creeps or you are asked to do a “quick favor.” Be understanding but also explain why it is important to charge, if for no better reason that it allows you to make sure you can service them in a quick and detailed manor vs trying to juggle a dozen freebies.

What you will find is that you will start doing a better job and your clients will be happier. Your clients will also understand, value and respect the time, effort and expertise that you are putting into their work. The clients who are unwilling to work in this manor are not worth your time and would just cause you more pain and suffering in the long run.

Bill for the hidden costs

You may not realize it but there are also a lot of hidden costs that you should also bill for. Project management is a large part of any project, sometimes the corrispondence with clients, delegation and planning can take just as much time as the labor itself.

Your business spends a lot of time and expenses finding new work. Track and monitor how much time and money is spent marketing for every project that you get. Your pricing absolutely positively should include that time and effort so that you can cover your costs. How you integrate it is up to you (setup fee, higher hourly rates, etc).

Also consider that you spend time and effort in getting better at your craft. Seminars, events, reading, researching, practicing, etc… These are all activities that not only cost your business money (even if just in time lost), but also makes you a more valuable service to potential clients. This is another hidden costs that a lot of companies simply ignore or forget to cover while pricing.

It is an ongoing process

Some of this concept is simply being strong enough to communicate with clients regarding what they are paying for (your hours and expertise) and how more work means more money. The other aspect of billing for everything is tracking and monitoring all of the hard/soft costs that your business has incurs daily. Once you figure out how to bill properly you will find happier clients, do better work and increase your profits.

At this point it doesn’t make sense to take on a new full time hire, however I will certainly need dedicated work over the next few months (and hopefully well into the future as well.) What I decided to do was try out Cameron Moll’s Authentic Jobs by posting a listing for a freelancer.

I got a plethora of responses, all very qualified

I was shocked at the quality, quantity and how quickly I got responses from a vast amount of qualified individuals. So much so that sorting through and rating all of the candidates has been difficult (although I would have to say this is a good problem to have.)

Because of the high level of competition and simply not enough time to deeply go into every single candidates portfolio I had to develop a system to really pin point the “rockstars” that I am looking for. While I wish I had the time to devote plenty of thought and review to each case it simply wasn’t plausible.

If you are applying for a job or a freelance position, what you might think about

While every person who is reviewing applications will be different, you can be sure there are common elements for any person playing a HR role.

Address the needs of the listing

I was surprised at how many applications failed to answer questions I specifically asked to have included. Others ignored large portions of the listing (like experience with common open source CMS solutions). Even if you had no experience (or little) I spent twice as long considering the applicants who at least addressed all of the points.

Make it easy

I must have gotten 60+ applications for qualified individuals. The reason that I am looking for a new expert to help my team is to make things run smoother and easier. At some point I realized that if the e-mail sent to me was difficult to review than chances are the applicant wasn’t a perfect fit.

This included not giving me specific links to recent work, instead pointing me to their website homepage (where I have to spend some time hunting for their portfolio). Some applicants attached a resume (word or PDF) rather than explaining their relevant experience. I would have had the time to learn a lot more about the applicant if it had been included in the e-mail.

Be honest

Some of the applicants I sent a second round of questions, one of which asked “Are you a detail oriented person or a big picture person?” A large portion of responses said something along the lines of “both,” which really didn’t answer the question I was asking. While I realize the question may have sounded like a trick, I was looking for someone who was detail oriented because I am not. I need someone to balance out that weakness. I can not get an accurate reading on a response like “I am the most detailed big picture person in the world.”

Stay strong on your pricing!

Since I was asking for freelancers one of the questions I asked was “what is your hourly rate?” While of course I have a ceiling on what I could reasonably pay, but the listing was pretty clear that I was concerned about quality over cost. I was shocked at how many people e-mailed saying that “price was normaly X but they would be willing to negotiate.” This often comes across as “I don’t value myself at X an hour.” Be strong on your price, if you feel comfortable charging it then you are worth it!

Do what you can to stand out!

There were some great responses that talked about what blogs they followed, what books they read, clients they had worked with, mistakes they had made in the past (very impressive idea!). Some responses had very clever subject lines that caught my attention, where others spent a little more time formating the e-mail to be easier to read. These sorts of things impressed me.

Don’t send a boilerplate response

I would recommend writing something unique to every listing you respond to. I could tell some e-mails were simply boiler plate responses with my company name swapped in. Had I only gotten 10 responses that might work, but if you are competing with 50 other people chances are this is not going to work.

Best of luck!

I am very impressed at the quality and quantity of responses I got from the listing. This is great for those of us posting listings, but makes it difficult for those who are responding. Consider these tips next time you respond to a job listing online.

Style guides typically outline when you should use a H1, H2, H3, ordered lists, tables, etc… so that everything remains consistent and unified.

The interesting part about the style guide, as I have found, is that it often brings to light the incompleteness of our work as website builders.

Why the typical website building workflow leaves holes

The web is part coding (for lack of a better word) and design. The typical web design workflow starts in visual tools that represent a given page / interface and then moves into the coding and building of the site (working with text, markup, and style sheets).

What ends up happening is markup and design is only created for the elements that show up on those pages. Typically H1 – H3 (if that) and a few other design elements such as bulleted lists.

This is not great for a website that needs to grow, and a client that needs to maintain it. There may be a few rare cases where it makes sense to move all the way down to an H5 / H6.

However unless the designer thinks ahead to design a style for all common elements that fit with in websites needs, it will not have the same uniform approach that the rest of the well planned elements have.

This becomes esspeically important on any website that is content focused or content heavy.

It is bad for the website, the client and yourself if you never bothered to design what a “block quote” looks like and a blog post ends up failing to communicate that content is in fact, a quote.

What I suggest to do about it

I have learned simply through making mistakes, “agh crap, I forgot to style that.” You could just wait until specific elements need styling and have the client ping you, but that is not ideal.

Instead I have developed a simple one page “Style Guide” that lets you load or paste in CSS styling so you can get a clear picture of how the most common elements on a page look. It is flexible so you can easily see how elements wrap and/or how they look in wide and narrow columns.

Take a look, and play around

Feel free to take a look and play around with it on my server, or download it for yourself to use, update and improve.

I had a fair amount of fun just loading other peoples stylesheets to see how they stylized each level of heading and how far in the styling they actually went.

It is free to use, alter, etc… if you can keep a credit in the head section that would be great. I really would like to get more conversation around creating a guide to how a website should be styled and have it be a deliverable to clients who need it.

When we present our work to a client / boss we have two unique and profound depths of insight that they simply don’t have. Communicating and being authoritative on the reasons you chose the design decisions that you did is a key element in ensuring that the client does not get in the way of themselves and end up with a weak design.

Every time I go through the process I think of new and better ways to approach it. To the point where I am currently developing a “script” of how to move from point to point.

My Feedback “Script”

1. Creative Brief

I start way before I even design. Before I even open up photoshop I write a creative/idea brief and deliver it to the client and ask them to sign off on it, to make sure that my thoughts and ideas on how the design should look and feel is in line with what they expect. This at least introduces them to my take on the design problem.

2. The introduction

I find the introduction is one of the most important aspects of the process. This is where it is important to explain how you are going to conduct the feedback and review process, what should be considered and why, and how to give feedback in a way that will benefit the design process rather than hurt it. The following list a general process of what I talk about:

1. We are going to review the designs, I will explain why I designed things the way I did. At this point please hold any feedback until you have conferred with everyone over a few days, and we will reconnect to talk about your thoughts. It is important to discuss feedback and revisions rather than firing off gut reactions.
2. Remember that design is subjective, everyone will like things differently. What is most important is that your clients / users like best. Think about things from a user perspective, not your own.
3. I rerun through my creative brief that was approved. We decided that we were going to design in this fashion because… remember that you agreed.
4. This is not just visual style, but more importantly what it communicates.
5. When you do give feedback tell me what does not work and why. Direction is counter productive, as one change alters the balance of the whole design. Let me what needs to be fixed and I can sort out the design problem.

3. The explination

I will walk through why I chose to design the way that I did for each design. I am learning that it is better to jot down notes during the design process and before the actual review, as I have a tendency to rush through it and miss many important details. Including all of the details is extremely important to help flesh the idea out in your clients mind as well as establishing yourself as an expert.

If the client gets the impression that you are just throwing paint onto a digital canvas they will have no reason to trust your design choices over their own, and why should they if it doesn’t sound like you had any reasoning behind the layouts.

4. Ask for questions

At this point I normally ask if there are any questions about the designs. I am finding it is best at this point to reiterate that we will reconnect for direct feedback in a few days, as this is often a point where it becomes hard to resist expressing ones opinion (and it is understandable).

I don’t normally get many questions, which could mean there is some optimization that could be done in this step of the process.

5. Getting feedback

When reconnecting for feedback I like to go through each item one by one, and have the client not only explain “what” by “why.” Not only does this give me better insight, but also forces the client to really think about the importance and context of the revision. That is not to say that the revisions are invalid. Rather that if there is a request that is not the best of choices it does set you up to say “You may not like the extra contact link, but a user who is 5 minutes late to a meeting and needs your phone number to call on the way to your office will sure appreciate it.”

6. Next Steps

Confirming what feedback and revisions you will act on and which ones were decided to be unnecessary (by the client and you collaboratively.) Sometimes if I think that one avenue is going down a wrong path and I can’t convince the client to agree otherwise I will ask permission to do two concepts to demonstrate my point of view.

How do you handle feedback?

I have yet to see a process that feels and works perfect anytime. Any thoughts/ideas/stories on how you go about handling the feedback and review process would be wonderful.

When I say this I don’t necessarily mean doing all the non-fun things like accounting, paperwork, etc… Because if you get to a point where those things are really dragging down your billable hours it becomes profitable to hire someone to do it for you. Even if they bill at the same rate you do chances are they will get through it much quicker.

What I am talking about is the interaction and management of clients and potential clients.

Any project is going to require a dedicated amount of time to communication. Any potential new clients even more so. Now if you have experienced this at a high volume hopefully you have figured out that you need to account for and add it into your proposals. If you haven’t, now is a time to start…

Scheduling

As demand increases and you are required to become more productive to keep up, one of the first things that you will learn is that you really need to set a schedule of what work will be compelted and when. This will help you figure out and align your bandwidth and set realistic expectations for your clients.

What Scheduling Can’t Account For…

The client themselves. Now I have always hated how often people express an angry sense of “Me vs the client” syndrom, however this is a case where you simply can’t always predict, schedule, and account for the timing of a client wanting interaction.

Most clients you come across will have an expectation of getting a response fairly soon after they pose a question (weither it is via phone, or via email). However it is pretty easy to get into a situation where you are simply answering the phone / email all day long rather than making progress on the projects you have available.

How Do You Handle This?

You could hire someone to try and handle your communications. However they are unlikely to be able to do much beyond delay the onslaught of communication and the salary cost is nothing to sneeze at. Author Tim Ferriss recommends driving everyone to e-mail, setting up a auto-responder that says “I check e-mail at 10:00a.m. and 4:00p.m.”, and then only answering e-mail twice a day.

This is a good start. However you are still likely to have issues with those who just can’t help but pick up a phone, and bug you time and time again.

Be Clear Up Front, and Charge for Points of Contact

Lately what I have found to be effective is to be very clear up front that I… selll… hours. I don’t sell a product, so what you are paying for is the time of myself and my employees and contractors. This time is NOT just the time that anyone is directly working on the project, but also the time it takes to manage your project including phone calls, emails, etc…

Clients may not like this idea at first, however if you clarify it with “If I did not handle the business this way I could not realistically give you a clear picture of when your project would be done, or that it would be done on time.”

At this point there seems to be a bit more clarity in the situation. I usually go on to say “This is also the reason why it is important to understand that it may take up to 24 hours for me to get back to you. However this will most likely only been under extreme cases.”

Sometimes it All Crashes and Fails…

This last week it just didn’t work out. A very quick turn around project for a new group (Sustainable Solutions Alliance) while handle a few other Phase II / Phase III including some SilverStripe coding for Ann Arbor State Bank I had an onslaught of calls, emails, and problems, that I couldn’t really pass off. Being that some of the calls and emails were “things have broken” it is hard to explain to a client your 24 hour policy when it is the state of “emergency.”

I have yet to find the best way to handle this. As you start to acquire and aid new clients at some point you will run into a large portion of dormant clients (who are not regularly assisting your cash flow) who will have no problem knocking down your door when something goes wrong.

At this point I think raising your rates might be the best solution, but I am all ears. Anyone have any worthwhile suggestions?

The concept was developed by a 14th-century English logician and Franciscan friar by the name of William Ockham.

It is a simple concept, yet it is so powerful especially when applied to the web.

Paraphrased the concept states that “All other things being equal, the simplest solution is the best.”

What Does “Simplest Solution” Mean for Web Design?

When I first began designing I had a tendency to try and make my work interesting, exciting, and dynamic. Now that is not to say there are not reasons to design work that fits those descriptions. Rather it is rarely the best solution. Any element on a page or in a design changes the signal to noise ratio (something I will cover in later blog posts).

A design can be simple and still exciting, well crafted, and interesting. Simple doesn’t necessarily mean minimal (which is a specific design style). It means that given what you need to have included things should be laid out and designed in the simplest manor possible.

How to go about simplifying your designs

Following Occam’s Razor is more about careful planning and deliberate thought process rather than any sort of art form. The first step is to figure out exactly what needs to be included in the design. Here is a typical example from a work that I had created long ago:

• Company logo
• Photography (to communicate subject matter)
• Descriptive text (communicate subject matter)
• Company messaging (marketing message)
• Newsletter subscription (site goal)
• Navigation
• Company address + contact information
• Parent company’s logo

After you have decided what absolutely has to be on the page you must then order them in terms of importance.

1. Company logo (branding)
2. Navigation (usability)
3. Photography (quick communication of subject)
4. Messaging
5. Contact Information
6. Newsletter Subscription
7. Parent company (not as important)
8. Address (not as important)

From their you can decide what elements should be seen in what order, and assess if any design element you add is noise and competes with the important pieces of the design.

Example Real Estate Company

A few years ago my first attempt at the design in the example resulted in this design concept.

Clearly I did a fair amount of visual decoration that really didn’t add any “signal” to the design and was nothing more than noise. Let’s break down what really was unnecessary

• The goofy break out headlines
• The background color stripes
• The huge picture (it used way more visual real estate than needed)
• The different color zones and blocks
• The “stacked paper” look
• All of the extra information at the footer

Revisiting Today

Now that I have been away for awhile, I decided to try and revisit this design and really think about how I could simplify it. This included:

• Removing all decorative elements (goofy headlines, background, etc)
• Rework the navigation so it is harder to miss and balances out the design, rather than being an afterthought
• Simplifying the content area to improve readability and comprehension
• Balancing the photo so it complements the design, rather than dominates it
• Simplifying the footer information

The result is a much stronger and more visually attractive design. Even though I removed a lot of decorative elements, the design actually looks better. As designers we need to be careful of trying to hard to “over design” our work. Ultimately our job is to make difficult information easy to understand, not to create digital art.

Think you can do better?

Think you can do a better job simplifying the design? Let me know and I would be happy to send you the PSD of the file and post up your simplification.

However there are other principals of design that have yet to get ample amount of attention or usage. One of these principals is the “Gutenburg Diagram,” which you have likely used on some level with out realization.

How the Gutenburg Diagram Will Improve Your Design

The gutenburg diagram is a method of understanding how cultures who read right to left, visual navigate a composition, and how to optimize layout as a result of it.

Since we are trained to read from the top left to the bottom right naturally, we instinctively sweep a composition starting from the top left down to the bottom right (often several times).

As information hierarchy and visual emphasis are such critical parts of design, knowing how a user is going to look at your site despite design can lead to a much more effective layout.

How the Diagram Works

The diagram dissects the composition into four quadrants. In this case since we are designing for the web, it will be dictated by the screen resolution and location of the fold.

The upper left quadrant is the first area that a users eye will focus on. The eye will then sweep downward crossing the center or intersection of all four quadrants, before coming down to the bottom right hand quadrant.

The upper right quadrant and lower left quadrants are called fallow areas. The top right is a strong follow area, where the lower left is a weak follow area.

These areas will receive little visual attention unless they are emphasized through design. The top right will receive more attention than the lower left all other things equal.

Using the Diagram for Excellent Web Design

By understanding and working with the diagram we can maximize the effectiveness of our designs by using it to our advantage. It is probably a good thing that web convention puts the logo in the top left of the screen. It will be the first thing that users see, tell them where they are as well as help brand the website.

De-emphasis

Since we know that the bottom left and top right quadrants will receive less visual attention, we can put less important elements in those areas. You may have noticed the convention that puts secondary navigation links in that area, such as client login, rss feed, etc…

This is a perfect use of the gutenburg diagram, as such navigation is not nearly as critical as the primary navigation. However those who are looking for it can still find and use it when needed.

Place important visuals and content consciously

As you design down the page, you may also want to consider moving more important content or visuals into the path of the diagram. If you have a choice, place important content at the fold on the right hand side of the design rather than the left. A common occurrence would be swapping content for a image left to right, to place greater emphasis on one or another.

You may also want to reconsider placing the navigation in a right aligned manor, as you are unlikely to place it at the bottom of the composition anyways.

Examples of the Gutenburg Diagram

OH Tele

Rocket Club

Revyver HQ

Wellness Class

Final Thoughts

The Gutenburg diagram is not gospel. Once you start playing with visual emphasis and weight, how a user looks at a design can drastically be altered. However the idea is to use the diagram to your advantage and use our instinctual way of looking at a design to strengthen the layout and composition.

As web designers (regardless if we are part of an internal department or freelancers) it is pretty easy to fall into a “well I will build what you tell me to build” sort of mindset. Because people use the internet day in and day out they tend to gather a whole list of things that they think they want on their website, with out really much thought that goes into it.

The result is you get a list of items “We want blah, blah, blah blah, and blah…” of course the easiest thing to do is to simply nod, smile, and build it the way they want it. After all, battling and educating the client / boss / etc is really just unpaid time and frustration.

This is even more difficult when you are a freelancer, business owner, or sales person. As you could spend hours working out what the potential client really wants, only to have them take your spec sheet to a cheaper firm.

Despite some potential draw backs, we are all consultants when it comes to the web. We all have a much better understanding of what will work, what is/isn’t a good idea, and the best way to make a website a success than anyone who would be hiring us. It is our job to consult, recommend, and make suggestions every step of the way. Even if it results in unpaid hours now, it will further your career later.

I have found that several potential clients love the initial process of suggesting, recommending, and discovering what they really need in their website. It has helped seal jobs before, as they felt not only did I better understand their needs but I had a level of creativity that the other firms did not.

A tricky aspect of this situation is a joint worry about scope / price creep. You obviously don’t want to do more work than you get compensated for and the client doesn’t want the price to rise indefinitely. Especially at the start of an engagement, it is very comforting to know that X dollars will be exchanged for X specific deliverables.

I have started a new process of engagement that protects the client and yourself from scope and/or price creep. The normal meetings and proposals are pretty typical and standard, I issue a price that states “If nothing else changes, this is exactly how much you will pay for these items. However we will do an initial kick off meeting to dive into your company, brand, customers, and needs that could change this scope to be larger or smaller.”

The reassuring factor for the client is that they know they can always just choose to do what was originally on the table. However if a great idea comes up in the kick off meeting they can opt to incorporate it as well. The reassuring factor for you, is that if you suggest a change you know there is an understanding that it won’t be free.

This also includes shrinking the scope, as needed. There have been times where I have suggesting removing pages, features, and functionality because it wasn’t going to make an impact compared to how much it was going to cost. A lower price is always a welcome surprise from a clients perspective.

So next time you are about to start a project don’t consider yourself the builder, consider yourself the architect. It is your job to use your expertise to ensure the website that is built is as effective and successful as possible.

I often talk about how a large part of design is communication. With so many CSS Galleries it is easy to get stuck in a mindset where you simply want to create the “coolest” looking website rather than “the most effective” website.

The truth is that even beautiful design can be damaging to a site/brand/company if it is not “correct” design. Studies have shown that you have 10 – 15 seconds before a user has an impression about your website. Ten to fifteen seconds is not enough time for them to fully read and understand the history of your company, it is long enough for them to make some very detailed conclusions based on what your design communicates.

Why Our Approval and Design Processes are Often Wrong

What I am ultimately leading up too is that in most cases the design / approval process that we go through leads to work that does not communicate what it should to the end users.

This is a typical creative process of a sizable firm:

• Creative director to graphic designer: “It should say this”
• Graphic Designer: “Hmmm, I like it when it looks like this”
• Manager: “This looks off, why don’t you tweak that?”
• Creative director: “I don’t like this portion, fix it”
• Client: “I like the color red, use red”
• User: “I am looking for something high end, this looks cheesy. Goodbye.”

We often have people who are a part of the design process that alter the end work based on their own personal preference, and guess what… as designers we are one of them.

Now let’s look at it from a smaller firm / freelancer

• “Lets make a great looking interface!”
• “How do you like it?”
• “Lets make it POP!”
• “There we go, it looks really cool!”
• “Aghhh, I don’t want to go to a coffee shop that is this nutty”

Ultimately it doesn’t matter if you like the design, if you are serious about your profession than you shouldn’t be creating sites so that you can have another great looking portfolio piece.

As a client or website owner it doesn’t matter if you like design. If you are serious about your company or website then you should have the site created so the users like it, not so that you can brag to your friends about how cool your site is.

How can you change this?

There really are a few approaches to the process that can greatly alter the outcome in a positive way. The first step is our great friend… research.

RESEARCH

Anything you can do to get into the minds of the end users will result in a much more successful design. This can take the shape of client interviews, researching competitors, attending events that users may attend, or other forms of traditional market research (surveys, demographics, etc)

Research should be compiled and decimated into a few deliverables such as a competitive analysis, user personas, and a creative brief.

These deliverables will be key in the design approval process, especially if someone on the design committee says “Why don’t we make it blue?” With the documents you can now say “our research shows that red will make users feel how we want them.”

TESTING

Actually testing designs can be a great way to find out what works best for different users. A lot of projects don’t have the budget for this, but it doesn’t have to be incredibly high cost.

I will go into ways to test in future blog posts, but for now consider showing a user a design and asking 3 – 4 questions about how they would describe that design. You are not looking for feedback in terms of “use a different picture, color, etc” rather it is important to understand what messages does the design give off. Does it feel affordable? high price? exciting? calming? interesting? sturdy?

Additionally you can show a user a design for 3 – 5 seconds, then ask them to tell you what they remember from it. It will give you a clear idea as to what are the most prominent items on the page.

LARGE SCALE SURVEY

This is currently being done with the Drupal project. Designer Mark Boulton is getting feedback from a community of tens of thousands. What he has found is that over the personal preferences trends emerge, and those trends provide a huge amount of insight and value that can be worked into the next design iteration.

IT DOESN’T MATTER IF YOU LIKE IT

Yes it doesn’t matter. Some of my most effective and successful designs from an analytics/statistics standpoint are not ones that I particularly like. That is because I am not the user, and I think and interpret visuals differently than psychology scholars (or any other given user base)

I will be doing a post soon on the use of flutter for wordpress as a CMS, so stay tuned to either blog for more information.

With out knowing what anything said I could easily identify even subtle cues as to what was the most important element in type, what was secondary information, and what was practically meta data. This hierarchy of visual importance in regards to type can also be referred to as typographical contrast.

What is “Typographical Contrast”?

Simply put it is the grouping of two typographical elements, then using different methods of traditional design to create contrast. The contrast places emphasis on the important element of type, letting the secondary element command less attention. The result is an improvement in the communication of the overall design message.

If we look at traditional forms of contrast then we have:

• Size
• Color
• Spacing
• Shape

All of which can be used with type to improve our typography on the web. To keep this post short an interesting I will be offering some examples, explain what I did, and move on.

1. Size

This is probably the most common use of typographic contrast and is quite common on blogs and other content that has a time relevance. Many blogs uses this method to provide additional information for those who are interested, but kept it subtle enough where it doesn’t distract or command your attention.

My blog, for example uses large headlines with smaller type for supportive data. The headlines are large as it is the most important element of type in it’s area. However there is additional content that is of value, it simply is less important (in this case the number of comments, posted date, and author).

The concept is pretty simple, make the most important element of type larger while and supportive type can be smaller. See the example below:

Size Contrast

By contrasting large type with small type we get a visually interesting typographical design and it is functional. The most important element commands the most attention, while the secondary element is subtle yet legible. This dynamic builds a visual hierarchy.

2. Color

Color is another common way to develop some contrast between typographical elements. The most common way that we see this in design is having some type lighter than others. Obviously lighter text (when dealing with a light background) has less energy and thus less visual attention. This creates a contrast between it and any darker element.

I have also seen great examples where black is contrasted with color, or the richness or vibrance of colors is used to develop a level of contrast.

Color Contrast

Again this establishes a visual hierarchy as the most important elements will command the most visual attention (and I might note that the lighter type element doesn’t necessarily have to be the at a lower visual importance.)

3. Spacing

The use of spacing can be a tricky technique to master. However when done properly it creates a rich contrast and interesting typography in design. The spacing of type itself can obviously be altered in three traditional ways, letter spacing, line spacing, and word spacing. To be honest I have only see spacing work effectively in line spacing and letter spacing, however I would be more than happy to be corrected in terms of the use of effective word spacing in typographic contrast.

Space can also be altered simply in the placement of type. Right justified vs left, indented vs on the same rule, etc… Any time you alter the typical placement of type you will create tension and visual interest (and thus contrast).

Spacing Contrast

Space works best when used in conjunction with other techniques. It is a tricky technique to master because depending on the situation more space can either increase or decrease the visual weight.
It can either thin the text out, removing visual interest and attention; or it can also cause the element to take up more space more than thinning it out which could cause it to have more visual interest and attention.

4. Shape

When I refer to shape I am talking about either using different typefaces or italic, bold, etc caps vs lowercase, etc… Really altering and playing with the shapes of two different typographic elements.

This can range from something as simple as coupling a serif with a san-serif, or as dramatic as a decorative font with an ultra-simple font.

When used effectively it can be a nice balance between legibility, style, and visual interest.

Contrasting with Shape

Shape probably has the most capability to create typographic contrast. Because of this you also must be careful of how you use it, it is really easy to create some “cool” design elements that really detract from everything else on the page because they simply command too much attention.

5. Putting them all together

After you have worked with the different individual elements for some time you can start to work them together for an even richer experience. This is another situation where you really want to ensure that you balance the interaction and relationship between the two type elements and everything else in the composition. It is easy to create a lot of visual contrast using all possible elements, only to end up detracting from the rest of the composition.

Contrasting Everything

You may notice that I was able to play with the different elements to increase contrast in one way, but decrease it in another. For example make the type bigger, but lighten it; or make it smaller but a brighter color. A thinner font but played with the spacing.

You can create some very powerful typographic contrast by playing with these elements. Every adjustment you make alters the message a little bit, and by balancing the message and communication with visual impact it enrichens the visual experience.

Any thoughts on other ways to increase typographic contrast? How about some good examples?

On the web we face some typographic challenges and limitations, the typefaces, font smoothing, and control we have over all typographic elements is inconsistent at best. However that hasn’t stopped several great designers from using typography as the only significant element of design on their websites. They found a way to create beautiful and stunning visuals with out complex graphics, shading, color changes, backgrounds, etc… they let the type speak and the results are amazing.

Astheria

A Working Library

Quadrifolia

The Deck

Sofamade

Seed Conference

Daniel Mall

Erratic Wisdom

Mark Boulton

Rikcat Industries

Danny Blackman

201 Created

Huge, Inc

Daring Fireball

Vlourenco

Behance

Type Sites

TypeTweets

Objectified

I Love Typography

AIGA Student Design Competition

Garrett Dimon

Monty Lounge

Monday By Noon

AIGA New York

Upstart Blogger

Did I miss any? Leave them in the comments and I will add them to the list.

Even if you have been through graphic design school or experienced in fine arts, you will still suffer from a narrow design capability if you don’t work to learn more about these tools. This is because there are techniques you could use but don’t even realize are an option while creating a new piece of work.

Photoshopers vs Designers

I see two different skills related to this subject, “Photoshopers” and “Designers.” I used to be very specific about calling myself a “designer” over a “photoshop guru.” The reason being that photoshop gurus tend to be amazing at altering photos, or developing incredible works of digital art in photoshop (sometimes making the surreal look real.) Where design requires functionality, usability, balance, and finesse. These are two different and specific skills, however it pays greatly to have both.

Getting to my point

When you are working with a design, even if you have done sketches, thumbnails, etc… chances are you are not even considering some great design accents because you simply don’t know how to do them. Maybe you don’t even realize that they exist as a possibility. If you were to know about them, in the right moment you would realize said technique would be worth trying and it would raise the quality of your work.

You may be looking to create a specific look, feel, or develop a specific mood. Naturally you will be thinking in terms of “what can I do to achieve this goal?” However “what can I do?” is actually “what can I do to achieve this goal that I know how to do?”

This is why it pays to take time to continually expand your skills and capabilities with your tools so that you have a wide range of available technique and have more to select from. Eventually you will have thousands of techniques and capabilities to create a wide range of moods/impacts/feelings/etc, and won’t be limited to the basic techniques you have used in a hundred of your old designs.

Long story short, you should have the skills and capabilities of a photoshoper with the design fundamentals of a designer.

Some Examples

You can often tell which designers have not only mastered the fundamentals of design but the tools used to create the work as well. N Design Studio and Veerle are two excellent examples of this. In the case of N Design Studio, Nick La clearly has a great sense of design. His work is balanced, the typography is well crafted, and the color scheme communicates a specific message. However he is able to take the design to a whole new level by some of the advanced as well as stunning techniques he has learned.

If you take a look at Avalon Star you will notice the same trend. Again the designer has a clear mastery of design fundamentals. So much so that the site would be very well designed even with out the level of detail put into it. However he is able to create a truly memorable, high impact design through his understanding of photoshop.

So what am I saying?

If you have time it is worth while to practice your photoshop/illustrator skills as often as you can. With so many great tutorial sites available, there are always new techniques and methods to learn. Below is a list of the ones I follow,

• PSDTuts
• VectorTuts
• Smashing Magazine
• Verlee
• Web Designer Wall

What sites do you follow for tutorials?

It seems to use the PNG image format so it will support transparent backgrounds, however the text is not selectable in most browsers (a feature that sIFR has). What really catches my attention is the capability to use font-stretch support, giving you the ability to render condensed, semi-condensed, expanded, etc font styles.

Additionally it does have some support for line-height and letter spacing, two features that FaceLift doesn’t appear to have at the moment.

If anyone has used it leave some feedback and let us know how it works.

The result of either of these situations is poor and uninspiring web copy. The messaging does not compel you to read it nor does it inspire you to learn any more about the product/service/offering. The worst offenders for what ever reason tend to be web design companies themselves. If I see another “We create beautiful sites based on web standards blah blah blah” headline I just might crack.

Effective web copy must be short, to the point, and focus on the benefits that you are offering the user. It needs to be presented in a way that takes little effort to read/scan, and should immediately give you the option to jump to the next stage of the conversion funnel. From attention to interest, interest to desire, or desire to action, etc…

If you can’t stare at the screen for 10 – 15 seconds and immediately be able to describe the unique value of your product/service than your web copy has failed. Keep in mind that the communication of the unique value will always come from the copy and not the design. A design might tell you something about the quality, attitude, or brand of the site but a design will never tell you that “The unique materials make North Face clothing the strongest and warmest gear with out extra weight or bulk.”

Lets look at a web design company that does it well. WebpageFX has extremely well crafted messaging in their flash header. Despite some potential usability issues, when you do find the good messaging it is very clear, compelling, and professional. Try click on the little circles in the bottom left hand corner and watch the simple clear messages and how they are enhanced by design but not replaced by it.

You understand the benefits of complex services very quickly, including mobile web, analytics, etc…

This could even be done with out flash and still be effective because the simple clear messages work so well. So when in doubt try and simplify what you are saying and really focus on making the value and the benefit clear.

check out the listing of the late model 15.4″ pro’s on Amazon

This was brought to my attention a few days ago by coder / developer Mike Erb so I am not sure how long they will have the old models in stock.

I am considering picking up at least one for my intern while supplies last. If you come across any other good deals on these units feel free to post them in the comments.

Luckily there are some tools and methods to improve the typography on the web, and most of them are simple, and scalable.

The Situations

There are two distinctly different situations where we would want to improve our web typography. They require different methods, tools, and needs. These situations are headings and body type. Headings should draw attention, have an impact, and be meaningful. Where body type should be easy to read, clean, and have a consistent flow.

When it comes to headlines we have several options to improve our CSS based typography, or use replacement techniques such as sIFR, flashImage, or CSS Based image replacement.

Body type is much more difficult, we have fewer options to really control and work with out typography. Luckily body type should do little other than be clean and legible. In this situation we really are looking at tools that will increase the legibility of our type.

Headlines

sIFR

sIFR is by far my favorite method of improving the headline typography. It addresses almost every typographic issue that you may run into. Not only can you use any typeface that you have on your computer, but you also have more control over letter spacing, leading, word spacing, font smoothing, and even some stylization.

This nifty tool (and yes I said ‘nifty’) uses javascript to dynamically insert a flash movie into the document where you have text that you would like to be displayed.

Since it is inserted dynamically you still get the semantic and SEO benefits of your H tags with the design and typographic benefits of a tool this powerful.

Of course if a user doesn’t have javascript, they are still able to see the normal HTML text and still have a positive user experience.

Their are some drawbacks however. It can be tricky to configure / install, and sometimes it takes a noticeable amount of time for it to render. It has a noticeable footprint the first time it downloads (afterwards it is cached) and of course will slow down the rendering of the page slightly.

FaceLift

FaceLift provides the same function as sIFR, but uses dynamically generated images instead of flash. Again you have the same benefits of actual semantic H tags, but have the ability to use any font that you have installed on your computer.

It seems to be a bit faster than sIFR and the technology is much less complicated. FaceLift supports transparent headlines for complicated backgrounds through the use of the PNG image format (so IE6 might require some finessing).

Simple and straight forward FaceLift is a great option for beautiful typography. However it does not support some of the advanced functions that sIFR does. Letterspacing, leading, and other stylization such as dropshadow filters and selectable text are available in sIFR but not FaceLift. However it does seem to have better consistency size wise across browser.

CSS Image Replacement

Sometimes there is no replacement for the classic method. If you have complicated typography in addition to some complex styling, it is very likely that neither FaceLift or sIFR will be able to dynamically generate the look you need. In this case you need to create the headlines in photoshop and use CSS to replace your markup. This is called “Image Replacement”

There are several methods of doing this each with their pro’s and con’s. With nine different methods to chose from, finding one that fits your situation should not be all that difficult.

The advantage for using this method for your rich typography will be that you can make it look exactly as you wish and you know everyone will see it in a very consistent way. Of course this method doesn’t work so well if you have a large CMS based site.

Body Type

As stated early there really is one major focus of body type, make it legible and clean. Of course there is some room for picking the right typeface, however with a limited range of choices you should quickly be moving on to more important things such as baseline rhythms and legibility.

Luckily there are some great tools out there to make this job easier, and if you have done it all manually you will be excited about how much time you really save.

Of course the first step is to figure out what font to use and what fonts are safe to use.

PICKING AND WORKING WITH THE FONT

FontStackBuilder makes building your font stack quick and easy. With a great cross section of fonts that are available on windows, mac, and Linux you can easily find and generate the code for a safe and effective font stack. Ensuring you have selected typefaces that all users will be able to read and understand regardless of OS will put you on the road for great typography.

But to really take advantage of typography (even in your body text) you really should have a good idea of how the type looks in all different sizes and states. This way you can make an educated choice in how to display non headline type (bold, all uppercase, etc). If you need a good render of type with out the hassle of save and preview then you need csstype.com.

CSSType.com lets you specify what typeface and words you want rendered and it will give you a whole output of different states and sizes letting you really see a range of options to use in your stylesheets.

If you are looking for more of a playground to work the your typography, have a look at CSSTypeSet.com has a simple interface with easy sliders so you can make fine adjustments on the fly, see how it looks, and get the CSS code when finished.

WORKING WITH YOUR BASELINES

But as I touched on before setting and working with your baselines is probably one of the most tricky aspects of web typography related to your body font. Setting a baseline or vertical rhythm ensures that the bottom of all elements and lines of type line up with each other creating a consistent and integrated composition.

Of course understanding how it works is pretty the first step, but afterwards you may find it quicker and easier to use the vertical rhythm calculator than doing all of the calculations and coding yourself.

Once you have developed your vertical rhythm make sure to test it using Rob Goodlattes great “syncotype” script. The script puts an overlay of the rhythm you are aiming to achieve over your site so you can see if any element doesn’t line up and make tweaks accordingly.

THOSE TOOLS SHOULD BE A GREAT START (OR SPEEDUP) OF YOUR WEB TYPOGRAPHY

Have any other tools or techniques you use to improve your web typography? Let me know so I can add them to this list.

The first step is developing or downloading a grid for use in photoshop and your mock-up. With so many quality grid PSD’s out there it might not make sense to create your own over adapting one that has been fleshed out already.

Here are some grids you can try:

• Designified 960px Grid
• Critical Web Sample Grids
• Blueprint CSS Grid

I have gotten used to and like the blueprint grid, as I have adapted the use of blueprint and quite like it.

Next Steps

After you have opened up your grid rather than starting to design like you normally would it pays to spend some time to just block up elements and the space that they will use. This will help you see how the visual weight of elements will effect the page in addition to how space is used (and not used, remember that negative space is just as important as positive).

From here you should have a good idea of how elements relate to each other, how does grouping effect elements relationships, etc.

Lets look at the detail closer

As you can see all of the margins, spacing, gutters, etc are all a multiple of the same initial gutter. This creates a very balanced and polished design that would likely feel very different had we just tried to eyeball the spacing.

When two elements have some relationship to each other I only use one length of the gutter (or none), where if elements are of different content/context they use three gutter lengths. This visual separation tells the user that the elements are not related, but by keeping the rhythm of the design consistent it never feels like an element is out of place.

It works for Typography as well

Last year there was a lot of discussion and awareness of the “baseline grid” in typography. Simply put, developing a baseline grid for type ensures that all of the type regardless of size lines up on the same grid. Using these sorts of grid systems helps you develop that baseline grid as well. Here we can see a close up example of two type areas and sizes on the page and how they line up in addition to the spacing and awareness of other elements.

So pay attention to spacing

Even if you are not looking to do a very organized content intensive site the use of grids to help plan and space out your elements will create a much more polished and clean design. The time it takes to actually create proper spacing will pay for itself as your portfolio and quality of work improves dramatically over time.

If you have any tips/hints/resources/ideas related to grids and space feel free to leave a comment below.

What is Spatial Awareness

Spatial awareness is simply the understanding and use of space in an effective way on your canvas. It sounds simple but it really requires a high level of mastering to get correct. This could be taking advantage of whitespace, or even grouping elements close together to create tension.

Those designers who can harness and use space to their advantage will find that elements can be placed in all sorts of unconventional ways, yet still work. Often times beginning designers place elements based on what “looks” or “feels” right, however that is not the best way to use space as accuracy and consistency is very low.

How can I use Spatial Awareness?

The first step to great spatial awareness in a design is developing a grid system. A grid divides your canvas up into small sections consisting of margins, columns, modules, flowlines and spatial zones. The canvas then ends up looking like a a series of boxes with columns (I found an example on google images here).

With this grid you can now find where elements should and can be placed on the page in a way that activates and takes advantage of space. Because you are using space in a consistant mathamatical way the overall composition of the design feels much more consistant and unified.

Taking it to the Next Level

These same principals of consistency can be applied to the typography as well. Because the grid will dictate margins for any element on the page (if a column is 18 pixels in width, then the margins of headings should be 9px/18px/27px/36px/etc…). The line heights off all type should also follow the structure and rules of the grid.

All of these steps to better map out your designs will be a subtle but noticeable improvement in your design over the tried and passable “eyeball it” methods. Note: There are times where you want to break the grid, some designs actually benefit from the chaotic and unstructured feel. However you have to make a decision as a designer that it is in fact what should be done.

I will be posting more about spatial awareness and using grid systems in the future, stay tuned.

Have any experiences with grids or spatial awareness? Post them here!

With successful sites like Mint and Basecamp its easy to assume that great design will help push your product. And to some extent sure, it will. After all if nothing else some listings in css galleries would at least help get the word out.

However the truth is that those sites have mildly slick design and most of the focus is instead on usability and simplicity. Want more proof that the web 2.0 look is not always the solution? Consider the success of Delicious vs Magnolia. One is pretty ugly by most peoples standpoints (and by ugly I mean simple, plain, boring, I actually love the simplicity as a designer) the other is beautiful, colorful and engaging. Yet magnolia fails to gain the popularity over delicious, because delicious is quick, easy and confusion free.

In short I will be pushing harder as of late to keep my interfaces simple and easy despite those who just want a pretty picture to drool over.

Anyone have any examples that prove me right or prove me wrong?

At the meeting I struck up an interesting conversation with a user experience designer about the e-commerce check out process and how best to optimize it for conversion.

In a situation like e-commerce every detail is critical to a users success in checkout and conversion. If at any point a user becomes stumped or is burdened by the process they are likely to leave and forgo the purchase all together or potentially purchase from someplace else.

The most critical of these points is the checkout process. The checkout process itself is quite cumbersome, and at this point there are no easily solutions to improve the process. In order to make a purchase the site must gather some minimum amount of data and then confirm to the user that everything from the billing, shipping, payment and purchase is accurate. With this level of complexity and the wide range of experience with the internet (and online shopping) it is no wonder that shopping cart abandonment rates are so high.

Because of the complexity of the process there have been several companies who have tried what they can to make the process easier. One of the attempts has been to take what is normally a 3 – 4 page process and turn it into a 1 – 2 page process. There has been much debate as to if this is an effective technique or not.

What the user experience expert was describing is that there are many problems with the single page approach.

• First is that in most cases it does not actually reduce the amount of time. It really only reduces the perception of time/effort. However that is valid.
• There are very few ways to show a user the data that has been entered while they are filling out such a long page of information. IE: After you have filled out your billing information, if you want to double check and make sure you didn’t accidentally order two products instead of one you have to scroll up to the top and back down again.
• The best way to combat the issue above is to use AJAX, which has accessibility and bandwidth issues.
• Ultimately people are used to a staged approach. After each stage they can be reminded of what they are purchasing, what the information they entered in the previous step was, and they know they didn’t make an error in the process.

At some point we may see an “openID” sort of payment system that improves the check out process. Additionally people will eventually get used to AJAX and dynamic pages. Until that time comes, with e-commerce it is better to keep things simple and predictable than try and improve things in a way that could ultimately confuse users.

Any website that wishes to achieve conversion needs to have a plan and strategy for proper flow to the conversion point. This means that any users who lands on your site should seamlessly move through the information on your site resolving any questions they need answered and moving through the AIDAS funnel until they convert.

The major reason we must develop a flow on our sites is to maintain proper momentum through out the sales funnel.

Why is the momentum important?

Momentum is what keeps a user interested and dedicated enough where they will take the time, effort, and money required to convert. Thing about it from your own experience. Have you ever found a product while shopping that you were very excited about, only to be unsure if you wanted it by the time you reached the counter? Maybe you ended up putting that product back.

That happened because you lost momentum during the shopping experience. Despite feeling like the product was going to solve a problem or fit your needs initially, by the time you went to purchase it you were no longer sure.

Planning your Flow

In order to plan the flow of your conversion funnel you must look at the following key areas:

• The Driving Point
• Points of Resolution / Waypoints
• Conversion Beacon
• Conversion Point

The Driving Point

The driving point is the first action that a user takes that indicates some level of interest in your product/service. This may be clicking on an advertisement, search listing, typing in your URL etc. Something has caused the user to take the time to visit your site (and hopefully not by accident). That something is the driving point.

Your goal from the driving point is to grab the users attention and interest, and guide them into the sales funnel.

Points of Resolution / Waypoints

The driving point is what will get the users excited. This is where you would initially see the product you saw while shopping and start to examine it with the thought of putting it into your shopping cart. Keeping the momentum going from the driving point through points of resolution and waypoints will mean the difference between conversion and exiting users.

Points of resolution and waypoints are non-linear pages that answer questions that the users have that must be answered before they will convert.

A user may or may not view one or all of the pages you craft as points of resolution. There will be no particular order to the viewing of these pages either. It is important that the pages are easy to find in the event that a user has a question that one of them will answer.

As soon as they have to start hunting for the answer to their questions they will just as quickly begin to assume that your product/service is lacking in this area and that’s why they can’t find information on it.

Make your waypoint pages easy to find using in text links.

Conversion Beacon

From every waypoint / POR page you should have a call to action that leads the user to your conversion beacon page. This will keep the momentum and flow of the process high, as the user will not ever have to think about the next step. As soon as their questions and objections are resolved they can effortlessly step into the next step of the process with out hesitation.

The conversion beacon is the first step in a linear process that leads to the conversion point. The most common situation would be clicking on “checkout” on an e-commerce site. From that point the user must walk through several steps before actually converting.

However this could just as easily be clicking to a contact form where the user must fill out the form as the second step of the process.

Conversion Point

The conversion point occurs when there is no doubt that the user has in fact converted. In most situations this is a confirmation page, either displaying order data or noting that the contact form had succuessfuly been completed and sent.

Conclusion

By planning the flow of your site for conversion you can map out how to lead users from the driving point, through the points of resolution, into a conversion beacon and finally taking action and converting. Failure to plan out these steps almost always results in a user losing momentum somewhere along the pathway and losing interest.

As much as us designers would like to think that conversion is heavily based on visuals and aesthetics, the truth is that the content of a site is really where you get an opportunity to persuade users to convert or take action. Now that isn’t to say visuals isn’t important, the visuals are extremely important; it is just important at different stages.

Points of Resolution

When a user comes to their site they are always going to have questions that need to be answered before they take the action that you wish them to take (or in other words convert). These questions are called “points of resolution,” and as a web site strategist it is your job to anticipate these questions and answer them.

Some typical points of resolution could be:

• Does this site offer what I am looking for exactly?
• Does this site offer a solution to my problem?
• Can I trust this site with my information?
• Can I trust this situation will work?
• Will I be able to establish a long term relationship with this site?

Personality Profiles

The tricky part of this process is that users are going to have a variety of different questions, and all of those questions will need to be answered despite the fact that they will be different.

To simplify the development of content and prevent the need to stuff the page with more content than anyone will read we look to personality profiles. Using personality profiles we can anticipate the majority of questions that will be raised, and how to answer them in an efficient way.

Methodical

Some people just want the hard facts, and these people are often described as “methodical.” Where others want to know that they will be well taken care of, the people on the phone will be nice, etc… Methodical people are not those types of people. Instead they want data, diagrams, facts, proof. They will sit and read through detailed copy about how your product or service will solve their problem and they could care less about anything else.

Spontaneous

A spontaneous person wants excitement, acceptance, they are flexible and open to new suggestions even if it doesn’t feel like the perfect fit. They are much more likely to make a purchase or action based on the idea that they will gain a higher status or fit in because of it. Reinforcing a strong brand or establishing high credibility through testimonials can really catch the attention of a spontaneous user.

Humanistic

Humanistic users value other peoples needs before theirs. In most cases they are looking for evidence of being able to establish a long term relationship with a company. They don’t want to have to hunt for a new company to work with every time they have a need, they want to have their contacts with in a company and know that they will be taken care of. Consider the use of testimonials to show them that previous customers have been delighted with your service and approach.

Competitive

Competitive people want to win. They are controlling and goal oriented. They are looking for accomplishment, and your product or service needs to be the key to their accomplishment or they are looking elsewhere. They want a guarantee that what you provide will work, no questions asked. Even if it is a personal guarantee it means something.

Putting it all together

Of course you won’t know exactly what type of user is going to be viewing your site, so the trick is to write for all users in an engaging way. That way the user will self select what portions of the copy are most important to them. Further, you can provide in-text links to let them click to more detailed information and answers to their point of resolution.

For example:

You will be excited to know that all of our search marketing strategies use a time tested strategy that ensures success for every client. The approach has helped thousands of companies succeed, and we are equipped to meet any objective that you may have. Beyond the strategy to make it work, we are your partner in success. We are not happy until you see results. You will be accomplish your goals, we guarantee it.

As you can see even if you were to scan the text you could pick up on the important details, and click the in text links to learn more and have your questions answered. No matter what personality type (or mix of personality types) you have the opportunity to get your concerns answered so you can move to the next step and take action.

Part of running a business is networking and meeting people, as well as being an advocate for the things that really push the industry (and your company) further. The core of this networking and advocacy is to join and start groups that brings people together that you wish to meet, educate, and learn from. Today consisted mainly of working on and with those groups that I am a part of.

This started by at 9:00 where I attended a local group called Micro Co-working. Simply put, Micro Co-working it is a way for small business people, entrepreneurs, and those who are self employed to get some social interaction during a work day. This interaction and networking can be very refreshing, anyone who has worked from home or in a small office will relate to the feeling of isolation that one gets in such a situation. Despite the fact that I did not get billable work done, I did get to networking and interact with others in similar fields. These same people could some day recommend work to my company, or partner with my company on projects (that could come straight to me, and I need their help or vice versa.) Case in point, I was able to obtain the help of local Ann Arbor Information Architect Dan Cooney on some wireframes that I was working on for an upcoming web service project that I am a part owner of.

Not only was this valuable in the service that he provided to me (for free), but additionally I learn the extent of his expertise so that I can pull him in on larger projects, or refer people his way when I can’t help them directly.

Straight from co-working I attended a local lunch group called LA2M or Lunch Ann Arbor, Marketing, where expert Jamie Cope from nFormation Design talked about engaging user experiences and how his company uses 3D modeling to create them. His insights were incredibly useful, and as someone who is an advocate of conversion based web design I found myself saying “wow I never thought of that” more often than I would like to admit.

From LA2M I filled myself with work, before learning that my poor wonderful cat buster may be sick… which was cause for a quick run home and status update, followed by plenty of advice from Nicole on what to do next before taking him to the vet.

But I couldn’t stay with Buster as I had another networking event by the name of Refresh Detroit. Had it been any other event I would have surely missed it, however this one that I co-founded and planned it all. Surely it would be bad taste to simply not go, and there was little that could be done in two hours when it came to my cat Buster.

However there was a lot of value in going, even though the chances of me winning business through the connections of Refresh Detroit, the knowledge that is shared through such a group of like minded web professionals is invaluable. We all have secrets and methods that can help our industries and business become successful, and it simply is a matter of getting together to share war stories. I even learned of a few local people who are readers of this blog, which is flattering and reason to keep writing. Thanks Karen Tuttle and Jeffy Mackey for tuning in.

This day really got me thinking about the core of what keeps me self employed (and in turn able to employ others), and it boils down to relationships. I may have a skillset that is desirable, and able to use that skill set to provide a valuable service to others… but it is the relationships that I have with current clients, past clients, and will have with future clients that will keep this business moving forward. Even if I was the most skilled at what I do in the world, with out the ability to build and manage relationships no one would want to work with me.

It is often that the account people of advertising and marketing get overlooked despite the fact that their job is essential. Having done (and at this point continuing) both I truly understand the value and importance of managing expectations and relationships with those who wish to give you money in return for valuable services.

Being part of and managing these types of groups and networks is simply a set of the relationships that you need to maintain and grow in order to be successful at the business you do.

With out the networks and relationships you will never be able to achieve the goals you so wish to achieve.