PDF to Website: SSM & Area Drug Strategy

Student Web Development Project

For this independent assignment, we were instructed to create a website with three functional pages about a topic we are passionate about. I chose to reconstruct the SSM & Area Drug Strategy Committee’s 2019 findings into a website.

Goals & Purposes

My goal for this project was to take the vital information within the SSM & Area Drug Strategy PDF and recreate it as a website that is well-formatted and accessible. The original PDF is dense with important information for community stakeholders, the goal of the website was to reorganize the information for fast recall.
Project Scope

What: Code a website using Atom and GitHub. All information on the website is pulled from the SSM & Area Drug Strategy 2019 PDF. This project also included revamping the logo for the SSM & Area Drug Strategy Committee.

Where: Algonquin College, Ottawa

When: November-December 2020

Who: All information provided is from The SSM & Area Drug Strategy, Community Call to Action, 2019. Sault Ste. Marie (ON): SSMADS; 2019

Supervisor: Chelle Lorenzen

Software & Programs:
Adobe XD
Adobe Photoshop
Adobe Illustrator

Screenshots from original PDF from the SSM & Area Drug Strategy

Ideas & Sketches

My inspiration for the design was the Government of Canada and public health agency websites. I wanted to reformat the artistic approach of the PDF and make a clinical and professional look to match the level of seriousness of the information within the document.I created a grid format to make clear sections for the data. I removed the colourful graphics for a blue and grey colour palette. I also simplified the look of graphics and iconography. I wanted the viewer to focus on the written information and have the icons and graphics be small enhancements to the experience by drawing the viewer's eye to bulleted information. I also revamped the committee logo to look more professional for the subject matter.

Feedback & Revisions

My peers reviewed my website to ensure quality. The main revisions focused on typography and ensuring the type scale was readable on all screen sizes. It was useful information to know what was working on different operating systems and screen sizes as my tech inventory was limited.

I used the different sections in the PDF to determine the flow map.

I refined the look of the original logo to fit a more clean and serious tone.

My moodboard focused on clean text, limited use of colour, and real photos of Sault Ste. Marie, Ontario.

Final Version

I deeply enjoyed working on this project. I believe the way information is vital to ensuring that information is read and understood. I believe if a community stakeholder needed information from the SSM & Area Drug Strategy Committee to make plans, and decisions then they would find this website easy to access and recall facts.

View Web Design