Designing a Website
When setting out to design a new website, we have plenty of decisions
to make. Standard web design principles offer us some guidance on
key aspects, such as:
■
Choice of a site color scheme.
■
Choice of text font and size.
■
Placeholder text.
■
Use of white space.
■
Location of navigation menus.
■
Planning for different browsers and screen resolutions.
■
Testing
-------
Cho osi ng a Color Scheme
The background colors and graphics we use have a tremendous effect
on the mood evoked for our visitors. We can use a color wheel to assist
us with making selections:
We should limit the number of main
colors on our site to four (excluding
black and white).
Red
Aqua
Blue
Color selection should always be made
with our target audience in mind . A
color scheme for a site aimed at teens
would be very different than one
targeted at busin~ss customers.
ComplemI entary Color Scheme
Complementary colors are directly across from each other on the color
wZ
he
=e::-.1-:-: - -~ - - - - - -~ ----
Aqua
This strong contrast lends a
vibrant, energetic feeling to a site.
Blue
Triad Color S c h e m e
on e an ot he r on th e
om
fr
t
an
st
di
ui
eq
rs
lo
nt co
Triads ar e th re e di ffe re
co lo r w he el :
■
Aq ua
..·'~.:'•.·~'.
·-:~~:;
.
. i':,,_:;·,
R ed
an t fe e l
C ol or tri ad s offe r a vibr
rs ity
with _a lot of co lo r dive
j
A n a lo g o u s C o lo r S c h
eme
~ na J~ go us co lo rs ar
e th os e th at ar e ne x!
!_o_e ac h ot he r on th e
w he el :
co lo r
A qu a
R ed
B lu e
Analogous colors are
pleasing to
the eye and m ak e fo r
a peaceful,
se re ne design.
■
4'' t~~-~' .
u
'
Choosing Fo nts and Si ze s
we shou ld
Whe n choo sing fonts ·, font size s, and text colo rs for our site,
keep the follo wing tips in mind :
sites: one for head ings and
■ Many designers use two different fonts for their
one for regular body text.
■
■
to be the
Font size must be large enough to read easily. Con side r 12px
minimum acceptable size.
, any light
Black text on a white background is the mos t com mon . How ever
back grou nd
color text with a dark background or dark color text with a light
can be acceptable, provided there is strong contrast.
■
Avoid using bright colors for text.
can easi ly
■ Avoid underlining text or making text blue for emp hasi s, as this
ad .
be mistaken for link text. Use bold or italics for emp hasi s inste
Placeholder Text
Of ten wh en de sig nin g a we b
pa ge , we do n't ha ve ou r tex t co
nte nt wr itte n
ye t, bu t we wa nt to se e a mo
ck -u p of ho w tex t will loo k on
the page. In
th es e ca se s, we ca n us e the
"L or em lps um " tex t tem po ra rily
:
Lorem lpsum Exam ple
I-leader
1
1
11,· Men u
Lo re m Ip su m
!Side bar
Lo rem tpsum dolor sit a.met. consc
ctctur a.d,p1scUJ.g ebt. Donec
nee Yolurpa1 orc1 Doaec cget ms!
Y1t;1c null.a unc1d unt
\ "~nena tis s.ed 1d ris.us A~ea n
ntae e1mn rn dw "..T\' ~ITe.
, ·oJutp at eget a sapten 'Nu!la a1
lacus uuerd u~ tempu s odto id,
moles tie n su.s_ Aenea n ul tnces
s~ nisi, sit amet scelen squ.e
quaxn conse-crerur sit anu r. Ph3.sd
lus mrerdu1n ttistiq ue molhs:.
Kulla faolu.1 Phase llus ur tempc,
r sap1.ea Donec lucrus n eque
s.e-d n·; erra &ic ilis_1s. ~ulis eras
leo, ultncu :s .n erat nee,
f'e.mpu .<i pona od10 ln ,;r :n-ra sag.tn1
s du1m, q uis bibend um
, ·dtt ege.s u:.s at. Null.am quarn lo:reni
, pos ~ ,;c:l nequr 1d,
feuiJA t conY'1lhs ,;drt Prom ,.i.r1us
aJ1qu.t- t ips.um . st-d ulla.ru corpa
!ecrus , ·c.tucula qu1s . Donec w !ecrus
\',varu us ad.sp1s.cmg ohqua m mctus
ncqu'!'
n~c u n.c.idu.01
.
rus chw.tSstm ultrJ C.es at ullam
C
corp~ et n~q uc. \"cstib ulum cursus
ras arru nequ,: , 1uc
;us to b tb~cd um marus
frmuil la Yn,im us
.
cw·sus uJtr1c les eges1a s N: unc
ege1 eu,guc tn ru.rpis .sagin 15 blwd t Scd com·a ll,s nee tdlus •
m-ol~stt~ Cwab1NJ ui ~nun nunc..
l·
cl
l
Donec conse quat fe uguu U.gula
, .
a facil.J!H.S 1\-foun s aucl01 ~st rtot!
\ " ucu a l."UJSUS
r ooter
I
;·,Lorern lpsurn" is text in Latin
· tha t we copy and paste into ou
r
pages for testing. A copy is
available free at lipsurn.corn an
d
ma ny other sites.
White Space
White space is the space between the elements of your web page . It
does not literally have to be white; it can be the color of your background:
What & Why of Usability
•
How To & Tool s
Crea ting Cross-C ha nnel E xperiencP.s
Get Invo lved
Basics of User
E.,p.,,nence
Content Siralegy
Pru/ect Management
Vlsual Design
Too many elements crammed onto a page can be overwhelming to the \Jisitor.
Plenty of white space makes for an uncluttered and easy ..to-read pag,e.
Navigation
Menus
____
...____
Most websites have their navigation links across the top or down the left
side of the screen:
Your Gsleway lo lJ.S. Federal Science
Mome
- ·-.
. .
-
Mobi le
Sltr ~P
Index
Alerts
Help
ESPANOL
Contact Us
Abcut
Communications
The logo or name of the
site in the header is
traditionally a link back
to the home page.
Allli,na- Onl)
.
-
. ·-·----·
-- --···-·
27X ~
te:::i-=r.-"=s ~ 15 ""3ec-.i r ~~kt1 ~ r ~ ~ mi.Ion ;,agn, , , ,1:.~t•<1~!.t1lv~ i,; 3. s-:.v•MMtf!t i ctlli:i::11
~t,pmerJ rt.s ::~ &..cn<C' ;:r. ~ ;pP-~.i t,- :ne r,,era-1-c:r.cy !c1tr:c::~.g l:',.. ;;.;;;,m•;,~
S<. ,e:-.:,, ,-.,. Ki 't ~oc!I ~ ..!:;,:, ~~at,;,sn .in.1 0-~
1rior=,:,o,, nc: •u:Jn; r~
cr,
l:."lC;
Test yovr 1mowledge of sclenet! mVfa and rake Ille Scler.ce.gov Tlivi2 Ct::1lle11ge
r,
t
~, .
(
5
TEN YEARS
~
i Seoo:h .
"~___:__::_..!!......J
\.. Celebratir'ig
\
Science.gov
Science In th~ News
Spec/1/ Collcc r/0111
Fearured Webs/res
I
I
c.troo n
tJdY.1-01. !dtl
C.11'L<i(J ffiCfl~ )JCU
P o1son /,...g
(l...0/ lifl 0001 1~
.
H11 ~ 1i
Atn c •11 Amerlca.n• In Or.lc-i r.c • nr.1
Tecm:c.iocy
_
J
Lurr1 (,1,m, dbW( !lflw11r::, .U<J~J
,rro ... ,1(#tJl(~QJ}I
• Ol vr.nlf)' f.d ll Ci ll Otl
Navigation menus
should be consistent on
all pages of a site.
Pla nning for Screen Resolution
Over 99°/o of deskto p compu ters now have a screen resolution of 1024 x
768 pixels or larger. If we set a site to be 960px wide, we know that
nearly all visitor s will see the page withou t having to scroll right and left.
A site that- has the width set to a specific number of pixels is said to have a fixedwidth layout. It's much easier to plan a site with specific dimensions, but
visitors with very wide screen resolutions will see excessive white space on their
~
screens.
By using percentages rather than pixels, a site can be made to automatically
adjust its width to fit the available space of the screen. This is known as a fluid ,
layout. Though often a better user experience, it's more challenging to the web
designer to build and test this type of site.
Some larger websites have an entirely separate version of their site designed for mobile
devices. These sites automatically detect the mobile browser and deliver trimmed -down
content to accommodate smaller screen sizes . These sites usually have an address like
"m.yahoo .com" instead of "www.yahoo.com".
■
er
Testing
There are several web browsers with major market share, and we must
plan for each of them:
■
Internet Explorer
~
■
Firefo
x
,---
■
Chrome
■
------Safari-----
■
Opera/
Different web browsers can display the same page very differently. Sometimes,
a page will look great in one browser but broken in another.
Good web designers test their pages in multiple browsers and screen resolutions
prior to posting content live.
browsershots.org is a free website that will test a page on numerous browsers and
screen
resolutions and then display the results .
f I
Mo!e
Des ign Tips
-
Here are a few mor d ·
.
.
.
.
.
e es1gn tips to bear in
mind when setting
out to
build a websi te:
•
Aim for consis tency in the look and feel of the site. Logos, headers, footers,
and naviga tions bars should reside in the same spot from page to page, and
site colors and text should remain consistent site-wide.
■
Align groups of eleme nts horizontally or vertically on the page. Alignment
makes a site both easier to use and more visually appealing.
■
Alway s proofr ead your site content. There' s no excuse to have misspelled
words or gramm atical errors. Such errors reflect poorly on you as a
design er.