From this stage our website has had about 10 hours work done to it which in my opinion is definitely something which shouldn't have taken 10 hours but I don't any experience with Muse so I have been using the Adobe website linked to each Widget and the help button on the top bar to help me with everything I have been wanting to create, design or change to make it look more professional. 

Changes/add ons made to every page:

You may notice quite a few changes on our Muse document from last week and the website is starting to take a unique direction with each page starting to look individual. 

Firstly, I have added a little white banner to each and every webpage. This little banner has some icons on them, they're actually for our social media pages and email address as we both thought it was important to have these displayed on every page at the bottom in addition to the contact us page. This is an incredibly popular in any and every website as it adds more information to a webpage but also finishes the page off at the bottom which allows the audience to always know when they're at the bottom of the page. On the little white banner (which follows the colour co-ordination of white background and a rounded cornered rectangle that all of our website now uses and is part of our 'uniform') we have 3 icons and our email address, these icons are linked to our Facebook, Twitter and google account. I wanted to add Instagram but Muse doesn't have one for that and I couldn't find one of them little 'follow us on Instagram' type button on google images which was licence free. At the end of the banner we have our email address, ideally I wanted to create this as a link which takes you to an email page but I honestly couldn't figure out how to do that and wasted a good 30 minuets attempting to do this. Rather than wasting more time I am just going to move on.

Another thing you may have noticed is that our home page has a slideshow attached to it. For now it is only displaying the pre set images. I really wanted to have a slideshow of photos incorporated within our website as they're interactive and move which ads another feature onto our page. Last week VJ shows me the different slideshow widgets and told me how to manipulate them to how you want them. Since then I have played around and found a good set up for our slideshow. During week 5 I took photos of people holding phones etc.. editing them slightly in Photoshop, however I stupidly only saved them onto a memory stick only which I have since then lost meaning I do not have the work anymore. I get around this problem and not waste time doing it all again I will now just take some licence free photographs from Google images as they're still effective for the purpose.

The navigation bar has been developed a lot more since last week and has taken some time to get to where it is now. I noticed it was interactive but it didn't do anything when you were on a specific page (meaning you can't easily identify what page you're currently on). What I did here was create a outer glow on the button for the current page to allow the use to quickly become aware of the page they're on. The colour purple is suitable because it is bold but not too in your face which I found using pink, yellow and orange all were. The purple colour is also the same purple used in our 'SAFETY' banner as I don't particularly want to create a new colour pallet due to our website containing many colours already. In addition to this change to the navigation bar, I have given each button a slight shadow as well as bevelled them to give them a 3D effect which allows them to stand out from the background becoming a focal point for the website. Me and Kate both agreed that the navigation bar is one of the most important aspects of our website so I have spent a lot of time on this. A final addition I have made to this navigation bar is a rollover action on all the pages which aren't the current webpage. This rollover is a red glow on the outside of the cloud when the curser of the mouse rolls over the button. This gives our navigation bar direction, effectiveness, appeals to our target audience (kids/teens) as they really like things which are interactive and it looks professional. I used the colour Red because it is a colour which really stands out, contrasts against the blue background and is incorporated within the 'SAFETY' banner. The only problem which has occurred during the development of the navigation bar is when you rollover the text on the button the red glow on the cloud disappears. I have spent lots of time attempting to fix this, googled the issue and looked through the Adobe Muse help website but I simply cannot find a solution to my problem. This means I will have to change the navigation bar in some way to fix this issue. I wont do that just yet as I will do this once me and Kate have decided on fonts for our website to see if I can maybe do something with highlighting the text on the button when it is rolled over rather than the button itself potentially but we will see.

When filling out the content (provided by Kate) on the website, VJ informed me that it was a little heavy and that I should split it up into smaller paragraphs as our target audience will not read a big chunk of writing so to get around this I found a widget called 'Tabbed Panels' which has a three tab system, allowing the text to be broken up easily and effectively. I have messaged Kate and asked her create more content but for it to be split up three ways to fit into the tabbed panel. The content needs to be changed for all the pages except the 'Home' page as there is too much content on each one. The Contact us page doesn't have too much content but too little and I think it would be nice and 'uniform' to have the tabbed panel on all on the pages after the home page. This is another interactive feature for the website too to keep things changing on our website and keeping the target audience engaged in our site as well as getting our educational meaning across to them.

As I have mentioned in previous week's work I took the 'unsuccessful' logos and created website graphics for them to fill the page with something  else as having a lot of blank spaces doesn't look good or professional. I have used one of the developed logo design (logo 2) and inserted it into the 'Parent/Guardian Safety' as it works well on that page due to the message being someone talking about a smartphone. I didn't add any colour to this graphic as there is a lot of colour going into each page which wouldn't work if more colour were to be thrown on the page, this is why the monochrome design is still in place. However, this graphic may be moved onto the 'Cyber Bullying' page as I'm not a big fan of the extra 2 website graphics being on the last 2 webpages like they have been dumped there. To get around this I will probably move the graphic onto the 'Cyber Bullying' page and insert another slideshow onto the 'Parent/Guardian Safety' page instead to create a bit more diversity as the user flows from page to page.

The second website graphic inserted onto the website is the original logo me and Kate created together in week 4 but my own development of it to make it look a bit more professional and finished. I have inserted this graphic into the 'Contact Us' page due to it potentially giving the user a topic title or idea of what to contact us about. I also feel that this graphic works well on this page as a summary of our website on the last page of the site.

I am really happy I have been able to incorporate these into the website as it keeps every page having something different on each page, adding to their individuality which helps keep audience engagement and preventing them to get bored on the site if everything was practically identical on each page. This is a thin line as you need to stick to the websites 'uniform' but also need to make every page unique. I feel like we are achieving this here.

Finally, you may have seen a little box on the contact us page which is linked directly to our email address and sends us a blast with a little query or question one of our users may have. This is a widget called a 'Simple Contact Form' and is a asset to our website as we know all people like to contact a company in different ways. It also makes our website look professional. I really like having this on our contact us page as it straight away identifies the page as being our 'Contact Us' page. I may move this down a little and spread it out horizontally to use best of the space available for when we insert a 'tabbed panel' into this webpage.