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 students are encouraged to travel by walking, biking or rolling to and from school. The website provides various information 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.

web sketch - Copy.jpg
web sketch - Copy (2).jpg

Wireframes for the Initiatives page

Wireframes for the homepage

Target Audience

The audience for this website is intended to be children, specific children over the age of 10. Children over ten years old were chosen as the targeted audience because they have the concentration to understand our website, and 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.

This website mentions 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.

And this website that parents typically look through the design first when designing for kids. Because of this, the parents must also understand the design. The topics within every page are easily understandable, letting the parents 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. This responsiveness ensured that the website would be appropriately sized no matter the device. 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. Overall, this project allowed me to learn HTML and CSS and to design for a targeted audience.