The goal of this assignment is to practice the workflow of redesigning a simple website. One should take away the skills necessary to analyze and identify flaws in an existing interface, create low-fidelity and high-fidelity prototypes for various screen sizes, and build a responsive website
based on those prototypes.
Chosen Website
After looking through multiple websites, I chose a website for a gating and fencing business which sells various types of fences and gates, railings, and gate amenities.
The reason why I chose this website is due to my first impression - bewilderment. It was hard to grasp the purpose of this website at first sight.
Website Issues
The gating website has many issues. Below is a condensed summary of some crucial issues:
The infographic above briefly touches upon accessibility. Below is a more detailed image of all the accessibility issues the website has:
Wireframes
Taking into account the website issues, I created the following wireframes to address those issues:
Desktop:
Tablet:
Phone:
Style Guide
To keep my design more coherent for the users, I created the following style guide that shows the font and images used, the color scheme, and the different states of interactive elements.Below is the style guide:
Figma Frames
Based on the low fidelity wireframes I created earlier, I designed three figma frames. Each frame shows the ideal responsiveness of my redesigned website as it shown on screens of different sizes. For each prototype, I annotated the different elements so that a developer could easily reproduce it without much explanation. Below are the frames:
Desktop:
Tablet:
Phone:
Redesigned Website
After going through the entire process above, I coded the website. Below is the end result:
The most challenging part of this project had to be making the website responisve. However, using media queries I was able to get my redesigned website to be somewhat responsive. I learned a lot about the process that it is taken to redesign a website.
