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.

I built my design discovery document through observing and reading about what others had put on their questionnaire, as well as trial and error (finding holes in my creative briefs and then writing questions that would help fill those holes). So to keep giving back to the community I wanted to post a quick rundown of the typical questions I ask during the client kick off meeting.

NOTE: Some of these questions are web design specific, others are more generic, and some I leave out depending on the scope of the project

PERCEPTION

1. What are 3 emotions or feelings a user should feel when they visit the site. Rank them 1 - 3 in terms of importance? (example: excited, calm, happy, etc)






   
2. What are 3 characteristics you want your site to portray? Rank them 1 - 3 in terms of importance. (example: professional, innovative, reliable, etc)







   
3. Do you have any brand colors? If not, what colors could be used to accomplish the feelings and characteristics from questions 1 & 2?










   
4. What types of images or illustrations could be used to communicate the feelings and characteristics of questions 1 & 2?
   

Content + AUDIENCE + TASKS

1. What are the primary tasks that a browser will use the site to complete? (example: register for more information, purchase a product, etc)







   
2. What are 2 - 3 goals you would like the site to accomplish? (NOTE: Goals are measurable tasks such as “increase sales”, or “improve brand recognition.” Putting content on a site is NOT a goal, ie: “Have a photo gallery”)







   
3. Describe a typical site visitor. How often are they online, and what do they generally use the web for? Give basic demographics: age, occupation, income level, purchasing habits. (Use as much detail as possible in profiling your target user. Profile more than one type if appropriate)










   
4. What are the key reasons why the target audience chooses your company’s products and/or service (cost, service, value)?
5. What will be the primary navigation items on the site? (example: home, about, contact, etc)
   
6. Will there be any secondary navigation? If so, on what pages will they be on?
   
7. What utilities should the site have? (example: search / sitemap / help / etc)






   

MARKETING + UPDATING

1. How do most people find out about your product/service or website? What kind of triggers prompt a contact?
   
2. Briefly, what are your short-term marketing plans (specifically, for the site redesign and the 6 to 12 months following launch)?
   
3. Do you have an existing or planned marketing strategy in mind to promote this site launch? If so, please describe.
   
4. Do you intend to keep the site updated? If so, how often? Who is responsible for updating and providing content?
   

HOMEPAGE INFORMATION


1. What content or information should be included on the homepage?









   
2. What elements on the home page will need to be updated frequently?



   

You can also download a sample of our discovery document here.

It seems there is a stage that some designers easily bypass, and others tend to get stuck in. That stage is caring more about making something beautiful, over making something that is beautiful in the right context. A marketing professional that I have worked with before by the name of Joe Radding once said “Everything is marketing. A blank piece of paper is marketing. Everything gives you an impression…” This could not be more true when it comes to design, which in turn creates a problem when your number one goal is to make something visually stimulating.

Of course making a design visually stimulating is important and can have great benefits, after all you have on average 3 - 5 seconds to impress a user and convince them they are at the right place before they leave. However you can give the wrong impression, with the wrong design, regardless of how great it might look. The classic example of this is a bold black background white text design, high in contrast and high in impact… used on a site that is trying to communicate higher level knowledge, education, etc (for example, a database consulting firm.)

This is usually the result of not understanding the brand or an ineffective (and sometimes non-existent) design discovery phase. A well done design discovery phase will leave you with adjectives. Oh wonderful adjectives, and they will make your designs sing. These adjectives will describe the FEELING of the design. How should you FEEL when you are creating it? How should you FEEL when you see it? What emotions will be associated with the brand, and what emotions will the user FEEL when they view it?

These are the good adjectives, and they will often be words like:

• Excited
• Bold
• Unique
• Consistent
• Organized
• Open
• Contained

From those adjectives you can derive DESIGN adjectives. It is important not to let the client skip to design adjectives. Your job as the designer is to make that connection, not them. Design adjectives might be -

• curvy
• sharp
• boxed
• rounded
• dark
• light
• clean
• structured
• simple
• minimal
• photographic
• rich
• earthy

If needed use some sort of mind mapping techniques to really break out what the design should feel like and why. What adjectives should be associated with the design, what feelings should be associated with it… then think about how you can connect those feelings and adjectives with visual representations.

Earthy will likely be organic shapes, earth color tones, and an open unrestricted layout (ie: no hard borders). Where structured will likely be a design with a strong visual grid, clear boxes of content, and hard edges.

Take some time to develop a set of questions that you can use to extract these adjectives out of your clients, and then practice developing those adjective keywords into feelings, design adjectives, and design concepts.

Additionally I am flattered in a lot of ways. There are some very obvious and clear uses of design elements that I developed for this site, but it is not a pixel for pixel rip off. The color scheme, bookmark, etc… pretty clear where they got those elements. However the fact that someone liked this sites design to the point where they felt they should take elements and modify them for their own really says that this design has enough value to mimic.

I am not ashamed to say that I look for inspiration when I work on projects, and while I try and broaden my inspiration beyond the web there is no doubt I end up adopting techniques and design elements from other websites and designers. Hell, even this site was partly inspired by Airbag Industries. Additionally it doesn’t take much time looking through a lot of the design galleries to see that it is actually widespread, there are a lot of sites that adopt the same design styles and design elements. All of those styles started with one site, other designers liked it and mimiced the effect for their own work.

To say that your work is uninfluenced by anything is a lie, and some people feel they must work closer to what they see and take in than others. Now that is not to say that I am fine with those who steal a design for their own, but there is a level of flexibility in taking a good design and learning from it, using pieces that work, and adopting it for your own. I would love to see people using some of the styling ques of this site more often.

Maybe some day if I reach some level of stardom I will get grumpy and change my mind, but for now thanks and thanks.

What are your thoughts about stealing work? Where do you draw that line? Is this situation too close to my design, or did they alter it enough to make it their own? I would love to hear your thoughts.

However, Verizon Wireless has disgusted me with in a matter of 4 days of getting their service.

Day 1

Bought the LG Voyager, came with a kit of equipment (holster, bluetooth, car charger), purchased the most expensive plan at unlimited data, txt, minutes, etc…

Day 2

Went to call customer service to port my old phone number over to the new phone. Can’t find the customer service number anywhere. It is not in the phone, or in any of the books that come with it. I had to call the billing phone number and get transferred.

Representative asks me a few questions regarding my information for the porting process. Tells me she needs to transfer me to the “porting center” to complete the process. Transfer is messed up and I get kicked back to the main menu. Upon getting a hold of a new representative and explaining the situation, she says my port went through and that with in 2 hours or 2 days the phone will stop being able to make out going calls and all I need to do is hit *228 to activate it. Fair enough….

Day 3 / Day 4

Number doesn’t transfer over, no big deal…

Day 5

Decided that the Voyager was not for me. Not great with e-mail, no real good applications to read books, RSS feeds, etc… Plus it keeps telling me that my applications have “expired” and that I need to pay to reobtain them? (My e-mail has expired?)

No problem, the Verizon sales person told me I could change the phone with in 15 days if I don’t like it. Great!

Head to the mall to replace it, wait 20 minutes in line because there are three people before me that need help and one sales rep. Great staffing…

Rep tells me they are out of blackberry curve phones and to visit a new location, fair enough.

Drive down to the new location where there are three sales reps and three people ahead of me that need help. I wait 30 minutes while they take their time helping customers, spending long periods of time in the back room “transferring numbers” while I and the long line behind me wait to actually get help.

The customer behind me comments “I hate coming in here, I always end up waiting 30 minutes. Sometimes I come in here and people are just standing around not helping customers.”

A customer at the front desk being helped mentions “I was in here the other day and they were helping new customers over existing customers.”

When I finally get my chance to go up, I explain my situation. I am told right off the bat that there will be a $20 activation fee for switching phones… great, was never told that– but whatever.

While looking at the receipt she notices that the phone clip that was part of my original package was actually rung up as phone case and she can’t return it. I will have to exchange it back at the original Verizon station. Great…

Additionally I am told that I can only switch the phones once, am I sure that I want this phone? Well after 45 minutes worth of waiting I hardly want to spend more time nit picking over phones and asking questions, especially with 4-5 frustrated people in line behind me, one of which only wants to pay her bill. So I agree that it is indeed the phone I want.

The rep starts trying to switch the phone over, pauses while staring at the computer and says “Why are you doing this to me?”

Turns out that because my phone number was never switched over, it has a future dated order and she can’t switch the phones.

To try and fix the situation she calls up the customer service phone porting number. The representative who answers the phone asks her a few questions, before she puts the headset down, puts it on speakerphone and says “The phone is hurting my ear.” At this point we are trying to hear and talk to the phone-rep while two other in store sales reps are asking and talking to the other customers in line. Great…

The rep informs us that I was never put through the “port confirmation” process. After I go through this process I will get a text message with in 2 hours to 1 day that will confirm the port has completed. So much for the information I was told on day 2 regarding the phone not making calls and activating it.

