ADV INTD - Task 1

Edita Chew En Thung / 0357357

Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 1  : Thematic Interactive Website

---

Table of Content

1. INSTRUCTIONS

2. PROCESS

      i. FINAL

3. FEEDBACK

4. REFLECTION

---

INSTRUCTIONS

fig 1.1 | Module Information Booklet (MIB)

PROCESS

Moodboard (10 References)

WEB & DESIGNS

fig 1.2 | Moodboard

`

The collections of bento layouts and a few websites that has quite the number of striking accents in their landing pages were what attracted me the most on my inspirations. I found myself leaning more towards a more different layout than what I usually see on normal websites I browse on a daily basis, so it was a breath of fresh air.

INITIAL DRAFT SKETCH

fig 1.3

I wanted to implement the "bento" format into my thematic website as it's a simple yet interesting concept to explore around with, and I feel most excited to use this as exploration and create it from scratch.

I started to sketch out the idea behind the skincare's image and wanted to do a little more extra than the website has now. so I chose a skincare product line to proceed with the task. 

I wanted something balanced and yet it stands out from the overall image, then I placed the main product to be centered with a contrasting colour for the background to give hierarchy and so, I too, chose the current colour scheme that I provided down below that has loyalty to the current brand colour and also the colour of a pink lotus as the skincare line is revolving around the lotus. Using the pink as the accent colour.

Colour Swatch

fig 1.4

Font

Andrade Pro Regular

fig 1.5

font is downloaded to device and can be used as there is permission to do so.

To be able to stay true to the brand's image, a high-end skincare brand, a font that gives off a graceful vibe and overall demeanour would best suit the overall message.

Flowchart

fig 1.6

To start on the initial take of the "bento" format, I have to consider the usability of the bento slots as buttons and pop-ups and also redirecting them back to click on other buttons to pique their interests.

PROCESS | figma

Wireframes

fig 1.7

Then, I started to digitalise my initial draft sketch to get a better gist of my working area, and how do I improve some parts that looked off, and so I changed some colours and match it evenly to look balanced.

fig 1.8

fig 1.9

Full Final Wireframe + prototype wireframe (connections)

fig 2.0

fig 2.1

Prototype:

 

fig 2.2

Proposal Slides

fig 2.3

FEEDBACK

Week 3

- "Proceed with what interests you most."

- "I think the bento idea is good, simple and interesting, you may proceed."

REFLECTION

I set a certain period of time to be able to fulfill the goal of completing the presentation slides to persuade and illustrate ideas in multidisciplinary environment, I have identified considerable progress not only within my improvement of communication skills but also in my growing assurance in how I present information to other students and people in general.I have been able to make presentation both individually and these keep helping me to hone the skills in order to address even a diverse group of audience. In a disciplinary setting, I can see significant growth in both my communication skills and confidence. I’ve had opportunities to present both individually and these experiences have helped me refine my ability to adapt  to more diverse audiences. I’ve learned much about presenting information and arguing it in a clear and convincing style, which professionals will find compelling. Not only have I learned to better respond and address perspectives other than my own in group projects, but also convey my ideas effectively when alone in presenting to a group. This journey has also helped me learn how to consciously listen, which in return enables me answer questions / feedback more intelligently.