JUMPLINKS
LECTURES
Lectures
INSTRUCTIONS
PROJECTS
Project 3 — Final Project
Process
Header and Footer
For the final project of interactive design, we are required to make a working website consist of 5 pages based on the prototype we have made a few days before this project start. In my case, I made one home page, one product page, one outlets addresses page, one contact page, and one item page. The website I am redesigning for is a website of a popular traditional fishcake chain in my home country, Palembang called Pempek Candy. After working on all of these, we also need to make sure that the pages we are working on are all responsive across all devices and screen sizes. The final process of this project is to upload the website we have made into an app called netlify to make this website accessible.
I started from the navigation bar. Nav bar consist of the store logo to direct users back to the homepage, one products button, one outlets button, and one contacts button, which directs users to their respective pages.
 |
| Fig. 3.1, Navigation bar HTML |
 |
| Fig. 3.2, Navigation bar CSS |
I added a hover effect on the buttons with an underline text decoration.
 | |
|
 | |
|
 |
| Fig. 3.5, Footer CSS |
Homepage
The style I am going for on this page is the headings that stick on top of their sections. I added a 'purchase now button' on the hero image to direct users to the product page. I put a pempek image as the background of the hero section. Underneath, there are 3 cards that provide 3 different information. On the first card, there is a halal certification. Second card has a BPOM & PIRT certification. The last card feels very copped out.. it is just there to tell users that they receive text 24/7. But those cards are there from the start, so I feel like I should still put them on the redesigned website.
The carousel part of the homepage took a while for me to make. I insert 2 images for the carousel. The arrows on the left and right also changed color on hover into red. |
| Fig. 3.6, Carousel HTML |
 |
| Fig. 3.7, Carousel CSS |
 |
| Fig. 3.7, Testimony section HTML |
 | |
|
Product Page
The Product page have a few features that are similar with the homepage. For example, the diagonal tape-like decorations that surrounds the pempek image on the top of the page. The most redundant part of this page is surely the list of items on the store. I mean, I have to repeat the same steps times the amount of products available.
 | |
|
.png) | |
|
Outlets Page
Basically, since Pempek Candy is a very popular chain in Palembang, they have multiple outlets available across the city. So, this page compiles all of the addresses into one. The layout is pretty simple and straightforward.Contact Page
The contact page was a tricky one. I need to make a form consists of full name, email address, and the message the user wants to deliver to the company. I also put some icons of their social media to direct users to the designated site.
 |
| Fig. 3.11, Contact page HTML |
 |
| Fig. 3.12, Contact page CSS |
This page contains information about the first product of the products page. Paket pempek kecil is a set consist of various kinds of pempek starting from the round shaped ones to the ones with an egg filling. The layout is quite simple, I added the original image on the left and adding information on the right.
Sometimes, Dreamweaver acts up and gets all buggy which makes the mobile view messy, even when I make sure its all tidied up. So, I usually double check during the process, restarting the app works too. I basically just make sure everything is display: block, and remove parts that are too distracting or complicated on mobile view. Believe it or not, adjusting responsiveness sometimes can be difficult, if not more difficult than making the actual page.
 |
| Fig. 3.12, Mobile view test |
Upload The Website
After finishing everything, I uploaded my website to netlify.
Click the link below to access the new website.
https://samuelk-interactive-final.netlify.app
Click the link below to access the Google Drive Folder
https://drive.google.com/drive/folders/1G7Pz2rnlCC42jEKjuPxYV_Ha2NgFFQkU?usp=sharing
REFLECTIONS
One of the main things I learned was how important it is to make the site work well on all devices. Making sure everything looked good on both phone and desktop took a lot of time and testing. I ran into a bunch of small problems, especially when using Dreamweaver, where the layout sometimes broke on smaller screens. Fixing these issues showed me how useful it is to plan the layout properly from the start.
I also struggled a bit with things like the image slider and the tape decoration I used across the site. These parts were not easy to build, but I kept trying and learned more about how to use CSS better. Repeating the same steps for each product also made me realize how time consuming that can be, and how it would be faster in the future with better tools or tricks.
At the end, finishing the design, fixing the layout, and uploading everything to Netlify felt really good. It was the last part of a project that pushed me to work harder and think more creatively.
Even with some problems along the way, I’m proud of what I made. It’s not just a simple redesign, it shows how much I’ve improved during this project
Comments
Post a Comment