CSC
112 - Lesson 2
Elements of Site Design
No matter what the goal of your web site, whether it to inform,
educate or persuade (sell), your design should assist the interaction
between the content and the intention. By making the site easy
to navigate (find information that the users are looking for)
and fast loading, the users will be more likely to spend more
time at your site, thus giving you a greater opportunity to get
your message across.
Unlike conventional desktop software, web sites can't depend
on the customers to spend the time to learn how to use the sites
features. When you purchase commercial desktop software such as
Flash or MS Word, you spend your money first, then you have to
learn the program.
On the web, it's different. People simply are not willing to
spend time to learn how to use a web site. There are too many
other web sites out there clamoring for their attention. It's
easier for them to push the back button than to tax their brains
trying to figure out a web site. On the web..."Confusion
is our enemy."
The same thing goes for slow loading sites. If your site is slow
to load, many visitors will also hit the back button, especially
on your home page. Spend the time optimizing your site so it will
load fast. This is one of the main keys to having a successful
web site. No one likes to wait for a site to load. Don't make
them wait any longer than they have to.
Consistent Theme
A consistent theme is important for many reasons. Visitors expect
for the navigation to be the same (consistent) from page to page
in a web site. They want the buttons to be in the same place so
they can find them easily. If they have to relearn the navigation
on every page, naturally they will be confused. Remember...Confusion
is our enemy. We don't want our visitors to be confused. When
they are confused they leave without buying and of course, we
don't want that.
The same thing goes for colors, fonts and other embellishments.
Visitors expect consistency in color and when they don't see it
they think they have left the site. Again, our ugly enemy confusion
rears its dreaded head and scares our customers away.
Fonts
You should maintain consistency with your fonts not only in type
but also in color and size. All of your headings of equal value
should be the same size and most likely in the same color and
weight too. Inconsistency in type faces, sizes, colors, styles,
and weight looks sloppy and unprofessional. Be sure to review
your site to be sure that your fonts are consistent.
There are basically two schools of thought when it comes to font
selection for your web site. The old school comes from the print
background and they say that your should use serif fonts such
as Times New Roman for the body text and use sans serif fonts
for the headings. The new school says just the opposite.
The logic of the new school is that sans serif fonts like Arial
are easier to read on computer screens than serif fonts like Times
or Times New Roman. Since the text us smaller in the body text,
they argue that the sans-serif is easier to read and makes more
sense since our goal is communication.
The new school states that the headlines and headings are larger
and thus easier to read, so serif fonts including some pretty
outrageous ones may be used to draw attention to the smaller body
text, which is the goal of the headlines in the first place, to
entice the visitors to read the text.
The old school's argument is convention. They say that people
are accustomed to reading serif fonts in the body and seeing sans-serif
fonts in the headings because this is the way printed material
is typically presented. Since this is what people are used to
and comfortable with, they argue that this style creates comfort
and familiarity.
You can decide for yourself how you want to display your fonts
on your web site but whatever style you choose for your fonts,
be consistent. To me, consistency is comfort.
Fancy Fonts
Fancy fonts can add character to a web site but be careful with
their use because the visitor's computer may not have this particular
font installed on their computer and won't be able to see your
headlines the way you intended.
In order to combat this potential problem, most web designers
use multiple fonts in their font tags in case their first choice
is unavailable. Many designers follow the 3 font format: the first
font is for Windows users, the second font is for Macintosh users
and the final font is actually a type of font, either serif or
sans-serif.
You can use as many fonts in a series as you want though. If
the font you specify is not available on the users computer, the
next font type that is available will be displayed. If none are
available on the users computer, the default font assigned by
the user's browser will be used.
The html for multiple fonts is the same as for a single font
except the next font follows the preceding separated by a comma.
Single font example:
<font face="Arial">Fancy Fonts</font>
Multiple font example:
<font face="Jokerman, Arial, sans-serif">Fancy
Fonts</font>
Many larger companies that I have worked with have had formal
guidelines and policies when it comes to fonts, colors, etc. used
in any marketing communication approved by the company.
I remember a bank that I worked with where the font for the logo
needed to be Garamond stretched 120% and kerned 5%. Obviously
this type of accuracy is impossible using default fonts on the
users browser. When you need to depict text in the exact format
required in a logo for example, you have no other choice than
to create a graphic out of your text in an image editing program
like Photoshop.
Just like anything else on the web, there are advantages and
disadvantages of using graphic text. The advantage already mentioned
is the exact replication of the desired font. There are two main
disadvantages.
Since the graphic is no longer text which can be scanned and
indexed by search engines, you loose this ability for the robots
to find you. Being found on the Internet is pretty important and
you might want to think twice before turning key titles and phrased
contained in headings into graphics.
The second disadvantage of using graphic text is load time. Graphics
take much longer to load than standard html text. If you do use
graphic text on your pages be sure to optimize it to load quickly
in an optimization program like Fireworks
(See Graphics Compression:
CSC 110 - Lesson 3). You want to keep your load time to a
minimum, so consider carefully any graphic text that you intend
to use on your pages.
Joy in Repetition
The biggest reason for consistency from page to page is reduced
loading time. Browsers cache (store in memory) graphics and other
media such as Java programs so they don't have to be reloaded
each time the same image is accessed by the browser. This keeps
load time to a minimum.
Design Issues
Usually unless you have some reason for going against the grain,
it is usually best to follow convention when designing your web
site. Users have been to other web pages before and are accustomed
to certain standard ways that certain items on a web page are
customarily displayed. For example: the search feature is usually
in the upper left corner of the web page. If it's not there, the
user is less likely to find it.
Common Conventions
