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.

Advertising Your Website With Original Business Cards

From Another Blooming Designer. Business card as houseplant.

A website is part of your advertisement. It is a place where people can learn about your business, who you are, what you sell, what your specials of the month are, and any other information that can get them to use your services. 

But just because you have an online presence doesn't mean that people are automatically going to come to your website. Your website, which is an advertisement for your services, also needs it own publicity! Yes, we have to advertise our websites so that people can access them to see what our services are.

There are many unusual and original ways for you to get people to pay attention to your website based on a loose concept of business cards. Ordinary business cards are 3.5"x2" cards with a 15pt thickness, where you put your pertinent information. But now they have become much more imaginative and interesting. I have blogged about this, and written an article on it (please refer to my main website for information about my articles).

Below are some examples of business cards taken to another level. You can wear, hand out, send these "cards", or find any number of ways to get them out to your potential customers. You can put them at the counter in your store (and even sell some of them), you can leave them in other stores or community centers, you can get your kids to wear them around town (t-shirts would be a good one), and the rest is up to your imagination!

Here are some imaginative examples:

- Stickers and fridge magnets

- Small pins

- Matches

- Holiday ornaments 

- Small toys

- Functional things like pens, pencils, key chains, coasters

- Fun shapes and objects

- Games such as playing cards

- Mimic your store - if yours is a bakery, make some shapes that resemble breads or pies

- Make something crafty - like a hand-sewn sachet

- And more...

You can read more at this site. The great thing is that once you start using your imagination, all kinds of ideas start popping up.

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.

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.

The Importance of Writing

Websites have to juggle many things to make their sites successful. Technology is one which we of course cannot avoid - blogs, videos, slide shows, animations, interactive sites, and the list goes on.

How good your website looks - colour, layout, where your items are positioned and overall design also makes a difference.

But, I have seen very few people address writing.

A techy web designer from Particletree advocates the power of writing. He is trying to learn a new skill, and in the process found for us a good list of places to go.

This is what he says about writing, which he also calls communication, quoting from another blog Writing clear and simple:

The words you use, either written or spoken, can have powerful effects on your audience‚—if you use them carefully and skillfully. Whether your goal is to inform, to persuade, to call for action, or to entertain, your words and your stories can be powerful. They can be powerful, because language is software for the mind.

Here are some of the links he gives to help with writing skills:

• Elements of Style
  

• Poynter.org
  

• The New York Times - Grammar and Usage

• The Economist Style Guide
  

• Guide to Grammar and Style
  

• Guide to Grammar & Writing
  

Writing for the web is also a special skill. After honing some good preliminary writing rules and skills, it is still important to gear your writing for the web rather than for print. People read differently on the web.

I have written a blog and an article about this which you can preview here.

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.