I ask why I was never put through the confirmation process or why I was told conflicting information she simply reads off why I need to go through the port confirmation process again.

After going through the port confirmation process the rep comes back on and asks me for the password for the previous carrier account… a password I don’t have with me. With out that password we can not port the number, I can not switch phones. At this point it would be an hour wasted.

Keep in mind it has been clearly explained several times at this point that the reason we are calling is so that I can exchange the phone. I have to bring up and ask if I can simply cancel the port. This of course sends the phone rep into a whole speech about how I could get a new temporary number, and port the number later.

The in store representative has to ask why I can’t just keep my existing temporary number and port it over later, to which the phone rep again goes off and talks about how I can cancel the existing temporary number and get a new one.

Meanwhile I hear a customer next to me get asked if they would like to consider upgrading their minutes when their service is up next week, to which the customer responds “I am NOT going back with Verizon.”

We finally sort out that I CAN in fact keep my existing temporary number and just cancel the port. The in store representative hangs up on the phone rep before she can finish her “end of call speech” about what we did and what I can do if I have any more questions.

At this point it had been over an hour and the store was closing, I was the last customer in the store. They lock up, and my representative worked on setting up and activating my blackberry.

While waiting for the activation my representative pauses to try and smash an ant on the wall with a stapler. She comments “God I can’t wait for Orkin to come next week.” One of her co-workers says something, and she responds “I think they are coming out of the bathroom.”

Another co-worker answers the phone, sounds like her boyfriend. She says “I am still at work” and hangs up. The rest of the workers begin joking around about significant others who call at work, and other personal life related gossip.

Finally I am given the activated phone, a mere hour and twenty minutes later.

More food for thought, last Friday Nicole whole is also on Verizon went to have her phone numbers transfered from her old phone to her new phone… They accidentally erased all of her numbers on her old phone. Their consolation? Waved the $15 transfer fee… wow.

Even more food for thought… I went to Jimmy Johns for dinner next door after Verizon Wireless, they had me paid, my sandwich made, and me out the door in less than three minutes.

It is unfortunate that the state of the wireless industry is at this level. If you talk to anyone with any service they are not completely happy. Additionally in talking to other marketing professionals I have learned that all of the phone companies are competing to switch customers over from each other, there is NO focus on retaining existing customers.

This means that all they care about is getting you to sign that two year contract, who cares if you are happy after that. Who is going to spend the cancellation fees?

I plan on contacting Verizon customer service and telling them my story, I will post any updates here. Has anyone else had good / bad experience with Verizon, or any other wireless carrier?

Update

Verizon, in it’s efforts to continue to want to keep their customers dissatisfied has again treated me horribly. Upon calling again to get my number ported over, I am given conflicting information again from the Verizon representative. They now state that it will take 72 hours, and they are going to mail me a consent form. Uhh ok… upon questioning this situation I am transfered over to 3 different people, all who ask how I need help and forward me on to the next person.

When I get someone who seems to be able to help, he tells me that I can confirm over the phone. I go through the steps to confirm, and again I am not asked for a pass code. This representative states I don’t need it and that I will get a text message with in 1 hour to 1 day.

Alright, fair enough. I have had enough of this, and call to speak with a manager.

The first customer support representative I am connected to interupts me half way through me explaining why I want to speak with a manager laced with attitude asking “Sir, you have only had the service for 5 days, you haven’t even recieved a bill, what problems could you possibly have?”

I explain… and she puts me on hold to talk with another manager. I am placed on hold for 15 minutes, where manager “Justin” comes on the line where his tone pretty much sums up that he couldn’t care less. I explain the situation and he tells me “I am sorry, we can offer you a $35 credit to your account and forward a complaint to the store.”

Um, $35 at this point is an insult. I have wasted ten times that in billable hours. How does a complaint to the store help me at all?

I explain this, and he says “I can’t do anything but offer you a $35 credit.” Despite telling him that I am extremely dissatisfied with the service, and am prepared to tell anyone NOT to go with Verizon in addition to the fact that I just signed up for a $3,600 contract over two years, he failed to make any effort to change my opinion.

This means either A) Manager Justin is not fit to be a manager, or B) Verizon doesn’t give their managers enough power to actually correct issues that have caused great customer dissatisfaction.

EXPLORATION

Exploration is really two phases in and of itself, as you have two areas to explore and gather information from. One is the clients themselves, learning what they want, their needs, and their expectations is critical. Secondly doing your own exploration and research into the industry, their competitors, will give you a whole new perspective on the project.

Kick Off Meeting

Exploration on the client end usually starts with a kick off meeting. Use the kick off meeting to find not only the technical and information requirements (what exactly is going to go on the site/page), but this is a great opportunity to ask a lot of probing questions as to how the website should communicate and what usability considerations are in play.

Now I avoid saying “how the website should look” because a lot of people who are not trained have passionate opinions on that question and it is not always linked to communication. Instead I want to move deeper, almost into a “brand messaging” level to really get to the core of “What is this group all about?”

Example Questions:

• What should the users first thoughts be after seeing the site design?
• What is the age group of the common user?
• What is their level of technical ability?
• If you had to boil it down to one specific goal, what is the primary goal for the website?
• What are some tasks that users will be performing on the website?
• If the design could say one sentence, what would that sentence be?
• How can we visually communicate that sentence?

The idea is to get them thinking about the message and how that message can be communicated graphically. Now what I have found in many cases is that the untrained people in the meeting might have some vague ideas that may or may not be valid, but this is a perfect way to steer the group towards your expert thoughts and ideas while still letting them feel like it was their group ideas.

External Research

After you have learned as much as possible about the client(s) from their own perspective, it is time to do external research and find out what their competitors are doing and what other people think of them. Their competitors are easy to investigate, simply firing up a web browser and search engine can give you a wealth of knowledge about them ranging from their communication strategy, to reviews/opinions about them.

However to research the client further I will often try and get a list of average customers lined up and give them a quick call and ask them 3-5 unobtrusive questions to see what the general perception of the client is. You could ask them to perform a survey if they are busy, or if you have more than 5 questions to ask. The goal is to really learn the true perception rather than the assumed perception.

Communications Strategy Document

Sometimes this is also referred to as a creative brief, but we tend to call it a communication strategy document simply because we
feel it fits better. This may feel like an extra step but I assure you it saves time in a way you couldn’t imagine. The benefit is really two fold.

1. It requires YOU to think about everything you have learned, what the client wants to communicate, the contradicting perceptions, and HOW you are going to do it. If you have ever found yourself hunting through design galleries or sketching trying to figure out how to get a look and feel that seems to “fit”

   Ask yourself questions, such as “How can I communicate young and edgy, and put that into words?” or “The company is very free spirited and wants to communicate ease of interaction, does that mean rounded flowing design or open and clean?”

2. It also puts the client on the same page as you in terms of how the design should look. When you have a 1 – 2 page document that explains how the website should look and feel and WHY it is almost impossible to say “No, that doesn’t make sense.” Further you can get the client to sign off on it, which will be a subconscious “I agree” on the clients side. This will make it much less likely that the client will object or want to “play around” with the design concepts presented.

You will find that your design revisions drop dramatically, and if there are revisions they will be simple and minor compared to “Lets try a different look” type of revisions.

WIREFRAMES

At this point you have a choice, you could develop wireframes or you should move straight into photoshop. For me this really depends on the client, as sometimes wireframes can feel a bit limiting. There might be 2-3 different locations that the navigation could go and still be completely usable. In this case a signed off wireframe could limit my creativity.

However if I am dealing with a client that has more than 2 – 3 decisions makers, or they seem extremely opinionated and likely to draw out the creative process I will start with wireframes simply because it makes it harder to want to “try” different design decisions. Again the goal of the wireframe is to block out where the different elements of the website will be located and get the client to sign off on it. It is a mental “I agree with what they came up with” and a commitment on the clients part that makes it hard to go back and ask for changes, and if they do you are fully justified in asking for more money (due to increased time on the project.)

DESIGN MOCK UPS

Now I am not going to talk about doing the design mock-ups themselves, rather how you present them. I deeply believe the designs should be presented in person, in a browser, in the form of a web slideshow.

What we do is have an explanation page that links to the mockup page, followed by another explanation page followed by the second mockup page.

Explaining your design decisions before you show the mockup to the client gives you a chance to talk about all of the things you tried that didn’t work, you can re-enforce the communication strategy, and talk about every nuance of the design. By the time you show them the design concept they will both be nodding their head in agreement, but also eager to see the masterpiece you have created. It will prevent you from having to DEFEND your design decisions (which becomes a YOU vs the CLIENT situation) and instead you explain them before hand and they just make sense when the client sees it.

Secondly by showing the client on a screen in a browser you will avoid the situations where the client likes/dislikes something based on the fact that it is not being displayed in its natural environment. The most common situations are when a client prints out the design concept and wants something bigger because it doesn’t take up half the page, or later they find that there is content below the fold and they don’t like that.

