Interactive Design / Project 1

22.05.2022 - 09.06.2022 (Week 8 - Week 11)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Interactive Design / Taylor's University 
Project 1 : Static Prototype

---

LIST

• Lectures
• Instructions
• Exercises
• Feedbacks
• Reflection

OTHER POST:

• Interactive Design / Exercises
• Interactive Design / Project 2
• Interactive Design / Final Project
• Interactive Design / Final Compilation and Reflection

---

LECTURES
<back to top>

WEEK 10 (31/05/2022) - Bootstrap

fig 1.1, source; https://images.app.goo.gl/N3SDpz42E3wGMfzU9, Week 10 (31/05/2022)

Bootstrap -> a compilation of CSS and Java Script.

Pros:

• easy to make responsive layout
• any dimensions
• spend less time

---

INSTRUCTIONS
<back to top>

fig 3.1, Module Information Booklet of Interactive Design

WEEK 8 TASK: (18/05/2022)
✅ Indicate the topic of your choice by this week in the comment section and start to do the wireframe/sketches of the landing page.
✅ 5 sketches are required

EXERCISES

<back to top>

PHASE 1 - SKETCHES

Week 8 (18/05/2022) - Sketches

So, I made 5 sketches, which the ideation came from Pinterest.

fig 4.1, pinterest reference, source; Pinterest, Week 8 (22/05/2022)

I was thinking that a landing page is something like the welcome section of Netflix, where visitors can key in their email address to login.

fig 4.2, pinterest reference, source; https://www.netflix.com/my-en/, Week 8 (22/05/2022)

Thus I made these:

fig 4.3, sketches, Week 8 (22/05/2022)

Week 8 (18/05/2022) - Final Sketch, Moodboard, Prototype

As in class, Mr. Shamsul gave me feedbacks that my sketches are too rough and need wireframes. Mr. Shamsul also recommended me to reference from an actual blog, not only Pinterest. Thus, I followed Wonderful Indonesia's website.

fig 4.3, Wonderful Indonesia Website, Week 9 (23/05/2022)

While the feedback session continues, I started to remake my sketches, and I come up with these sketches:

fig 4.4, Refined Sketches, Week 9 (23/05/2022)

Finally one of my sketches is accepted by Mr. Shamsul, as it has clearer concept and direction. What I need to do next is creating the moodboard and prototype.

PHASE 2A - MOODBOARD

• COLOR PALETTE

Mr. Shamsul recommended me to use color palette that's identical to Indonesia. In my personal opinion, it's hard to define the color of Indonesia since it has lots of colors😜.

So, I came up with idea on searching for the images I'm going to use first.

fig 4.5, Planned Images, Week 9 (24/05/2022)

Photo 1 : Photo by william kusno on Unsplash

Photo 2 : Photo by Steffen B. on Unsplash

Photo 3 : Photo by Affan Fadhlan on Unsplash

Photo 4 : Photo by Gita Krishnamurti on Unsplash

Photo 5 : Photo by sutirta budiman on Unsplash

I broke down into 2 choice of color palettes:

Choice 1: Sunset (Photo 1, 2) - sense of heritage and vintage

Choice 2: Tropical (Photo 4,5) - sense of fresh and island country

I think I'm more interested in choice 1, thus I extracted some color from some images:

fig 4.6, color palette extracted from images, Week 9 (30/05/2022)

• TYPEFACES / FONTS

The first typeface I'm going to use is 

Karla from Google Fonts 

fig 4.7, typefaces 1, source: Google Fonts, Week 9 (30/05/2022)

Yeseva One from Google Fonts

fig 4.8, typefaces 2, source: Google Fonts, Week 9 (30/05/2022)

PHASE 2B - PROTOTYPING

After I decided all my moodboards, I began to make the static prototypes. Based on the previous sketch, I add some informations in my footer.

This is the step 1 of making the prototype, first I made the layouts. In this progress, I refined the corner so it has the uniformity.

fig 4.9, sketch, Week 9 (23/05/2022)

Step 2, I add the images and headings

fig 4.10, prototype 1, Week 9 (30/05/2022)

Step 3, I add the text and other details:

fig 4.11, prototype 2, Week 9 (30/05/2022)

fig 4.12, Photo by Samuel Theo Manat Silitonga: https://www.pexels.com/photo/closeup-photo-of-person-s-foot-near-mountain-837745/, Week 9 (30/05/2022)

Final prototype:

fig 4.13, almost finish prototype - 1, Week 9 (30/05/2022)

I actually adjust some and this is my real final:

fig 4.14, final prototype (JPEG), Week 11 (07/06/2022)

fig 4.15, final prototype (PDF), Week 11 (07/06/2022)

fig 4.16, description (PDF), Week 11 (07/06/2022)

---

FEEDBACKS

<back to top>

WEEK 9 (24/05/2022):

• Before Revised:

1. Sketches are too rough.
2. Design wireframes.
3. Indicate contents and call of actions

• After Revised:

1. Maintain uniformity of shape (if sharp corner, use sharp corner, if rounded, use rounded)
2. Start to proceed with color palette and moodboard, will be good if similar like the personality of Indonesia.
3. Sketch 1 can be started to be prototyped.

WEEK 10 (31/05/2022):

1. Colors layout all ok, no problem.
2. Add navigations on top.
3. Add headers on the card section.
4. Call to action button place closer to the content.
5. Logo no need boxes.
6. Heading = 35, Navi = 20

---

REFLECTION 

<back to top>

I think this project is the only one that doesn't require coding. I also enjoy this part of module, because it was easy to do, as it only requires visual. But the thing I don't enjoy the most is that we were rushed on the processes so it's kinda escalated very quickly, suddenly I started the task and several days later new submission column opened.