c



c

 
 á á 

 Part A
Task 1
Main roles in a web design project:

?




ʹ His main role is to identify business needs of the client.

 


ʹ Is a person responsible for marketing of products and services over the
World Wide Web. It may include Search Engine Optimisation, Search Engine Marketing, E-mail
Marketing, and adding banner ads on other websites.


 ʹ He is responsible for a website design. His main roles are to create layout and visual
appearance of a website.





ʹ He is responsible for creating and optimising different type of graphics and
images.

 ʹ His main role is to transfer designs into a real working websites.

Web design stages:


 ʹ The main purpose of this stage is to find out what the aims and objective of the client are.
The developer needs to do an analysis of the client͛s area of business, current marketing tools and
identify users that will be visiting the website. This will help with creating the content of the web
pages and will become a good marketing tool. Also at this stage, it is good to reserve the web address
required by the client.


 ʹ at this stage, the web designer together with graphic designer/artist create different
sketches of the layout, navigation, and key web elements together with storyboard. Everything is
consulted with the client before further steps are taken. This helps to make necessary changes before
the final design is created and it reduces cost in case of different design ideas from the developer and
the client.


 ʹ In this stage, the web pages are develop further. All details of navigation, site structure and
the final appearance of the site are decided. At this stage it`s imported that the designed web pages
are revised from the perspective of the user. This may include answers to question like:
Do I know about what this website is?
Are the types of media (colour, text, images, etc) used in the web site are appropriate and do they
comply with the aims and objectives?
Is the web site easy to navigate and read for users?
Would I like to come back to this website?
Did I find all of t he required information?

Again, at the end of this stage the client needs to approve the design before moving on to the next
stage.




 ʹ after agreeing the design with the client, the website is created by the
programmers and graphic designers according to the final design.
The web pages are tested for capability with different browsers and optimised for accessibility. This
should include WCAG 2.0 Guidelines that are as follows:
1 Perceivable
1.1 Provide text alternatives for any non-text content so that it can be changed into other forms
people need, such as large print, Braille, speech, symbols or simpler language
1.2 Provide alternatives for time-based media
1.3 Create content that can be presented in different ways (for example simpler layout) without
losing information or structure
1.4 Make it easier for users to see and hear content including separating foreground from background

c

 
 ! á 

2 ee
21 e  cy v e   ey !
22 "v!e ses e#$  e  e! ! se ce
23 %  !es# ce    &y $ s &  cse se zes
24 "v!e &ys  $e ses v #e' ! ce  ! !e e e &$ee $ey e
3 U !es!e
31 e e( ce  e!e ! !es!e
32 e )e  #es e ! ee  e !ce &ys
33 *e ses v ! ! cec ses
4 Rs
41 ( ze c y &$ ce  ! e se #e s' c!# sssve ec $#es
+)! )!e )e ,s ' 2008' e-

.e $s s#e' $e ce c see $e es  ! !ec!e  $ee e y c $#es ecessy

c  /

0
 0 

1 ʹ .e c e# $e s s#e' $e e( se  s  e $e &e 
se c )e se s !e !   &e seve ! &e  !!ess s ss#e !  $e &e se

2  1 




   1 

1
ʹ .cc!#  ece +2006'
247- e  $e s c  #s   &ese s  e  $e   $e sec $ ess  $e #
3
sec $ e #e &e ses $s s#e s vey  e!  $e ce ecse s  $e e  ses
& se sec $ e #es ! S4 #e$e &$ S4 & ceses $e c $ces  c# $e 
$e &e se

c  

  )e  ses e 5e e5e  !es ! $e !eve e 

67s8 2
. sy! s !ce !  $e ce   $e e ##  $e !es# cess 9 & s$&
ce $& $e &e se & & ! !e y $e  es  $e &e se ! &e #es

67s8 3
Be:
p

p

p ppppppp p p p p p
p
p

N v# B: 

 !"#"$%&'

Use # e:

$
 (     ) (

Sec $ :

 !      —
 

Fe:

    





 ce sec:

a

%*  
a
a  
a 
a
a

a 

aaa
a




 a


a    a  


a a 
 
a
 
 aa
 
 a a 


a

a  

       
c


    
    

D 


a 

a

À sA 4
BC DEe c FGGe CD DGeCH IJ KeL HesMNCO MD Ms PIPFQ
se yyPes v MN   ceRÀ
e
s
yes v  
eS

ye
eT

ye
e H ʹÀ
s
s - e
ye
 v   s 
ye v  

 sse
s
j
ee L
 e 
e


 sec  c ce
 eL e
seseT  es

e
e 
eT e

 v   s

  8e







 e
ʹÀ
sye v   es  s

 eÀ
e
scs e
sye v  
e
e L e
es
S
veys
eT e
ye v  c e 
se
 e
essec 
 sz -U s 




 e

c
c ʹÀ
e 
se
sye v  
s se
s ccess 
ee es

y
e
e 
ees eeT e
ye
 v  c e
 cU
c







-À
s v  yeses
 s
es 

se
c
 
se
 sec  cec sey e 
ve
v e 
ee es sese e
e
eseT e
ye v  c e

  8e






 

> ? @
c
;

<= 

   
[ 


À s

  es  s e


seeY  es 
e
e  e
e
es ee sye
s  
es e ve
  
    
ee c e y
eY e 
  es  sc

c
e eyes
  c
 esc

ecy
esve
se
 e se  esv es


 
 ! 
!
?


  
c
ec
e s e


es
c
e syse  ces  
  À
e 

se 
  
c
ec
e seveeec ves
c
e 
  

  
c
ec
e
ees e sse
 v ee sy


 ss v  e  
 cy 
 s
e
e

S e  N v  
ye Fc


s
se ss
  s c

se
eve    s sc
e  c

c
ec
e
ees e 
ees e v  
e
ese  se
 
ec s    
cess 
e
es ees 

eccs s e
e

s
  e
eyeses e
e

S e  s e e N v  
ye se e Fc

 se e

  
c
ec
e  
  es À
s 
  es Fc


ec se s
seve
ye c
e  
e v  
es 
    ec s 
 e
ees e  s 
yee
ec
e   
e  s
s
s
cess e sy
c  
e  sc
e e 
 es eevee
c c
ec  e
s  e y#
 !"es e
 
e v   ese
 c    
  e s
   eZse
c
e es e 
ey 
c c  e s ve
yc c e
 ec
e ese 
   
e  cs
 se
se
c
 


 
ce
ees e 

 \\
& '


#'( N \

 $ "

e


e
 e


 B [ % " F
c c
 B







W X
c


V  

   

 


Task 6
There are many web-authoring tools on the market. In my opinion, there are two types of
web-authoring tolls. First of them is text based html editing tools like Microsoft ]otepad, Pajac ^ek,
BBEdit or HTML-Kit which allows user to edit source code.

The second group of tools are WYSIWYG (What You See Is What You Get). Mostly they don`t
require any programming knowledge from user. Most popular tools like Adobe Flash, Microsoft Front
Page, and KompoZer can be found in this group. Some of them are combination of text and WYSIWYG
editors like famous Adobe Dreamweaver. These tools allow user to created professional looking web
pages in just minutes without any specific knowledge about HTML or CSS. Thanks to them, everybody
can have his own space on the World Wide Web. Below I will provide list of the most popular web-
authoring tools and short description of the most interesting web-authoring tools:

