Looking back at the past RedAlkemi blog posts, I think we have talked enough about SEO/SEM and I feel obligated to deviate to some thing that excites me as much as SEO does – Website Design. I understand how frustrating it can be for a website designer to limit his creative ability to create a website from search engine point of view. And likewise, it can be a real nightmare for an SEO, to optimize a website that is poorly designed and is a member of ‘usability hall of shame’. So let’s talk about some most essential principles ofwebsite designing (& usability):
1. Precedence (Guiding the eye)
Precedence is one most important characteristic that a successful website should have (if a high bounce rate is not an issue for the website owner). I believe that it is in the hands of a designer, how he controls the eyeballs of the visitor on his website. Yes, it depends on the requirement of the website owner, how much weight he would like to give to a particular section of a website. The basic rule here is – first thing should come first – for example, In most cases, company logo (and not login window) is where the visitor should immediately see, as he opens a website so that he knows, which website he has arrived to. This just doesn’t stops here, as it is the duty of the designer to guide the visitor’s eye through a sequence of steps. For example:
Precedence is one most important characteristic that a successful website should have (if a high bounce rate is not an issue for the website owner). I believe that it is in the hands of a designer, how he controls the eyeballs of the visitor on his website. Yes, it depends on the requirement of the website owner, how much weight he would like to give to a particular section of a website. The basic rule here is – first thing should come first – for example, In most cases, company logo (and not login window) is where the visitor should immediately see, as he opens a website so that he knows, which website he has arrived to. This just doesn’t stops here, as it is the duty of the designer to guide the visitor’s eye through a sequence of steps. For example:
Following design functions control the visitor’s eye balls:
- Position – where on the website the element is located?
- Color – If the color is bold or subtle?
- Contrast – Important function in Web 2.0 layouts
- Size – Bigger the object, higher is the precedence (unless every thing is big)
- Design Elements – Arrows, flipped sticker icons etc
2. Breathing SpaceSo many times I come across website designers, who think website designing is all about utilizing every square pixel of the screen area by filling it with maximum stuff. But I feel that, more vacant space you leave on the screen, easier it will be for you to divert the eyes of the users on the intended objects. To create space, you can compromise on vertical scrolling (not horizontal off course). Following are the important elements of spacing:
- Line spacing
Remember that eyes are more comfortable reading text lines with medium line spacing. Too little and too much of line spacing can equally hamper the text readability and precedence as it may spill the visitor’s eyes. You can control the line spacing in CSS with ‘line-height’. - PaddingWith few exceptions, the text should never touch surrounding elements like table borders, images etc.
- White SpaceWhite space is a technical term and when I say white space, it doesn’t necessarily has to be white in color. ‘White space’ refers to empty spaces on the screen. Expert designers use this white space to give a balance to the whole design lay out and ample white space makes the design look more elegant. To understand this art, open some fashion magazine and see how the publishers use white spaces to highlight the products in car and watch Ads.
3. Navigation
This is the design aspect closest to usability of a website, when the user gets lost on the website, wondering where to go? Make sure that this doesn’t happens to your visitor.
This is the design aspect closest to usability of a website, when the user gets lost on the website, wondering where to go? Make sure that this doesn’t happens to your visitor.
- Navigation: Buttons and other navigation items on the website should be easy to find, identify and understand.
- Orientation: ‘Top’ buttons, bread crumb navigation, back button, sub headings, sitemap and site search are some important elements of healthy orientation on a website.
4. Worst Case scenario:
Consider these factors in advance, so as to avoid end moment surprises (some real unpleasant ones
)
You might pick a dazzling font for your copy, but is it available on the user’s computer, what if not? Your design looks amazing in 1100px, but is it creating horizontal scroll?
What happens when the user resizes the window? Did you forget to keep your design center aligned?
Consider these factors in advance, so as to avoid end moment surprises (some real unpleasant ones
)You might pick a dazzling font for your copy, but is it available on the user’s computer, what if not? Your design looks amazing in 1100px, but is it creating horizontal scroll?
What happens when the user resizes the window? Did you forget to keep your design center aligned?
5. Typography
This is how you can control your body copy:
This is how you can control your body copy:
- Font choice : Make sure, you are using standard HTML fonts. These fonts can make your layout look elegant, retro, flashy, professional, festive etc.
- Font sizes: Even though small fonts look more sophisticated, they are hard to read. So use a readably big font size. Modern Web 2.0 layouts allow you to use big fonts without looking ugly.
- Spacing: I have already discussed this above.
- Line length: To understand line length, if you open up a newspaper, you will notice that text is presented in small lines and multiple columns. Avoid elongated sentence lines.
- Color: Avoid extra bright, too high or too low contrast colors
- Paragraphing: Stick to left aligned text.
6. Usability
- Adhere to standards: To avoid confusions, adhere to the web standards and do the expected. For example, don’t underline a letter, if you don’t want to link it; as most people tend to expect an underlined word to link to some other page. Doing otherwise can cause confusions.
- Action blue print: Make a list of all the tasks that your customer might want to perform on your website. Then look for ways to make these tasks easy for the visitors to perform in minimum steps in order of importance of each task.
7. Alignment
Alignment doesn’t necessarily mean that the design elements should be in a straight line, but it means every thing should be consistently placed on the page in a set pattern. Aligning will make your design look more ordered and digestible.
Alignment doesn’t necessarily mean that the design elements should be in a straight line, but it means every thing should be consistently placed on the page in a set pattern. Aligning will make your design look more ordered and digestible.
8. Clarity (sharpness)
Keep the design sharp – pixel by pixel.
Keep the design sharp – pixel by pixel.
- You may want to use ‘sharp’ text in photoshop.
- Ample contrast to keep the borders clearly defined.
9. Consistency
Consistency means, you must have a clear theme in your mind before starting the design, so that you can select colors, font, buttons, spacing, illustration, pictures etc. that compliment to the website theme. An inconsistency in the design will make it look unprofessional and low in quality. So make early decision and stick to them. Smart CSS will help you achieve this consistency. Even if your website design is bad, a consistent website design will still look better then an inconsistent website design.
Consistency means, you must have a clear theme in your mind before starting the design, so that you can select colors, font, buttons, spacing, illustration, pictures etc. that compliment to the website theme. An inconsistency in the design will make it look unprofessional and low in quality. So make early decision and stick to them. Smart CSS will help you achieve this consistency. Even if your website design is bad, a consistent website design will still look better then an inconsistent website design.
10. Design Maintenance
Do the design elements cross each other too much? When you make a change in one ‘div’, do the adjacent ones collapse? Keep all the design elements separated from each other (as much as possible) as the designs with the elements related to each other are easy to build but at the same time are very hard to maintain.
11. Use CSS smartly
Use CSS as often as possible, specially in the case of large websites. If you are to use buttons at multiple places of all the pages on your website, you may want to make a button in CSS and attach it to every ‘DIV’ where you want to place that button. Yes, by doing this you compromise on flexibility of these buttons, but you save a lot of time.
Do the design elements cross each other too much? When you make a change in one ‘div’, do the adjacent ones collapse? Keep all the design elements separated from each other (as much as possible) as the designs with the elements related to each other are easy to build but at the same time are very hard to maintain.
11. Use CSS smartly
Use CSS as often as possible, specially in the case of large websites. If you are to use buttons at multiple places of all the pages on your website, you may want to make a button in CSS and attach it to every ‘DIV’ where you want to place that button. Yes, by doing this you compromise on flexibility of these buttons, but you save a lot of time.
0 comments:
Post a Comment