Archive for October, 2008

Text and Formatting

The text you choose for your web site is among the most important design elements you need to consider. Even though you may have always liked Arial font on previous sites, a new project may not necessarily look as good with this tried and true font. To set off the overall look of a site, you sometimes have to step out of your comfort zone and use a wild and crazy font such as Verdana or even Times New Roman. Since font style is such an important element of good web design it’s important to consider things like:

Font Choices – As mentioned above different fonts make a difference in the overall look of your design. Some fonts such as Arial look more contemporary, whereas others like Times New Roman look more traditional. Make sure you’re using the right font that best complements your design.

Font Sizes – Some of us still think it’s cool to use really small text such as Arial 8pt font for our main page copy. As great as this might look, it’s not comfortable for most people to actually read. Make sure you’re using font sizes that are consistent and large enough to be comfortably read. Also, make sure that things such as headings and subheadings standout appropriately so visitors can quickly understand the concept of your page without having think about it.

Spacing – The spacing you chose to use between lines is important to consider. You don’t want your line spacing to be too bunched up or too separated. Make sure your spacing choice is both reflective of your design and easy to read.

Line Length – Some of us like longer lines of text and some of us prefer shorter lines. Either way, your lines of text shouldn’t be too long. As a rule, long lines of text are harder to read. Generally smaller columns of text work better.

Text Color – A lot of really cool web sites use low-contrast text. Although, this may look good from a design perspective, it isn’t comfortable for most of us to read. This being the case, it’s recommended to try avoiding this practice.

Paragraph Alignment – Most of the time your text alignment should be the obvious choice of being set to the left, since this is how people read (left to right). Sure you may center text on occasion for headers, image captions, etc. However, stay away from justifying your text. Justified text always looks weird since it ends up having odd spacing between words. This not only makes your text harder to read, but it makes your design look less than professional.

Now, take a look at your site and really consider the above elements and how they affect the look and feel of your site. Sometimes the simplest changes to the visual elements of your text can significantly improve the look of your site. As with everything else in web design, details count. How’s your text looking?

Previous Post – Part 4 of 9

Bookmark and Share


Read Full Post »

Design to Build

Thanks to CSS layouts building great looking websites has gotten a lot easier, but you still need to do some thinking while you’re in the ‘design’ mode. Things you want to consider include:

Can it be done? – Are your design ideas compatible with current standards? If not you may have fonts that don’t render properly due to not being standard HTML fonts and other issues that affect your design from rendering properly in different commonly used browsers.

Are you thinking about screen sizes? – What happens to your design when a screen resizes? Is the design centered or left aligned? Do you want your design to be fixed or fluid to adapt to various screen sizes and why or why not?

Are you attempting something technically difficult? – Even though CSS positioning can make things easier, some issues such as vertical alignment can still be a problem and in some cases may be best to avoid.

Can small design changes simplify how the site is built? – Sometimes simply moving an object in your design can make a difference in how you have to code your CSS later on. In cases where design elements cross over each other, it can create complexity for the build. For example, if you have a few separate design objects the site may be easier to build. In comparison to a site design in which multiple elements overlap each other. Yes, overlapping can be easy, but it may add some complexity to the actual build.

You always want to be looking for the perfect balance between what looks good to the eye and what can simplify the build. If you’re building a small 10 page informational web site more complex design issues may not be much of a concern. However, this can be a completely different story for an enterprise level ecommerce site consisting of thousands of pages.

So whether you’re a site designer, or you’re a business owner working with a web design company to built your web site, the above issues should be brought up. Sometimes it’s really the little things that can make a big difference in how well a site looks, works, and ultimately performs. In designing an effective web site, every detail counts.

Previous Post – Part 3 of 9

Bookmark and Share

Read Full Post »

Site Navigation

Have you ever been to an incredible looking site that pulled you right in, only to find the navigation structure too weird for you to intuitively figure out? Sure, you may remember such sites, but more than likely you can’t recall their names since you know you’ll never be going back to them… With that said, here are two basics of good site navigation to keep in mind.

Make Your Navigation Obvious – Top, bottom, and side navigation structures should be consistent throughout your site and easy to find. Navigation buttons or links should look like navigation and be clearly described. The text of a navigation button or link should be very clear as to where it’s taking your visitors. Test drive your site’s navigation to ensure it meets the above and that it is truly ‘easy’ to use.

Keep Your Sense of Orientation – You don’t want your visitors to click a link on your site and all of a sudden feel like they’ve lost their way. Generously use headings, ‘next page’ and ‘previous page’ links, sub-headings, bread crumb trails and a good site map for those who need it.

