larry

Design Your Web Pages

If you are designing a new website, it may be helpful to first sketch out a rough outline of the website to determine what content you plan to include and what functional elements will be called for. You may also want to draw up a preliminary menu of pages.

You may want to look at other websites as examples to pattern yours after.

Below, I will list some design considerations for you to keep in mind for your website. Some of these subjects you've probably never even considered.

Target Market

You need to know who your target market is, who your audience is, and design your website with them in mind. Don't just choose colors, graphics, and layout based on what you like, but instead think about what visitors will want and like on your website.

Layout Design *

This involves the look and feel for the navigation menus as well as the design for how a visitor will navigate through your website. (See more detailed information below.)

Logo Creation

Your logo can be as simple as just using text with some fancy fonts. You can generate some quick and simple logos using some free sites like:
Cool Text Graphics Generator
Xara 3D Heading Maker

Image Creation

This requires selecting relevant imagery that fits the purpose of the website including giving users that desired feel as they visit the website. In addition, imagery also involves choosing and formatting photos for products and services.

Content Formatting

This involves taking written content from you, the customer, and fitting it into the body of the website pages. We will make suggestions as to how the written content needs to be structured. Writing for a website is not the same as writing for paper. People's attention spans are MUCH shorter.

* Design Considerations

Print design vs. web page design

Fonts

For your audience to view the same font you see on your own screen, they must also have the same font installed on their own individual computers. Otherwise, their browser will instead show a substitute font, which designers have no control over. For this reason, be more conservative with your choice of fonts. Display only what the general public already has on their computers. If you're looking for a contemporary look, use standard fonts like Helvetica or Arial. If you're looking for a more sophisticated look, use fonts like Times or Verdana. If you absolutely MUST have everybody see your creative font, then convert the selected text into a graphic. Use this option sparingly, though, since it will increase your web pages' download time.

Typography

The harsh reality of web design is that you simply don't have the kind of control over how your text appears. It is far less sophisticated than what is possible in print media. The choice of font, the exact size of the text, where the text breaks, and how the text reads - all are aspects of typography. And on a web page, they are mostly determined by the web browser, not by the creator or owner of a website. At a screen resolution of only 72 dpi, text is nowhere near as sharp on screen as it is on a print publication. For this reason, be very careful not to overload your readers with too much text and allow for some open white space.

Colors

The advantage of color on the web is that it's cheap. Technically, you can produce millions of colors on your screen, provided your monitor and video display are a decent quality. The disadvantage is that there are actually only 216 web-safe colors - meaning that these are the only colors that appear the same on all monitors and operating systems without dithering, be they PCs or Macs. It is important to understand that colors from a print piece cannot be effortlessly transferred to a computer screen. Many print variables - paper thickness, texture, color, absorbency; inks - are not available for a computer monitor - a convex glass surface producing a screen flicker to project the image you see. Also, too much color on a web page can be distracting and counterproductive. The most successful strategy is to use color sparingly. Adding too many colorful items can create the visual equivalent of noise. Instead, leave room for white space. This will help your visitors focus on the items that are highlighted in color - a perfect opportunity to showcase your promotional message.

You can investigate colors using some free sites like:
Complete HTML True Color Chart
Color Scheme Designer

Computer Monitors

A website that looks clean on a monitor with millions of colors could look dithered and jagged on a monitor with only 256 colors. Colors that appear bright and sharp on your screen may appear dark and dull on another's. A web page that appears well suited for a 17" or larger screen will appear cut-off on a smaller one. Even the operating system can affect your monitor display. Macintosh computers, for instance, have a higher gamma display, and web pages show up brighter on them than on Wintel PCs. Before making any design revisions, first view your web page on several computers. If you only have one computer, go somewhere off-site and view it. See how the website reads under poor lighting as well. All of these factors can be observed before reaching an acceptable medium.

Also, try not to go over 2-3 page folds down for optimal effect. People generally do not like to have to scroll too far down a website and certainly don't like to scroll across horizontally.

Display Size

