Design gurus often talk about simplicity in design. That by using less to convey your point you actually are able to convey your message to a broader audience. That you’re able to be more relevant with less rather than more.

I think this idea would be better applied in our everyday lives.

In my life the most fulfilling moments, the most life altering times, have happened when I cared very little for what I possessed, or what I wanted to posses.

Since George Carlin died I’ve been watching quite a bit of his work. He was before my time, and I hadn’t seen much of his material. With all the hullabaloo over his death I decided I should check out his work. I’ve been incredibly impressed with what he did.

It seems that he had a penchant for calling people out on their absurdities. Sometimes in a gentle way, sometimes in a not so gentle way.

Here’s a video that I really enjoyed (warning it contains some blue language):

He talks about how our houses are just a great big pile of “stuff.” I couldn’t agree more. It seems as though increasingly our lives are valued by how many gadgets we can accumulate. Life is not about enjoying the time you have, but rather minimizing the time you have to think about the life you’re wasting.

I need my Xbox360 so I can escape my job. I need my job so I can afford my Xbox360, and my lease on my BMW. College was great, and now I get to pay it off for the next thirty years. I should get a mortgage and buy a house, everyone else is doing it. That must be what will make me happy.

My parents suggested that if everyone else was running off a cliff, we should think twice before doing the same thing. Perhaps we should apply the same logic to walking down the long slow path of an utterly meaningless life.

If you could do anything you wanted, what would it be?

In 1994, Hakon Wium Lie proposed the concept of Cascading Style Sheets (CSS) to the world, moving web design one small, significant step closer to perfection (read a brief history here).

For the virgin, the W3C has a short tutorial for those of us who have never used CSS before. There’s also a more robust tutorial (by the W3C) here, and another by The Web Design Group here, all of which are well worth bookmarking.

In addition to the above, html.net’s CSS section is also a good place to go to, especially since it’s HTML tutorial is only a click away.

For an actual reference you can touch and feel, nothing beats The Ultimate CSS Reference by Tommy Olson and Paul O’Brien. While you’re there, check out some of Sitepoint’s other priceless titles

For inspiration, there’s cssBeauty, and the CSS Zen Garden.

And as usual, Smashing Magazine has a plethora of tools, tutorials, and techniques the wanna-be CSS expert should not live without (of course, these are not the only CSS materials they have available).

1. Offer to help your customers

2. Present data visually

3. Use readable type

4. Use simple forms

From ‘Getting Real‘ by 37signals;

“…success isn’t the only thing you’ll find in the details. You’ll also find stagnation, disagreement, meetings, and delays. These things can kill morale and lower your chances of success.”

“Forget about locked-in specs. They force you to make big, key decisions too early in the process. Bypass the spec phase and you’ll keep change cheap and stay flexible.”

If you haven’t read ‘Getting Real‘ I highly recommend it.

I greatly enjoy the book and appreciate much of the content, but I have to wonder if the “agile” attitude to design is so easily accepted because it encourages laziness. If planning is distasteful to you then saying, “Screw specs we don’t need em!” is extremely easy. It’s probably not beneficial though.

Saying specs are unnecessary and they prevent ‘agile’ work is akin to throwing the baby out with the bath water. A well thought out plan prevents problems. If you’re in an environment that says the spec is the golden rule which cannot be broken, then throwing out specs, for a while, may be a good idea.

If you find yourself constantly modifying features, encountering delays based on client expectations, or are in a continual state of crisis, it might be worth your time to develop some preventative maintenance.

Agile is defined as, ‘Being able to move quickly and easily.’ Agility can be achieved by a lack of planning, sometimes. Most of the time this is not the case. If you’ve got a development team that’s worked together for years, has some sort of a psychic mind meld, or you’re just one person working on a personal project, you may be able to launch faster without specifically defining your product.

However, if you’re working on a team without a telepathic connection, I’d recommend you take the next best route. Write out a game plan. If you don’t have someone who’s capable of writing a decent spec, hire one. Having a good plan will only enhance your agility.

Make the spec agile, change it when you need to. You’ll never be able to anticipate every issue that will arise in a project, but planning for what you can anticipate will save you from unnecessary deliberation and disagreement. Don’t sacrifice the agility that having a well written spec can provide, embrace it.

