Skip to main content

Interactive Design: Final Project

8th - 22nd November 2022 / Week 11 - 13
Alana Sofia Othman / 0353451 / Bachelor of Design (Hons) in Creative Media
Interactive Design
Final Project
INSTRUCTIONS
Final Project: Design, Exploration and Application
Week 14
About Page
Figure 1.1. Apronfools' Story

Figure 1.2. About Page Progression
This page was pretty straightforward, as most about pages are. The information was taken from the bakery's actual short beginning story that is displayed in their cafe. I tweaked some sentences and added some other stuff in order to fill up the page more but also tell their story in a more detailed and interesting manner. I was able to find the drawing of their bakery from their social media posts.
Figure 1.2. shows the progression of the page. Since the image background came in pink, I decided to give it a border to frame the image and not have it blend into the background

Shop Page
Figure 2.1. Apronfools Category Research

Figure 2.2. Shop Page Progression
This page was not particularly challenging but time consuming and tediously repetitive. I started with research on how to seperate the products. As seen in Figure 2.1., their linktree leads to 3 different pages. The first link is to make an order for a whole cake, second link is to message them on whatsapp, and the third is the beepit delivery. The beepit delivery page is then categorised into 3 sections, as seen in the bottom row of Figure 2.1., but there are really only 2 main sections, that being, Best Sellers and Cakes & Desserts. The cakes on beepit are only sliced cakes. So, I seperated it into the 3 main different sections, Best Sellers, Desserts and Whole Cakes.
Figure 2.2. shows my progress for the page. I thought of placing the columns to the left at first so it would be in a set place. However, later when I was looking at my other pages, I realised I had a very central layout, so I decided to stick with that and move my 2 hanging columns from the Best Sellers into the center. I then realised it was a very long scroll, so I added navigation jumplinks to Desserts and Whole Cakes as well as Back to Top jumplinks under both categories.

Week 15
Contact Page
Figure 3.1. Contact Page Progression
I wanted the contact page to be 2 columns. One for forms for viewers to fill up and one for other modes of contact. I figured both are equally important nowadays considering that most people will automatically go to social media when looking to contact a brand. However, it is still important to have a form for viewers to fill up as it is sort of the traditional mode of contact that web browsers usually have. Personally, I also believe it is useful if a customer ever wants to give constructive feedback or appreciation messages while not blasting it through social media. In simple terms, it is still a useful and formal mode to contact brands.
I got the code for the form from W3Schools and adjusted it to fit my layout. I wanted users to fill up either/both their phone numbers and/or emails to allow the brand to contact them with whichever platform better. Based on my experience as a customer of Apronfools, they also use phone number as to register their members, so it would be reasonable to have users fill up their phone number in the form as well, even if Apronfools were to respond through email. As for Subject, Apronfools provides services such as catering and baking a custom cake. However, since they are also a cafe, reservations should be allowed to be made if a customer was looking to reserve a table. At the Apronfools cafe, they also display and carry home made products or products from other small businesses. So, there is also a wholesale option if users want to request Apronfools to carry their products.

Account
Figure 4.1. Account Page Progression Set 1-3
Originally was labelled Log In but after feedback for Project 2, I changed it to Account. The code for this login form was taken from CodePen. Although this page is the most empty compared to all my other pages, this was oddly the most complicated. This was because I had the toggle switch slider and a flip transition. Though the code was already provided and I just tweaked it to fit my layout, as usual, I wanted something more.
I wanted to have the Log In and Sign Up appear together but have the font colour change when toggled. The closest I could achieve was having one side appear when toggled, as seen with the two center images in Figure 4.1., but it did not make sense in terms of user experience. So, after a day and a half of messing around with the code trying to figure it out, I compromised and settled to keep it simple, as seen in the last image of Figure 4.1.

File Management
Figure 5.1. File Management Progression
After I completed everything, I realised I had my file management set up wrong. I had all my code files together in the main file but after referring back to my class notes, I realised there should be a menu file that contains the other html files. So, I adjusted it and had to do the tedious job of relabelling all my  attached links in the code.

Final Outcome

Attachment 1.1. Final HTML Code for Home Page

Attachment 1.2. Final CSS Code for StyleSheet

Attachment 1.3. Final HTML Code for About Page

Attachment 1.4. Final HTML Code for Shop Page

Attachment 1.5. Final HTML Code for Contact Page

Attachment 1.6. Final HTML Code for Account Page
REFLECTION
Experience
It was interesting to be coding my own website as it was almost like a problem solving game. There were very frustrating and aggravating moments when I could not figure things out but when I was finally able to achieve my goal or solve my issue, it was extremely rewarding. Eventhough I took code from online for some parts, I was forced to understand it and make changes in order for it to fit my theme. It was a little bit like a reverse math problem which was fun to break down and understand. Everytime I was working on this assignment, I was always very much "in the zone" as I was 110% focused, which rarely happens when I am doing my assignments.

Observations
Although we were recommended to use Bootstrap to ease our burden, I was quite happy with my mishap of not using it. From coding it by scratch on my own, I feel like I understand the code better with how they affect each other and so on. Forcing myself to find and use already written code online also gave me an opportunity to learn more and understand better.

Findings
I realised that coding requires alot of patience. It's very frustrating when something does not work and you do not even know what the problem is. Taking the time to figure out what is wrong requires alot of patience and understanding of the written code, which of course becomes easier after more practise.
This Is :

Comments

Post a Comment