This is the final project for the Diploma of Website Development course. The brief was to find a client operating a local community group or small business and design a website based on their requirements.
In addition, a number of website benchmarks had to be achieved to meet the course requirements:
- HTML5 semantic markup (including relevant meta tags)
- At least two stylesheets using CSS3
- Use of scripting languages and pre-existing libraries (e.g. JavaScript and jQuery)
- PHP functionality for capturing user details (e.g. in a contact form)
- Creation and inclusion of a MySQL database containing relevant site information
- Responsive page designs
- A minimum of seven to ten pages
- Creation and inclusion of video content
- Design and creation of consistent website branding, including:
- Client-approved logo
- Website colour palette
- Typography selection
The project also required students to provide an explanation of open-source server-side technologies, create and implement a website testing strategy, and use project management software to prioritise and manage the tasks involved in the website’s creation.
The Client
At the time this project was undertaken in 2015, The Game Cave was a small business in Nowra, NSW. Their products ranged from new and pre-owned video games, consoles and accessories to other pop-culture merchandise (graphic novels, figurines, trading cards and Japanese anime and manga).
Near the project’s completion, The Game Cave’s owner-managers moved on from the business. The final stages of this project were completed with the TAFE Nowra course overseers standing in for the client.
WordPress Version
A very basic WordPress-based version of the website was completed as part of the course requirements. It features a custom PHP plugin displaying a randomly selected ‘featured item’ on each page load.
Client Questionnaire
This PHP-based questionnaire was created from scratch for the website testing phase. The client was asked to complete three tasks after browsing the test site, and provide feedback on the website’s design and functionality.
The form features error checking to notify users if they miss any required answers, sending the submitted form to a dedicated Aether Industries address. (The form has since been disabled to prevent spam.)
Beta testers for the website received the same questionnaire (an example of the submitted results can be viewed here), with client-specific questions omitted.
Final Project
The landing page is intended to replicate starting screens from classic games, including a randomly generated JavaScript-based ‘high-score’ on each page load.
Each page also features a page transition replicating loading screens from older PC games, which also aims to lessen the impact of page loading times and provide more seamless page navigation.
The client’s design brief was to steer away from the stereotypical idea of the ‘basement dweller’ gamer, to reflect the increasing uptake of gaming across age groups and lifestyles. After unsuccessfully attempting to create an engaging website design using the shop’s black, white, grey and green colour scheme, the client agreed to use a separate, cave-based design for the desktop layout, with the simplified mobile and tablet layouts using the shop’s colour scheme instead.
Each page features a quote from a video game or movie (selected at random from a PHP array), as well as breadcrumbs for site navigation and pagination to reduce page loading times. JavaScript and jQuery have also been implemented in a number of areas throughout the site, including:
- A ‘scroll to top’ button for easier navigation
- Expanding/collapsing relevant information sections
- Menu navigation on mobile and tablet layouts
- Responsive video embedding
- A real-time countdown timer showing users the amount of time remaining until the shop opens or closes, depending on the day and time when the website is accessed
- A responsive image polyfill to serve larger or smaller images to users depending on their device
- Lightboxes for product images
