Interactive Design - Project 2
JUMPLINKS
LECTURES
Lectures
INSTRUCTIONS
PROJECTS
Project 2 — Website Design Prototype
After finishing the proposal, it was finally time to work on the prototype. The website I chose originally had several flaws that affected both usability and visual appeal. These included distracting colorways, a completely nonexistent navigation bar, a messy and inconsistent layout, and a general lack of structure. These problems were all addressed and fixed in the redesigned website prototype that I created.
While working on the prototype, I ended up straying a bit from the original plan I laid out in my wireframes. This was because I noticed some details that felt unnecessary once I actually started designing. For example, some buttons that were originally placed in the footer ended up being removed entirely since those same functions were already accessible from the contact page, making them redundant.
I designed the prototype using Figma and began with the homepage. I placed a large, bold text along with an image of pempek right at the top of the homepage. This was to immediately grab the user's attention and clearly communicate that the website is for a pempek store. I decided to center the text, whereas in the original design it was placed off to the side. This made the layout feel more balanced and visually appealing.
Below that, I redesigned the promotion section into a button-controlled carousel. This saves space and helps maintain a cleaner look, instead of just having a static image of an ad. It also adds a bit of interactivity to the homepage. As for the testimonies and customer reviews, I limited them to just three image-based reviews. The original amount felt overwhelming and repetitive, so this cut helped improve the overall layout.
The original website didn’t have a contact page at all, so I created one from scratch. Using a rounded square shape as the base, I filled it with a simple form that includes fields for name, email, and a message box. To avoid empty space on the right side, I added a fun and casual text section with basic contact information. On the bottom left, I placed buttons that link to Pempek Candy’s official social media accounts so users can connect easily.
I also created a store locations page that shows the addresses of their outlets across the city. The design is simple—each entry features an image of the store on the left and its address and phone number on the right. This layout will be repeated for each of the 12 locations to keep consistency.
Lastly, I designed the products page to be very straightforward. It features clean images of each product arranged vertically. When a user hovers over an image, the product name appears over a blurred version of the same image, bringing focus to the text. I removed the "buy now" buttons since the online store can already be accessed via the contact page.
Overall, the prototype addresses the main problems identified in the proposal. The red and yellow color scheme is consistent across all pages, balanced by an off-white background to highlight the visuals. I also used fonts with similar characteristics—Anton, Antonio, and Roboto Condensed—to maintain a clean, modern, and cohesive design.
Comments
Post a Comment