READYTECH
Web Design and Development Project
Duration:
3 months (remote)
Softwares:
Adobe XD, Adobe Illustrator, Adobe Photoshop, Visual Studio Code, ShiftEdit, FileZilla
Responsibilities:
Web Developer, Web Designer (UX/UI), Graphic Designer, Product Photographer, Content Writer
The Mission: 🎯
For this project, I created a fictional eCommerce website for my college final project. I was given the logo and its branding standards (colour palette and fonts). However, I was then tasked to create everything else-from the website layout to content writing to product photography to web development.
My goal was to create a website that had a similar feel and look as other tech websites out there. I wanted the visitor to instantly recognize that they are in a tech commerce website just from how I laid things out.
Low-Fidelity Wireframes
Challenges Faced: 🤔
- I had troubles displaying the tone of voice I wanted to convey. I looked at various tech websites – such as Best Buy, Visions Canada, The Source, Canadian Tire – to get a sense of what similarities they had. I needed to know which components were most prominent in their websites and get a sense of the lay out of their elements.
- Considering the logo and the colour scheme was already given to us, I had to plan out where each colour would suit best since I am unable to change them. I tried using colour theory and design techniques to test them out.
- At the time, I still had a small knowledge in back-end web development. So, coding the website became a challenge; I had to keep in mind responsiveness too.
- I also wanted to implement some features that had not been taught to us (i.e. removing cookies thus deleting items in the cart/wish page). Due to that, I had to allocate some extra time to research how to do it for a better user experience.
Medium-Fidelity Wireframes
Outcome: ✅
I was able to accomplish everything that was needed and asked of us. When it came to resizing the browser, the responsiveness aspect was quite “iffy” to tackle; the best viewport to view it in is around 1900px. However, it’s still capable to be viewed in mobile mode and gets the job done. I was able to implement my plan to go further by adding a Wishlist feature, and adding a delete button in the Cart and Wishlist page (playing with cookies).