If you present the mockup like it is a masterpiece that will move mountains the client will feel like it is too. It gives you a chance to really sell and presell your design in a way that simply opening up a PDF or JPEG could never do. Again this will save countless hours in revisions and you will end up with a stronger design for your portfolio because it won’t be washed out by the opinions of 4-5 different people on the design committee.

CONCLUSION

The real gems that I get out of this process is a better understanding of what I should be communicating, and the process of thinking and writing out what is the best visual way to go about the communication. I have always worried more about creating high quality work than time/budget, however there is the added benefit of a smoother and quicker creative process because you keep the client agreeing with you with out unnecessary design review and justification steps.

Pay Attention To Your Copy

After you have thought about and planned your landing pages sales funnel (as seen in “Optimizing your Landinag Pages, Part I,” you should take a careful look at your website copy. The copy and content of your landing page is going to make or break it, so it is important to consider a few things right off the bat.

MAKE SURE USERS FEEL LIKE THEY ARRIVED ON THE RIGHT PAGE

Have a high bounce rate? Chances are users end up on your site, don’t get a good impression that it is the page/site they were expecting, and press the back button. The first thing your copy should address is ensuring that the users are at the right place. Users often take less than 10 - 15 seconds before they make a judgment to read further or keep hunting.

Here are some ways to do that:

• Make sure the first headline matches the link / source they clicked on
• • Advertisement
  • Search Ranking
  • Print Ad
  • TV Ad, etc
• Have a supportive picture that illustrates how they are on a page that has what they are looking for.
• Bold, or link any relevant text to the topic/niche

At a glance the users should know definitively that your site has what they are looking for, and it is not a waste of time to hunt further.

MAKE SURE COPY IS SCANABLE

The next major step to optimizing your copy is to ensure that it is scanable. Until the user has a very clear sense that you offer what they are looking for they are not going to read, they will simply scan. If you read the previous article you will know you are trying to move them from the attention phase to the interest phase.

Ways to make your text scanable:

• Break up large blocks of text with headings and sub headings
• Anything you can break up into lists (bulleted or numbered) do so
• Bold relevant keywords, ideally you should be able to read all the bold words in a sentence and know what the paragraph was about.

FORGET ABOUT FEATURES, TALK ABOUT BENEFITS

All too often people get caught up in talking about the features their product or service offers. Forget about the features. Features are what the providers are interested in, the end users don’t care about features they care about what they will be getting out of it.

Examples of features:

• 250 Horse Power
• Built on Open Source Technology
• Monthly Reporting Provided
• Built using XHTML / CSS

All of these sound great right? Only if you know what the benefit of those are. The average user isn’t going to have a clue why XHTML/CSS is better than anything else. Instead talk about the benefit they will get.

Benefits of above features:

• 250 Horse Power
  • Enough pick up and speed to get around town safely and still have fun
• Built on Open Source Technology
  • Built using open source technology, which keeps costs down, and you will never have trouble finding someone who can work on your system.
• Monthly Reporting Provided
  • See and monitor the progress and improvements month after month so you can prove to the CIO and CEO how smart this decision was.
• Built Using XHTML / CSS
  • Built using the latest coding practices so that the pages load quicker, are search friendly, and take less time to update and maintain.

Sounds a lot better right?

KEEP THE COPY INTERESTING

When you do get the reader interested enough to read through your copy reward them. Dull copy is hard to read, and if the user doesn’t read they will never desire your product. While every landing page and brand will require their own twist of a brand voice, work with in what leeway you have to spice up the copy so its actually becomes worth reading.

Keep in mind that the headline should make you interested enough to read the first line of the paragraph, and the first line of the paragraph should make you interested enough to read the rest.

ADD A CALL TO ACTION

When you have finished your copy, spell out what you want the user to do. Often times you can get a user interested, and get them to desire your offering, only to leave them wondering what they should do next. Make the call to action a clear link on the page, and specifically tell them what they should do.

Example: Get started by filling out our order form

EXAMPLE, PUTTING IT ALL TOGETHER

LOOK NO FURTHER FOR AWARD WINNING BLUE WIDGETS

I hope you are not one of the people who settle for off color, ugly, and awful craftsmanship in their widgets? Maybe you should just stop and think about how the right colored quality widget could improve in your life. The savings of inferior widgets simply don’t outweigh the benefits over great ones.

• By using the high quality blue color, you are ensured that widgets match your operation seamlessly. This will instill customer confidence, which will lead to more sales.
• Using the latest manufacturing techniques we can create widgets that are nearly fail proof, preventing time and money lost when your production stops to replace widgets.
• Special widget coating prevents wear so you can go up to three times as long with out spending the time or money to replace the widget.

We offer a 100% satisfaction guarantee so there is no risk. Save money, increase revenue, and improve your business today.

Click here to order our blue widgets online

In the development of web pages there is an unfortunate trend that places more time and effort on the visual design of a site rather than the usability and sales funnels. There are a lot of great looking websites on the internet that truly are stunning, but fail at all business objectives. One of the first places you can start in the optimization of your sites business objectives would be your landing pages.

A landing page is simply any page where a user is likely to enter into your site. This might be a URL that is on print/traditional advertising, or a URL in which you send a user from a PPC advertisement. If you optimize interior pages for search results those could be landing pages as well.

There is a whole process to getting more out of your landing pages, so I will be splitting this into a blogging series. Today we will talk about planning, the next post will be about developing, and finally I will post about measuring and optimizing.

A I D A S

AIDAS. One of the most important elements to the success of your landing page will be how much planning and thought you put into it. Too many people throw up a landing page and just copy/paste content over with out really thinking what is going on the page and why. Remember, web users have very short patience and are quite fickle. It doesn’t take much for them to hit the back button.

AIDAS is the very first order of business when it comes to landing pages and conversion based websites online. What is AIDAS? It is the process in which every visitor goes through on their journey to converting. People may come into the conversion tunnel at different places in the process of AIDAS, and people may drop out, but it is our job to appease any concerns, questions, thoughts so they can move on to the next stage of the tunnel and eventually convert.

AIDAS = Attention Interest Desire Action Satisfy

AIDAS stands for Attention, Interest, Desire, Action Satisfy. Let’s look at these stages in depth and talk about what we can do to help a user move from one to the other.

Attention

This is the first stage, and it often consists of the user ensuring that they are on the right page or site. When a user is searching for information, a product, or service, they are likely to browse through 5-10 different sites in the quest of finding what they are looking for. If your site doesn’t look like the right one they will be clicking the back button and finding the next site.

The users thought process often follows these points:

• Am I on the page I thought I would get too?
• Does this site look like the type of site that would have what I am looking for?
• Is it worth looking around or should I find another page?

The best thing you can do to appease the attention phase is make sure the title of what ever they clicked through on is the same as the main heading of the page. If your PPC advertisement says “Magic chewing gum” your main headline should as well. If it says something else the user may think that it is not exactly what they are looking for and move on elsewhere.

This is where initial design credibility plays a large part. If your site doesn’t look credible the user might be disenchanted and click away to a different site.

Interest

Once you have their attention they will begin to start looking around for what they want to find. This commonly is referred to as “information scent,” where they are looking for anything about their search that will make them interested. It is your job as a web designer/developer to lead them to the right area of your site or page, and get them interested.

The user is most likely concerned with the following:

• Where should I click to find out more information?
• Is there something on this page that describes what I am looking for?
• Can I trust this website/company with my financial or personal information?

The tricky part here is that users are often in a huge hurry. They are not likely to read through all of your copy, so it is important to use techniques that allow easy scanning of content as well as pictures, diagrams, and videos to get the users interest. There will be more about this in the second installment of this series.

At this point in the stage you want to minimize any and all distractions. This is often why successful landing pages are very focused, preventing users from getting off out of the tunnel accidentally. It is not uncommon to remove traditional navigation bars/elements in favor of targeted in copy text links.

Desire

Once the user is interested they are going to take more time to really assess what it is you are selling to see if it fits their needs or not. If they have gotten to this stage it means that they have found the part of your site/page that describes what you offer. Kudos. Now they just want to know if you offer exactly what they want or not.

They will scan less and read more, take additional time to watch videos, look through pricing, etc. This is where a lot of the work comes in, where previously you were just trying to assure them they were on the right page and they shouldn’t leave; you now must convince them to part with their highly valued money, time, or information.

This is the part where you want to talk about benefits, not just features. Make sure your USP is clearly defined, and you answer any and all questions including price point, support, how to order, shipping information, returns, contact time, etc…

The user will have a lot of questions and objections about your product/service and in order to get them to the next stage you must have all of those questions answered. Some of them might be:

• Does this product/service do what I want?
• Can I afford it?
• If I don’t like it, what happens? Can I return it?
• Can I trust this company if I do want this product?
• Are there other products/service that are better?
• Will this solve my problem?

Action

The action used to be the most important part of the process, however it has been replaced by “satisfy.” I will discuss satisfy. in a few moments. The action is where the user actually takes action to convert. This might be filling out a form, purchasing an item, etc.. The key here is to make taking that action easy and spelling out how to complete that action. This is often referred to as the “call to action.”

This might be “add this item to your cart,” “check out to purchase,” “contact us today to start,” etc…

In order for a user to take action and convert all of their questions and objections must have been answered and appeased in the interest/desire stage. If you don’t then chances are they will be looking to the next site to purchase or take action. If they can’t figure out how to take action or what to do next, then they will be going to the next site to purchase or take action.

Satisfy

This is now the most important step in the whole process. You must satisfy the expectations of the user, meaning they should get exactly what they thought they would when they completed that action. It might be that you contact them in a timely manor with more information, or that they get the product they ordered with in your shipping guidelines. They might expect a specific level of communication through out the whole process.

Failing to do so will result in an unhappy user/customer, and they are likely to tell 10 other people about the experience vs 2 that they would tell if you gave them a great experience.

Additionally, would you read or be interested in a series of articles that discusses methods optimizing landing pages and testing them against each other?

This is not with out drawbacks however, even if they are slight. Those publishing information about the web design tend to get the most recognition if they are a part of this group of web celebz. This isn’t to say that those books are not worth their weight in goal, but we tend to skip over books of incredible value because they don’t get the buzz of all the web leaders talking about.

Here is a list of ten great web design books that you may have missed…

1. Web Design and Marketing Solutions for Business Websites

By Kevin Potts of Graphic Push

It has always surprised me how little buzz this book has generated considering the quality of the content. Maybe the title is misinforming of what the book is about? Kevin really paints a great picture of how you should go about developing a great website for businesses. From developing goals, measuring the goals, drafting great about pages, to online advertising you really owe it to yourself to read this book.

2. Call to Action: Secret Formulas to Improve Online Results

by Bryan Eisenberg, Jeffrey Eisenberg, Lisa T. Davis

This is an amazing book about optimizing your website to achieve higher conversion rates and accomplish your websites goals. With a mix of usability, web copy, and user psychology, the book mixes studies and research to craft information worth its weight in gold for web developers/designers/planners. After reading this book we were able to mix their process into our web projects, and building “conversion focused websites” is one of our selling points.

3. Designing Web Navigation: Optimizing the User Experience

by James Kalbach

Maybe it sounds too specific to write a whole book about, but there is a lot of valuable information contained inside the Design Web Navigation book. The navigation of your website is a critical point of user interaction, yet so many people barely give it second thought. This book walks you through human information behavior, how to build your navigation for information scents or information shapes, and how properly designed navigation can actually improve branding and credibility.

4. Web ReDesign 2.0: Workflow that works

By Kelly Goto

Most of us work on the development of websites on a daily basis, but hardly put a second thought into our workflow and the most efficient way to delivering a successful website. This book walks through a proven method for estimating, managing, and delivering successful website projects with out falling into the pitfalls such as scope creep, missed deadlines, etc

5. Web Form Design: Filling in the Blanks

By Luke Wroblewski

Web forms are far from the sexiest part of being a web designer, but they are a critical point of almost any website. Very few sites these days lack a web form, and web forms are the ways that users can truly interact with the sites that we build. Yet so little attention is given to forms, they are considered to be a hassle to design, program and implement. Yet countless studies have shown that properly designed forms have increased conversion rates in ecommerce situations, leads, and user participation. This book goes over all the information you should consider when design a web form, and you may find a new appreciation for designing web forms.

6. Information Architecture for the World Wide Web: Designing Large-Scale Web Sites

Louis Rosenfeld, Peter Morville

Information architecture doesn’t always get the respect that it deserves. Too often people simply assume that they know what pages, content, and information should go into what sections. The reality is that it takes a lot more than assumptions and guesswork to really organize a large website in a way that is easy to comprehend, use, and understand. This book walks you through everything you need to know to create large enterprise level websites and intranets. Ignoring IA is a sure recipe for failure.

7. Building Accessible Websites

http://joeclark.org/

This book tends to be talked about more in regards to the cover and it’s similar appearance to internet shock pictures. While you would hope the publicity would get more people interested in accessibility and this book, it doesn’t seem to get the recognition it should. The book is a masterpiece in describing the importance of creating accessible websites, and how to do so properly. If you are on the fence about the importance of web accessibility, or would like to add accessibility to one of your skill sets then you owe it to yourself to pick up a copy of this book.

8. HTML Mastery: Semantics, Standards, and Styling

Paul Haine

A unique idea, a book about the deep roots of semantic HTML itself. What sounds like a boring read is actually quite thrilling and interesting. Anyone who loved “designing with web standards” or is a front end developer should consider reading this book to remember all that is given to us with just straight semantic HTML. It refreshed my mind as to the possibilities of XHTML and since I have started using tags that I had long forgotten or failed to see the value in.

9. Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional

Christian Heilmann

Sure Javascript Libraries like JQUERY or MooTools are all the rage now days, they do speed up development, etc… but actually knowing javascript is extremely valuable. Even if it is at a basic level so that you can leverage those libraries to their full advantages. Chris Heilman has written a great book that teaches everything from the most basic javascript and DOM scripting to using full featured AJAX calls. I have read a handful of the other popular javascript books and none of them are as all encompassing as this one. Perfect for any javascript newbie, or middle level javascript user.

10. Balanced Website Design: Optimising Aesthetics, Usability and Purpose

Dave Lawrence, Soheyla Tavakol

Balance in web design is one of the great difficulties we all run into. It seems the more people you add into a team the more people are focused on one aspect of design or another, but balance is rarely achieved. All too often people focus on design over usability and user experience, or even focus on UX with no accord for aesthetic appeal. This book walks you through balancing the aspects of web design to produce a better website overall. The best websites we use day in and day out are the ones who are able to find that happy medium that appeases users at all levels.

Don’t take a job just because you feel antsy about getting work

The mistake I made over and over because of this feeling was getting into projects that I knew were bad ideas. Now there was a post about firing your client that really reminded me of this. There is a tendency to accept any work you can when you feel like things are slow. It happened to me when I first started out, it happened to me again earlier this year when I merged companies. You need to have faith that if you do good work and get your name out there the demand will come. You do more harm than good getting into projects and jobs with people who are abusive, unrealistic, clueless, won’t pay, etc…

It happened to me many times

In one case I agreed to do a website for less because the prospect said “I promise we will keep it easy.” When the scope changed drastically (into the use of AJAX and flash) I informed him that I would have to switch to hourly because there was no way to estimate the amount of time it would take to complete the project. At the end he questioned the billing and the company got paid less than the amount of time spent on the project. The request for a lower cost, and the reasoning should have been the first clue. I knew it was a red flag, yet I ignored it.

I promise there is enough demand, be patient

There is enough demand in web design/development where anyone reading this could make a good living doing it if you care enough to push for it and learn to do great work. Sure there will be times where you are watching your spending closely, but the demand will come.

Instead of taking that job that your gut tells you is a horrible idea, spend more time working on marketing yourself. Spend the time you would have wasted in meetings that never lead to a paycheck and go to some networking events. Participate in some local groups. Get your blog going for some natural SEO benefits.

Sometimes you don’t see it coming and you do have to fire a client you thought was great. But 90% of the time it has happened to me I saw it coming, I just ignored it because I wanted the work in a slow period.

Some simply wanted to outline what exactly they were creating, draft a bulletproof plan, and be ready for funding come Monday. Others had the ambition to get the product design, coded, and launched by Sunday nights presentations. Others simply worked so they wouldn’t think about all the beer they would not be drinking that night (me), and finally there were at least a few who worked hard and quietly because they had too much beer the night before (me).

My team planned to develop an SEO tool, and we had set out to define the marketing plan at the start of day one. This included all of the fun stuff like feature set, branding elements, the name, etc… We finally settled on the name “Seo Anchor” because of the readily available domain. Somehow we overlooked the fact that anchor’s sink, and well in SEO sinking rankings is like pissing your bed. You don’t want it to ever happen, and if it does you certainly don’t want a tool measuring the extent that it happened (no I don’t have any experience at that).

Not being a backend developer I left the work to team mates Winston Tsang and Lance Carlson while myself and Sunny Beach worked on design, IA, and branding.

By the end of day three we did have something to show, a lot of the functionality was working… however it is not quite ready to launch. Stay tuned for the details…

The presentations of other teams projects really was one of the highlights of the whole experience. I have always been a huge fan of Ann Arbor and the talent that comes to a city like this, but the ideas that were developed blew me out of the water. Everything from artificial joints that have little wear due to magnets, corporate SMS marketing, an iPhone Geo Tagging application, to a non-profit that aims to identify and reuse the components and materials in our every day junk.

I hope that every company that was “started” in this three day event keeps pushing to make the work into something real and genuine. Cheers and stuff.

Being somewhat of a serial entrepreneur myself (although admittedly not a great one) it was hard to resist the thought of coming to start up weekend and see what two cents worth of contribution I could add to a group.

My initial thought of what the weekend would be is drastically different than explained however. While I originally envisioned a wonderfully dry weekend of being walked through the official steps of how to start a business (incorporating, legal documents, etc) it turns out it is more of a “come up with ideas, join a group, and do what ever the frack you want.” Fair enough…

We had a massive pitching session (35 entries), which ranged from simple but genius ideas, to ideas I didn’t understand in the least bit (not sure if that is my fault or theirs, you be the judge) to incredible ideas that are probably too big and great for a 3 day weekend marathon.

Afterword’s we convened into the groups that interested us, and were sent off to do what ever the hell we wanted too in order to build a company. That was day one…

While Doug’s job is the business development of the manufacturing vertical at Adobe, through his presentation I learned of a lot of exciting features that will provide huge advantages to us web designers / developers.

PDFs, more than documents

Many people (me included) have become to think of PDF’s as simply a format for rendering documents across browsers/platforms. However there have been a lot of powerful features added to Acrobat that extends the functionality much beyond document rendering. This new release for example, boasts an impressive 350 new enhancements to PDF’s and PDF creation.

New Features

One of the most powerful new features of Acrobat 9 is the integration of different media types including Flash. We now have the ability to embed not only flash video into PDFs but also Flash Applications. I assure you this opens more possibilities than simply being able to add a video into a word document. Consider the ability to easily create a PDF portfolio built on flash. You can send your clients on PDF file that only requires a free reader, and they can browse through all of your work in a nicely defined and professional PDF “application.”

More on portfolios

The new version of Acrobat also offers the ability to create a specific compound package called a “Portfolio.” A Portfolio is a pre built flash application embedded in a PDF that can contain any file that you would like it too. For example this could be 5 images, 2 pdfs, 1 flash video, and a word document. Rather than send a prospect your image portfolio, maybe some rich media you have worked on, and your contract all in separate attachments you could instead package them into a portfolio and send them one PDF. The Portfolio has a pre built impressive navigation interface based on flash (kinda feels like itunes), and will automatically launch any embedded document in the appropriate viewer.

Capturing Web pages

The third feature that truly excited me was the ability to capture entire web sites. And by capture I don’t mean take a screen shot. Acrobat 9 has the capability to actually capture live entire web sites and deposit them into a PDF — fully functioning. It seems like a lot of server side scripting won’t work of course, however if you are producing a brochure site you could send a client the progress of your site in a fully functioning PDF. They could click through every page and see all of the flash, javascript, images, etc just like it was a web site.

Clients could then go through the entire site and add comments, notes, etc to every page before sending it back to you with all the attached feedback. Much better than any other solution I have encountered for feedback workflow and web pages.

Acrobat.com

Finally Acrobat 9 has full support for Acrobat.com, a free online service that allows you to share and collaborate on PDF documents live with other people around the world. Very powerful for document development and creation.

There were a lot of other features in Acrobat 9 like full 3D rendering support for CAD/Engineering files, forms, etc… but these were the features that seemed most beneficial to us web developers.

GIFs can still be a very powerful tool, and the fact that they have been long forgotten gives me an opportunity to brainstorm what you can do with them.

One of the more powerful capabilities of CSS is the use of the :hover pseudo selector. It is one of the only abilities we have to alter the behavior of a website simply through XHML and CSS (and there is a debate if this even should be done, but this is more about capabilities rather than theoretical debates of what should/shouldn’t be done).

Because IE6 has shoddy :hover support on non anchor elements, the most logical place to use this combination of :hover and animated GIFs will be in a menu item. However you could easily use this same technique on any element and just count on the modern browsers being able to take advantage of it.

The Plan

So what we want to do is have an item appear static on the page, until we hover over it. Once hovered it will start a simple animation to enhance the interactivity of the site.

For this example we will be creating a menu, each menu item will have a little glow below it. When someone hovers over it we want the glow to pulse and some stars to rise from it - kinda magical or something along those lines.

THE TECHNIQUE

We will be using CSS Roll-overs to produce this effect. The trick with CSS Roll overs is to create an image that has both image states (the non-hover state and the hover state) in the same image. Then when you hover over the link it shifts the background-position of the roll over to reveal the hover state below.

Here is an example of the normal state (the left side), and the hover state (the right side)

We use this method over a different image on the hover state because many browsers get a flicker the first time you switch the images.

The basic code:

#main_nav a {
	display: block;
	width: 150px;
	height: 150px;
	background: url(menu.gif); }

