Labels

Advanced Interactive Design - Task 1: Exercises


Sep'26
Brendan Fedya / 0376283
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
Advanced Interactive Design / Task 1 / Exercises

TABLE OF CONTENTS

 I. Lectures

II. Tasks

III. Feedbacks

IV. Reflections

I. LECTURES

➼    Week 1

Module briefing and pivotting from using Adobe Animate to Framer by Figma. Before thinking about a topic, we should think about the target audience first, and tweak our ideas accordingly. E.g. F1 topic but for kids.

➼    Week 2 - Components

Use AI assistant to manage breakpoints within website. 
Use frame to create buttons.
Button needs to be fit content for width and height, then adjust the padding for the text later on.
If you want color component to be different between states, use create color variable

➼    Week 4 (No classes on week 3) - Card components

Wrap content so the card can collapse when on smaller wiidth screens.

➼    Week 5 - Page Layout

Make the page width relative, and the height fixed. REMEMBER ITS THE PAGE, NOT THE FRAME.

Need to add layout for both frames, and pages so their position could be adjusted.

Then, create navbar first, put the logo and the buttons in different stacks stacked together. Distribute end so it could be clearly separated. Enable wrap so it could wrap on smaller screens.

Select the container, put it to vertical direction,
and distribute start,
and put the height to fit content so it could extend
so the navbar sits on top.

Viewport = height of the screen, usually for hero section. Put this frame under the container, sibling to navbar. REMEMBER TO ADD LAYOUT. 
then add a scroll section. Scroll section is to get a button to move to that particular scrolled area.


Convert navbar into component, so it could be used on multiple pages easily.

back to table of contents.

II. TASKS

➼    Exercise 1: Component Sandbox & Micro-Interactions

Before starting on this task, Mr. Shamsul asked us to come up with few ideas for our final project. Hence I came up with these themes:
1. A promotional website for my Major Project game
2. The psychology of color, and how it affects perception of things.
3. Emotional heatmap, to know how the body responds to different types of emotions.
4. Chinese zodiac philosophies

I prefer the first idea the most, as it could enhance my Major Project which would be relevant to my portfolio value. But after consulting, Mr. Shamsul mentioned the psychology of color particularly interesting, since it is very experimental and has a lot of rooms left to explore further. 

Then I began researching for component ideas that could be implemented for this, I searched for ideas through websites from The FWA, where it includes all top awarded websites which are good for references and inspiration.

These are some few pieces that I find interesting, click the names for links to the website:
1. Cartier's Le Choeur des Pierres. Vizualizing color bleed from contrasting background through interactions.

2. See What Eye See, layered different states within one interaction. Cursor tracking within the button, bounce effects to make it more organic.

3. Lucerra, surreal transitions that reduces friction.

After consulting with Mr. Shamsul, he prefers the psychology of colors because it's very experimental and a lot of rooms to explore. So here are some main functions: 

  • How color influences our emotional responses.

  • How context, contrast, and color combinations affect interpretation.

  • Use small visual examples instead of long paragraphs.

The first component I made is each click shows a new color with words, this could be implemented in the main page to introduce the concept of the app. It uses different variants, with spring transitions to implement that kind of effect.

The second component is regarding an interactive experience where users encounter a door whose color changes how they perceive what lies behind it. For example, a green door might suggest safety or permission to enter, a red door might feel dangerous or forbidden, and a yellow door might create a sense of caution or uncertainty. Users can click to change the door's color, while the surrounding environment, lighting, typography, and accompanying text change to convey a different atmosphere or expectation.

Basically this interaction explores how color influences our interpretation of familiar objects and the decisions we make based on visual cues. 

The third component will be the navigation bar, which is heavily referenced from one of my references I had previously, Lucerra. The base idea is pretty simple, but the thing about the reference is they include a video in it which would be difficult to execute through Framer.

So it should start with an overflow clip so it could appear from the side, attach the closed version of the variant for the main variant. 

To have a glitchy effect, the hover variant of each menu option is changed to other words.

After consulting, Mr. Shamsul said that my first and second component lacks concrete function, hence I would need to think more to attach a proper function that people would know even without context.

 ➼    Final Results



III. FEEDBACKS

➼    Week 3

  • List out clearly what is the primary color, secondary colors used in the website.
  • Decide target audience first, before decide on the concept.

➼    Week 4

  • References based a lot on using nested components, where under current requirements it is not viable since we could not use AI for the assets.
  • Components must have functions

➼    Week 5

  • Moodboard include color choices, font choices and its sizes aswell.
  • Visual reference is the concept to apply for the design (minimalist, maximalist, etc.)
  • The first component is already okay, anything within this component are still considered as once component.

IV. REFLECTIONS

My friends took this module in the short semester, and they had this as their final project—working with a group of two even. Considering this, this task is relatively challenging—especially when I am jiggling with other core modules as well, alongside the final group project of Information Design which also requires similar workflow. I felt that if I have more time, I could've produced better results, but as per time constraints—this is the best I could get. Nevertheless, I am happy that the final output turned out how I intended it to be, as it conveys the mood of the recipe accurately.

back to table of contents.


Labels:

Comments

Post a Comment

Popular Posts