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

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

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

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

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

Not many changes were made to the training pages. Header image changed to gradiented image to add branding consistency using Ramsay Safety Solutions' colour palette. Navigation bar changed as mentioned previously for clarity. Illustrations used as mentioned previously as simple outlined illustrations represent a clean, clear and trustworthy service due to the clarity of the lines. Header image removed for individual training pages, as these pages are displaying important course information, I wanted to keep them simplistic.  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. (Training pages from Mockup, own images) (Final training pages, own images)

After finishing the main website implementation for the landing page and about page (structure, main images in place) before the finalised versions of these webpages, Carlo sent me a list of small changes to be made. Navigation bar - Make text slightly larger. HOME etc. Buy Header Image - On Shuttlestock - Showing Shuttlestock on image. Message under Images - Slightly larger text e.g Under - Ramsay Safety Solutions Limited -  Simple easy to understand Audit - and all related messages. 800 690 6293 button - Larger Numbers. Welcome Section - Remove Diamond Shapes background. Logo - Too big takes up a lot of space, reduce size please. Services - Change Message 'Our Aim'... to black Text. Team - Change Message 'We believe'... to black Text. Latest News - Change Message 'Keep up'... to black Text. About Us Page - Slightly larger text in line with the rest under it. Drop Downs (Services) - Change to Black text. Post - Add few More Blogs - Copy Over From...

For the training page instead of photographic imagery for each course, I have decided to create illustrations on Adobe Illustrator. My reasons for this was due to the unavaliability of suitable images in this industry. A large majority of images were very 'stocky' and fake which is not what the business should be percieved as. Therefore to avoid sourcing images drawing simple outlined Illustrations represents a clean, clear and trustworthy service due to the clarity of the lines. *All Illustrations have been drawn by myself on Adobe Illustrator

Similarly not many changes were made to the services pages. Header image changed to gradiented image to add branding consistency using Ramsay Safety Solutions' colour palette.  Navigation bar changed as mentioned previously for clarity. Individual service image removed to decrease scrolling and improve clarity of information as adding the image takes your attention away from the information on the page. Therefore I decided it would be best to remove this image, which as a result made the services page look more professional and less indimidating to read. 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. (Services page mockup, own image) (Final Services page, own image)

Not many changes were made to the About Us Page - it has kept most of it's original structure/content.  Header image changed to employees of Ramsay Safety Solutions shaking hands to make the image feel more relateable. Navigation bar changed as mentioned previously for clarity. Lead message added to add extra information. Hover over changed as mentioned previously due to complications with tablet and mobile devices.  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. (About page mockup, own image) (Final about page, own image)

Compared to my mockup, major design decisions have been made to the landing page. (Above are my initial mockups for the landing page, own images) The final landing page: As you can see, there were a lot of design decisions that were made that were not included or were modified on the original mockup.  1) Header The second header image was replaced after feedback was received in tutorials. Both tutors agreed that the second image did not 'fit' with the other images I had chosen. They mentioned that it looked 'stocky'/false due to the number of people around the computer as this was not realistic for a training session and that the image could give a false representation of the company size. Therefore, this image was changed to a man presenting to a group as this was more appropriate for the header message, "Bespoke Training Programmes tailored to your companies risk". The initial image implied an informal meeting whereas the f...