WEBSITE IMPLEMENTATION

#2

DESIGNING BACKGROUNDTo change the

background, I first went to the ‘Page

Background’ tab on the left hand side, and clicked ‘customise

background’.

I then clicked ‘change image’ and selected the

image I wanted.

I selected the ‘full screen’ option as I want the background to cover

the whole page, and ‘apply to other pages’ so every page has the

same background.

DESIGNING HEADER/TITLE

To change the title, I clicked the ordinal

text so a formatting toolbar would appear.

I then highlighted the text to I could change

it, and in the ‘font’ drop down chose the ‘Anton’ font as I felt this was the most fitting to my idea.

With the text still highlighted, I selected ‘72px’ from the ‘font size’ drop down box.

FINISHED HEADER/TITLEThe finished title, with ‘INGRID MICHAELSON’ in the font ‘Anton’, with font size ’72px’ and in the colour ‘black’. I chose to use my Artist’s name as the title to make it obvious what the website is

about.

Once I’d finished the title, I also changed the header so that it had a plain grey background, but I changed the opacity so that it was more transparent – this separates the header from the rest of the

page without being too in your face.

ADDING NEW PAGES

To add a page, I went

to the ‘Pages’ tab on the left hand side, and clicked ‘Add’ at the

bottom. I then named

the new page, for example

‘Lyrics’ and clicked ‘OK’.

The template came with pages ‘home’, ‘cast’, ‘images’, ‘blog’ and ‘contact’, so I removed ‘cast’, ‘images’ and ‘blog’ and added ‘news’,

‘music’, ‘video’, ‘live’ and ‘lyrics’ as these are the usual pages included on an artist’s website.

DESIGNING NAVIGATION BARTo change the

navigation bar, I clicked it and selected

‘change style’.

On the ‘text menu’ style, I clicked ‘edit

style’ to bring up the ‘advanced styles’.

I then changed all the background colours to dark grey, and the font

colour to black.

I also changed the opacity of the

background to make it more transparent.

FINISHED NAVIGATION BAR

The finished navigation bar contains links to 7 different pages – home, news, music, video, live, lyrics and contact. They are all in

the same font as the title, ‘Anton’ and in the colour black.

I also designed the colours so that when a page is selected, the background becomes white instead of grey – this allows you to

see where you are on the website, and makes it a bit less static.

DESIGNING THE FOOTER

I designed the footer in a similar way to the navigation bar, by clicking ‘change style’ and going to the ‘advanced styles’. I also gave

it the same design – dark grey background with changed opacity settings.

FINISHED FOOTERThe finished footer contains the same design as the navigation bar (as previously mentioned), and the reason for this is because I wanted the page design to be consistent. The navigation bar / footer also act as barriers around the contents of the main page, so having the same

design for both makes that seem more obvious.

The footer is also where I have put the links to social media pages. I’ve done this because putting them in their own space makes them clearer; I was hesitant to putting them next to the navigation bar like I planned as

I felt they looked a bit out of place and there wasn’t enough room without it all looking squashed.

DESIGNING SOCIAL LINKS

To design/add social media links, I went to ‘social bar settings’. In the settings, I added a ‘Facebook’, ‘Twitter’, ‘Instagram’ and ‘YouTube’ icon, and linked each one to my artists’ profiles. I also made the ‘icon size’

bigger and increased the gap between each one by changing the ‘spacing’.

DESIGNING PAGESEach page will have the same basic design,

which consists of a grey ‘box’ with the same colour as the

footer etc, but with a slightly higher opacity level to make it

less transparent.

The box will have the page title in it in the top left in

white, and all the content will be

inside the box, e.g. tour dates, lyrics.