Here are several great articles to get you started.

Marshall is slightly crazy. You can read about his adventures in Europe at the incredibly entertaining LazyVoice.com

1. Tutorial9’s School of Photoshop (highly recommended)

2. 23 Most Incredible Photoshop Tutorials

3. Photoshop Tutorials and Design Resources for Designers (from MickM.com)

4. Create a 60’s Psychedelic Style Concert Poster (from PSDTuts.com)

5. Colorful Typography Photoshop Tutorial (from Photoshop-Garden.com)

6. Photoshop Tutorials.ws

7. Only Photoshop Tutorials

8. 100 wonderful photo effects Photoshop tutorials (from The Photoshop Roadmap)

Of course, you can also “stick it to the man” and use 10 free web-based alternatives to Photoshop

Sunny, warm, breezy. The rays shine through the whipped cream clouds as the birds chirp and the wind whirs. The effect of good weather is seemingly universal. A sunny day certainly aids a sunny disposition; somehow life’s clutter falls a bit lower to the floor when the blue skies and 74 degree temperature reign over the day. It’s no surprise there is even illness associated with the weather and seasons, and it’s no wonder the Midwest’s harsh winters can depress even the happiest person (like Ronaldinho).

In thinking of the effects of good weather on your mood, it’s interesting to take it a bit further even. If good weather breeds good moods and good weather can be defined, perhaps the same “principles” of good weather could be applied to, say, human interaction or design. Can you make your face mimic a sunny day? Can you have a breezy, easygoing attitude?

For instance if you’re a deal-maker, perhaps the conditions of your deal-making domain could be a little more akin to “good weather.” Maybe you could add some sunlight, open up the place, throw up some mirrors, and maybe even some cool plants and a few fish. Or shoot to do the deal on the golf course in the good weather. Bring in the principles of the good weather, the outdoors, and you simplify life to the universal human desire and appreciation for nature itself, less ourselves.

In looking at design, if you’re looking to project a happy image and put your website visitors at ease, why not bring in the sunlight? You could use summer colors: nice white space, greens, blues, and in general brighter colors. And perhaps the copy can read like a summer romance novel. Or perhaps not.

Nonetheless, what aspect of your life can you apply “good weather principles” to?

1. 15 stunning motion typography videos

One of my favorites: V for Vendetta in Kinetic Typography

Note 1: Some of the videos contain French of the bawdy kind so some of the videos aren’t for the soft at heart

Note 2: Pulp Fiction in Kinetic Typography is another great vid (although you should keep the previous note in mind)

2. From Typographica: Favorite Typefaces of 2007 (a.ka. the Oscars of Typography)

3. Does Olicana remind you of Benjamin Franklin. Or is it just me?

4. Another great example of typography in motion (well worth the download if typography is your cup of tea)

5. If you ever want to have some real fun with typography (like designing your own font, for example), this interview with Jos Buivenga is a great place to start (this wiki from Typophile is also a good starting point)

6. Characteristics of Type on the Web from the Web Style Guide

1. Why’s (Poignant) Guide to Ruby
A tutorial like you’ve never seen before, complete with talking foxes and examples based on chunky bacon. Also, keep an eye out for the most entertaining side bars you’ll ever come across.

2. More great tutorials:

• Nuby on Rails.com
• Really Getting Started in Rails

3. Ruby on Rails on Hotscripts.com

4. PHP vs. Ruby on Rails. An evolutionary story of a Web Developer and his tools- A great comparison of the super-hero abilities of RoR and PHP. At the very least, this is a good primer on the differences (and similarities) of both.

5. Ruby User’s Guide

6. The Complete Ruby on Rails Manual

7. For more links, screencasts, and other RoR goodness, go to Ruby on Rails.org

As a means of communication, words are incredibly important. In lieu of verbally exchanging words, we use written text to do the bulk of the communication for us online. Any degree of miscommunication can have far reaching consequences (online), so every “i” has to be dotted, every “t” crossed, and every word weighed.

However, good content, like the emperor who needed to put some clothes on, should always strive to look first rate.

Enter typography, whose sole aim is to dress words up so that they look good. Its noble aspirations are simple: to make the reading experience easier, by relegating itself so far into the background that it’s never noticed.

