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.
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.
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 web site.
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 web site pages. We will make suggestions as to how the written content needs to be structured. Writing for a web site 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 web site. 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.
Computer Monitors
A web site 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 web site reads
under poor lighting as well. All of these factors can be observed before reaching an acceptable medium.
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.
You can see by the chart below how 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:
