< Back to Projects

READYTECH

Electronic Shop Website Project

The Mission:

This was a part of our final project in my second semester. For this portion, we had to create wireframes and mockups before tackling on coding the actual website itself. We were given the logo and its branding standards. However, we were then left to create everything else-from the website layout to the website content such as product photography and product descriptions.

My goal was to create a website that had a similar feel and look as other tech sites out there. I wanted the visitor to instantly know that they are in a tech website just from how I laid things out. The website should also be easy to navigate around, have clear CTA (call-to-action) buttons, and have majority of the elements that is needed for a great user experience.

Low-Fidelity Wireframes

Challenges Faced:

  • I had troubles displaying the feeling 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 all of those websites and how similar they laid some of the elements out.
  • Along with the logo, the colour scheme was already pre-done and given to us. With that, I had to plan out where each colour would suit best since I’m unable to change them.
  • At the time, I still had a small knowledge in coding. So, coding the website will be difficult and I had to keep in mind responsiveness too. 
  • I also wanted to implement some features that had not been taught to us. So, I had to think of how to lay my website out with the abilities that I had and then carefully apply the ones that I taught myself.

Medium-Fidelity Wireframes

Outcome:

There were steps to be taken before we moved forward each time. Luckily, I was approved every time. With the approval, I was able to move forward to our last step and actually code it as an actual website. Though I do not have the website anymore (the server we used was the school server), I still have the prototypes. I did made some small adjustments that I made when I coded it but the overall premise and understanding is still there. 

High-Fidelity Wireframes & Prototype

> To view the desktop prototype, click here
> For the mobile prototype, visit the link here.

Responsibilities:

This was a solo project. All work was produced by me except for the logo and colour palette. Responsibilities included: 

  • UI Design
  • Graphic Design
  • Product Photography
  • Web Design & Developer

Softwares:

  • Adobe XD
  • Adobe Illustrator
  • Adobe Photoshop
  • Visual Studio Code
  • ShiftEdit

Date accomplished:

Started: February 5, 2021

Ended: April 23, 2021