Why Typography Counts

In my last post, I talked about the importance of writing for the web. Now I will talk about a more visual aspect of writing, which is typography.

Just as we spend time on the colour, layout and other design elements of a web page, the type of font (size, style, colour etc.) is equally important.

There are limitations, of course, as I demonstrated in this blog post. For example, back ground colours and font colours should be carefully chosen to allow maximum legibility.

A blog dedicated to typography called I Love Typography, gives you all the ins and outs about how to make a font, the winning fonts (for 2008), a history of typography, and much more.

I especially recommend the post: On choosing Type.

Browse through this little blog, it has a wealth of information.

Free and Stock Icons

A new website called Icon Dock has launched affordable (and a few free) icons for use on websites. Many people don't have time to design a full-fledged icon for simple functions like:

- forward and back buttons
- links to different pages
- visual guides to page and topic headings

Icon Dock makes this much easier by providing appropriate (adjustable) icons.

Here are more reasons why Icon Dock thinks their stock icons would be of use to you:

Affordable

Buy only what you need. There is no minimum quantity. You can buy Icons individually or buy a complete set for better savings.

Flexible

Our vector icons are scalable, so you can export them to any size for web purposes or high resolution print materials like brochures and advertising.

Editable

Edit icons with any vector software (such as Adobe Illustrator) – easily change the gradient and stroke color to fit your designs.

Combinable

Create your own icon by combining a few of ours. Try combining the “page icon” with the “plus icon” to get a “create new page” icon. The possibilities are endless.

They are just starting out, so their choices are limited. But, according to their terms of use, icons you download are flexible in a number of ways (as explained above), which gives you more options than just what they have provided.

Make sure to check their blog for news, and also for new icons (both free and stock).

A good idea that goes just a little further than the clip arts of yonder years.

An Attractive Website Is To Your Advantage

There are a million and one websites to click through. Many focus their attraction quotient on their product. Some on their marketing ability. Others on bells and whistles. And still others on their interactivity.

There is no question that all these are important points to consider in the overall design. But, I have seen very few websites which genuinely consider how good they look as one of their selling points.

Part of the reason is that many websites are designed by "techies". People who love to fiddle with codes, scripts, and other structural aspects of websites. Even amongst a team, the person who's considered the "designer" often has no formal background in color, composition, graphics or typography.

Quite frankly, most people can build their own basic website. Some of the technical components are not so complicated anymore. You can choose from thousands of software to do the rudimentaries. Of course the trained web designer will be able to narrow in on the appropriate, cost-effective and most reliable software in very short notice, saving you both time and money.

But, a trained graphic designer, with an eye out for aesthetics, is hard to find. As are those especially attractive websites. One of your criteria for your website should be how good it looks. And spend some time finding the designer who can do that for you.

Background Colors Revisited

I am reposting this important blog entry on background colors.

The background color of your site affects how people read the information at hand, and is therefore extremely important.

News sites, which mostly on text almost always have a white, or very light, background. And most professional museums and galleries, whose main attraction are the images, also use white as their background.

My recommendation will always be: keep the background light. A little creativity (pale yellow or cream) may add to the uniqueness of your site, but for maximum clarity, keep the background light.

Addendum: Try the link at the end of the post to view different background colors with a multicolored of text.
------------------------------------------

Background Colors

One of the most difficult decisions to make with a website is the background. Text is usually best read when on a contrasting background. But, usually, it is much easier on the eyes if the background is light, and the text is dark. Even different colors are easier to read if the background is lighter.

Think about it, most of the time we're looking at things in daylight - a light background. At night, a dark background, even with as many lights as we shine on things, it is still more difficult to see our way around things than during the day.

See what you think (and see) by clicking on different background options at this very ingenious link.

Movable Type, Wordpress allow a seamless website/blog look

Older blog software were limited in their function. Their primary purpose was to let you post your blog articles on regular intervals, have your readers comment on them and provide an easy way for them to find older posts (usually by date or by category).

Many individuals and companies have been adding blogs to their main websites for a while now. This gives their customers and readers a place to find a variety of updated, current information, and even interact with the website besides just sending emails.

What is happening now is the reverse. Many bloggers are finding that they want to add a website-like appearance to their blogs.

For example, they may wish to sell some products (often books or artwork), they may want to add an extensive "Abouts" page, or a section for scheduled events , and a special menu for their links (to other blogs and other sites), an articles section if they also write for other journals or online sites, and of course the requisite "Contacts" page.

The site then seamlessly functions both as a website, and as a regularly updated blog.

Popular blogging software such as Movable Type and Wordpress have come up with just this version of web+blog.

Here are some examples of websites and blogs that combined together to provide the functions of both.

* Serious Eats very successfully merges both the functions of a blog and that of a content-driven website.

Regular bloggers post daily on a number of topics, and readers can interact with comments, and even participate by asking questions and making entries in the "Talk" forum*.

Besides blog posts, there are also columns which provide article-style posting.

* The Torontoist website posts daily information about Toronto. It has categorized its topics in its menu on top of the page, as well as adding a more conventional website menu including "about", an interesting "schedules" menu to know when the various topics will be posted, and a "staff" link with emails and contacts also added.

The Torontoist is part of a large, urban-based network of websites/blogs also found in New York, Vancouver and London, England.