Regardless of how tricky typography on the web can be, it is the responsibility of everyone on a design project (both team members and stakeholders) to bother about a website’s type. After all, if you want me to take the time to read your marketing pitch, or your smashing novel, why should it also be hard for me to read it?

If we’re on the same page so far, then here are some guiding principles on selecting type:

1. Read it- Just because you’re writing a masterpiece on Antiqua doesn’t mean you should write it using Antiqua. Reading the material (to understand it) will provide a better understanding of the copy’s context, and the user’s needs. This in turn translates into subtle changes to the over all look and feel of the website.

2. Know your audience- Blaktur is not the way to go on a pre-school program’s website, so it’s important that you know who your audience will be.

3. What will it look like?- Convention over configuration is not always a bad thing so keep in mind that there are limitations on the available font choices. Here’s another good article on the topic.

4. It’s not the end of the world- At the end of the day, your decision is subjective since there is no “end all” formula. As long as you diligently address the above, the whole time remembering that “it takes five hundred small details to make one favorable impression”, you should be fine.

1810 - 1913

When someone dies, the usual inscription on the tombstone is the year of birth and the year of death, separated by a dash, along with an epitaph in memoriam.

The initial reaction is to do the math, and figure out how old she was when she died (shameless you!).

What’s interesting about the whole thing is how much we concentrate on how long she lived, when at the end of the day, it’s the dash in the middle that defines what we remember.

JFK is a favorite of very many people. Nixon, however, is a different story because it’s what they did that we remember, and cherish (or detest).

Everyone wants a great website. And why not? If you’re really worth your mettle, and treasure your audience, you should make the effort to have a good website.

The problem is not wanting a great website. It’s the “I want it now!” paradigm that kills the potential for greatness. It’s too easy to give in to the temptation to rush a project so that “we can get it over with.” As a result, revisions are often rushed, features are cut down, etc…, all in an effort to bring the project completion schedule as close to 5 minutes as possible.

In the process, the end-users are forgotten, there are holes in the features, and somehow the message gets lost in all the noise.

The use of time, in and of itself, is nothing unless value is being delivered. Like life, it’s the quality of the time spent that determines the level of success (or failure) that’s achieved.

Design projects are tasking endeavors that take time, and significant effort. You shouldn’t decide to get a website “because everyone else has one”, then relegate it to “side project” status, and expect to get a website you’re going to be truly proud of.

How about this for a new way of thinking: it’s the quality of time spent on the project, not the quantity, that matters.

Realizing your dream of having a professional, functional, and profitable website is not always an easy task. We’ve heard all too many horror stories of individuals and companies trying to build a website, only to run into one problem or another at seemingly every turn. In fact, about 35% of our prospects and clients are those that profess to have had bad experiences previously and are usually looking for relief in the form of a smooth web design project, a website well-aligned with their vision, and a return on their marketing investment.

If you’re working with multiple people to plan and execute your web design project, beware: “Fire the committee. No great website in history has been conceived of by more than three people. Not one. This is a dealbreaker.”-Seth Godin. If this isn’t possible, look for web design companies with strong expertise in high-caliber project management, hopefully facilitated by applications like Basecamp (what we utilize).

In an effort to reduce the number of nightmare experiences out there, we developed the following list to serve as a helpful general guide. Feel free to jump from step to step, but be warned: your sorrow will lessen significantly if some form of logic, other than convenience, guides the jump from step to random step!

Step 1: Obtain & register a domain name

This is easy, cheap, and doesn’t take a lot of time. A good place to start would be to search nameboy for your name ideas. If a name turns “No Match”, you’re in business! Alternatively, domainthenet is a domain name generator that will give you various ideas if what you want is taken. Picking a name is not always easy. It’s possible to have an idea, with everything, except the name, scoped out. If using a name generator (like Domain Name Generator or the Web 2.0 Name Generator), rubbing a lamp, or twisting your tongue still doesn’t bring a name, skip it and come back when you have the perfect name (just don’t wait too long). And if the name you want is taken, you might be able to contact the owner and see if they’ll let you have it for a price. You can find the domain name owner’s contact information by again searching nameboy and and when a domain name is registered, scroll down to view the administrative contact’s information.