#main_nav a:hover { background-position: -150px 0; }

Essentially all you do is shift the background image one cell over (150pixels, the width of the tab) and it shows the hovered state.

THE ANIMATION

Using photoshop we can pretty easily create an animated GIF. I am not going to teach you how to do it, but if you don’t know how read this tutorial. Now what we are going to do is create an animated gif of the same navigation tab above, but only have one side/state animated.

We end up creating 15 frames which the animation cycles through, here are a few so you get the idea:

When the item isn’t hovered on it looks stationary, despite the fact that the hidden area is in an animated loop the whole time. When we hover over the item it pulls the animated portion into view where it causes the stars to move upward and the glow to pulse.

THE LIMITATIONS

Because we can only set it to either loop once (which it loops immediately and we miss it) or repeat we can only do animations that have a seamless loop. Additionally since the animation is looping all the time we are somewhat limited in the animation because someone might hover over the element at the furthest frame from the start creating a bit of a jump. So the animation has to be subtle (which is good anyways, lets not take animation too far.)

Example Page
DOWNLOAD EXAMPLE FILES + TEMPLATE

I am constantly reading taglines or USP (unique selling positions) of web companies that sound something like this: “We create attractive websites that are usable and easy to update.” Sure it gets hashed into several different ways of saying the same thing, but it is very uninspiring.