Site navigation may not be a very exciting part of web design, but it can make the difference between success and failure. No one’s going to stick abound and explore a site that isn’t easy to navigate. So if your navigation isn’t up to snuff, get it fixed immediately. Poor navigation leads to shorter visits, less page views, lower conversion rates and less repeat visitors.

Check back next week for part 4 of Guidelines for Good Web Design.

Previous Post – Part 2 of 9

Bookmark and Share

Read Full Post »

White Space, the Final Frontier

When most of us first started designing web sites we couldn’t resist filling the whole page with lots of stuff. Maybe it was because we viewed empty space as wasteful, like empty shelves in our brick & mortar. Now, most of us have grown up and learned that the opposite is true. Generous, well-placed spacing can make your web pages easier to read, more effectively driving home your primary message.

To make the most of space in your web site design, the three keys you should consider are these:

  • Line Spacing – The space between text on a web page affects readability. If your lines of text are too close to one another, the text content looks bunched up and isn’t easy to read. If spacing between your text is too far, you’ve created the same problem. If your site is guilty of either of these, this should be the first spacing issue you tackle.
  • Padding – Padding is the space between page elements like images, borders, text, controls, etc. We’ve all seen web sites where the text is bumped right up to an image. While this may save space, it sacrifices readability. Your website should not look like a crowded hall closet. As a general rule, text should never touch other elements such as images or borders. This will make your web design much more attractive and readable.
  • White Space – The term white space simply refers to empty space, regardless of its color. Effective use of white space provides a sense of balance and contrast. As a general rule, more white space makes things look more elegant and higher-end. Think about white space in magazine ads. Ads for luxury items especially, like designer fashion, diamonds, and luxury automobiles, use white space to showcase their products very effectively. Web sites that come to mind that have made excellent use of white space as part of their design include eluxury.com, ADiamondIsForever, Dooney & Bourke, and Lamborghini.

Now, take a good look at your own web site design. Could you improve the perception of your brand and offerings with some creative white space? You may find that doing so increases the perception of your brand, and also increases your sales.

Check back next week for part 3 of Guidelines for Good Web Design.

Previous Post – Part 1 of 9 – Next Post – Part 3 of 9

Bookmark and Share

Read Full Post »

Design for Scanning

A great web site should clearly provide information to its visitors. This being the case, it’s important to remember that people don’t read web pages (at least at first) they scan them for the information they want. Since you know that visitors scan your pages, it’s critical that they see what you want them to see in the most meaningful order.

When designing your web pages for scanning, you should consider your page layout as a series of steps. The first step should be your logo placement, which should always be placed at the top left of the page since this is where people naturally look first. Some designers try being creative by placing the logo on the top right, which isn’t recommend, since it doesn’t make your brand name immediately visible when a visitor lands on your site.

After visitors see your logo/brand name, you need to direct their eyes to the most important content of your page such as a primary positioning statement or heading, followed by related images and main body text. What is most important for your visitor to be looking at is up to you, just make sure that they can look at your page and quickly digest your message with as little thought as possible.

To improve the scanability of your web site design, you have many tools available in doing so such a position and color. The position of where you place something on your web page clearly influences the order that your visitor sees. Therefore, you want your most important content immediately visible.

Colors you choose also have a large effect on how effective the scanability of your web pages are. Using bold and subtle colors is an easy way of telling your visitors where to look.

Contrast is another element that can increase the scanability of your web site design. You’ve probably seen sites before where everything is the same color tone to the point of everything blending together. Don’t do this. Use contrast to make important parts of your message different to stand out.

Size also has an immediate effect on scanability. A large image or line of text that’s front and center on a web page is going to attract more attention than a smaller message that’s off to the right. Again, if something is of major importance to your message, put it right up front for your visitors to see without them having to hunt for it.

Design elements such as graphics can also work at making your web pages easier to scan. If there’s a large red arrow pointing to something on your web page, or a line of text that’s highlighted, your visitors are sure to see it.

Contrary to what some believe, effective web site design is more like writing for direct mail or catalog content. If your message is all over the board, the number of people that will take the time to read through for the important pieces will be small. This doesn’t mean that you have to skimp on content; it just means that you have to put your most important content first. After addressing the scanability of your most important information, you can then follow it with all of the secondary content you want.

Guidelines for Good Web Site Design – Part 2 of 9

Bookmark and Share

Read Full Post »