* Even big organizations and institutions are using the Movable Type and Wordpress web and blog combination to greater effect, allowing for regular updates of news and events, some with commenting possibilities, and others with blog-like features for sharing and emailing these posts.

Almost everyone is now used to some kind of interactivity on websites. They also expect regular updates on information on events, specials (sales, items), schedules and other news that regularly change.

I have written briefly about this in another post.

*A forum is an online place where members login to discuss issues of similar interest. There are thousands of forums out there from discussing the latest reality TV episodes to intricate mathematical questions. Many websites are now including forums as well as blogs.

Preview from article: Where Should You Put Menus? And Should You Have Sub-Menus?

Websites often have lots of menus to list. The standard About, Contact, Biography and Services are often not enough.

The dilemma is where to put all those menus and sub-menus.

Here are some options:

- List everything horizontally across the top

• Advantages: People can see every topic and item you wish to cover as soon as they enter your website


• Disadvantages: If you have a lot of content, your web page has to be pretty wide, usually extending from one side to the other. Otherwise, you would have to edit very carefully what makes up your menus.


• Example: Artdaily.org. Art daily has placed all of its menus (all 11 of them) across its website.
  

- List the important menus where they're most visible, and subsidiary ones like About, Contact, Privacy Statements etc... either at the very top or at the very bottom

• Advantages: Frees up more space horizontally


• Disadvantages: Could be difficult to find the subsidiary menus


• Example: Paypal has put it's most important menus to get you started (Home, Personal, Business, Products & Services) horizontally about 1/4 from the top. At the very top, and at the very bottom, it has a large list of subsidiary menus for more detailed and additional information.

For more information on the article, please register here, or purchase it at the store .

Good Architecture

Web design is sometimes called web architecture, equating websites as three-dimensional objects with different levels. The placement of these levels (web pages) and their navigation becomes similar to how one places rooms in a house, and goes through the house from one room to another. The other elements in those rooms - furniture, accessories, colors, etc. - also relate to how one arranges the rooms.

Christopher Alexander is an architect who has written an epic encyclopedic manual of how to design the optimal homes in his four volumes of The Nature of Order.

Here are the outlines of the Fifteen Fundamental Properties from Volume I of the Nature of Order. It is well worth to get the book and read the details, examples and photographs. I think they relate very well with web design.

1. Levels of scale: A balanced range of sizes is pleasing and beautiful

2. Strong centers: Good design offers areas of focus or weight

3. Boundaries: Outlines focus attention on the center

4. Alternating repetition: Repeating various elements creates a sense of order and harmony

5. Positive space: A background should reinforce rather than detract from the center

6. Good shape: Simple forms can create an intense, powerful center

7. Local symmetries: Organic small scale symmetry works better than precise overall symmetry

8. Deep interlock and ambiguity: Looping, connected elements promote unity and grace

9. Contrast: Unity is achieved with visible oppositions

10. Gradients: The proportional use of space and pattern creates harmony

11. Roughness: Texture and imperfection implies uniqueness and life

12. Echoes: Similarities should repeat throughout a design

13. The Void: Empty spaces offer calm and contrast

14. Simplicity and Inner Calm: Use only essentials; avoid extraneous elements

15. Not-separateness: Designs should be connected and complementary, not egocentric and isolated

Biggest Mistakes in Web Design

I've taken these quotes directly from the website critique and author Vincent Flanders.

Do go there, and read the whole thing. Entertaining and insightful.

Here, according to Flanders is Mistake #1. And I agree with him.

Believing people care about you and your web site.

Write these two sentences where you can see them as you’re working on your computer:

1. The only reason my web site exists is to solve my customers’ problems.
2. What problems does the page I’m looking at solve?

Nobody cares about you or your site.

Really. What visitors care about is solving their problems. Now. Most people visit a web site to solve one or more of these four problems:

1. They want/need information
2. They want/need to make a purchase / donation.
3. They want/need to be entertained.
4. They want/need to be part of a community.

Too many organizations believe that a web site is about opening a new marketing channel or getting donations or to promote a brand or to increase company sales by 15%.

No. It’s about solving your customers’ problems. Have I said that phrase enough?

Most Popular Font Types

Here is a list of the most common font types used from a survey conducted from January 2003 to August 2007.

Font type is a personal choice. Some like the generic Times New Roman, others the modern look of Lucinda Console, or the scripted style of Monotype Corsiva.

The font sets the style of the website. More decorative or artist sites might choose more curvy scripts, while those more business oriented can opt for the sleeker Arial or Georgia.

Some legibility concerns arise with some of the scripted fonts, and those with pronounced bolds.

Some fonts are just not appropriate for long texts, and might work better as labels.

And, if following the advice of the previous post, longer texts are better in dark script against light background.

Background Colors

One of the most difficult decisions to make with a website is the background. Text is usually best read when on a contrasting background. But, usually, it is much easier on the eyes if the background is light, and the text is dark. Even different colors are easier to read if the background is lighter.

Think about it, most of the time we're looking at things in daylight - a light background. At night, a dark background, even with as many lights as we shine on things, it is still more difficult to see our way around things than during the day.

See what you think (and see) by clicking on different background options at this very ingenious link!