Easy to Manage / Easy to Update - This means either you are creating the site in CSS or with a CMS. Well in this day in age that really is not a benefit. Most developers are using CSS, Standards, and a CMS. You are not going to win anyone over by saying that you do that.

Attractive / Beautiful Websites - This is a hot topic, yet thousands of great designers are out there and guess what most of them are better than you (and me, I fully understand my place/level in the design world.)

Think about a more powerful selling position, like “We create websites that move the needle.” Who wouldn’t want a website that had measurable business results? Focused more on design, “We design sites that make a profound impression.” Much more inspiring isn’t it?

Really think about what you have that is an advantage to your company/freelancing compared to your competition
and develop an exciting tag line based on that.

I am being vague, but that is the best introduction to the concept that I can think of before explaining further. Color is often one of the first breakdowns in visual communication. There is a tendency to pick and use color based on personal preference, and for anyone to claim they DON’T do this to some extent is lying (myself included). This situation increases in complexity considering everyone understands color differently, sees it differently, and has different color preferences. Despite the inability to accurately pick color to communicate exact messages, color is still an extremely powerful method of communication and ignoring the message that colors transmit will weaken the impact of your work.

Now the most common application of this situation that I encounter is of course through design work. Color or even the lack of using color is one of the fundamental tools we use in design, but all too often I find myself using different colors from the developed color palette because they just feel right in a specific spot/area. While I pick the color palette based on the message/tone/target, I rarely think about the correlation between which color of the palette I am using and what I am using for.

For example, why are the headlines in the dark green vs the black? Well dark green looked better.

And maybe this is OK at times, but really we should always be thinking about the meaning. Friend and UX expert Brian Kerr first brought this notion to my attention not to long ago. While collaborating on a project with Kerr, I had used red for an icon of a stop sign for “report this photo” and gray for an icon of “view more photos.” This made sense to me because red in nature and in our lives is an “alert” color. However Brian pointed out to me that in the context of this particular site, design, and identity, red was actually being used to show that something was good and gray was being used for things that were unfavorable.

It was at that point I had an “ah-ha” moment. He was absolutely right, and my use of color based on feeling rather than logic and communication would have weakened the design. I was not using color to communicate a consistent message, and this sort of color usage happens all the time.

At the same time you must be careful that the color choice and use of color is clear however, simply assigning meaning to colors and using them for the different meanings with out clear indication of why is simply going to confuse users.

This is something that I am encountering even today, where a client has had subtle color-coding of different product lines for decades. They want to incorporate that color-coding into the website. This might make sense at first glance, however there is nothing on the website that would really make the use of massively different color schemes for different parts of the website something that makes sense to different users.

Navigating to a different page to find that the headlines are now green instead of blue is not a clear way to communicate with color. If color coding must be done in this situation you must find some better way to tie it together so users understand there is a reason for all the pages under one section have green headlines and others are red.

Make sure you pay attention to your color usage, and this goes well beyond what color palette you develop and work with. The use of the colors with in that palette are just as important as picking the colors themselves.

