Interactive Design | Final Project: Working Website
FEILYCIA JOY KURNIAWAN / 0373400
Interactive Design / Bachelor of Design (Honors) in Creative Media
Final Project: Working Website
TABLE OF CONTENTS
1. Lectures
2. Instruction
3. Final Project
4. Feedbacks
5. Reflection
LECTURES
 |
| Layout tutorial |
Here we were thought how to link the different pages in a website.
INSTRUCTION
<iframe src="https://drive.google.com/file/d/1mCdt8a0NYM_1dywRFz8BkemNZhHlw2t9/preview" width="640" height="480" allow="autoplay"></iframe>
RECAP
Original website link : https://www.akardining.com/
Final Project
1. Hero section & navigation bar
For all of my hero images, I got it from freepik and pinterest. After downloading all of my hero images, I cropped them into 1280x453px each, referring to my figma prototype.
 |
 |
Then I continued with my html and css. HTML is pretty straightforward butI had a little bit of problem with my CSS but I resolved it eventually.
To keep the sophisticated look the restaurant gives, I designed the navigation bar with a very simple and minimalist design. On the left you can see the Akar logo, that if you click on it, it will direct you into the homepage. Then we have our navigation bar, when you hover on the tabs, it will change color and the scale will be bigger, to show that it is interactive. And lastly, the call-to-action button's font is a bit bigger so it catches the viewer's eyes more, and same as the navigation bar, this call-to-action button will also change colors and become bigger when you hover around the button.
2. Footer
The footer consist of the restaurant's logo, the address, operation hours, and contacts. The address and contacts are clickable and will directly opens up a new tab of what you need.
3. Pages
Homepage
The homepage consist of a little description of the restaurant, their achievements, operating hours, articles, and booking form. If you take a look of the original website, they seem to lack information about the restaurant, here I want to highlight their achievements.
About Us
The about us section is pretty simple. A short description about the restaurant and a carousel to display their food.
Menu page 
In the menu section, users can click "LUNCH", "DINNER", and "BEVERAGES" and it will direct them to the menu pdfs, and when you hover, it can show the animation to show feedback to the users. The call-to-action button ("Dine with Us" on navigation bar) will bring you to the menu page. So that customers can reserve and see the menus on the same page.
Contacts page
All information about their contacts, socials, and emails are here. And under the information section, there's 4 clickable icons that will bring you to the designated platforms.
Career page
Since the original website has this page, I decided to use redesign it. All of the contents are pretty much the same with some additional extras. The "join the team" button has a hover effect.
4. Interactive elements
Here's some of the interactive elements I've made in the website
 |
| Navigation bar |
I purposefully made the animation very simple and subtle but still visible to keep the minimalist and sophisticated look of the restaurant. When you hover you can see a color difference followed with a larger scale of the tab.
 |
| Call-to-action buttons |
Animations for call-to-action buttons are much more clear to show user feedbacks. Same as the navigation bar animation, I also changed the colors of the button and enlarged them to show feedback.
 |
| Forms |
 |
| Links (when hovered) |
To show differences between texts and links, I give links an animation. To show that they're links I made the colors turn into a pink-ish brown and add underline for text-decoration. When the links are being hovered, users ca clearly tell that those are clickable links.
 |
| Carousel |
Lastly I have a carousel, and when you hover on a certain image, the image will become bigger.
5. Mobile responsive
At first I made 3 different sizes (not including the default one) which is 1024px, 768px, and 480px. I finished 2 pages for my responsiveness with 4 different sizes each, but then I found out we only need the 992px one.
So I re start my mobile responsiveness with a 992px screen. I first focus on finishing the mobile view for the navigation bar and the footer, then I continue with individual content for each page. I mostly changed font sizes, layouts, image dimensions for it to be more fitting for mobile view. But when I viewed it from my phone, I realized I need to make some of the elements bigger. So I went back to dreamweaver to make some tweaks.
And here's the final mobile view pages
6. Netlify
After finishing everything, we needed to deploy our website. And when I previewed the deployed website and inspected it with 992px, I found out that it is different with the dreamweaver's preview. So I needed to go back and change the responsive sections.
Finally, we deploy our website on Netlify, I had a few tries since there's a few of errors that I needed to fix in Dreamweaver.
7. Brief report
On the first week of this semester, I heard that on the last project, we would need to code a website, and I was already scared since I had no basics in this field. But after the weeks I eventually started to get used to it.
I saw an opportunity to redesign this website as the original website had very little information about the restaurant itself.
For the process itself, I mostly referred the overall layout from my figma prototype and made changes a long the way. I had a hard time in the first few weeks but eventually managed to finish it. I specifically had a lot of trouble on my CSS, I don't know what the commands I needed. But with the help of my friends, and some research, I started to enjoy the process.
FINAL OUTCOME
Final website link: https://akarfinedining.netlify.app/
FEEDBACKS
Week 10
-
Week 11
-
Week 12
Helped me with some of the problems with the homepage layout
Week 13
Online consultation
Week 14
Helped me with final adjustments of my layout
REFLECTION
Experience
Findings
As I mentioned, I found that using Gen Ai is not completely wrong as long as you still learn how to change it. When I tried to code it all by myself, I struggled a lot cause my basics are not good enough. And after I finished one of my page, there's where I started to get used to this even though there's still some problems I faced.
Observation
Based on observation, I can see how people are scared of how Gen AI can replace people from this field. But, when I experienced this, I feel this still needs a lot of human touch with an understanding how to do this. As far as I see, Gen AI only helps 30% on this project.
Hi Felicia, have you check the final outcome from the Netlify link?
ReplyDelete