home mail us syndication

Archive for September, 2008

Web Design 2.0 Step Up, Then Get Out of the Way

Technology, at its best, is transparent - it’s the invisible lubricant between what I want to do, and having done it. A ball-point pen, for example, is successful because it requires very little from me to make it work. I can put ink to paper without needing to think about all the messy and mechanical things a writer had to deal with in the past.

The same idea holds true for Web 2.0 technologies. We’re seeing a decentralization of media creation and distribution as blogs grow to challenge traditional publications. Wikis and open source are driving the co-operative creation of everything from content to code. This in turn is leading to an environment in which applications are becoming as rich on the Web as on the PC, with the advantage of being faster to market, adaptive and componentized, so they can be snapped together to create any number of new user experiences. Why not pair a satellite mapping service with an ad-supported local business directory? What about being able to update your code base in a matter of minutes, rather than hours? In a way, the original promise of the Web - what you want, how you want it, easily - is coming true.

Unfortunately these great strides aren’t always being matched by great design. The leveling aspect of free Web applications is also creating a lowest common denominator in terms of user interface. If 2.0 marks the Web’s adolescence (with emphasis on personal independence, what friends think, and defiance to the establishment), then Web design could be in for a rough ride. And it’s the responsibility of the design community to provide some proper adult supervision through this phase.

So what does that mean, practically? It means embracing new technologies like AJAX for a dynamic page; tagging searches with multi-directional ‘folksonomies’ rather than ranked taxonomies, for more flexible, intuitive results; and providing multiple points of entry versus hierarchical navigation schemes for friction-free flow. How this translates into design on the pixel level will vary, but as professionals, I think we have a mandate and a responsibility to our clients to be best-in-class in any design arena, and it’s incumbent on us to be fluent in all aspects of the web as it continues to evolve.

I don’t presume to tell you how to design sites here, but I do want to suggest this guiding principle: understand how these new technologies are shifting the way people use the Web, and shift your approach to interface design accordingly. Provide the appropriate technology in the most user-directed, functional way, and get out of the way. Because at the end of the day, the utility of a design isn’t measured in how many technology stripes you can point to on your sleeve. It’s measured by how often people use your site, and how good the experience is. The goal, for any of us, should be to provide an experience that asks as little as possible from an end-user. It must be seamless, much as the smooth motion of that ball-point pen.

Jamie Monberg is the new director of interactive for Hornall Anderson Design Works, a brand-focused, graphic and interactive design firm in Seattle. Get in touch at j_monberg@hadw.com or by visiting http://www.hadw.com.

Tags: , , , , , , , , , , , , , , , , , ,

Effective Web Design Usability Principles

Website Design Usability Tips

1. Getting to know about audience members

You want a site that has personality and quality content based on your audience taste. You have to understand their color preferences, technical skills and any prevalence of special needs.

2. Make the interface simple and obvious

The more obvious the interface is, the less frustration the site visitor has to guess about how your site works. You want the audience to concentrate on the content, not the interface.

3. Readability

Make paragraph easy to read. Don’t use small text for font size.

4. Make your page fast loading

Reduce the waiting time is a must if your page over 20KB.

5. Avoid hidden (rollover to reveal) navigation

It makes for a very clean design if all your navigation is hidden, but it may also mean that people won’t know where to click to go somewhere.

6. Get user feedback

Find out what works and what doesn’t.

7. Study site visitor performance

How long does it take to performance a given task? The time it takes to do thing has got to be reasonable. If it’s not reasonable, improve user interaction wherever possible.

8. Help section (site map, 404)

When site visitors make a mistake try to provide many ways to help them out of it.

9. Test early and test often

Test your code for bugs on web browsers. Test the interface for usability. Ask your friends and colleagues for in depth and valuable feedback.

Please don’t think that the website usability techniques discussed above are the be all and end all of web usability as they are not.

Sam H Mah is a search engine optimization website designer who provides web standard compliant website for small and corporate clients around Canada and the world. Request a FREE usability / SEO website critique.

Tags: , ,

Ideas for Web Design

Whenever a web designer gets a web design project, he or she will require to take a step back and go through the research process in order to complete the job. The research process is a tedious process, it determines how well, and successful will the result of your web design. Ideas for web design will share with you how to go through that research process smoothly and obtain results.