AbiWord Evrsoft 1st Page ]otepad

Adobe ColdFusion FCKeditor ]otepad++
Adobe Dreamweaver Firebug ]oteTab
Adobe Flash
Freeway ]vu
Adobe GoLive
gedit OpenOffice.org Writer
Adobe HomeSite
Google Page Creator Opera Dragonfly
Adobe PageMill
HomeSite PSPad
Alleycode HTML Editor
Homestead Quanta Plus
Altova StyleVision
HotDog _apidWeaver
Amaya
HoTMetaL Sandvox
AOLpress
HTML-Kit SC _EEM
Apple Pages (part of the iWork suite)
i ]etWord SeaMonkey Composer
AppleWorks
iWeb skEdit
Aptana
jEdit Smultron
Arachnophilia
Kate TextEdit
BBEdit
KompoZer TextMate
BestAddress HTML Editor
Media Lab SiteGrinder TextPad
BlueFish
Microsoft Expression Web TextWrangler
Bluevoda
Microsoft FrontPage TopStyle
CoffeeCup HTML Editor
Microsoft SharePoint Designer `ltraEdit
ComfyPage
Microsoft Visual Studio vi
Create
Microsoft Visual Web Developer Vim
Crimson Editor
Microsoft Word Web Developer
Developer
Mo ^illa Composer WordPerfect
Eclipse with the Web Tools
nano WorldWideWeb
EditPlus
]etObjects Fusion WYMeditor.
Emacs
]etscape Composer
EmEditor

c

 
 · á 

  Description
One of the most popular web-authoring tools of all times. It was first introduced in

!

1996. In 2006, Microsoft Expression Web and Sharepoint Designer replaced it.
"

Adobe Dreamweaver is world leader in WYSIWYG tools. Macromedia first released it
 in 1998. From version 8, released in 200, is owned by Adobe and it`s a part of