By the way, it’s important to make sure the domain name is registered in YOUR name, not the person or company who registered your domain name (we see this happen all the time and it’s not always pretty).

Read more here:

• How Do I Get A Domain Name?
• What to do When the Domain Name You Want is Gone
• PickyDomains: For $50, these guys will give you a bunch of domain name suggestions based on your specifications. Don’t like any of their ideas? You get your money back (free for bloggers).
  

2. Design a site map

In a web design project, the importance of good documentation can’t be overstressed and many who have worked on a web project can attest to the misery bad documentation can trigger.

As the first piece of documentation, this step is very important because not only will it come in handy as a planning tool, but you would also be doing your chosen web design firm a big favor (or yourself, if you’re adventurous!).

For the uninitiated, a site map is simply “a visual representation of a website’s structure.” They come in different shapes and sizes, but in our experience, the best site maps are simple documents listing a website’s sections and pages in outline format, maintaining a hierarchical order.

When all is said and done, your site map should look something roughly like this:

1. Home
2. News Room
2.1 Register
2.2 Archives
3. Customer Service
3.1 Packages and pricing
3.2 How to order
3.3 Additional Services
3.4 Tips of the Trade
4. About Company
4.1 How it works
4.2 Additional Services
5. Contact Us

It’s really that easy.

The important things to remember when composing your website’s site map are:

• Remember that site maps are hierarchical and should clearly illustrate a page’s position (in relation to the others) within the website.
• Use numbers. It’s a lot easier to say “1.4.2″ than it is visualize (then say) “I.IV.II” (as if if roman numerals aren’t bad enough, bullets are even worse).
• Pages, it’s all about pages. As a planning tool, the site map tells you a lot about the pages by not only establishing the relationships pages have to each other, but by also “mapping out” these relationships and how they relate to the different components of a project (of course, hence the phrase “site map”). These page relationships can be rather complicated, and adding technical details and aesthetic notes will only quadruple the complexity. All of this to say, avoid including functionalities, images, placement instructions, etc… If necessary, put an asterisk next to an item and add a footnote.
• Titles matter. If you’re still trying to decide on the page titles, use “working titles” so that everyone knows you’re talking about the apple, not the kiwi.
• Lists are all the rage. Although not a part of the site map, it’s a good idea to start compiling lists as you develop your site map. How many forms will it have? What will they be called and what kind of information will you collect? How about videos and pictures?
• Make a list of all the pages that will have videos, pictures, etc… (obviously that creates another list: “Stuff I Need To Put Together”. Do you see how useful a site map can be?).

Read this blog post for more on site maps.

Step 3: Compile a “Technical Notes” document

After completing your site map, it’s time to draft the “Technical Notes” document. Your “Technical Notes” document deals with the internal elements of each individual page and contains a description of the features for each internal page and specific placement instructions for content like pictures, videos, forms, Flash animation, etc… This document should also maintain the outline form of the site map.

For example, the notes for “2.1 Register” in the “Technical Requirements” document would say something like:

2.1 Register

This page should contain a form with the following fields:
Name:
Email:
Password:
Address:
Phone:
Note: the “Phone” field should be optional

Step 4: Identify SEO phrases

Search engine optimization (or SEO) is the process of structuring your website so that search engines can find and index them better (here’s a good introduction to SEO).

The best way to do this is to put yourself in the shoes of someone looking for what you’re offering. What words would they use in a search? Make a list of these words, and their derivatives, and you’ll be well on your way. This is a great tool. This will probably happen naturally as you develop your written content more (here’s on writing online content).

Additionally, there are a lot of online SEO tools that can help you generate these phrases. Even if you think you’ve done a good job, it might help if you used one of the tools as a check.

Step 5: Develop great content

Now is the time to develop the actual content of your website. Not just the words and titles, but you also want to include everything you’ll want on your website. But remember, don’t over-write: “Less. Fewer words, fewer pages, less fine print.” -Seth Godin.

Do you want any pictures, graphics, etc… on your website? Where? Take your time and play with different combinations until you find something you like. It might even help to draw out a few sketches (the design firm you use will certainly love that) or play with PowerPoint, Publisher, Excel or if you’re a Mac fan, Pages or Keynote to plan out your designs.

