|
318 North Estes Drive
Chapel Hill, NC 27514
Phone: 919 . 942 . 8588
Fax: 919 . 942 . 8587
email: info@bothbrains.com
|
Making your website effective and exciting requires more than just page layout. Breathtaking artwork and animation is just the beginning. BBH offers expertise in corporate and business website design, e-commerce storefronts, online communities, database driven sites, SQL development, and Flash animation. We use a marketing approach to our web design by researching and writing valuable content to ensure positioning new and existing online businesses to successfully appeal to their intended audiences and advertisers. We know how to make your site "the source" for the critical information, products and services your clients and prospects want.
We also provide eye-catching graphic designs, which include logos and corporate branding. BBH offers you a more competitive pricing and delivery schedule than other web site design firms while balancing creative, interactive design with an assortment of high-end hosting, maintenance, and web promotion services, with the goal of achieving a complete internet solution.
As production professionals we can help ensure you meet your business objectives. Our goal is to ensure you capture more than your share of the market in your industry.
Call us today for a free consultation.

hardware
sales & service |
software
sales & service
|
computer repair
& upgrade |
networking
|
employee training
spanish translations
|
business consulting
|
security
analysis |
maintenance
contracts |
data recovery
logo design
|
publication
design |
website design
|
search
engine submission |
afffiliate
programs |
3D animation|
video
editing & production |
multimedia
CD presentations |
marketing
strategies |
advertising
campaigns |
about us |business
partners
Site
Map | Home
Serving the Apex, Cary. Carrboro, Chapel Hill, Durham,, Hillsborough, Mebane, Morrisville, Pittsboro, Raleigh, and RTP (Research Triangle Park) areas of North Carolina (Orange County, Durham County, Chatham County, Alamance County and and Wake County) and beyond.
WEB DESIGN BASICS
Think
long and hard before you include a splash page in your website. If
your business is graphic design, animation, or something else that
requires you to show off your graphic chops, then a splash page is
appropriate. For most business websites, it isn't. Some visitors will
bail, and others will resent the delay. Remember that most people
don't go to a business website to be entertained - they go for information.
Okay,
we've finally made it to the home page. A well-designed home page
has the following characteristics:
It provides an overview of what is available on the website, and every
section of the website can be reached from the home page, either directly
or with no more than 2 or 3 clicks.
It looks attractive and projects the right image for the company,
but it still loads in a reasonably short amount of time. A balance
must be reached between fancy graphics and fast page loading.
It reinforces the branding of the company or product, so visitors
instantly know what website they have landed on.
It
shares certain elements with all the other pages of the website, so
that the pages all fit together, and visitors get a sense of the pages
belonging to one website, rather than being a bunch of unrelated web
pages.
A
home web page usually includes a small amount of content, even if
only a brief description of the company, but its main purpose is as
a list of links to other pages where the real content resides. A home
page is much like the table of contents in a book or magazine.
Most
business home web pages will have the following links:
About the Company
Our Products and Services
How to Contact Us
Any
website that also sells products online should have another: Order
Here! The fewer clicks required to get to your ordering page, the
more orders you'll get - it's a statistical fact. Put your ordering
page one click away from the home page (and perhaps from every other
page as well). Actually, it's probably better to call the link "How
to Order" or some such, and make it clear to the user that they
have not committed themselves to ordering anything until the credit
card number is submitted. A certain well-known (and well-designed)
website offers the following no-pressure button:
"Add to Shopping Cart (You can always remove it later.)"
Most
websites, of course, will have more than the above-mentioned four
navigational items on their home web page. What you have there depends
on the purpose of your website. Whatever's important, whatever you
want people to see, should be right there, not buried several levels
down.
Resist the temptation to give your navigational titles clever but
ambiguous names. Of course you don't have to stick to the plain vanilla
examples above.
Who We Are
What We Do
Where to Find Us
Is
also perfectly alright, but I wouldn't go much farther out than that.
Again, the purpose of your website is to provide information. If your
website features downloadable files, audio or video links, or other
bandwidth hogs, list the file size next to each link so users will
know what they're getting into. Inform.
Most websites use a hierarchical arrangement. In other words, users
can "drill down" to greater and greater levels of detail.
A hierarchy may be thought of as a triangle, with the home web page
at the top corner, and the lowest level of detail as the bottom edge
of the triangle. Hierarchies only make sense when they are reasonably
close to an equilateral (equal-sided) triangle. If your home page
links to twenty pages, you should add another level. If your home
page links to only two pages, each of which links to only two pages,
etc., then you have too many levels. Smaller websites usually need
only two levels, while medium-sized websites may have a secondary
level of "hub" pages between the home web page and the lower
level containing the actual content. Of course, some sections of your
website may have more levels than others.
How
long should each page be? This is partly a matter of opinion, and
varies greatly from one website to another. Some people believe that
lengthy content, which if placed on a single page would require readers
to scroll down several screens to see it all, should be broken up
into several pages. Others argue that it's less hassle to scroll down
a lengthy page than it is to click through to another page and wait
for it to load. Websites designed for geeks (programming and network
stuff) almost always seem to go for the long-page model, while more
"consumer-oriented" websites more often choose the lots-of-short-pages
design. Some online magazines, or "content-based" websites,
do this for financial reasons. They sell ads based on the number of
page impressions delivered, so breaking an article up into five pages
means that they will score five page impressions instead of one (assuming
that the article holds the reader's interest). It may also improve
search engine rankings, and make articles easier to maintain. There's
nothing wrong with a page that scrolls down for miles, as long as
it's designed properly.
A
long web page should have a table of contents at the top, with hyperlinks
to each section of the page. This is done by inserting NAME hyperlink
tags at appropriate points, and using the "#" to link to
the different sections, for example:
A HREF = "long_page.html#section1"
A HREF = "long_page.html#section2"
etc. You may also wish to include a "Top of Page" link here
and there.
A
"navbar" is an essential element of a well-laid-out website.
A navbar not only makes navigation easier, but is an integral part
of a website's branding. When a user sees the navbar, they know what
website they're on, and they know that they can get back to where
they started any time, so they worry less about getting lost. Your
navbar should include all the main sections of your website, and it
should be the same on every page of the website (although each section
of a larger website may have its own sectional navbar in addition
to the main navbar). Every page should have a navbar as an integral
part of the layout of the page, which should be consistent throughout
the website. Most designers put a navbar at both top and bottom of
the page, although they needn't be exactly the same. A "sidebar"
is also a good place for a navbar.
A
navbar may be made up of individual graphics, it may be an image map,
or it may be simple text. Javascript may be used to make the buttons
change appearance when the mouse is over them, or to create even more
elaborate effects, such as a bit of explanatory text that appears
for each item. Make sure that your script includes a bit of code at
the beginning to hide the script code from older browsers that don't
support Javascript. The Golden Rule of website design applies to navbars,
too: Keep it simple! Never use clever Javascript animations just because
you can, but only if they actually add functionality to the user interface.
In
the early days of the Web, every item on a navbar tended to have a
cute little icon next to it. Nowadays, improper use of cutesy icons
falls into the same category as hit counters and busy backgrounds
- an all-too-common sign of amateurish design. The original purpose
of the little icons that grace our airports, road signs and websites
was to make it easier for people who don't speak the local language
(or can't read) to find what they're looking for. This is quite apropos
on the international Web. It logically follows, of course, that an
icon that doesn't clearly represent what it is supposed to represent
is worse than useless. A little picture of a letter is obviously the
place to click if you want to send email to a website's proprietors,
but a little picture of a man or a circle or triangle is generally
meaningless. If your icons aren't worth a thousand words apiece, ditch
them. Also, if you're going to use icons, make sure they fit in with
the overall look of the website.
Many
websites use a little hierarchical outline at the top of each page,
to good effect. Across the top of every page is a list of all the
levels between the home web page and the current page, all of which
are hyperlinks. For example, the Widgets, Inc. website might have
the following on the top of the web page that describes their latest
product:
Widgets,
Inc. : Products : Consumer Widgets : New Widget 6.0 for Windows
Each
of these items is clickable. The user can see at a glance exactly
where he or she is in the website, and can go back to the "Consumer
Widgets" hub page, the main "Products" hub page, or
the website's home page at any time. This setup does not replace navbars,
but exists in addition to them. Every page should still have a standard
navbar, perhaps on a sidebar and also at the bottom.
Many websites use frames as part of their navigational strategy. If
you divide each page into two or three frames, you can have your company
logo and/or your navbar constantly in sight. The frame with the content
scrolls, but the frame with the navbar does not, so the navbar is
always right there where the user can find it.
Frames,
however, have several drawbacks. All hyperlinks on a framed website
must use the TARGET attribute to ensure that a page comes up in the
correct frame. Nothing looks stupider than a page full of content
coming up in a narrow frame that was intended for the navbar. Getting
the TARGET attributes right can be quite complex, and every single
link must be tested to make sure that the frame scheme works out right.
If
someone (or a search engine) links to a web page that is not a frameset,
it will not come up the way you intended, and you'll look like an
amateur web designer. To mitigate this problem, include a "robots.txt"
file in your home directory. This file contains a list of directories
that should not be indexed by visiting spiders. All pages other than
framesets should be in separate directories, and those directories
included in your "robots.txt" file.
If
you have links to other websites, these links must include a TARGET=
"_parent" attribute so that the other website will not come
up inside one of your frames ("_blank" or "_new_window"
will also work). Never, ever have someone else's website come up inside
one of your frames. This quite rightly makes website owners furious,
not only because it's unethical (and possibly even illegal - the jury's
still out), but because it violates every principle of good web design.
A web page designed to be viewed as a full screen will not look good
inside a frame. It will scroll and you will look like an amateur web
designer.
No matter how carefully you construct your navigational scheme, there
will be some who can't figure it out. If your website is complex,
a website map may be a good navigational tool of last resort. A website
map is a page that presents your website in strict hierarchical order.
No fancy stuff, just a list of every single page on your website,
showing how they link together.
A
website map may be a text outline or a graphic image map. (Click here
to view our sitemap)
Every line of text above should be a hyperlink to the web page. If
you prefer, you can create an image map with a little box for each
web page. An image map is usually preferable, because it looks better
and can better show the relationships among web pages. The drawback
is that it's harder to modify than a text website map.
You
should most definitely include contact information on your website,
and don't bury it where no one can find it. Online forms are fine,
but they are no substitute for an email address. Would you do business
with a company that refuses to give out its address, or even its phone
number? If you want to shop on the Web, you may have little choice.
Very few websites publish the office address of their business, and
many have no contact information of any kind! Why not? What are these
guys afraid of?
There
are two reasons why a company may choose not to include proper contact
info on their website (not counting simple laziness or stupidity).
First, because they fear receiving a flood of "business-to-business"
communications (in other words, sales calls and unsolicited e-mails).
Second, because they want to reduce their administrative burden by
forcing people to contact them only in ways that make it easy for
them to process inquiries.
Even
now that Web shopping (e-commerce) is becoming more mainstream, most
websites probably get more visits from other Web business people who
want to sell them things than they do from potential customers. Yes,
if you publish your phone number on your website, you'll get calls
from salesmen. The same drawback applies to publishing your phone
number in the Yellow Pages, and if you consider this a problem, then
what in the world are you doing in business? Who ever heard of a business
with an unlisted phone number? Anyway, the salesmen will find you
no matter what you do, so trying to hide from them only harms your
business, not theirs.
The
second reason that some businesses erect barriers between themselves
and their customers is because they want to receive inquiries only
in a specified form, thus making them easier to process. When someone
inquires about your product, there may be certain information that
you need from them. For example, an online travel agency may get an
email asking for "information about flights to Paris." Without
knowing where the customer wants to fly from, and when, there's nothing
the travel agent can do with this request, so they are forced to respond
asking for the additional info. If they put a form on their website
that includes fields for departure city and dates, then they can process
inquiries much more quickly and efficiently, if website visitors fill
in the forms the way they are asked to.
However,
many visitors will not play by your arbitrary rules. Some will simply
omit the requested information. If you make these required fields,
some will decide that using the form is too much trouble and will
click away to your competitor. Some benighted souls even have old
browsers that don't support forms at all, so you have zero chance
of making contact with them. Do you really want to turn away potential
customers? Companies with good customer service respond to all inquiries,
not just those that are convenient for them to respond to.
Use
website forms if you like, but also include an email address, a phone
number and your street address in your "Contact" section.
Want to really impress people with the fact that you're an established,
reputable company who stands behind what they sell? Put this information
right at the top of your home page.
It
is unfortunately true that spam is a heavy burden for online businesses.
It's also demonstrably true that the more accessible you make your
email address, the more Spam you'll get (of course, you'll get more
legitimate inquiries too). To hide your email address away, however,
would seem to be giving in to terrorist spammers while shooting yourself
in the foot to spite your ankle. One possible compromise is to have
a submission form, with a non-clickable email address listed on the
same page.
No
navigational issue breeds more controversy than the question of off-website
links. Many websites allow no links to other websites, believing that
it's foolish to give visitors the opportunity to leave your website.
One of the many exceptions is Yahoo, which has links to all its major
competitors. Offering links to other websites is a major component
of the cooperative, democratic atmosphere that prevailed in the early
days of the Web. Many corporate players, though, reasoning that they're
on the Web to make a buck, not to help their fellow man, believe that
including off-website links amounts to giving away valuable page impressions.
The
author is basically pro-link. There's a simple fact to be kept in
mind here: If a visitor finds your website interesting, they will
stay a while, and perhaps come back another day. If they don't, they
won't. If they want to split to some other website, their list of
bookmarks is two inches away at the top of their browser. Just because
TVs have remote controls doesn't mean that nobody ever watches a TV
show all the way through, does it? The kind of person who just instantly
clicks on every hyperlink they see is not going to buy anything in
any case (or accomplish much of anything in life, for that matter).
To the extent that links offer valuable resources to your visitors,
they're an asset, not a liability.
This
brings up an important basic principle: Let your visitors be free.
Make your website flexible, so that they can use it however they like.
Don't try to force them to do things the way you would like them to.
Basically, this just means having a strong navigational scheme, by
following the recommendations above. Having a standard navbar on every
web page, and perhaps also a system of hierarchical links, means that
people are free to jump to any section of your website at any time
(and make sure that they're free to jump to the ordering page, too!).
First,
the concepts of "good web design" and "bad web design"
exist only in the eye of the beholder. Web page layout is an art,
and in the final analysis, can't really be judged in objective terms.
There is, however, such a thing as generally accepted website design,
or "standard" web design principles, and that's what we're
discussing in this article.
A
second basic fact to keep in mind is that the Web is not print. While
many of the rules that apply to print pages also apply to web pages,
there are some important differences. The main one, of course, is
that a web designer can never be sure exactly how the web page is
going to appear to the end user. The only thing you can be sure of
is that it will look different on different systems. To attempt to
get every element lined up perfectly, as a print layout artist does,
is to start down the path to madness. Some misguided control freaks
lay out whole web pages as graphics, not realizing that even this
is no guarantee of uniformity - some browsers won't display the colors
correctly, and some souls surf with images off.
A
good overall web design has the following three traits:
It has unity and variety.
It supports, but does not overpower, the message.
It is appropriate to the particular message being conveyed.
A
basic principle of classical aesthetics is that a good piece of art
has a balance of unity and variety. That is, everything fits together
into a recognizable whole, but at the same time there is enough variety
to keep things interesting. Most web designers err on the side of
too much variety. Unity and consistency are very important web design
principles, because they reinforce your website's (and your company's)
unique identity. The web design of a site needs to be consistent from
one page to the next. No matter where someone is on your website,
they should know that they're on your website and nobody else's. The
current buzzword is "branding."
One
of the central elements of your brand is your logo. Choose a logo
carefully, and whatever file formats it exists in, make sure that
the files are top quality. Once you choose a logo, stick with it and
use it throughout your website. Actually, it's best to have several
versions of your logo - perhaps a big one for your home page, a small
one for other pages, and a 468x60 one for an ad banner. A word to
the wise - if you have someone else create a logo (or whatever) for
you, be sure to get the original files it was created from (e.g. Photoshop
.psd files, Illustrator files), not just the final GIFs or JPGs. If
you ever need to create some new graphics using your logo, you may
not be able to edit these compressed files without losing quality.
Also, GIFs and JPGs are not of sufficient quality for print, so if
you ever need a print version of your logo, you'll be glad you have
the original work files.
Unity
of design requires more than a logo in the corner. Colors, fonts,
column layout and other design elements should be consistent throughout
every section of your website. That's one reason style sheets are
so great. Not only do they allow you to change a particular element
throughout a whole website by simply changing the style sheet, but
they also protect you against accidental lapses, like a single paragraph
somewhere appearing in the wrong font.
When
it comes to the Web, however, I respectfully submit that the medium
should never be allowed to overshadow the message. If people are talking
about the design of your web website instead of the message that your
website is delivering, then you've got your cart before your horse.
Weird fonts, bizarre punctuation or too many colors can call attention
to themselves, and distract the visitor from your message (on the
other hand, they might be just what's needed to call attention to
it). Good web design is like a good pair of underwear - most of the
time, you don't notice it's there. An effective web design simply
presents your message in an attractive way. Keep the purpose of your
web website firmly in mind at all times, and resist temptations to
indulge in fancy web design (or fancy scripting, Java, audio, video,
underwater chat rooms or any of that stuff!) for its own sake.
Of
course, if your website is designed to woo clients for a web design
shop, then you need to have all that gee-whizzy stuff, and that leads
us to the third basic principle of web design: Choose a web design
scheme that's appropriate for the message you're trying to convey.
What's good web design for a corporate site may be wrong for an entertainment
website. The sets of colors, fonts, and layout techniques you choose
from will be determined by the kind of look and feel that's appropriate
for your intended audience. Corporate websites will stick with the
tried-and-true basics (one font, one or two conservative colors),
while hotshot Internet firms will choose from a wider palette.
Working with colors on a computer screen is quite different from working
with colors for print. While print applications usually use a CMYK
color model, the Web uses a RGB (red, green, blue) color model, which
uses 3 numbers from 0 to 255 to represent each of three colors. Because
browsers are only capable of displaying a small subset of the 16 million
possible RGB colors, most Web designers stick to what we call a Web-safe
palette. If you use a color that's not in the Web-safe palette, a
user's browser may arbitrarily substitute some other color.
A
color is usually represented in HTML as a set of three two-digit hexadecimal
numbers. The ones in the Web-safe palette are all the colors that
may be represented by combinations of the number pairs 00, 33, 66,
99, cc and ff. 000000 is black, and ffffff is white. 00ff33, 990033
and 66cc66 are all valid combinations. This gives you a respectable
number of possible colors to work with. To see all the possible colors,
go to:
Whether
you're choosing colors for a graphic image, a background, or for colored
text, you should give some thought to what types of colors are appropriate
for your website, and the message you're trying to convey. Whole courses
are taught on the proper uses of color, and how to evoke various emotions
with appropriate colors, so we'll just touch on the basics.
Bright
primary or secondary colors (blue, red, yellow, orange, green) are
loud and happy. They are seldom, if ever, used by stodgy corporate
websites, but kids love 'em. If your design is mostly black and white,
then a bright color can be used to call attention to certain elements,
if they don't need to look particularly dignified. For example, red
is often used to call attention to a short bit of text, although it
always makes me think there's a closeout sale going on (perhaps there
is).
Darker
shades that contain a large proportion of black are attractive but
dignified. A dark blue (#000066) or brick red (#330000) can add a
little life to a black and white page. Try using colors like these
for heading text of for horizontal rules.
Shades containing a large proportion of white (sometimes called pastels)
are laid back and undemanding. A pastel shade is often a good choice
for a background.
Earth
tones (brown, beige, tan, etc.) are organic and unobtrusive, and are
popular with the earthy set. They can be used in either dark or light
shades, and they tend to contrast well with primary colors.
Follow the same rule with colors as with fonts - unless you're designing
a kids' website, don't use very many.
By
now, everyone knows that busy website backgrounds make text hard to
read, and announce to anyone who cares that the designer of a website
is a inexperienced amateur. So do overused motifs like sunsets and
pictures of the Earth from space. How busy is too busy? Some purists
would say that anything other than white or black is too much. More
liberal designers, however, admit that a well-chosen solid color background
can set the mood, while giving a website a unique identity. Choose
a very light neutral color, and think carefully about the kind of
associations a particular color has. Someday websites with this default
background color will be considered retro and cool, but that won't
be for a while. If in doubt, make it white.
Have
you ever wondered why all ISP websites have white backgrounds, while
all web design firms' web websites have black backgrounds? A white
background implies a no-nonsense businesslike attitude, while a black
one evokes an air of creativity and mystery.
What
about an image as a background? You can use one large image that fills
the whole screen, or a small one that repeats (or "tiles")
over and over to fill all available screen space. Using one large
image as a background can cause problems, since not all website visitors
will be using the same screen resolution. If your background image
is 640 pixels wide, and your visitor's resolution is 1024 wide, then
the image will automatically begin to tile. This means the visitor
will see the edge of another copy of the graphic over to the right.
Far more predictable results may be had by using a small graphic that
tiles over and over. The web page will load faster, too.
One
popular technique is to divide a page into 2 or more columns, each
with a different background color, by creating a 1-pixel-high image
that tiles over and over. The problem with this approach is that you'll
still have to use a table to format your text into columns. Since
the table and the background are independent, it's very hard to insure
that they'll always line up. Once again, differing screen resolutions
will mess you up. To achieve this effect, I prefer simply to specify
different background colors for different table cells.
The
biggest compatibility headache for web designers is not different
browsers - it's different screen resolutions. It would be wonderful
to design for 1024x768, and take advantage of all that extra space,
but if you do, those using lower resolutions will have to scroll horizontally
to see the whole page. While vertical scrolling is perfectly normal,
most designers seem to agree that horizontal scrolling should be avoided
if at all possible. People who use 640x480 are not all behind-the-times
losers - they may have poor eyesight, or a small monitor, or may simply
prefer to view text in a larger size. So, it seems likely that for
the foreseeable future, the vast majority of Web pages will be designed
for 640x480. This means that anyone with a larger resolution will
see your page over to the left of the screen, with a big white space
to the right. Do you think that looks good? If so, fine. If not, simply
center the entire body of your page, either by using CENTER tags or
the more modern <DIV align="center">.
Columns
are used in print because text is more difficult to read if each line
is too long. On the Web, this is less of a problem, because by the
time you take 640 pixels and subtract a scroll bar or two and a generous
margin, you're just a little wider than the perfect width for a column.
While a newspaper might need 6 or so columns to keep things readable,
a web page can look fine with just one. The reason columns are so
popular with website publishers is that they allow you to put two
or more articles or other groupings of text side by side "above
the fold," to present visitors with more choices. A very popular
layout is to have one medium-wide column of body text, with a sidebar
containing related information on the left, right or both. Alas, our
only tool for creating columns is a flawed one tables.
The
problem with tables is that unlike with desktop-publishing software
packages, you can't make text automatically flow from one column to
the next. This means that you have to figure out exactly where in
the text you want each column to end. Well now, how does one do that?
Why, one can't! Netscape and Explorer have differing opinions about
how much leading (space between lines) is proper, and the same column
of text will often come out different lengths in the two browsers.
If you'd like your text to line up perfectly with graphics or other
elements in another column, you are out of luck.
Print
designers take great care that every paragraph looks nice and neat,
with no widows, orphans or other poor relations hanging about. Web
designers have no choice but to simply smile and accept the fact that
any text appearing in a narrow table cell may end up looking ragged
on some systems. The problem arises because we're dealing with very
limited space, and type can only be made so small. Consider a sidebar,
created using tables, perhaps 200 pixels wide. If you use tiny size
1 text, then your paragraphs will probably come out looking okay.
If you use readable size 2, then any long words may cause line breaks
in less-than-optimal places, and quite possibly make the whole paragraph
look terrible.
I'll conclude with a note about accessibility. It's important to keep
in mind that it takes all kinds of websites to make the internet,
and you never know what kind of a system someone may be using to access
your web page. People using something other than the latest Explorer
and Netscape may have good reasons. Disabled people in particular
sometimes use unusual means to browse the Web, and if your website
is too dependent on brower-specific design tricks, they may not be
able to access it. Avoid using graphic elements as the only way to
get somewhere, and always include descriptive ALT tags. People using
text-only browsers, and blind folks using text-to-speech converters,
will thank you (and maybe even buy your products). Never set up your
web pages so that they override users' browser settings - a lot of
people simply can't read tiny size 1 type.
The bottom line is that content is king. If you keep the intended purpose of your website firmly in mind at all times, you won't go far wrong. Web design that interferes with the content is bad design, so keep it simple.
|
Using twice the brain power to
make business automation and creative ideas work together for your success...
|
|
|