Think about how difficult sIFR or images get when you want to replicate that typography or typeface over 100 pages powered by a CMS. If you can get beautiful type via CSS it makes this situation very easy and with out compromise.

There are a lot of great sites out there that have beautiful Typography using only CSS, however simply looking at them is only half of the picture. We want to know what did they do, and how/why does it result in beautiful type? NOTE: Do not simply steal the design/code/style listed here, learn from it. I have seen a few sites that have ripped off the design elements of these sites and it is awful.

1. Coudal Partners

Coudal Partners

        Small headline

	font-family: Gill Sans, Verdana;
	font-size: 11px;
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;

        Large Headline

        font-family: times, Times New Roman, times-roman, georgia, serif;
	color: #444;
	margin: 0;
	padding: 0px 0px 6px 0px;
	font-size: 51px;
	line-height: 44px;
	letter-spacing: -2px;
	font-weight: bold;

You may be surprised to find out that the serif font used is… *gasp* times new roman! Using a large bold version with negative letter-spacing (-2px) the nuances of the font really create some unique whitespace and relationship with each other. Not using a solid black creates a very elegant look and feel.

The smaller headlines above it are all caps with a moderate letter-spacing (2pixels) and are either gill sans or verdana. Very clean screen san-serif fonts. The close proximity of the two different typefaces and the tension between the moderate letter-spacing and the negative letter-spacing creates a very beautiful typography composition. The tight line height (44px for a 51px font) create close interaction between the ascenders and descenders of the type.

2 + 3. Human Sexuality and the Nuptial Mystery

Human Sexuality and the Nuptial Mystery

HEADLINE
        font-family:Georgia,serif;
	color:#4E443C;
	font-variant: small-caps; text-transform: none; font-weight: 100; margin-bottom: 0;

PARAGRAPH
        font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 14px;
        margin-top: .5em; color: #666;

PARAGRAPH START
        font-family:Georgia,serif;
	font-size: .8em;
        font-weight: bold;
	text-transform:uppercase;
	letter-spacing:2px; 

This site has two areas where there is some really beautiful css typography. The start of paragraphs they use a unique mixture of all caps and moderate letter-spaced type in conjunction with clean easy to read san-serif fonts. Using a tiny bit of margin tweaking they were able to make the serif and san serif fonts flow together perfectly. Additional for headlines they use small-caps font variant with georgia to create a very unique and beautiful headline.

3. Seed Conference

Seed Conference

                Middle Headline

		font-family: times, Times New Roman, times-roman, georgia, serif;
		font-size: 28px;
		line-height: 40px;
		letter-spacing: -1px;color: #444;

                Paragraph Text

                font-family: times, Times New Roman, times-roman, georgia, serif;
		font-size: 14px;
		line-height: 20px;
		text-transform: uppercase;
		color: #444;

                Large Headline

                font-family: times, Times New Roman, times-roman, georgia, serif;
		font-size: 48px;
	        line-height: 40px;
	        letter-spacing: -1px;
		color: #444;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
                font-weight: 100;

Our friends at Coudal partners are back to show us there is more than one way to make times beautiful. Again they are mixing large type with negative letter-spacing to get some beautiful interaction between the different shapes of the letter forms. Using a nice typography baseline the different sizes and typographic styles all keep the same rhythm. The contrast and tension between larger type, italics, and all caps creates a very interest typographic composition.

4. Twisted Intellect

Twisted Intellect

PARAGRAPH CODE

          p:first-letter{
               text-transform: uppercase;
          }
        p {
        color: #424242;
        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-align:center;
	margin: 40px auto;
	text-transform: lowercase;
	line-height: 145%;
	font-size: 14pt;
	font-variant: small-caps;
        }

TWITTER HEADLINE

        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	font-style: italic;
        color: #424242;}

        a { 	font-style: normal;
	font-variant: small-caps;
	text-decoration: none;
	color: #afafaf;
        font-size: 14px;
        }

In this composition we see some daring use of a completely non-standard font, Adobe Caslon. Since the site is most likely going to be viewed by other designers, it is not an unsafe bet that majority of them will have this popular Adobe font (as it comes in all the CS3 suites). If the font isn’t available it falls back to pretty standard serif fonts. The subtle enhancements are what makes this composition so interesting. The use of the css psuedo selector first-letter to only cap the first letter, well thought out spacing, and small caps really make the first paragraph interesting.

In the composition below, the contrast of italics and all caps with different values of gray really create a visually interesting an elegant look.

5. Airbag Industries

Airbag Industries

HEADLINE
        font-family: Georgia,"Times New Roman",serif;
	font-size: 12px;
	font-weight: bold;
	color: #600;
	line-height: 22px;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1px

DATE
        font-family: Georgia,"Times New Roman",serif;
	font-size: 10px;
	line-height: 22px;
	text-transform: uppercase;
	letter-spacing: 2px; 

Airbag Industries does a great job of using very slight letterspacing to give the smaller headlines and dates just a little more breathing room. Any more and it might destroy the surfboard look that the site does so well, and any less and it wouldn’t retain the grid like feel of the entire site. By switching up the weight of the fonts and the colors it creates slightly more contrast. You might almost miss how much thought was put into these headlines, almost a “It looks good but I don’t know why” sort of feeling.

6. Timoni

Timoni

DATE
        font-size: 12px;
	font-family: Georgia, 'Times New Roman', serif;
	color: #000;
	text-align: center;
        font-weight: 100; }

PARAGRAPH BLOCK
	font-family:  'Hoefler Text', Georgia, 'Times New Roman', serif;
	font-weight: normal;
        font-size: 1.75em;
	letter-spacing: .2em;
	line-height: 1.1em;
	margin:0px;
	text-align: center;
	text-transform: uppercase;

Timoni is another interesting site that pays very close attention to the margins and line heights of all the type on the page. Using moderate letter spacing and almost as much space between the lines, a feeling of formality is archived. Where the same fundamentals of type (letterspacing and contrast) created a less formal look/feel on Airbag Industries, this designer used more space to shift the whole composition.

7. Sroown

Sroown

PARAGRAPH
	margin: 0px;
	padding: 0px;
	font-size: 11px;
	color: #fff;
	clear: both;
	padding-bottom: 6px; 

GRAY PARAGRAPH
	display: block;
	color: #666;
	font-size: 9px;
	padding-top: 5px;

HEADLINE
	margin: 0px;
	padding: 0px;
	display: block;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	letter-spacing: -1px;
	color: #fff;
	line-height: 24px;

Sroown takes an approach not yet seen in these examples. Using a standard san-serif font, Arial, and applying some negative letter spacing to make it look thin and elegant. At first glance of the site I hardly recognized the typeface, and figured the designer was using sIFR. Using tight line heights the headline is uniform and balanced. The support copy simply follows a simple baseline and stays out of the way of more interesting type of the page.

8. I love Typography

I love typography

HEADLINE
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size:24px;
	margin-top: 5px; margin-bottom: 0px;
	text-align: center;
        font-weight: normal;
        color: #222;

SUBHEADLINE
        font-family: "Lucida Grande", Tahoma;
	font-size: 10px;
	font-weight: lighter;
	font-variant: normal;
	text-transform: uppercase;
	color: #666666;
        margin-top: 10px;
	text-align: center!important;
	letter-spacing: 0.3em;

“I love typography” proves that the site owner is not kidding with some beautiful headlines (and beautiful CSS type all over the site). In the case of the headlines, the real interesting and elegant CSS typography is the subheadline. Contrasting Georgia with Lucida Sans, a very clean san-serif font (especially when it is all caps) is a subtle way to display class through type. The generous letter spacing really emphasizes each and every form of the sub headline, creating both visual interest and visual communication.

9. The Big Noob

The Big Noob

DATE
      font-size: 85%;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #bbb;
      font-size: 10px;
      font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
      font-weight: 100;	

HEADLINE
        font: bold 34px "Century Schoolbook", Georgia, Times, serif;
	color: #333;
	line-height: 90%;
	margin: .2em 0 .4em 0;
	letter-spacing: -2px;

TAG
        color: #76879b;
        font-size: 10px;
        margin: 5px;
        font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
        font-size: 11px;

“The Big Noob” is no noob when it comes to typography… OK bad jokes aside, here is another great example of contrasting ultra clean, small, generously letter-spaced san-serif fonts, with tighter and larger serif fonts for headlines. In this case the designer applied ample letter-spacing to the date of the headline, negative letter spacing to the headline, and left the snippet from the post in the middle. Because of the alteration of color, whitespace, and font size the whole composition ends up very balanced and visually stimulating.

10. Quipsologies

Quipsologies

HEADLINES
          font-family:georgia, serif;
	  color:#381704;
	  font-size:10px;
	  letter-spacing:0.1em;
	  line-height:200%;
	  padding-top:11px;

NUMBER
          font-family:georgia, serif;
	  color:#3B200F;
	  font-size:16px;
	  font-weight:bold;
	  line-height:125%;
	  text-align:center;

