Designing a Website - Part 1 Information

8/12/2019 Designing a Website - Part 1 Information

1/23


2/23

Table of Contents

Judy Beddoni 2 Web Site Design - 3756A


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



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


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


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



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/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


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


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



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



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



13/23

o the! Tools S#anne! Ca)e!a !a'hi# Tablet

Site Map


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


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


Judy Beddoni 1= Web Site Design - 3756A


15/23

.* "o' u' )enu na+igation button ele)entsdi!e#t lin( to !ele+ant 'age

Page #< About -oga 21A45s A* Banne!



B* :a+igation to' ba! B1* na+igation button ele)ents


C* *$ain #ontentC1* !elated #ontent title I.A4 sF



>* Side :a+igation>1* na+igation button ele)ents



Page '< About -oga 2Infor"ation re0uest for" &ia e3"ail A* Banne!





C* *$ain #ontentC1* !elated #ontent title I nfo!)ation !e uestF




16/23

D* .oote! o @elated #ontent title I#o'y!ightF


di!e#t lin( to !ele+ant 'age .* "o' u' )enu na+igation button ele)ents


Page =< ,pco"ing E&ents3 sign up for ne*s letter A* Banne!


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 >+entssign u'F


D* .oote!

@elated #ontent title I#o'y!ightF


di!e#t lin( to !ele+ant 'age to e)ail info!)ation

Page >< About Classes 2Class Infor"ation A* Banne!





C* *$ain #ontent



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!





Page ?< About Classes 2Classes Offered A* Banne!



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


D* .oote! o @elated #ontent title I#o'y!ightF



.* "o' u' )enu na+igation button ele)ents



18/23


Page )< Publications3 oo/s A* Banne!





C* *$ain #ontentC1* !elated #ontent title IBoo(sFC1* !elated #ontent title I !de!sF






Page $< Publications3Meditation 6uides A* Banne!





C* *$ain #ontentC1* !elated #ontent title I$editation uidesF



19/23

C1* !elated #ontent title I !de!sF


D* .oote!





Web Site Design

o Produce Mind Map and 6enerated Ideas



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



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&



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



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

Documents

Designing a Website - Part 1 Information