Download - Designing a Website - Part 1 Information
-
8/12/2019 Designing a Website - Part 1 Information
1/23
-
8/12/2019 Designing a Website - Part 1 Information
2/23
Table of Contents
Judy Beddoni 2 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
3/23
usiness Scenario
The nne! "ea#e $editation Cent!e has been established fo! th!ee yea!s% and as &ell as
offe!ing #lasses in yoga and self-#on#e'tualisation% sells a !ange of boo(s and )editationguides* The site &ill offe! info!)ation about the Cent!e and the !ange of 'ubli#ationsa+ailable*
Client rief T%e *ebsite is to be designed for+
The nne! "ea#e $editation Cent!e*o The business has been established fo! 3 yea!s
The Client &ants the follo&ing info!)ation in#luded in the site, Business details Add!ess% "hone% .a/% e-)ail0 Classes offe!ed Class s#hedule Class info!)ation &ho fo!% &hat to b!ing% &hat to &ea!% '!i#es0 Bio about inst!u#to!s and thei! #e!tifi#ation nfo!)ation about yoga in(s !esou!#es about yoga and )editation Boo( and $editation uide se#tion &ith details of '!odu#ts nfo!)ation e)ail 'age use! #an !e uest info!)ation0 .A4 s u! isto!y 8 About 9s $ailing list 9'#o)ing e+ents
M! interpretation of t%e client brief+$ain 'u!'ose of the &ebsite is to offe! info!)ation about,The nne! "ea#e $editation Cent!e &ill #ontain se#tions fo!,
About uso u! histo!yo u! #onta#t details
add!ess% 'hone%fa/%e-)ail
o $ission State)ento egal #onditions
"!i+a#y and #o'y!ight 'oli#iesegal 'oli#y
Judy Beddoni 3 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
4/23
,pco"ing e&entso Sign u' fo! )ailing list
To !e#ei+e :e&slette!
About -ogao .A4 so nfo!)ation !e uest 'age ; use! #an !e uest info!)ation +ia e-)ail
$ailing list ; use! #an also !e uest ne&slette! at sa)e ti)e
About Classeso ene!al info!)ation
.a#ilitiesWhat to b!ingWhat to &ea!
o ClassesClass offe!ed
le+els ende! ; )ale% fe)ale o! )i/ed '!i#es
Class s#hedules ti)es and days Boo( a #lass
Class nst!u#to!s Biog!a'hy and Ce!tifi#ations
Publicationso Boo(s
details about '!odu#ts a+ailable!de! fo!) to sub)it +ia e-)ail
o $editation uidesdetails about '!odu#ts a+ailable!de! fo!) to sub)it +ia e-)ail
.in/so in( to e/te!nal !esou!#es
-
8/12/2019 Designing a Website - Part 1 Information
5/23
All age g!ou's All gende!s "e!son &ho !e ui!e gene!al info!)ation on yoga and )editation "e!son &ho a!e inte!ested in )aintaining a healthy life style
,ser Anal!sis
,ser T!pes Infor"ation Re0uired 1unctionsene!al isto!y of yoga in(s to othe! &ebsites
>/e!#ises fo! ho)e Sign u' fo! ne&s lette! $editation aids :a+igate to ??**'ages.A4 s to get fa#ts :a+igate to .A4 s"u!#hase of '!odu#ts :a+igate to ??**'ages
"e!son &anting a #lass Class ti)e $a(e a boo(ing
Class '!i#esClass le+el @e uest info!)ationClass des#!i'tion :a+igate to ??**'agesClass gende! 8 single 8 )i/ed "!int #lass ti)etableClasses held.a#ilitiesnst!u#to!s bio 8#e!tifi#ations
"a!ents Class '!i#es :a+igate to .A4 so& long @e uest info!)ationWhat they do .ill out en ui!ies fo!)a#ti+ities
Infor"ation Arc%itecturePage Structure
Ho"e pagenfo!)ation to be in#luded,
annero Business na)eo ogo
lin(s to ho)e 'age f!o) all 'ages
Top global na&igation baro .i+e )ain buttons lin(ed to )ain se#onda!y 'ages
About us ; o)e 'age About
-
8/12/2019 Designing a Website - Part 1 Information
6/23
"ubli#ations in(s
Side na&igation buttonso si/ )ain buttons ; lin( to se#onda!y 'ages &hen sele#ted &ith lo#al
na+igation 'o' u' )enu lin(ed to that 'ages to'i#sAbout us 2 Ho"e page
o u! histo!yo u! #onta#t detailso $ission State)ento egal #onditions
,pco"ing e&ents 3 lin(s to 'age 3 f!o) all 'ageso sign u' fo! ne&slette!
About -ogao 1A45s ;
in( to 'age 1o Infor"ation re0uest
in( to 'age 2use! #an !e uest ; info!)ation o! ne&slette! +ia e-)ail
About Classes in( to 'age =
o Class infor"ation .a#ilities>ssentials
What to b!ingAtti!e
What to &ea!
o Class Instructors
Biog!a'hyCe!tifi#ations
Classes Offeredin( to 'age 5
le+elsende! ; )ale% fe)ale o! )i/ed
o Class sc%edules
Judy Beddoni 6 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
7/23
ti)es and dayso Class prices
Costs 'e! #lasso oo/ings
Boo( a #lass
Publications in( to 'age 6o oo/s
!de! and sub)ito Meditation 6uides in( to 'age 7
!de! and sub)it
.in/s 2 e7ternal resourceso
-
8/12/2019 Designing a Website - Part 1 Information
8/23
lin(s to ho)e 'age f!o) all 'ageso 9'#o)ing e+ents and sign u' fo! )ailing list button te/t
lin(s to 'age 1 f!o) all 'agesTop global na&igation bar
o .i+e )ain buttons lin(ed to )ain se#onda!y 'ages About us ; o)e 'age About
-
8/12/2019 Designing a Website - Part 1 Information
9/23
Ce!tifi#ations
Classes Offeredin( to 'age 5
le+els
ende! ; )ale% fe)ale o! )i/edo Class Sc%edules
ti)es and dayso Class Prices
Costs 'e! #lasso oo/ings
Boo( a #lass
Publications in( to 'age 6o
oo/s !de! and sub)ito Meditation 6uides in( to 'age 7
!de! and sub)it
.in/s 2 e7ternal resourceso
-
8/12/2019 Designing a Website - Part 1 Information
10/23
nfo!)ation !e uest 'age ; use! #an !e uest info!)ation +ia e-)ailin( to 'age 2
$ailing list ; use! #an also !e uest ne&slette! at sa)e ti)e
o About Classes
in( to 'age =Class infor"ation
.a#ilitieso Des#!ibing &hat is a+ailable
>ssentialso What to b!ing
Atti!eo What to &ea!
Class Instructors Biog!a'hy
o n#ludes i)age of inst!u#to! Ce!tifi#ations
o ists ualifi#ations of inst!u#to!
o Classes Offeredin( to 'age 5
e+els Details beginne!s% inte!)ediate o! ad+an#ed le+els
ende! Details if #lasses a!e fo! )ale% fe)ale o! )i/ed
o Class sc%edules ti)es and days
details of days and ti)es of all #lasses a+ailableo Class prices
"!i#es Details of #osts 'e! #lass
o oo/ings Boo( a #lass
o Publications in( to 'age 6
oo/s Details of boo(s on offe! &ith i)age of boo(s !de! and sub)it
Meditation 6uides in( to 'age 7
Details of )editation guides on offe! &ith i)age of guides
Judy Beddoni 1 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
11/23
!de! and sub)it
1ooter#ontaining '!i+a#y% #o'y!ight and legal #onditions on all 'ages
Tec%nical re0uire"ents 8 considerationsEnd users re0uired soft*are and %ard*are to use t%e *ebsite
o Co)'ute!o nte!net a##esso B!o&se! to +ie& the &ebsite
Platfor" and Operating S!ste"o A''le $a#o $i#!osoft Windo&so Windo&s 5 % % E" o'e!ating syste)
ro*ser and ro*ser &ersionso .i!efo/ 5o .i!efo/ 6o nte!net >/'lo!e! 5o nte!net >/'lo!e! 6o :ets#a'eo 'e!a
Screen si9e and resolutiono To a##o))odate all use!s #o)'ute! )onito!so 15F % 17F % 1 Fo / 6 to 12 /1 2=
Internet re0uire"entso S'eed )ay +a!y be#ause of net&o!( #onfigu!ation% line uality and length%
and e/#hange ty'e
Judy Beddoni 11 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
12/23
o Dial u' 6=Gbits8s
o ADS 1 B!oadband 256Gbits8s 512Gbits8s 1*5$bits8s
o ADS 2 B!oadband 2=$bits8s
Artistic 8 design considerationso Colou! s#he)e
9se of &a!) ea!thy shades% #al)ing #olou!s !eens in ba#(g!ound i)ages fo! #ont!ast
o :a+igation style lobal na+igation to' ba! With lo#al and #onte/tual na+igational d!o' do&n 'o' u'
)enu f!o) side na+igation
Main designo Well balan#ed layout and design st!u#tu!e
&el#o)ing 'ea#eful% ha!)onious and !ela/ing t!an uil feelto the 'ages
Tools re0uired to de&elop t%e *ebsiteo Co)'ute! a!d&a!e
"latfo!) - $i#!osoft Windo&s "C $i#!osoft Windo&s o'e!ating syste)
o Co)'ute! Soft&a!e "hotosho' .i!e&o!(s $i#!osoft &o!ds D!ea)&ea+e!
o
B!o&se!s fo! testing .i!efo/ 5 .i!efo/ 6 nte!net >/'lo!e! 5 nte!net >/'lo!e! 6 :ets#a'e 'e!a
Judy Beddoni 12 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
13/23
o the! Tools S#anne! Ca)e!a !a'hi# Tablet
Site Map
Judy Beddoni 13 Web Site Design - 3756A
o)e "ageAbout usu! isto!yu! Details
egal Conditions
About ssentials
Atti!eClass nst!u#to!s
9'#o)ing >+entsSign u'
:e&slette!
"ubli#ationsBoo(s!de!s
in( >/te!nal
@esou!#es
nfo !e uestsSub)it
About ClassesClassesoffe!edS#hedules"!i#es
boo(ings
$editationuides!de!s
-
8/12/2019 Designing a Website - Part 1 Information
14/23
Stor! oardsHo"e page Th!ee diffe!ent styles of ele)ent 'la#e)ent fo! the o)e'age
Secondar! page Th!ee diffe!ent styles of ele)ent 'la#e)ent fo! only one of the inte!io! 'agesH
'age 6 "ubli#ation ;Boo(s &as #hosen
Wirefra"es and Annotations :IA; "!odu#ed to sho& the info!)ation design fo! e+e!y 'age in the &ebsite
Ho"epage A* Banne!
A1* Title #o)'any na)e
A2* ogo ; di!e#t lin( to o)e 'age
B* :a+igation to' ba! B1* :a+igation button ele)ents
di!e#t lin( to !ele+ant 'age
C* *$ain #ontentC1* @elated #ontent title I u! isto!yFC2* @elated #ontent title I u! DetailsFC3* @elated #ontent title I)ission state)entF
Te/t title des#!ibing #ontent in these a!eas
D* .oote! @elated #ontent title I#o'y!ightF
>* Side :a+igation>1* :a+igation button ele)ents
di!e#t lin( to !ele+ant 'age
Judy Beddoni 1= Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
15/23
.* "o' u' )enu na+igation button ele)entsdi!e#t lin( to !ele+ant 'age
Page #< About -oga 21A45s A* Banne!
A1* Title #o)'any na)e
A2* ogo ; di!e#t lin( to o)e 'age
B* :a+igation to' ba! B1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
C* *$ain #ontentC1* !elated #ontent title I.A4 sF
Te/t title des#!ibing #ontent in these a!eas
D* .oote! @elated #ontent title I#o'y!ightF
>* Side :a+igation>1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
.* "o' u' )enu na+igation button ele)entsdi!e#t lin( to !ele+ant 'age
Page '< About -oga 2Infor"ation re0uest for" &ia e3"ail A* Banne!
A1* Title #o)'any na)e
A2* ogo ; di!e#t lin( to o)e 'age
B* :a+igation to' ba! B1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
C* *$ain #ontentC1* !elated #ontent title I nfo!)ation !e uestF
Te/t title des#!ibing #ontent in these a!eas
Judy Beddoni 15 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
16/23
D* .oote! o @elated #ontent title I#o'y!ightF
>* Side :a+igation>1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age .* "o' u' )enu na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
Page =< ,pco"ing E&ents3 sign up for ne*s letter A* Banne!
A1* Title #o)'any na)e
A2* ogo ;
di!e#t lin( to o)e 'age B* :a+igation to' ba!
B1* na+igation button ele)entsdi!e#t lin( to !ele+ant 'age
C* *$ain #ontentC1* !elated #ontent title I9'#o)ing >+ents- sign u'F
Te/t title des#!ibing #ontent in these a!eas
D* .oote!
@elated #ontent title I#o'y!ightF
>* Side :a+igation>1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age to e)ail info!)ation
Page >< About Classes 2Class Infor"ation A* Banne!
A1* Title #o)'any na)e
A2* ogo ; di!e#t lin( to o)e 'age
B* :a+igation to' ba! B1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
C* *$ain #ontent
Judy Beddoni 16 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
17/23
C1* !elated #ontent title IClass nfo!)ationFC2* !elated #ontent title I.a#ilitiesFC3* !elated #ontent title IAtti!eF - &hat to b!ingC=* !elated #ontent title I>ssentialsF - &hat to &ea! C5* !elated #ontent title IClass nst!u#to!sF
Te/t title des#!ibing #ontent in these a!eas D* .oote!
@elated #ontent title I#o'y!ightF
>* Side :a+igation>1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
.* "o' u' )enu na+igation button ele)entsdi!e#t lin( to !ele+ant 'age
Page ?< About Classes 2Classes Offered A* Banne!
A1* Title #o)'any na)e
A2* ogo ; di!e#t lin( to o)e 'age
B* :a+igation to' ba!
B1* na+igation button ele)entsdi!e#t lin( to !ele+ant 'age
C* *$ain #ontentC1* !elated #ontent title IClass ffe!edFC2* !elated #ontent title IClass S#heduleFC3 !elated #ontent title IClass '!i#esF C=* !elated #ontent title IBoo(ingsF
Te/t title des#!ibing #ontent in these a!eas
D* .oote! o @elated #ontent title I#o'y!ightF
>* Side :a+igation>1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
.* "o' u' )enu na+igation button ele)ents
Judy Beddoni 17 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
18/23
di!e#t lin( to !ele+ant 'age
Page )< Publications3 oo/s A* Banne!
A1* Title #o)'any na)e
A2* ogo ; di!e#t lin( to o)e 'age
B* :a+igation to' ba! B1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
C* *$ain #ontentC1* !elated #ontent title IBoo(sFC1* !elated #ontent title I !de!sF
Te/t title des#!ibing #ontent in these a!eas
D* .oote! @elated #ontent title I#o'y!ightF
>* Side :a+igation>1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
.* "o' u' )enu na+igation button ele)entsdi!e#t lin( to !ele+ant 'age
Page $< Publications3Meditation 6uides A* Banne!
A1* Title #o)'any na)e
A2* ogo ; di!e#t lin( to o)e 'age
B* :a+igation to' ba! B1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
C* *$ain #ontentC1* !elated #ontent title I$editation uidesF
Judy Beddoni 1 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
19/23
C1* !elated #ontent title I !de!sF
Te/t title des#!ibing #ontent in these a!eas
D* .oote!
@elated #ontent title I#o'y!ightF
>* Side :a+igation>1* na+igation button ele)ents
di!e#t lin( to !ele+ant 'age
.* "o' u' )enu na+igation button ele)entsdi!e#t lin( to !ele+ant 'age
Web Site Design
o Produce Mind Map and 6enerated Ideas
Judy Beddoni 1 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
20/23
o Produce detailed Design Stor!boards for allpages
o Produce ti"eline of pro@ect lifec!cle including
"ilestones and deli&erables
Due '> t% No&e"ber '(()
A)end)ents ha+e been )ade to site )a'% te/t info!)ation andWi!ef!a)es of the '!e+ious se#tion #o)'leted last &ee(*n the designing stages so)e 'ages &e!e not suitable to be on thei!
o&n% so had to )a(e these #hanges* As (no& the #lient &ouldnot be satisfied and &ould not sign off on this &o!(?*
MilestonesDefining t%e purpose of t%e siteThe #o)'any has been in business fo! 3 yea!s and no& &ould li(e to ta(e his businessonto the inte!net +ia a &ebsite to gi+e his #lients info!)ation about the se!+i#es he has tooffe!*
,nderstanding t%e clients needs and re0uire"ents.ollo&ing the #lients b!ief to #o)e u' &ith ideas fo! the site to the !e ui!eds'e#ifi#ations*
De&eloping a St!le
De+elo' ideas that a!e suitable fo! the #lient &ith his #o)'any in )ind as to the designlayout and style #hosen*
Na&igation and Interacti&it!Choose the inte!a#ti+e ele)ents in the &ebsiteDe+elo' a na+igation and inte!a#tion 'lan
De&elop design stor!boards for t%e site
Judy Beddoni 2 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
21/23
utlining inte!fa#e design #hoi#esContent st!u#tu!e
:a+igationTe/t!a'hi# ele)ents
Deli&erables to be gi&en to t%e clientClient b!ief info!)ation
o Set out fo! use in sto!y boa!d layouts
Basi# sto!y boa!d layouts
Wi!ef!a)es fo! all 'ages in the site
Detailed design sto!y boa!ds fo! all 'ages in the site
o With 'la#e)ent of all ele)ents to be used
"!ototy'e of all 'ages in the site
o )ade u' in a g!a'hi#al soft&a!e '!og!a) su#h as fi!e&o!(s o! 'hotosho'
style guides fo! e+e!y 'age in the siteo #ontaining all ele)ent details !ega!ding ea#h '!ototy'ed 'age sub)itted0
Client needs to sign off afte! ea#h ste' befo!e you #ontinue on to the ne/t
Co"plete Pro@ect Organisation and Manage"ent Plan.o! The nne! "ea#e $ediation Cent!e
Wee( 11 8118 6
Site DefinitionClient b!ief Site goals"lanning Budget
Ti)elineS#heduleisual stylete#hni#al needs
basi# st!u#tu!eta!get audien#e
'!i)a!y )essage to be #on+eyedSet u' o+e!all st!u#tu!eC!eate sto!y boa!ds basi# layoutsDe+elo' Site st!u#tu!e and nfo!)ation A!#hite#tu!eSite)a' de+elo')ent Site +ie&Wi!ef!a)es "age +ie&
Judy Beddoni 21 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
22/23
nte!a#tion de+elo')ent .un#tional +ie&Tools and Soft&a!e .o! de+elo')ent and testing
Wee( 2178118 6
De+elo' nte!fa#e and isual Design$ind )a' and gene!ate ideas C!eate !ough design sto!y boa!ds
C!eate detailed design sto!yboa!ds fo! all 'ages!ganiKe #ontent 'la#e)ent of all ele)entsTe#hni#al !e ui!e)ents need to be #onside!ed
Wee( 32=8118 6
De+elo' "!ototy'e #!eations9se a !ange of ty'og!a'hi#al L +isual ele)entsC!eate '!ototy'e of all 'ages in siteDe+elo' Style uidesC!eate style guides of all 'ages n#lude details of all s#!een
ele)ents
Wee( = ht)l '!odu#tion on full siteon&a!ds !a'hi# o'ti)iKation 8
s'li#ed% global ele)ents#!eatedTe)'late '!odu#tion.inal #ontent added Alt tags% $>TA tags%MtitleN tags i)'le)entedTe#hni#al enginee!ing ight s#!i'ting% a+a s#!i'ting% basi# C l% D T$Co)'lete site 'osted to se!+e!fo! testingaun#h the ne&ly de+elo'ed &ebsite$aintenan#e S#hedule .ollo& u' L a!#hi+e all )ate!ials
Proposal for Web Site Design
Produce Protot!pe for all pages
Protot!pe De&elop"ent
Production of Moc/ up pages for *ebsite#!eated &ith 'hotosho' soft&a!ein#ludes all ele)ents that &ill a''ea! on the s#!een
Judy Beddoni 22 Web Site Design - 3756A
-
8/12/2019 Designing a Website - Part 1 Information
23/23
Produce detailed st!le guides for all pages
Production of St!le 6uide for *ebsitein#ludes ele)ents that &ill a''ea! on the s#!eenfo!) in'ut bo/es ha+e a+a s#!i'ting #odes to ale!t use! allinfo!)ation has not been filled in bo/es o! 'ubli#ation sele#tion
buttons ha+e not been )ade
Design and .a!out decision
Design )eets all of the #lients b!iefing inst!u#tionsSi)'li#ity and balan#e of layout and #ontinuity th!ough out the&ebsite!ight side na+igation sa+es on )o+ing #u!se! to the left side of
'age>ase of na+igational fun#tion to the !ele+ant lin(ed 'ages &ith theuse of 'o' u' )enus f!o) side na+igationWel#o)ing and 'ea#eful% ha!)onious and !ela/ing t!an uil feel tothe natu!al layout of the &ebsite