Posts Tagged ‘web design’

[EssentiaList] Web Design Directory Edition

Monday, May 26th, 2008

In market for a website and don’t know where to start? Lucky you, because here is a list of all of the top web design directories:

Did we leave something out? Leave a comment and let us know!

Emperors Should Wear Clothes

Monday, April 21st, 2008

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.

Time vs Quality: Because Breathing Ain’t Necessarily Living

Friday, April 18th, 2008

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.

What makes a good site map?

Wednesday, February 20th, 2008

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