2. DESIGNING THEBACKGROUND
Tochangethe background,I first
wentto the‘PageBackground’tab
onthe left handside, andclicked
‘customise background’.
I then clicked ‘changeimage’and
selected theimage I wanted.
I selected the ‘fullscreen’optionasI
wantthe backgroundtocoverthe
whole page,and‘applytoother
pages’soevery pagehas thesame
background.
3. DESIGNING THEHEADER/TITLE
Tochangethe title, Iclicked the
ordinaltextso aformatting
toolbarwouldappear.
I then highlightedthe textto I
couldchangeit, andin the‘font’
dropdownchosethe ‘Anton’
fontas I felt thiswasthe most
fittingtomy idea.
Withthe textstill highlighted,I
selected ‘72px’fromthe ‘font
size’dropdownbox.
4. FINISHEDHEADER/TITLE
The finishedtitle,with‘INGRIDMICHAELSON’in the font‘Anton’,withfontsize’72px’andin the
colour‘black’.I chosetousemy Artist’snameas thetitle tomakeit obvious whatthe websiteis
about.
OnceI’dfinishedthe title,I also changedthe headersothatithadaplain grey background,butI
changedthe opacityso thatit wasmoretransparent–this separatesthe headerfromtherest ofthe
pagewithoutbeing tooin yourface.
5. ADDING NEW PAGES
Toaddapage,I
wentto the‘Pages’
tabonthe lefthand
side, andclicked
‘Add’atthe bottom.
I then namedthe
new page,for
example ‘Lyrics’
andclicked ‘OK’.
The templatecamewithpages‘home’, ‘cast’,‘images’, ‘blog’and‘contact’,soI removed ‘cast’,‘images’and
‘blog’andadded‘news’,‘music’,‘video’, ‘live’ and‘lyrics’asthesearetheusual pagesincludedon anartist’s
website.
6. DESIGNINGNAVIGATION BAR
Tochangethe navigationbar,I
clicked it andselected‘change
style’.
On the‘textmenu’ style,I clicked
‘edit style’tobring up the
‘advancedstyles’.
I then changedall thebackground
colourstodarkgrey, andthe font
colourtoblack.
I also changedthe opacityofthe
backgroundto makeit more
transparent.
7. FINISHEDNAVIGATION BAR
The finishednavigationbarcontainslinks to7 differentpages –home,news,music,video, live,
lyricsandcontact.Theyareall in the samefontasthe title,‘Anton’andin thecolourblack.
I also designedthe colourssothatwhen apageis selected,the backgroundbecomes whiteinstead
ofgrey –this allowsyoutosee whereyouareonthe website, andmakesit abitless static.
8. DESIGNING THEFOOTER
I designed thefooterin asimilar wayto thenavigationbar,byclicking ‘change style’andgoing tothe
‘advancedstyles’.I alsogaveit thesamedesign –darkgrey backgroundwithchangedopacitysettings.
9. FINISHEDFOOTER
The finishedfootercontainsthe samedesign asthe navigationbar(aspreviously mentioned), andthe reason
forthisis becauseI wantedthepagedesign tobeconsistent.The navigationbar/ footeralso actasbarriers
aroundthecontentsofthe mainpage, so having thesamedesign forbothmakesthatseem moreobvious.
The footeris alsowhereI haveputthelinks tosocial mediapages.I’ve donethisbecauseputtingthemin
theirownspacemakesthem clearer;I washesitanttoputtingthem nexttothenavigationbarlike Iplanned
asI felttheylookeda bitoutofplaceandtherewasn’tenoughroom withoutitall looking squashed.
10. DESIGNINGSOCIAL LINKS
Todesign/addsocial media links,I wentto‘social barsettings’.In thesettings,I addeda‘Facebook’,‘Twitter’,
‘Instagram’and‘YouTube’icon,andlinked eachone tomy artists’profiles.I alsomade the‘icon size’bigger
andincreasedthe gapbetween each one bychanging the‘spacing’.
11. DESIGNINGPAGES
Eachpagewill havethe
samebasicdesign, which
consistsofa grey ‘box’with
the samecolour asthe
footeretc, butwith a
slightly higher opacitylevel
tomakeit less transparent.
Theboxwill havethe page
title in it in thetopleft in
white,andall thecontent
will be inside thebox,e.g.
tourdates,lyrics.
