School Active Travel Program
Web Design and Development
Team
Faisal
Role
Web Designer
Web Developer
Tools
Figma
HTML
CSS
The home page of the website.
Overview
The School Active Travel Program is a fictional website targeted toward students for a course in Information Design. The website encourages students to travel by walking, biking and rolling to and from school. The website does so by providing it's goal, the benefits and various actions plans and route maps needed for students, teachers and parents to understand the Program.
Wireframes
Sketching low-fidelity wireframes provides an excellent way to visualize the website's format. By sketching the layout of the website and mobile, we could see the various ways content could be easily understood and organized through the hierarchy. This hierarchy is why Program Benefits is placed on top of Action Plans and Route Maps. Program Benefits provide a reason for students to follow the program, which is crucial to success.
.jpg)
Wireframes for the Initiatives page
Wireframes for the homepage
Target Audience
The audience for this website are children over the age of 10 because they have the comprehension skills to understand our website. More importantly, they are the future. By having them know what actions to take right now, they can quickly implement them into their lives, which will be with them in the future.
Based on my research, I found that children must receive instant gratification. Hence why I chose the colours for the website are brightly coloured. This will ensure that the child’s attention is grabbed and kept. They also mention that it is necessary to have meaningful symbols. With all the buttons having text instead of icons, the child will easily understand what it is and does.
When researching the parental audience, I found that parents typically look through the design first before showing it to their kids. Because of this, the parents must also understand the information being shared. The topics were made to be easily understandable, letting the parents to quickly look through the content.
Style Guide
As our target audience is students, we wanted to ensure that the website provides a fun and easy place for them to understand the program. The students will associate the program with joy and simplicity by using bright colours and a sans-serif font (Trebuchet MS).
The style guide for the website.
Code
With HTML and CSS, I was responsible for creating the home page and ensuring it was responsive to display on devices of varying sizes. Moreover, the design and layout of each page were consistent throughout to ensure minimal confusion from the audience.
Homepage on Desktop.
Homepage on Mobile
Reflection
Through this project, I learned the various steps required to make a website, how to code in HTML and CSS and ensure that the website is responsive. With much information on the webpage, I was concerned about the website needing to be simplified for a young student. In the future, the information will be simplified so that the students can easily understand. Moreover, the website will use less saturated colours. With highly saturated colours, the eyes are easier to strain and demand more attention than the information. For it to be fixed, the colours must be less saturated so that the students can quickly look at the website.