QUIPPED SECTION
          font-family:georgia, serif;
	  color:#786E69;
	  font-size:10px;
	  font-weight:bold;
	  letter-spacing:.1em;
	  text-transform:uppercase;
	  padding-bottom:3px;

 	  font-family:georgia, serif;
	  color:#786E69;
	  font-size:10px;
	  font-weight:bold;
	  font-style:italic;
	  letter-spacing:.1em;
	  padding-bottom:35px;

PARAGRAPH

        font-family:georgia,serif;
	color:#381704;
	font-size:12px;
	font-weight:normal;
	line-height:150%;
	padding:0px; 

Quipsologies finds new and interesting ways to use type all over their site. The great thing is, they stick to one typeface yet make it work for so many different situations. The headline section has ample use of letter-spacing in conjunction with a very wide line-height (200%!). The smaller sized all caps make it easy to read and engaging.

The bolder and larger numbers on the site stick out highlighting the items that have been “Quipped,” really pointing you towards the main reason for the sites existence. The headline previous is more of a general description to be read once to understand, then never again.

The copy text is clean and easy to read due to plenty of line height and Georgia as the typeface.

Finally the quipped section is a lighter brown to take the focus and emphasis off of the element, with a contrasted bold / italics and some mild letter-spacing for a tad extra breathing room.

Done!

Those are the examples that I have found around the net. Are there any that I have missed? Remember, use these examples and the code to learn the techniques that these designers have mastered to enhance their work through typography. Do not outright steal any of it. If you fail to understand it I assure you that it will simply look out of place and detract from the design rather than add to it. And there are many great opportunities to use CSS and typography for great visual effects, don’t be so quick to jump to sIFR or images.

SearchMonkey is a platform that went live on Yahoo! search as of last night, that allows plugins to be written to ENHANCE search results. Meaning that you can turn on/off by preference extra information in the search results. Now of course this doesn’t sound revolutionary, so let me give you an example.

You are searching for information about a movie you may want to rent. Normally you might have to click through 4-5 different websites to get all the details you would like (review, cast, synopsis, and a picture to make sure it is the one you were thinking of).

Yahoo! SearchMonkey would render a listing of the movie with tabs below it that let you quickly open up a viewing area for more information. From there you can tab through the rating/review, the cast, synopsis, etc… with out ever leaving the page.

This is done by people writing plug-ins, or through interpreting the semantic code on the page itself. For example if I know that all upcoming.org events follow the same format, I can configure (and I say configure vs write because Yahoo! makes it very easy) a plugin that extracts the image, the location, the title, a link to the map, and renders them all in the search result.

That plugin can be for my personal use, it can be reviewed for use in the public gallery (anyone can turn it on), and if it gets popular enough it can be turned on by default.

Now the semantic side… SearchMonkey is already going to be using microformats and RDF to pull semantic data out of webpages and will be rendering them in the search results. That means any sites already using hReview will have the bonus of review information showing up in the results. It also means that if you have hCards or hCalendars they will also start to appear in the Yahoo! search results.

This is exciting for many reasons. One it improves the searching experience, by allowing the search engines to provide better data and information that is semantically accurate to those who are looking for specific information. It also will push developers to adopt the semantic web, expand microformats, and get to a point where we can do much more with our websites than we are doing now.

Here is an example, I turned on the LinkedIn plugin and searched for Derek Mehraban. Normally the LinkedIn profile shows up like this:

You get the normal title, a blurb below it, and the URL. Hopefully that is enough to know this is the person you are looking for more information about. However if you turn on the plugin you get the result below:

Notice how it pulls in specific relevant information into the result for a site that has nothing to do with Yahoo? Now we know for sure this is the person we are looking for more information regarding. Excellent.

Give it a try, go to Yahoo and edit your search preferences. The plugins are in the enhanced results section (note it is a little tricky to turn them on, you end up having to click add and save like 3-4 times. I am sure they will work on this).

The real power here is if people start using them more and enjoying them. While only a few plugins will start on by default, they plan to add more and more as people come to understand and enjoy specific ones. If this does gain the steam that I hope it does, you will see many more people writing semantic code so that search engines like Yahoo can pull in relevant data to be added to the SERPs.

But there are quite a few high quality typefaces that are available on most new computer systems and you can always fall back on the common ones. Of course there are options like creating images, dynamic headlines, and siFR… but all of these techniques increase load time and development time. There are plenty of good reasons to be strategic in the font choices rather than using additional technology. I am shocked at how rarely I see anyone taking advantage of these type options, so here is a quick and dirty list of fonts you should and could use in your desgns and stylesheets.

1. Palatino Linotype / Palatino

WINDOWS 97.09% / MAC 78.86%

This is a nice serif font that his pretty good support for both Mac and Windows based machines (97.09% of all windows machines have it, and 78.86% of mac’s). Yet very few people use it and instead default to georgia or times. As you can see it makes for great headlines, and I have used it with success as copy type as well. Worse case you can always default back to georgia, times, etc.

2. Tahoma

WINDOWS 96.09% / MAC 72.02%

I admit this is not one of my favorite fonts, but it does have many instances where it could be used effectively. It doesn’t seem to get used very often despite the fact that it could be an excellent copy font. Again there is always Arial or Helvetica if the machine doesn’t have Tahoma installed.

3. Impact

WINDOWS 95.85% / MAC 88.08%

Admittedly this font probably is overused in non-web related design. Since it is one of the “cooler” default fonts on most machines it tends to get a lot of use. Despite this fact there are plenty of good places to use it, and it works great for well… “impactfull” headlines.

4. Century Gothic

WINDOWS 85.44% / MAC 42.50%

This is a nice elegant font that was overused by graphic designers some time ago, but it has been locked away and shunned for some time now. It may almost be time to pull it back out of the tool chest. Not a huge percent of Mac systems come with it preinstalled, but most new ones do. Depending on your target audience this could be the perfect font to use. If you are worried about the low mac support you could always opt for Futura as well (which has very high mac support).

5. Arial Black

WINDOWS 97.73% / MAC 96.18%

Yup you don’t just have to use plain old Arial. Arial black is a nice bold font that could be perfect for headings, impacting headlines, and hell even a replacement for the Impact font mentioned above. I don’t know that I would use it for body text, but it is an option that should be realized in web typography.

6. Arial Narrow

WINDOWS 87.08% / MAC 91.01%

Arial again! We are not done yet, oh no. Much like arial black, arial narrow is a great font for headlines. Instead of the big bold in your face style of headlines you can use this typeface for more elegant subtle headlines. A nice change from the traditional arial, and can be used much like you would a condensed font.

7. Copperplate / Copperplate Gothic Light

WINDOWS 58.13% / MAC 85.85%

I will admit I hate this font, mostly because it is misused (and people will probably argue that it is not the fonts fault, but the designers). But there are times when it can be used effectively, and it has pretty good support on newer windows computers and most mac based computers. Most likely it will again be for headlines, larger headlines, as it is not terribly legible at small fonts especially when it isn’t properly aliased.

8. Gill Sans / Gill Sans MT

WINDOWS 43.09% / MAC 90.82%

No surprise I like this font. I think it works both in copy and in headlines, and it has fair support in both platforms. Anytime you use a font that has about 50% support rate you want to think about the next logical font to serve, but there are enough options specific to windows that would let you achieve the same typographic message with only subtle differences.

The effect is what I call, “The Slider.” Instead of normal navigation where you click on a link and it takes you to another page, or even dynamically loads content onto the existing page, The Slider scrolls you to a different portion of the same page automatically. Sometimes this is simply scrolling down the page to the next content block (in a slow manor rather than an instant jump). Other times people have it scroll to another portion of the page that is not in a vertical manor, maybe 4000 pixels to the right and 500 upwards. The effect being the feeling of traveling to a different portion of the page itself. Lastly some have content scroll with in the content, so rather than the whole page moving the content with in a content block my scroll in and out.

Hotel Oxford

Hotel Oxford Website

Hotel Oxford is the first site that I had seen doing this. While the page remains stationary, the content with in the design scrolls depending on what page you click on. The fact that every page has hard borders creates a very cool effect.

Team Viget

Team Viget

This is the second site I had ever seen doing this effect. Unlike hotel oxford Team Viget scrolls the whole window, creating a sense of moving down a hallway and looking up and down at the different postings on the wall. Very cool effect, and really transforms the website into something more.

Danny Blackman

Danny Blackman

Danny’s portfolio site is the last type of Scoller that I have come across. His site doesn’t hide any scroll bars, and you could navigate the site normally, but he empowers you to “Save That Scroll Finger” and click on his links which auto scroll you past some very cool illustrations to the next portion of the site.

More LLC

More, LLC

More is similar to Danny Blackmans, in that his site scrolls downward and allows you to manually scroll if you wish. However he added an extra touch by applying a fixed position transparent PNG at the bottom that makes the site look like it is fading into the page. Nice touch.

Brian Katzel