The filenames for your content, like that of the “Technical Notes” section, should also maintain the outline form of the site map. For example, you would name the file containing the copy for the “Register” page “2.1_Register” or the video for the “How It Works” page, “4.1_How It Works”. Again, adding placement instructions should not be necessary since those are covered in the “Technical Notes” document above.

Lastly, it is very important that you submit your final, proofread content at the same time. This ensures that confusion is avoided and your project stays organized. Compose the content for each individual page in a separate Word document (don’t forget to use the same titles used in the site map when naming them) and combine them in a folder, which you can then zip.

6. Find a remarkable (not just good) web design firm

In the words of marketing guru Seth Godin: “If you hire a professional, hire a great one. The best one. Let her do her job. 10 mediocre website consultants working in perfect harmony can’t do the work of one rock star.”

This is not as easy at it sounds. A recent Google search returned 491,000,000 results for “web design company” (a staggering amount if you ask me).

It may be difficult to separate the good from the bad, but fear not, there is hope.

There are some people out there that genuinely love what they do and honestly want to help (like those guys at Epsilon Concepts).

When you’re talking to the web design companies, how much listening do they do? Do they genuinely have passion about you, your project, your company? How long have they been around? Who have they worked for in the past? How does their work, testimonials, and website make you feel? Are they willing to give you references and are those references satisfied or ecstatic? Are they trying to capture your vision or do they tune you out?

This checklist has a lot of other angles you should consider as you search for the perfect web design firm.

7. Choose a hosting company

Like web design companies, there are tons of hosting companies. Hosting in this age is pretty much a commodity. Many web design firms also offer hosting as an add-on. However, it’s just as easy to end up with a bad hosting company as with a web design firm. We believe it’s also always best to go with a hosting company as opposed to a web design firm offering hosting on the side. It’s best to have the experts in each category of your web strategy, rather than a jack of all trades, master of none. Because hosting is a commodity, it’s not hard to find one with great rates, excellent support, and the right specs.

When looking for a hosting company, make sure they guarantee 99% uptime and 24/7 support (obviously, this is very important since they will be storing everything related to your web site and in case something happens, you need to be sure you’ll be able to get the help you need). Also need to make sure the hosting company of your choosing has all the features you need and will need as you grow. Some other things to keep your eyes peeled out for are PHP 5, MySQL 5, SSL, and an uptime guarantee, but this does depend on your unique project requirements.

Don’t know where to start? Then try http://www-thehostingchart.com/ and http://webhostinggeeks.com/ and we recommend Moonrise Hosting as well as Rackspace. If necessary, test their support claims before going with them (here’s more on choosing a hosting company).

PS: We also made an info-packed Squidoo lens a few months ago on “How to Plan a Web Design Project and Choose a Web Design Company” that has color charts, document templates, links to web design directories, articles, videos, and more.

Reader Comments:

“A lot of times, steps #1 and #7 can be combined into one. Most hosting providers will register the domain for you and park it until you are ready to use it. Also, one other tip. If you already have a domain name, make sure you setup hosting first. It usually takes time to update the DNS records and other relevant registrar data to work with the new hosting environment. If you leave it until the end, you’ll have a web site ready to launch, but will be waiting on domain registration issues. That has been our experience.” - John
Thanks John for this valuable tip! 

Search Engine Optimization (SEO) is the necessary art and science of positioning your website as relevant in the eyes of search engines. Often overlooked because of the time it takes to get results, SEO can be a very valuable marketing tool if used properly.

The following tools cover several SEO aspects that most websites require and are perfect for search engine optimizers, search engine buffs in general, or the overachieving website owner willing to take the extra step to make their site that much better.

• SEO Analyzer
  Grades your website’s search engine optimization level by analyzing download time, semantic structure, use of table elements, etc…
• Link Value
  This link value tool can help you decide if a link is worth paying for by calculating the link value per month of a given website.
• Another great tool from Link Vendor: Outbound Links
• Keyword Density
  To determine a website’s theme and relevant terms, one of the factors search engines consider is keyword density. This tool will help you balance your website’s keyword density by mimicking search engine spider behavior and returning a table of density values for key terms.
• Keyword Cloud “is a visual depiction of keywords used on a website, keywords having higher density are depicted in larger fonts. “
• KwMap
  Simply put: “A Keyword Map for the Whole Internet”
