University Projects

I got the majority of the images used in the website from pexels.com which is an online image site. I decided not to reference these images as they are free to use for commercial use and attribution is not required, which is stated in their image licencing policy: (Screenshot of licence for Pexels images, own image) Although the majority of the images used on Ramsay Safety Solutions' website were free because of the niche line of work Ramsay Safety Solutions is in, there wasn't always an appropriate or relevant image that related to the company. Therefore with agreement from the managing director, we decided to purchase a Shutterstock image package. This allowed us to download five images for £29. We decided to only use this package when we needed a header, slider or blog image that was in a niche area. (Screenshot of prepaid image packages from Shutterstock, own image) Below are the images we purchased on ShutterStock. (Screenshot of license history on

I decided to create a stylesheet so that if anyone needs to modify the website, they are informed about  image sizes, colours, buttons and positioning.

I predicted my time management using a Gantt chart at the start of this project which was included in my project proposal. I predicted that this project would take the full ten weeks allocated to complete however, I finished two weeks earlier than expected. Research Phase  Initially I predicted that the research phase would take me one week to complete with three days focusing on 'Coding WordPress Templates' and one day researching WordPress Plugins. This stage took longer due the initial research I completed on WordPress and decided that I would achieve a more professional result if I decided to handcode the website using a BootStrap template. Therefore I spent, one week researching 'WordPress Interfaces' so that I was able to understand the differences between WordPress.org and WordPress.com and to experiment using these systems. I spent a day resarching 'WordPress Plugins' so that I knew what components I could easily put into the website by using WordPres

I used a combination of sketching freehand and sketching on Illustrator to create my characters. I practiced drawing a walk circle for my character so that I could edit her idle state on illustrator so that when she became animated she looked as though she was walking. (Freehand sketches, own images, 2019)

The client requested a sitemap of Ramsay Safety Solutions' website and therefore created the sitemap below for the client. (Sitemap, own image)

Sketching my level helped me to visualise my game. I changed my idea slightly where I thought there could be NPCs saying mean things to the main character and each time the character walked past these NPCs, it would increase the hurt bar UI element at the top of the screen. Once the hurt bar reaches its full capacity, the game ends. I also wanted there to be NPCs that you could interact with that say kind things showing that the world can be cruel but that there are some people that are kind. The hearts are collectable items that decrease your hurt bar as they bring warmth and kindness. 

index.html  Phone button link working correctly on all headers Arrows on headers working correctly - correct header is displayed Video link working correctly - welcome video is shown Workplace Risk Assessment link working correctly - Workplace Risk Assessment service page shown Fire Risk Assessment link working correctly - Fire Risk Assessment service page shown Audits & Inspections link working corrrectly - Audits & Inspections service page shown Accreditation Schemes link working corrrectly - pre-qualification service page shown Bespoke Management System link working correctly - Bespoke Management System service page shown Retained Consultancy link working correctly - Retained Consultancy service page shown Policy Formation link working correctly - Policy Formation service page shown Awareness Training link working correctly - training page shown Contact us button working correctly - contact page shown Team e-mail and linkedin buttons working correctly. Emaili

The contact us page was barely changed from the original design. Interactive map added for interactivity rather than a still image. (Contact Us Page Mockup (Left), Final Contact Page (Right), own images)

Not many chnages were made on the FAQs page. Header image changed to gradiented image to add branding consistency using Ramsay Safety Solutions' colour palette. Navigation bar changed as mentioned previously for clarity. Instead of using #5a5a5b for the left side of the accordion, I decided to use a lighter grey because I felt as though this colour was less harsh than the darker grey. As the purpose of FAQs  are to answer any general questions, I needed the page look professional and inviting. A lighter grey added a softer touch to the page. I decided to add a statement underneath the FAQs with a contact button in case the user has any unanswered questions that the client may be able to answer. Map removed as mentioned previously as it didn't add any extra value and felt unnecessary to have a map at the bottom of every webpage. (FAQs Mockups, own images) (Final FAQs page, own images)

Header image changed to gradiented image to add branding consistency using Ramsay Safety Solutions' colour palette.  Navigation bar changed as mentioned previously for clarity. Photographic imagery used as mentioned previously to add branding consistency using Ramsay Safety Solutions' colour palette with the day and month of each published post added to each image. Instead of continuing the post icons on one page (as this would become lengthy), I decided to create more latest news main pages to improve interactivity and less scrolling for older posts. I deicded to use a maximum of twelve posts per latest news page, otherwise the user may loose interest quickly if they have to continue scrolling down a page. Blue tint used on header images for individual latest news posts, photograph used is the same as the image used on the latest news main page to add consistency and related to the blog post specifically. Image removed from each individual post, as this image was added