# Adobe Design Suite.


!
 Microsoft Expression Web is a part of Microsoft Expression Studio Suite. It was
a 

 released for a first time in 2006. With version 2008 Microsoft added PHP support.

Previously known as Macromedia Flash. Flash revolutioni bed websites. It uses
ActionScript. Adobe Flash allows users to create different websites elements as well
"

as fully functional websites.

KompoZer is known as the best free alternative for Adobe Dreamweaver.

cnfortunately there was no new version or updates since August 2007 due to lack of
$%
developers.

c

 
 Î á 

 $RÀB

À s1
F
À s1$
B
e ss e
vec
se

ee e
ees es
e

e ec ss cc
s
e
ese e
ees  e sÀ
s
e e ec
se
e
eses 
yc es`es e


Y

 




Y
       




Y

  

e f
c


d  

   
  


  &

&&  &


 


&&  &
&& 

For header, footer, and left navigation For header and footer the colours used on #CCFFFF (light
section the colour used on the website is the website are #21623f (green) and for blue)
?  #336633 (green) otherwise is #ffffff content #ffffff (white).
(white).

Layout composes from four main sections: Layout composes from three main sections: Layout composes
3 Header where you can 3 Header where you can find only from content
find banner together banner and navigation that section
with some highlighted relates to different
ads and navigation that sections of the website,
relates to different 3 Main content section,
 
 sections of the website, 3 Footer with contact details
3 Left side with navigation and information about the
thru classic cars ads, website,
3 Bottom with links and
information about the
website,
3 Main content section,
Between 8px and 12px. 10 % of standard font si ge Font si ge 2 and 3
"

'

3 Green (#336633,# 3 White (#ffffff) Default colours

cccc00), 3 Black (#000000)
3 Black 3 Green (#21623f)
(#000000,#333333), 3 Yellow (#f1af00)
3 Grey (#999999,
#666666), Font colour depends on role and
3 White ( #ffffff, #dddddd, background.
"
 
 #eeeeee),
3 Yellow ( #ffa00,
#ff8c00),
3 ^ed (# ff0000),

Font colour depends on role and

background.

a 
 Custom colours Custom colours Default colours

 

hone none hone






!








 Yes Yes ho
!
It is professional looking website. Homemade website.  year old child
"

 could do it using


 Microsoft Front
Page.
 
! Selling classic cars. Classic cars touring. It`s not clear.




Well design and easy to navigate website. The design of the website is simple and looks Poor design and
 like made by classic cars passionate with complete chaos.
poor knowledge about web design.

c

 
 w á 

Task 2.
After evaluating three different websites, I have decided on two types of layout.
Layout 1



  
+ ,- 

Layout 2



+ ,- 

  

- ,   ,+  

c

 
 á á 

Task 3
  