• Keyword Difficulty
  Great tool to analyze the competition you’re up against for particular a search term by analyzing “how difficult it will be to rank for a particular term.”
• Title & Meta Tags Generator
  Instantly create the meta tags you need for your website. This tool will also generate title tags, description, abstract, keyword, and robot meta tags (more info here).
• One great way to get your website noticed, is to submit to directories. Last time I did a search for “online directory,” Google returned 70,000,000 results. Clearly managing all those directory submissions is a pain (i.e, a slightly necessary pain). Enter the Directory Submission Manager, which removes the pain of “directory management”, while helping you monitor and track your directory submissions.
• Advanced Google Searches
  Very useful Google tool that will analyze, pages indexed by Google, pages with a specified keyword (in title, URL, file, etc..), keyword definitions and synonyms, and _many_ more.

Want more?

Here you go then:

• 30+ SEO Tools
• 136 SEO Tools
• Free Search Engine Optimization Tools from SEOBook

-FTK

What is a good Site Map?
There’s a debate going on about whether site maps will remain necessary with the advent of sites that do not immediately gain much from generating a site map (blogs, media sites, etc… ). While the debate about what will happen rages on, reality reminds us that this is today, and in today’s web, you need a site map.

What is a site map anyway?
A site map is simply, “a visual representation of a web site’s structure,” with the site map items typically arranged in hierarchical order. A site map can be used as a planning tool in designing a web site (the aspect this post deals with), or as a web page listing all of a websites pages (usually for search engines purposes and to help visitors easily find pages).

Site maps are displayed and presented in a variety of ways and have also been labeled structure models, a taxonomy, site hierarchy, navigation model, site structure, or site index. As a website planning tool however, site maps are best in outline format within a Word document or .rtf file.

