The document provides step-by-step instructions for designing a website background, header, navigation bar, footer, pages, and adding social media links. It describes changing colors, fonts, images, and layout. Key sections include customizing the background image, changing the header font and size, adding new pages like "News" and "Lyrics", designing the navigation bar and footer to be consistent and contain links to pages and social media, and outlining each page will have content within a semi-transparent grey box.

1. WEBSITE
IMPLEMENTATION
#2

2. DESIGNING BACKGROUND
To 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.

3. 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.

4. FINISHED HEADER/TITLE
The 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.

5. 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.

6. DESIGNING NAVIGATION BAR
To 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.

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

8. 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.

9. FINISHED FOOTER
The 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.

10. 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’.

11. DESIGNING PAGES
Each 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.