One fine day, you received a call from some client and he requests you to design a website for his company. Over the phone, he briefly tells you what his company is about and asks about the prices, you then fixed an appointment with him for discussion. You will probably get excited about it and starts to get more details of the company by checking them on Google, and thinks about some prelim ideas for the website. At this stage, your research process has already started.

RETREIVING THE DETAILS:

After meeting up with the client, you get a lot of details that will assist you in your design process.
This details applies even when you are designing a personal website.

1. Nature of the Company

2. Client Preferences (Example websites?)

3. Target Audiences (kids? Young adults? Everyone in the world?)

4. Platform (Flash? Html? Php? Asp? )

By organizing these details, you get a bigger picture of:

1. What are you going to design?

2. What style of design are you approaching?

3. Whom you should design for?

4. How will your design work?

5. How will your design please both the audiences and the client in order to be successful?

DETERMINING THE STYLE:

With the information you have on hand, its time to determine the style. For a start, you should base on the client’s description of his company, his nature of the company to give a rough gauge on the design style. Examples below:

Example 1:

Web Hosting business >> High tech web design, sleek and professional design

Example 2:

Dolls and Toys business >> Kiddy, Girly, Colorful, Fun design

COLOR THEMES:

Having a good and suitable color theme on your web design will give users a pleasing experience while surfing through the web site you designed. One of the important techniques is to get a color chart from your local art store or use some color chooser tools to aid in your color selection. Your color theme will affect the mood and feel you want to create.
Colors also have their own meanings. For example, white is clean, blue is cool and corporate, having a white and blue color theme gives you a clean and corporate web design. Orange and yellow are warm and friendly colors, Grey is cool, combining a Orange-Grey theme will give you a friendly and fun mood. Dark colors are also popular among many, because they easily matched other bright colors. A common match is using a black background and light colored text as a combination.

There are thousands and one meaning to choose your color theme. Whether your color theme turns out successful depends heavily on the first step “Determining the style” of your website.

PHOTOS & GRAPHICS:

After getting the colors done, its time to think about the graphics and images. As a graphic says a thousand words, it is good to think about how you want to approach this portion. Here are some recommendations you can try:

1. Stock photos - Some are free, some requires you to pay a certain amount before providing you with high resolutions image. If your client has the money and there are suitable photos he would like to use, this is the way to go. Searching in Google for “stock photos” will give you plenty of results on this.

2. Take your own photos - When budget is involve, usually the project will require you to take a relevant photos and use them as supporting images on the website. Having a mid-range camera should do the trick as images for website are all on low resolution. Seldom there is a chance for you to use an image more than 640 x 480 pixels.

3. Creating Graphics Images - A web design will always need custom-made graphics images. For example, icons for a Shoe section, button for submitting information. You will need some skills in creating the graphics of your needs, or you will feel stuck while designing. Consider looking for tutorials on creating certain effects, like rounded corners, Mac alike buttons, pattern backgrounds and more. Learn about vector graphics tool like Adobe Illustrator and Macromedia Fireworks. They can help you to create graphics, mockups and layout fast and efficiently. This will greatly aid in your next web design project.

INSPIRATION AND REFERENCES:

If you already have some inspiration on how to design the layout, great, but if you do not, consider looking at related websites for some references on how they are being done. A search in Google also reveals some websites of the same genre. You can also check out ready-made templatesas well. I am not teaching you to copy exactly, but as a new learner, you should take reference and see how they are being designed.

Why bother looking at them?

Reference sites will give you ideas on usability, color theme, ideas on relevant images, navigation, features and many more guides to work on your web design project. Always consider them as useful references to help you whenever you need inspiration and ideas for your web design. It is all about looking more, reading more and getting your eyes and brain more exposed to the web design styles. www.sitecritic.net has alot of website reviews by different web designers all over the world and is worth taking a look.

Final Say

I hope this article has been helpful to give you some ideas for your next web design project. In this web design industry, it is a never ending journey of learning. By reading more and seeing how others create, you will be more aware the next time you design your client’s or your own web site.

Bernard Peh is a great passioner of web technologies and one of the co-founders of Sitecritic.net Web Design Ideas. He works with experienced web designers and developers for more than 5 years, developing and designing commercial and non-commercial websites. During his free time, he does website reviews, freelance SEO and PHP work.

Tags: , , , , , , , , , ,
Next entries »
Close
E-mail It