E-commerce website showcasing athletic shoewear.
To create a mobile-first website using css technologies.
The project was designed and coded by myself.
HTML, CSS, Javascript, CSS Grid/Flexbox, Adobe Xd/Photoshop
Febuary 2020
The initial brainstorming face consisted of my looking at different shoe websites to get a better understanding of the design components that have been adopted over time. I then decided to create some sketches of how the website’s layout would look like. Considering the fact that this was a mobile first approach, i spent a lot of time considering how to make it both mobile and web friendly.
After sketching some potential layouts , I then went on to create high fidelity prototypes with Adobe XD. When creating these layouts I wanted to make sure that every decision I made would be able to work in both a mobile and web view. This is something that I would have to say caused me the most challenge. I created 3 different versions of the website – a mobile version, ipad version and web version
After finalizing the mockups I then went on to write the code for the website. Using Css grid helped me a lot with configuring the layout based on the size of the viewport. I would occasionally use flexbox if I wanted to manipulate a set of items in one direction and use a css grid if I wanted to make changes in both the x and y direction. After the home page was created, I felt my Css grid abilities improve and I find myself creating the layouts relatively fast.
The biggest challenge I faced when creating this website was trying to create layouts that were not repetitive. Every page I designed wanted to be a little bit unique and give the user a different experience. Considering the fact that this was my first project using css grid, there was the initial learning curve that came along it with, however with time well spent learning and understanding its capabilities, I now find myself using css grid in every project I have created since.