Labels

Interactive Design | Project 2 : Prototype

  06.04.2025 - 0.05.2025 (Week 1-6)

FEILYCIA JOY KURNIAWAN / 0373400 

Interactive Design / Bachelor of Design (Honors) in Creative Media 

Project 2: Prototype

TABLE OF CONTENTS

1. Lectures

2. Instruction

3. Project 2: Prototype

4. Feedbacks

5. Reflection

LECTURES

  • change input box style

input { background #hexcolor; border:none;

}

input: focus {

background-color: aliceblue; border: none }

  • class & pseudo class selector

4 states of links(need to be in the right order): a:link a:visited a:hover a:active

  • The Display Property

-display is CSS's most important property for controlling layout. 

-<div> is the standard block element 

-can be block / inline element

INSTRUCTION

<iframe src="https://drive.google.com/file/d/1mCdt8a0NYM_1dywRFz8BkemNZhHlw2t9/preview" width="640" height="480" allow="autoplay"></iframe>

PROPOSAL RECAP


Chosen Website : https://www.akardining.com/

PROJECT 2 : Prototype

Task recap : For Project 2, we are required to make a prototype of our redesigned website in Figma. The prototype should have an improved layout, usability and interactive elements. 

I first watched this figma tutorial video that Mr. Shamsul provided for us. 


Started with making frames for each page. For this prototype, I will have 3 pages; homepage, menu page, contact page. 


Prototype before feedback: 

Home(left), Menu (middle), Contact(right)


Homepage feedbacks


Menu (left) & Contact (right) page feedbacks


FINAL OUTCOME


Akar dining's original website vs. redesigned prototype 

Akar dining original website

 Final Prototype

Rationale : 

My reason to redesign this website is because of the lack of functionality in their current website. My main goal is to improve layout and to increase usability and functionality so it helps potential customers experiences in their website. While their current page has an okay layout unfortunately, their current website does not showcase their food, ambiances and achievements enough. 

For their color scheme, I kept their dark and earthy tones color palette to show their sophisticated look that the restaurant has. Fonts and elements I kept very minimal using sans serif font and a very minimal rounded borders for the rectangles to give it a more serious feel to it. Throughout the whole prototype, I want to implement more of their food photography.

I kept the navigation bar fairly simple to keep the minimalist and sophisticated feel. Navigation bar consist of their logo, the navigations to each page, and their call-to-action button. And for the footer, I kept it simple yet informational with their location with a clickable link to direct you to the maps, their operation hours, and their contact details. In all of the pages I added a carousel of photos to showcase their foods, restaurant and their overall ambiance they trying to sell. 

The original home page lack information, despite their amazing achievements such as tatler best, and micheline rate, they did not show it properly. It originally only has their logo, which is not informational and useless. So, for the homepage I wanted to put their crucial information. I first give a brief information about their restaurant along side with their achievements and a photo of their head chef. Their achievements are worth showing of, so I decided to make a section to link to articles that mentioned Akar dining. 

Menu page I kept it very simple with their operation hours, reservation information and reservation forms. Then, I did a little bit of research, turns out they always change menus depends on what ingredients are in season. So to make it easy, PDFs as their menu is convenient, you can click any of 3 menu tab and it will direct you to their current menu. 

For the contact page, I want to remind the potential customers to make their reservations hence I put the reservation forms on top. Followed with their socials, whatsapp, and location. Every icon (instagram, whatsapp, email, map) is clickable and will direct you to the assigned platforms. 

All in all, the prototype kept the overall sophisticated and minimal feel while enhancing its functionality and usability by adding more information such as articles and showcasing their achievements Photos of their foods and restaurant is added to showcase their specialty.

FEEDBACKS

I was asked to change a few things from my prototype:

- navigation bar : not clear enough
- footer : the logo is too big and distracting
- logo : blurry and not clear. (I later traced the logo in Adobe Illustrator)
- homepage : fix the layout for the bottom part
- menu page : the menu tab is too big
- contact page : -
- reservation forms : make it the same length 

REFLECTION

While it is a bit tricky at first, it was so so fun learning how to use figma since I wanted to learn in for a while. The overall process was fairly easy since I know what direction I wanted the prototype to be and pretty satisfied with the end result. 
Labels:

Comments

Post a Comment

Popular Posts