With so many different screen resolutions available (640x480, 800x600, 1024x768, etc.), browsers (Internet Explorer, Firefox, etc.), and platforms (Windows, Mac, etc.) in use, it is very difficult to design a page that looks good (or at least looks the same) in all configurations.

Most Web surfers out there have long since graduated from the 640x480 resolution (display size) on their monitors. 800x600 is considered the current "default" size by many Webmasters, and plenty of folks out there view their Web pages in bigger displays -- 1024x768 or even larger.

According to one source, the 'net community is pretty evenly divided between viewing at 800x600 and 1024x768, but there are still a lot of people working with 640x480 displays. Most of these people aren't the kind of folks who post on design forums or answer 'net surveys; they're using older computers in their schools and local libraries, in the basements of their churches, or just don't bother (or can't afford) to try to keep up with the new trends in computing.

Most surfers don't think twice about a vertical scrollbar, but I don't know many who appreciate a horizontal scrollbar requiring them to go back and forth along the page to see the text.

There are other caveats, such as:

    * whether or not a particular surfer has double or outsized Windows taskbars,
    * whether or not they're using XP (which sports a slightly larger taskbar),
    * if they have the Microsoft Office toolbar displayed,
    * if they've chosen to dock their toolbars along the side of their display,
    * if they've set their browser margins to something unusual.

Screen size and effective resolution are linked. Compare a 15-inch monitor and a 21-inch monitor, both set to 800 x 600 pixels: the 15-inch will have a higher resolution. Larger monitors must contain smaller pixels in order to maintain the same resolution, but when a smaller monitor is set to a high resolution, the images would be much too small to read. A 14-inch monitor set to 640 x 480 is very readable, while a 21-inch needs at least 1024 x 768. Here are some recommended resolutions for the different screen sizes:

You have two strategies to handle monitor size issues:

1. Fixed width design. This means (at the current time), a design width that is 780 pixels wide (giving 20 pixels on the side for the scrollbar, on an 800 pixel screen). This is the most predictable, and least time consuming method of addressing this issue. The main disadvantage is that users with larger screens, set at higher resolutions, will not be able to fully utilize them, and will see large, unused blocks of space around your page.

2. Flexible width design. The design stretches and moves to grow with the width of the browser window. Now, this has several issues:

• No matter how carefully you design it, it will always have a problem of some elements not looking right, either because the screen is too narrow, or because someone stretched it out full size on a massive cinema display.
• At wider widths, rows of text can be very difficult to read.
• Some items will get wider as the design is stretched, some will not. This means that column lengths will be increasingly mismatched as the width increases. It also means that you'll end up with unexpected white space, or worse, elements out of place, as the width changes.
• You may not be able to view the design on your own screen at the width that someone else views it, so it may do unexpected things on their monitor that it does not do on yours.
• It will take more time, and more experience, to get a reasonably predictable layout using flexible width design. And no matter how experienced you are, it will still do odd things sometimes.
• Methods for setting minimum and maximum widths are not yet predictable across all major browsers.

You can't please everyone, nor should you try, but you should err on the safe side so that almost all of your viewers can have your page displayed comfortably.

The Pros and Cons of Using Flash in Website Design

Flash based websites were popular for a few years due to their animation that caught our eyes. However, Flash based sites have been disputed to be bloated and unnecessary.

If your website content is presented completely in Flash, search engines will not be able to index your content and your website pages may not show up well in the search engine listings.

Users have to wait longer than usual to load Flash website content compared to regular text and images. Some visitors might lose their patience. The longer your Flash takes to load, the more you risk losing visitors.

Often overlooked is the fact that Flash movies are much more difficult and expensive to maintain. Whereas a simple adjustment to a standard webpage can be made by editing some XHTML or CSS, the correct source file for the Flash movie has to be located, edited then compiled to create a new flash movie. If your website contains several movies linked together, a simple adjustment can take much longer than expected.

Used in the correct ways, Flash can still be a very effective tool in the design of your website. In our experience, Flash is best used as part of a website - for a standalone animation, logo or banner - rather than the basis for the whole website. This "hybrid" method of building websites ensures that you still get the impact of using Flash without sacrificing the usability and accessibility of your website.