Discussion with the client.
(
^eserve web address.
)
See how the competition done their websites.
*
Think about elements needs to be on every page.
+
Create sitemap, storyboard, and a few different layout ideas.
,
Contact with the client about feedback.
-
^ework.
.
Create web frame showing where and how will be looking the main components of
/
website like navigation and other.
Decide about colours, fonts types and si ies, logo and other graphics and other content.
0
Feedback and if necessary back to point 8.
(1
Choose the best way to do the website.
((
Decide about accessibility options.
()
Make decision about specific content.
(*
Decide which programming language I need to use, like HTML, XHTML, CSS, PHP, ASP,
(+
Action Script, JavaScript and other.
Create web template that can be further develop into live website.
(,
Search for errors.
(-
Test template for functionality.
(.
Test the templates compatibility with different browsers.
(/
Get feedback from users and the client.
(0
Make necessary changes to the web.
)1
Create subpages and add all of the content.
)(
Optimi ie for search engines.
))
Transfer website onto web server.
)*
Assign web address to the website.
)+
Test website and make changes if any mistakes.
),
^egister with search engines.
)-
jpdate if necessary.
).

c

 
 áá á 

Task 4

Storyboard:
Slide 1

£
£ £

 



Slide 2

†
 
 

 



Slide 3

†
 

   !

k

"   + , + , + , + ,
k
# " 
# " $

l
 "  $
   $  %  &

l
 "  %
+ , + , + , + ,

 '  (  )  *

c

 
 á! á 

Slide 4

m q m
†
no p rst un
 — vwxy- y. x

z
‚
" {

" —

~  €
‚
"

 — 0 —

ƒ

" —


ƒ „

" —
 z—
 {/|—†}

Slide 

†—
…† ‡—
…

Œ
 c ˆ1 ‰ Š ˆ ‹  Š ‰ ŽŽ ˆ!

    

" —
2
" —
2
" —
 2
" —

 
"

—
—
/—†
 
"

 
"
—
—
/—†

Slide 6

—
"

c

 
 á á 

‰ser task analyst chart:

Buy a classic car

Search using
Search using ^ead about
navigation
search engine classic cars
option

Consider
Buy classic car Buy classic car
different models

Search for Search for Look for

different different insurance

‘avigation chart:

index

home sale about articles

just added american uk other motorbikes contact insurance

news mark 1 mark 1 mark 1 mark 1 history classic cars

goal mark2 mark 1 mark 1 mark 1 advice

tours

Task 

I have also sent completed website to s.mian@bradfordcollege.ac.uk.

c

 
 á á 

Bibliography

World Wide Web Consortium (W3C) (2008), Edited by Caldwell, B., Guarino ^eid, L., Vanderheiden,
G., Cooper, M., Chisholm, W., Slatin, J. (04 ’ovember 2008)
c
 



 
 
 c  [Online]
Available:
http://www.w3.org/T^/2008/P^-WCAG20-20081103/ [08 ’ovember 2008]

Wikipedia, The Free Encyclopaedia. (4 ’ovember 2008)



  [Online]
Available: http://en.wikipedia.org/w/index.php?title=Information_architecture&oldid=24970490 [08
’ovember 2008]

Barker, I. (4 ’ovember 2008)

c



  nline]
Available: http http://www.steptwo.com.au/papers/kmc_whatisinfoarch [2 ’ovember 2008]

Mercer, D. (May 2006)

 
 ! " 
c

 
Birmingham: Packt Publishing

^osenfeld, L., Morville, P. (February 1998)



   cc
 c

Sebastopol: O͛^eilly and Associates, Inc.

SKDesigns (6 July 2008)

c

 
 [Online]
Available: http://websitetips.com/ [20 ’ovember 2008]

Yongfook (9 December 200)

# c

  $  " [Online]
Available: http://pingmag.jp/200/12/09/the-website-development-process/ [14 ’ovember 2008]

Hart, J. (2008)
c

# %#&' 
 [Online]
Available: http://www.c4lpt.co.uk/Directory/Tools/web.html [12 December 2008]

c

 
 á  á