Brian Katzel

Brian seems to be a very creative individual, seen through his designs and through his use of scrollers, background images, and transparent foreground images. While his page his another site that scrolls vertically, and doesn’t force you to auto scroll, he uses transparent images laid over a bright background image to make paint look like it is running down the page, changing shape, going through tunnels, and well…. you just have to see it because it is genius.

Melissa Hie

Melissa Hie

Melissa’s site scrolls the entire page, much like Viget. Each block of content is a different color creating a very cool effect when traveling from one to another. An interesting use of no-navigation, Melissa has you quickly bounce around here entire site one step at a time. First seeing what work she has done, then learning about her, and finally getting to her contact “section.”

Volll

Volll

Volll takes an interesting approach to the Slider type site. They have the site laid out very much like earth. The bottom of the page is deep under water, the bottom of the ocean. The top of the site is outer space. Where you start is right on land, looking over the water. As you navigate the site you are taking further into the sky or deeper under water. Creative.

Sroown

Sroown

Scroown is a manual scroll down site, but there is a “back to top” scroller that lazily follows you as you get further down the site. While not the most scrolly type site, the use of typeography and fun scroller make it worth admiring.

Lucuma

Lucuma

Lucuma has fixed elements of the site, yet the content scrolls horizontally. It creates a letterbox effect and is quite dramatic.

Qlear

Qlear

Qlear only scrolls very specific portions of the content, like the text at the top of his page or his portfolio section. It is a very visually interesting way to get a lot of information across easily. I would say this is one of the most effective ways that I have seen this effect done to communicate content.

NoFrks Design

NoFrks

NoFrks Design combines some of the elements we have seen in sites previous. Not only do the use the website as a space that mirrors the natural space (sky, ground, etc) but it also scrolls both horizontally and vertically. Look at their offers and you are scrolled down a highway to read a billboard, but click on their contact information and you are sent to the stars to read more.

3.7 Designs

3.7 Designs

Yeah I am gonna plug my company site. Much like Qlear we decided to scroll content with in a window, so that messages could be communicated with out going to multiple pages. We did break the site up into more pages that most sites of this style do, however we felt that was the most effect way to reach all of our website goals.

Bonus (13) Engage Interactive

Engage Interactive

Engage Interactive cleverly shifts the inside content both up, down, left, right, side to side… but keeps the frame of the site static. It creates a very cool look, giving the impression that content is just a step or two away. It makes the site quick and easy to navigate and find new content, no need for excessive page loading times or server queries. A very nice bonus!

Despite my understanding of the need, on occasion, to use obnoxious typefaces; there are some fonts that are ass ugly and show up all over the place. I wish these fonts, could be removed from existence with out exception.

1. Papyrus

Why does everyone feel the need to use this font for everything? Ok, I get it, you people don’t notice the elegant differences between different modern or classic typefaces… but there is no need to use this font for every situation. I have seen it used for housing developments, ski resorts, massage therapists, cellular stores, commercial real estate, omg way too many. The font looks like stalagmites, and sure sometimes maybe you want that earthy feel but for the love of god don’t just pick it because it looks different. “Cool fonts” are rarely “good typefaces.”

How it should die: Since it looks like the font was pulled out of the earth, lets put it back where it came from. Oprah should eat the source of the font, and dump it into the nearest out house. Hopefully the smell prevents anyone from trying to jump in after to recover it.

2. Lucida Handwriting

Ugh… Probably the most commonly abused type of typeface, script. (The second would have to be decorative, like our friend Papyrus). For some reason people love the idea of making any writing look handwritten, blatantly disregarding the fact that the design shouldn’t have a personal feel. Sometimes they want it to look fancy, even if the design shouldn’t be fancy or formal. Lucida Handwriting is the most common “hand written look” font that is available by default on most operating systems. The result? Everyone uses this lousy excuse for a font on EVERYTHING. I can’t tell you how many full fliers of content I have stumbled across that use nothing but this font. The funny thing is, it becomes less legible than most people’s actual handwriting.

How it should die: All copies of this font ever created should be transfered onto DVD’s, which are then melted and mixed into pen ink. They will then be scattered all over the world by someone writing “STOP USING HANDWRITING FONTS” until there is no more ink left.

3. Monotype Corsiva

Sigh…. Somewhere between a handwritten font and a script font, this again pops up everywhere. Seems that anyone who is unsure if their design should be personal, formal, or both… uses this font to make things ugly and painful. Simply looking at this font makes my eyes sting, as it screams “I want this to look cool, so I picked the ugliest font that actually has letters (I tried wingdings but my boss said no).” Again, of course, the only script-esk font that comes on computers by default. Of course everyone wants to use it because Georgia is just too simple, beautiful, and elegant.

How it should die: Each letter should have its stupid tails broken off, and then left in a desert where it could bleed to death. I don’t know what type blood looks like, but if I had to guess I would figure it was kinda thick and fatty… just fyi.

4. Comic Sans

I am sure everyone had to see this one coming. The amount of memos, emails, fliers, and newsletters that are distributed every day completely covered with comic sans is enough to make the average designer vomit. Seems that everyone wants their work to look informal, and somehow comic sans is the font that everyone thinks achieves that. Never mind the fact that it looks unprofessional, is hard to read, and is painfully ugly. Guess what, a simple san-seif font like helvetica will let readers UNDERSTAND THE CONTENT with out having to try and guess why you used an abomination of a font to write in. And since when did anyone decide that comic book style writing was anything we wanted to use anywhere but comic books?

How it should die: The x-men should bust out and demolish all copies of the font. The bonus here is that they would no longer be able to utter any stupid dialog in their books, and there would be no more x-men movies. Hue Jackman would be out of a job and I would no longer have to see him, booyah.

5. Times New Roman

Some people are angry with Microsoft for a whole lot of different reasons. Crappy software, bad business practices, simply making way too much money… I am angry for continuing to keep Times New Roman as the default font for any and every application they have ever created. I will admit, Times is not as bad as most people make it out to be… but it is not great. There are tons of better type faces that come with the OS by default, why not use one of them!? PLEASE, SWITCH THAT STUPID FONT! Think about how much easier reading would become over the entire world. Then I could focus all of my hate for them on how much IE sucks.

How it should die: After banding with all the other versions of Times New Roman, they should storm Microsoft HQ and burn it to the ground. However due to their own stupidity forget to leave as the building perishes, and burn up in the process. The ash should be used as fertilizer to grow something less ugly like weeds.

It is amazing how much more gets done when you track what you need to do and when. Additionally you find that your mind is clear of all the worries regarding what you have to do but have yet to do. It seems that many people constantly go over in their mind what needs to be done and when, rather than having one place to refer to that tells them what needs to be done and when.

Luckily there are plenty of free Mac applets/widgets/tools that let us keep track of these sorts of things easily.

1. iGTD

David Allen’s “Getting Things Done” has developed a cult following for his methods in organizing your life and tasks that you need to accomplish. If you believe in his methods then there is the perfect mac tool for you, iGTD. iGTD models his system exactly, allowing you to split up, categorize, prioritize, and schedule all the tasks in your life. It is a very powerful and all encompassing program, but I find it too complicated and somewhat difficult to use.

DOWNLOAD iGTD

2. DoIT

DoIt takes a simple approach to task/project management. Rather than developing a complex system of context, priority, etc.. it is a simple todo list with a twist. You can associate contacts, files, urls, etc with the task. Saves a step, such as planning to contact someone allows you to click to e-mail them rather than look up their details. Very cool.

DOWNLOAD DoIt

3. Anxiety

Anxiety is a simple light weight todo list program, allowing you to split up tasks by category (home/work/etc). The nice thing about anxiety is it’s simplicity, and it’s ability to easily integrate with macMail. Through macMail you can monitor, add, and remove todo items. Since e-mail is such a large part of our daily existence this really cuts down on swapping between different programs.

DOWNLOAD Anxiety

4. Basecamp Widget

Ok so not all versions of Basecamp are free, but you can get a lot out of their free version. If you have a simple business model, or work for the man, having your three projects as “home, work, and personal” in addition to this easy to use dashboard widget you can really keep control of your life and projects.

DOWNLOAD Basecamp Widget

5. Google Calendar Widget

Google Calendar is a great application for tracking and monitoring dates. Many of the downfalls of most project management tools that I have encountered have poor date management. At best they seem to have due dates, even though meetings, days off, etc are an important aspect of time or project management. The google calendar dashboard widget is easy to use, a simple keystroke lets you know what events are occurring for the month. The drawback is you can’t add or modify the calendar from your dashboard only view.

DOWNLOAD Google Calendar Widget

6. OmniPlan Beta

Free while it is in beta, the new version of OmniPlan is a powerful full featured project management tool that goes well beyond the other applications mentioned previously. You can break projects into phases, graph completion schedules, tasks, and share data with other team members. Worth looking into and trying while it is still free.

DOWNLOAD omni-plan