Design brief
Donald Smith runs a car showroom and garage and has approached you to make a website for the company.
The first page should have a brief introduction to the company and where they are located. They would also like a video clip on the front page.
The second page should go into details about the services that they provide. They would like a link on this page that allows a user to download a PDF of the price list.
The third page should list the current vehicles available for sale in a gallery format. Clicking on any of the vehicles should open a new page showing the vehicle’s details.
The vehicle pages should include a link to print the page that strips out any of the website areas that aren’t the company logo, details about the vehicle and the contact details in the footer.
The final page of the site should be a contact page about the company page including a map showing how to find the garage and contact details.
Requirements list
- all pages to have a menu to link back to the home page, services page, vehicles page and a contact information page.
- the home page to have a video and introduction text
- contact information page to have a map showing the location of the garage and contact details
- vehicles page to list all vehicles available and each vehicle links to its own page
- each vehicle page shows all the information and list any photos or videos available for that vehicle.
- each vehicle page needs a print button that shows a stripped down version of the web page with just the vehicle details and contact information
- a services page listing all services available with a download button for a price list
Hierarchy
![Hierarchy of garage website](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28131720/hierarchy2-1024x351.png)
Wireframes
![Home page wireframe](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28134100/mockuphome.png)
![Services page wireframe](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28134125/mockupservices.png)
![Car list page wireframe](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28134152/mockupcarlist-1024x603.png)
![Car detail page wireframe](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28134211/mockupcardetails.png)
![Car print page wireframe](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28134234/mockupprint.png)
![Contact page wireframe](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28134255/mockupcontact.png)
Resource list
- Company logo
- Company address and contact details
- Company registration number
- Text for the home page
- Video for the home page
- Text for the services page
- An image and text about each service
- A price list file for the services
- Specifications and images about each car available
- A map for the contact page
- Text for the contact page
- Any additional images of the business that can be used on the website.
Test plan
![Example test plan](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28154246/HTML45-1024x434-1.png)
Implementation
![Home page](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28154855/finalhome-1024x518.png)
![Services page](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28154952/finalservices-1024x518.png)
![Cars list page](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28155009/finalcarlist-1024x516.png)
![Cars detail page](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28155037/finalcardetails-1024x516.png)
![Print details](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28155102/finalprint.png)
![Contact page](https://blogs.glowscotland.org.uk/es/public/software/uploads/sites/4063/2023/03/28155121/finalcontact-1024x518.png)
A test plan would then be completed for every page. If any changes were needed as a result of the testing then any page that was altered would need to be re-tested.
The student would then evaluate the project and their own actions.
How well do you think they did?