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
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.
Blue
 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
rs eq ui di st an t fr om on e an ot he r on th e
nt co lo
Triads ar e th re e di ffe re
co lo r w he el :

■ ..·'~.:'•.·~'.
·-:~~:;
.
. i':,,_:;·, j

R ed
Aq ua

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
 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!
w he el : !_o_e ac h ot he r on th e
co lo r

A qu a R ed

Analogous colors are

pleasing to
the eye and m ak e fo r
a peaceful,
se re ne design.
B lu e
■
u 4'' t~~-~' . '

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 :
■ Many designers use two different fonts for their
sites: one for head ings and

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
ye t, bu t we wa nt to se e a mo nte nt wr itte n
ck -u p of ho w tex t will loo k on
th es e ca se s, we ca n us e the the page. In
"L or em lps um " tex t tem po ra rily
Lorem lpsum Exam ple
:
I-leader

1
11,· Men u
1
!Side bar
Lo re m Ip su m
Lo rem tpsum dolor sit a.met. consc
nee Yolurpa1 orc1 Doaec cget ms!
ctctur a.d,p1scUJ.g ebt. Donec ;·,Lorern lpsurn" is text in Latin
Y1t;1c null.a unc1d unt
\ "~nena tis s.ed 1d ris.us A~ea n
ntae e1mn rn dw "..T\' ~ITe. · tha t we copy and paste into ou
, ·oJutp at eget a sapten 'Nu!la a1
moles tie n su.s_ Aenea n ul tnces
lacus uuerd u~ tempu s odto id, r
quaxn conse-crerur sit anu r. Ph3.sd
s~ nisi, sit amet scelen squ.e
lus mrerdu1n ttistiq ue molhs:.
pages for testing. A copy is
Kulla faolu.1 Phase llus ur tempc,
r sap1.ea Donec lucrus n eque available free at lipsurn.corn an
s.e-d n·; erra &ic ilis_1s. ~ulis eras
f'e.mpu .<i pona od10 ln ,;r :n-ra sag.tn1
leo, ultncu :s .n erat nee, d
, ·dtt ege.s u:.s at. Null.am quarn lo:reni
feuiJA t conY'1lhs ,;drt Prom ,.i.r1us
s du1m, q uis bibend um
, pos ~ ,;c:l nequr 1d,
ma ny other sites.
aJ1qu.t- t ips.um . st-d ulla.ru corpa
\',varu us ad.sp1s.cmg ohqua m mctus !ecrus , ·c.tucula qu1s . Donec w !ecrus
n~c u n.c.idu.01 ncqu'!'

C . rus chw.tSstm ultrJ C.es at ullam

ras arru nequ,: , 1uc - corp~ et n~q uc. \"cstib ulum cursus
;us to b tb~cd um marus
frmuil la Yn,im us cw·sus uJtr1c les eges1a s N: unc .
m-ol~stt~ Cwab1NJ ui ~nun nunc.. ege1 eu,guc tn ru.rpis .sagin 15 blwd t Scd com·a ll,s nee tdlus •
Donec conse quat fe uguu U.gula l· cl l , .
a facil.J!H.S 1\-foun s aucl01 ~st rtot!
\ " ucu a l."UJSUS

r ooter

I
 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 Get Invo lved

• Crea ting Cross-C ha nnel E xperiencP.s 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:
The logo or name of the
site in the header is
traditionally a link back
Your Gsleway lo lJ.S. Federal Science ESPANOL

Mome Mobi le Sltr ~P Index Alerts Help Contact Us Abcut Communications Allli,na- Onl)
to the home page.
- ·-. . . - - . . ·-·----· -- --···-·
S<. ,e:-.:,, ,-.,. Ki 't ~oc!I ~ ..!:;,:, ~~at,;,sn .in.1 0-~ 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
1rior=,:,o,, nc: •u:Jn; r~ cr, l:."lC; ~t,pmerJ rt.s ::~ &..cn<C' ;:r. ~ ;pP-~.i t,- :ne r,,era-1-c:r.cy !c1tr:c::~.g l:',.. ;;.;;;,m•;,~

Test yovr 1mowledge of sclenet! mVfa and rake Ille Scler.ce.gov Tlivi2 Ct::1lle11ge

r,
Navigation menus
t ~, .
(5
\.. Celebratir'ig
TEN YEARS
~
"~___:__::_..!!......J
i Seoo:h .
should be consistent on
all pages of a site.
\ Science.gov

Science In th~ News Fearured Webs/res Spec/1/ Collcc r/0111

c.troo n tJdY.1-01. !dtl

C.11'L<i(J ffiCfl~ )JCU
P o1son /,...g
(l...0/ lifl 0001 1~ . H11 ~ 1i
I I
Lurr1 (,1,m, dbW( !lflw11r::, .U<J~J
,rro ... ,1(#tJl(~QJ}I
Atn c •11 Amerlca.n• In Or.lc-i r.c • nr.1
Tecm:c.iocy _ J • Ol vr.nlf)' f.d ll Ci ll Otl
 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 fixed-
width 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.