The MarketPlace

Class assignment

Semester 1, 2023

Style tile for The MarketPlace colour palette, text and sample images. — Designing the theme of the MarketPlace website.

Overview

The MarketPlace was a mock "client" given to the Certificate IV students for our third major assignment, who required a complete redesign of their existing website. After interviewing the client to determine their requirements, and creating wireframes and mockups for each webpage, I spent several weeks building, testing and perfecting the final website. The original "website" seemed to have been pulled straight from 2002, so it definitely deserved a few touch-ups.

Home page of The MarketPlace website. — The final homepage design of the website.

Designing for mobile

One of the key assessment criteria for the assignment was that the website be responsive and fully functional on a mobile screen width. Up to this point, I had only ever built webpages for desktop, so this was a new challenge.

Wireframe of the MarketPlace 'Products' page.

Arrow pointing left, towards the 'Products' wireframe.

Red circle with text that reads 'Scroll!'

Arrow pointing right, towards the 'About Us' wireframe.

Wireframe of the MarketPlace 'About Us' page.

I quickly realised that my designs just couldn't be made responsive with media queries alone, so I had to get comfortable using JavaScript (which I had previously been avoiding).

I taught myself how to create accordions and drop-down menus, which allowed me to collapse large elements down to an interactive mobile format.

Desktop

Mobile

Our History

1969: Company opens first store in March, operating through a small leased shopfront 10 metres by 10 metres, selling floor coverings. George and Jean serve customers in the shop and one other person assists them in the shop. Warren Preuss is employed to set up links with the major suppliers and manage ordering of stock. Two carpet layers are employed to cut and install. A warehouse in an industrial area has also been leased to store the products.
1973: Instead of continuing the lease, the Alexanders decide to purchase a larger warehouse space. Open warehouse sales area for larger bulk purchases for housing developments and motels. Ordering and invoicing are handled by Lyn Slater and Robyn Davis, who worked part-time. An external accountant manages the remaining financial affairs.
1980-1985
1997-2000: Attempts to decentralise much of the data processing seem to be successful. Headquarters at the capital city store still manages purchasing, warehousing and marketing. The two capital city stores amalgamate into one new superstore in the Central Business District. A gala opening occurs.

What I learned

Over the course of this project, I discovered that JavaScript isn't as confusing as it initially seemed. While I sometimes still don't understand why or how things work the way they do, I've become much more confident in applying what I already know to try something new.

I also got a solid opportunity to get familiar with CSS, trying out many properties that I hadn't yet tried. By the end, I had enormous stylesheets with hundreds of lines of code, and my HTML code relied heavily on div elements to achieve my designs.

While it definitely wasn't the worst code I've ever seen, it still felt too untidy for my tastes. Since then, I've avoided using div elements wherever possible, trying my best to find a more semantic element to use in its place.

Ultimately, I want my code to be readable and accessible for everyone, no matter who ends up reading it. Now that I'm becoming more comfortable building my own webpages, I can focus more of my energy on making sure they are semantic and tidy.