Online collaboration tools have also proved to be helpful, especially if the site map is still being developed (my favorites so far are 37signals’ Writeboard and the handy Writemaps.

Why make a site map?
The importance of good documentation in a design project can’t be stressed enough. Anyone who’s been involved in a design project knows first hand the pain involved when ignoring good documentation comes back to haunt you later in the project.

Web projects are complex beasts requiring the skill and ingenuity of at least a couple people. The larger a web project is, chances are, the more people will be involved with the project (and not all of them will remain for the life of the project). Having good documentation then ensures that everyone stays on the same page, regardless of how often they come or go. This, however, does not just apply to large teams: even with smaller teams, it’s amazing how easy it is to miscommunicate ideas and/or spend time clarifying issues because of unclear documentation.

Did you notice how the last 2 paragraphs have been about documentation and not site maps?

That’s because the site map is the first (and possibly, most important) piece of documentation needed for a web project. As the name implies, it’s a “map” of a “site”, and without it, everyone would be lost.

What makes a good site map?
There are no “hard, fast rules” in writing out a site map. However, like the pirate’s code of yore, there are certain principles that should be followed:

• Remember that site maps are hierarchical and should clearly illustrate a page’s position (in relation to the others) within the website. IMO, the best way to achieve that goal, and come up with a usable planning tool, is to use a simple numbered, outline format.
• Use numbers. It’s a lot easier to say “1.4.2″ than it is visualize (then say) “I.IV.II”. (as if roman numerals aren’t bad enough, bullets are even worse).
• Pages, it’s all about pages. As a planning tool, the site map tells you a lot about the pages by not only establishing the relationships pages have to each other, but by also “mapping out” these relationships and how they relate to the different components of a project (of course, hence the phrase “site map”). These page relationships can be rather complicated, and adding technical details and aesthetic notes will only quadruple the complexity.

All of that to say, avoid including functionalities, images, placement instructions, etc… If necessary, put an asterisk next to an item and add a footnote. Which sort of leads to my next point…..

• Titles matter. Titles matter because if everyone refers to an apple as an apple, we would all understand that you want someone to pass the “round fruit with a firm white flesh and a green, red or yellow skin” and not, the “oval fruit with brown hairy skin and bright green flesh” in the fruit basket. As much as possible, choose the title for a page and stick with it. If you’re still trying to decide on the page titles, use “working titles” so that everyone knows you’re talking about the apple, not the kiwi, in the basket.
• Now tie them together. Although not a part of the site map, it’s a good idea to start compiling lists as you develop your site map. How many forms will it have? What will they be called and what kind of information will you collect? How about videos and pictures? Make a list of all the pages that will have videos, pictures, etc… (obviously that creates another list: “Stuff I Need To Put Together”. Do you see how useful a site map can be?).

Note: these lists you’re beginning to compile don’t have much to do with the site map. Essentially you’re compiling them at the same time you develop the site map so you can develop a clear picture of how your website will function3. More on what to do with the lists later….

Want more? Check out:

• Communicating Good Design by Dan Brown
• Last, always remember that the way you want it to function is not always the most feasible, or may not even be the best way, so keep an open mind!

-FTK

There are a lot of questions to be answered during the design phase of a web development project: What is the most effective homepage layout? When and where is multimedia beneficial? Should you use Flash? Where should ads be placed and how does that affect the eventual design? Should ads even be used?

The findings of this eye-tracking study conducted by the Poynter Institute reveals some interesting insights on how users read web copy. Although conducted with print media in mind, the study also has valuable advice on how to present website content and ways to improve a website’s layout.

Some highlights of the study include:

• Users pay attention to lists longer. Lists are a good way to break up paragraphs and present information in an easy-to-read format.
• Font size affects viewing behavior. Use a larger font size to encourage scanning or a smaller font size to encourage focused viewing.
• The top left portion of the page receives the most attention. You might consider integrating some teaser content here. This might also be a good place for the company logo or ads.
• Keep it short, simple and sweet. The study suggests users will not read large blocks of text regardless of how well-written or informative the content is. Break up large blocks of text into short paragraphs instead and consider using bullet points or lists (see #2).
• Function over form. Users pay more attention to one-column layouts than they do to multi-column layouts. Multiple columns will more than likely by ignored by users, so eliminate clutter from the get-go.
• Headlines draw attention. Users gravitate toward headlines, so use this to engage users and draw them into spending more time on your site.
• White space is good. To ensure an enjoyable user experience, leave some visual open space so you don’t overwhelm your users.

Want more? You should checkout 23 Actionable Lessons from Eye-Tracking Studies from the information-packed Virtual Hosting blog.

Jakob Nielsen also has more on eye tracking research and writing content for the web.

Another good read is Seth Godin’s post-mortem on an eyetracking study of Squidoo readers: “What I learned from eye tracking.”

See Also:

• The Best of Eyetrack III
• Eyetools Research and Reports Eyetools is a software company that specializes in eye tracking analysis. The resources on their research page and their blog, Eyetools Eyetracking Research are great resources on website layouts.
• EyeTrack III - Can It Really SEE Your Visitors Thought Patterns?

Key lesson: “If you want people to scroll down and view the content that you have near the bottom of the page, make sure that ALL of your content flows towards the bottom. Try not to break it in any way. The more flow you have, the more people will browse down.”

Free Download: “Eye Tracking Survival Guide”

-FT

The eye is an amazing piece of work, both from an aesthetic and functional point of view. The way that it interprets color is one of the more fascinating things I’ve ever come across.The difference between what someone with normal vision would see and what someone who was color deficient would see while looking at the same website is striking and, I hope, gives us a greater appreciation of the colors we’re surrounded by (this link will allow you see any website like a color blind person would).

The way the human mind perceives color adds some interesting points of observation to the mix. Colors have cultural meaning, can cause a physical reaction, and are even of philosophical interest.

All of this to say that colors are important. They are ever present and are an integral part of our lives (unfortunately, they are also under-appreciated and very often overlooked).

If you want your website to be a smashing success, why don’t you pay attention to the colors of your website? If color can be used as a defense mechanism in animals and blue can suppress your appetite, what effect does the color of your website have on people?

Extra tip:
The Internet has a wide variety of resources on colors and the best ways to use them for the web. There are websites dedicated to the use of color in design, color theory and there’s even a tool that will blend a color. You can also generate a color scheme, convert a color to its web-safe alternative and experiment with the color wheel.

So stop feeling blue about your lack of an eye for colors and start seeing green by taking advantage of the numerous free tools and resources out there to help you in making better use of colors in your design and marketing pieces!

News Alert: 2008 Color of the Year Chosen By Pantone — can you incorporate this calming color of 2008?