I have been a professional website designer since May,
2000, working for an excellent company in the Glenwood Springs,
Colorado area. They place high demand on the quality of sites
designed for them.
My personal philosophy of web design is: "Less
is More". I don't believe in crowding as much
information as possible into a page. I like to have
"space" around the elements. I try to develop a design
that enhances the site, but doesn't dominate it. Web sites
should be simple for all types of viewers to use, very easy to navigate,
and allow the user to find information and products they are looking
for quickly.
A good web design should focus on usability. I strive
to create designs that are clean, elegant, timeless, yet catch the
viewer's attention. Web design must stay abreast of all the
latest tools and information. However, all the new "toys"
shouldn't be allowed to overwhelm a good design or hinder the viewer's
ability to travel through your site.
I suggest avoiding the fads that quickly go out of
style and focus on what matters most to the customer. Many
viewers dislike the use of Flash introduction pages on web sites. The
most used button on the internet is the "Skip" button. Remember,
just because you can do a new, catchy feature on your site, doesn't
always mean you should.
COLOR
Color is a huge factor in designing the perfect
website. Color project moods and thought even before the eyes
focus on the text. (For additional information on color and
color combinations, click here.)
Neutral Colors
Black, Brown, White and Grey are neutral colors.
Black means power, elegance and sophistication.
Brown means stability, earth, hearth and home.
It can also be considered a warm color.
White is for purity and cleanliness.
Grey is conservative. It symbolizes security,
reliability, and maturity.
Warm Colors
Red, Yellow, and Orange are warm colors.
Red implies power and gets attention. Red is the
symbol for passion and fire.
Yellow means warmth and bright sunshine. However,
Yellow is the hardest color on the eyes. I try to only use it as
an accent color.
Orange conjures up visions of Halloween, fall,
Thanksgiving, pumpkins, creativity, as well as trust.
Cool Colors
Purple, Blue and Green are cool colors.
Dark Purple is generally associated with royalty, and
lavender with romance. A combination of red and purple
symbolizes creativity.
Blue is calming, bring up images of the sea and sky.
It signifies intelligence and trust.
Color Combinations
Be careful when selecting color combinations.
The wrong colors can confuse the eye and make your site unappealing.
Such as bright blue with hot pink text. Can you read the line
below?
This
is very difficult to read.
Or, you can find that other color combinations are
quite easy on the eyes.
While
this combination is not so bad.
FEATURES
Most websites built today have some sort of
enhancements on them. Flash, animation, moving text, music,
slideshows, blinking text or lights, rollover navigation (changes
color or form), etc. While a little animation can enhance a site, a lot it
will make site a total disaster!
Flash is smoother than the average slideshow, and can
easily be adapted to any site. The quality of Flash when using
text is generally better than when including text on photos, due to
the methods of optimizing photos for the web. I rarely design
JavaScript slideshows anymore; however, there are some nice ones
available.
Blinking, Moving, Flashing Animation
While many sites today have some part of them
animated, remember that motion attracts the eye. Do you want
your viewers to watch your animation or read what you have to say? I have placed a
very simple flash header on my home page, as an example of my
ability with Flash. You will notice however, it only appears on
the home page and not the subsequent pages of this site - where it
would be redundant.
BROWSERS TO DESIGN FOR
Although over the last year or so FireFox (approx. 45%) has
replaced Internet Explorer 7 (approx. 27%) as the most used browser.
It is best to design for both of these. Each has different ways
of interpreting HTML, so before going online with a site, I like to
check the design in both browsers for viewing and java errors.
I do not design for viewing in the remaining browsers
(approx. 28% combined total) like old versions of Internet Explorer,
Opera, Chrome, or any version of Netscape. The viewing
statistics for these browser simply do not support the time and
expense to my clients for me to do so.
SITE DISPLAY WIDTH vs MONITOR RESOLUTION
The previous design rules were to design sites to display no
wider than 800 pixels as most viewers monitors were set to the 800x600
screen resolution. However, in recent years, with the
introduction of less expensive wide screen and flat panel monitors
this too is changing. The current statistics now show that now
only about 8% of viewers use the 800x600 setting. While most viewers
now use the 1024x768 setting (at 48%), there is good number that are
using higher settings (38%), myself included. I view at
1280x1024.
Basically, the higher the screen resolution
(1280x1024) the more you will see on the monitor although the elements
and fonts will be more at a distance or smaller in size. The
larger the screen resolution (800x600) the less background area you
will see on the monitor and the larger the elements and fonts will be
in your monitor.
What does this actually mean in terms you can
understand? Most sites are designed to scroll up and down - that
is a given. But, most sites are also designed so that they DO
NOT scroll side to side. If you are viewing a website and
cannot see the whole page on your screen, there will be scroll bars
for you to move the site from right to left. This means that the
site was designed in a larger width that your monitor is set for.
Generally, this is not an inconvenience you want your visitors to go
through, hence the reason for designing in the smaller width.
While I still advocate using the 800 pixel width,
especially if that is the setting you use on your monitor, I will
design in larger widths if requested.
This design is a combination of vector images and then
a web template overlaying the fixed, vector background. The background
is 1280x2000 pixels but the actual webpage is still 800 pixels wide.
This allows for design features as well as maximum text/photo space.
Admittedly, there is a drawback to this design style. Only
people viewing above 800x600 will see the actual design, and only
those viewing at 1280 pixel width or higher will see the entire width of the
design. For this reason, I have added the "Best View" notice
at the top of the page.
