Why Attractive Websites Work Better

Please read this long, but highly interesting, article titled "Visual Decision Making" on how "beauty enhances usability" when it comes to people visiting your website. Here is a short quote from the article:

[R]esearch shows that website users are powerfully influenced by aesthetics, and that positive perceptions of order, beauty, novelty, and creativity increase the user’s confidence in a site’s trustworthiness and usability. Recent design writing and interface research illustrate how visual design and user research can work together to create better user experiences on the web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and brain. In short: there’s lots of evidence that beauty enhances usability.

The author of the article goes into various theories about why attractive websites have better reception by visitors, but the bottom line is that looking good is as important as functioning well.

Read the whole thing here.

The Evolution of a Website

On the left is a stock image that the designer used to create the final image on the right

Website design is a long process. It starts with the clients, who have some ideas at hand, but more often than not depend on the designer to produce something that resembles their ideas.

The beginning is truly intuitive, starting with ideas, then going onto more concrete things like colours, fonts, graphics, photos, and of course the text or content of the site.

The designer from Thinkvitamin.com had two days to design an events website with simply the briefing: "To design and build a site to promote [the] new Stack Overflow DevDays event that’s happening this October." Stack Overflow is a programming Q & A site.

It doesn't really matter who or what Stack Overflow is, the interesting part is how the designer worked with:

- Stock image of a globe
- Unique way to display event cities on the globe
- Change of direction from pastel-coloured images and icons to a more line and colour design
- Adding photos instead of just graphics
- Borrowing ideas for elongated fonts from another graphic designer
- Changing the colour scheme to bold grays and reds

The designer spends about half the time thinking and experimenting with his ideas. He pools from his own creative resources, as well as using samples and examples from other web and graphic designers.

Finally, he consults with his client to get their feed back.

Go through a simple visual journey of the design process here.

The Stack Overflow DevDays Event website is now up and running.

Job well done.

Getting Stock Photos for Free

If you are adding photos to your website which are related to personal (or unique) posts, that only your own photos can enhance, I recommend getting a simple digital camera, and with no worries about film and extra costs (make sure you get the re-loadable batteries). You can then just shoot away.

But, other times, the perfect picture can be elusive, or you don't have sufficient training or a good enough camera that can deliver. That is why online stock photos are so useful. Some will charge you some money - very minimal unless you plan to use them for print editions or commercial ventures. Many are free. Make sure you read the terms and conditions just to be on the safe side.

Here at Tutorial Blog, you can find "25 Places to Find Awesome Stock Photos — Free and Cheap!", as describe by the post editor. Each option comes with a review.

Some commentators at the bottom have added a couple of other sites. Make sure to scroll down to get their links also.

Original Navigation Menus

A unique navigation menu makes your website that much more interesting.

You have to be careful, though, that the theme of the navigation menu fits the theme and overall design of your website. Being too original can also distract your visitors from going through the information on your website and finding what they want.

For example, don't make the navigation menus:
- Too complicated
- Have too much information
- Take up too much space
- Have too many unnecessary links (cut down as much as possible)

Navigation menus are tools for...navigation. That should be their primary purpose.

Here are some suggestions for original and successful menus from Smashing Magazine.

I agree with the authors on the majority of their suggestions (they have written helpful blurbs on each choice, and provided links to the actual websites), but I still think some of the designs could have gone a little further with the ideas.

For example, when hovering over a link on a menu, it would be useful to have some visual cues as well. Like the hover produces a different colour, or a different script, just to indicate that the link is "active".

Another suggestion would be, why not take the design to its logical conclusion?

Here is a navigation menu which look like piano keys (not quite, but that is the impression I got when I first saw this design.) It is the second example on the list at Smashing Magazine.

The original design just lets you click on each link, without changing anything. See the original design at the website, or here below.

Original design, with no interaction

Why not add a "sliding" component when you hover over each link, and change the colour as well? This fits in with the overall design, isn't too overwhelming, helps isolate that particular link and shows it is active. And it adds an interesting interaction for the visitor.

I have redesigned (using Flash) this menu. I've changed only the "About" link just as a demonstration. You can view it here below.

Click on the "About" link to see it sliding forward and changing colour. This feature is not on the original, and I think it makes their design better (more interesting and more functional.)

Redesigned "About" link to add more interactivity

I think many of the examples the authors gave could have gone just this extra mile (or inch.)

5 options when website budgets get slashed

Here is an excellent site with pragmatic solutions on how to design or redesign a website if your "internet" funds have been reduced.

I have made a short summary of each of the five points, but reading the whole article is worthwhile.

1. Realign rather than redesign
One good point this web article makes is that a complete overhaul of your site may actually confuse your loyal visitors. Rather than make colour or layout changes, why not look at what the site is actually doing - is it providing the appropriate information, is it preventing viewers from getting that information quickly and efficiently? Then "realign" accordingly.

2. Simplify
Instead of adding content, links and other features, why not reduce or remove? Careful analysis of traffic to the website will indicate which features are popular, and which aren't.

3. Prioritize and phase development
Make changes on an incremental basis. Have the core of the website ready, but make new additions over time. This works well, for example, with content rich material such as photos and videos. Have the space available for them, but install them over time, or when they're ready.

4. Reuse and recycle
This is really a variation of the first point. Use, for example, the already constructed Google maps, rather than designing your own interactive map. Or Youtube and Flicker to add video and photo content, rather than designing custom video and photo galleries.

5. Move beyond the website
This relates to my post of about two weeks ago where I said "Blogs are the new websites". Why not open a Facebook or a Myspace account? You can post pictures and videos on both, and update your readers on various activities. There is room for short biographies and other content (even if you are selling things). You can open these sites for free, and many blogging sites are either free or of minimal cost.

Web Design Trends for 2009

Here is an interesting website describing web design trends for 2009. I have posted some of the more functional ones.

- Multi-page layouts: This is a blog style layout, where the middle section (often with the changing content) is competing with the left and right margins - which are filled with links, and other more permanent information.

- Huge illustrations and vibrant graphics : This would be good for artists' sites, or for sites which want to have a pictorial representation of the website - such as restaurants and retail stores.

- More white space: This kind of website avoids the clutter of too much colour, text or images.

- "Speaking" navigation: We have often been confused by navigation buttons which don't give us enough information (or are just icons for us to decipher). Giving enough space to be more descriptive about navigation buttons can help web browsers get where they need to quicker.

- More creative layouts: The trend has been to follow set rules and structures for web layout. Part of the reason is that people will have an easier time following what they are familiar with. But, websites have been around for while now, and web browsers are getting more comfortable with unusual or more creative layouts. In fact, this could be the driving force for them to visit your website.

Do continue to read these trends at Smashingmagazing.com.

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.

Website Navitation and Layout

This blogger provides the same kinds of tips that I do in my articles and blogging topics.

His main advice is:

A clean layout and neat navigation... enhances its looks.

Not only does a clean layout and neat navigation enhance the look of our website, it will also attract, and keep, your visitors since they will find it easy to get around your website the get the information they need.

Here is the rest of the post titled: "Give importance to layout and navigation", which I've posted in its entirety (with a few of my additions, in italic). You can read other tips and recommendations here.

Give importance to layout and navigation

· Prepare your site navigation before designing to prevent cluttering up the site with forgotten links.

· A clean-cut and uniform navigation system is a must.

· If you have too many links then you should use drop-down menus for your main topics.

· The navigation should be flexible enough to accommodate any amount of additional links since you probably will be adding pages periodically. For this using drop-down menus or section home pages is a must [Not necessarily a must, since you can add more links horizontally. But drop-down menus will accommodate a large number of links.]

· Keep your main links together as much as possible so that visitors can absorb them at one shot and know what your site conveys about your company. Check out how all our major links appear in our top navigation bar and all related section links are listed in the right hand side menu.

· There is no harm is showcasing important links (even repeated links) that you think might interest the visitor. Small boxes describing the link should look good.

· If you like a graphic intensive site and find there is not much space for accommodating all your links, you can have a separate home (splash) page and all other pages as content pages. Thus your home page can have visual appeal and your inner content pages can have elaborate navigation structures while focusing on the content.

· Use your navigation space efficiently. Use short, clear and precise words in your links so that your visitors know what the corresponding page will contain.

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.

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

Excerpts from article: "How to make the best of your webiste"

[Please contact me for the full article.]

Here is a section from the article "How to make the best of your website."

For the complete article, please email me. This will also put you on the monthly newsletter, for updates on specials and newer articles.

---

How will a website help you promote your work?

One of the most advantageous things about a website is you can say so much more than you ever could just by talking to someone.

- A website allows someone to view all your work in the comfort of their home or office, at their time and leisure

- You can simply give your card with your website address to anyone, at any time

- Your website becomes your 24/7 portfolio

- Your website is your portfolio

- You can make all kinds of promotions and advertisements on your website

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?

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!