ADVANCED INTERACTIVE - EXERCISES

-
22.09.26 - 09.10.26 (Week 1 - Week 3) 
Michelle (0373843)
Module / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercise 1: Component Sandbox & Micro-Interactions
Exercise 2: Responsive Layout & CMS Architecture

TABLE OF CONTENTS

CLASS: LECTURES, TUTORIAL, & PRACTICAL

Week 1 (22/09/26)

Software: Framer (similar to Figma) -Adobe Animate (discontinued)
Framer is like Figma but can be published as website
Make the exercises for the final project: Identify what project we want to do

Thematic website
Micro-interactions (for function & aesthetic)
Usability (Consistency, Simplicity, Visibility, Feedback, Error Feedback)
Mental model

Website for reference: TheFWA

Week ? (00/00/00)

!

INSTRUCTIONS

!

PROCESS WORK

Week 1 (22/09/26)

!

Week ? (00/00/00)

!


FEEDBACK

Week 1 (22/09/26)

Use AI for ideation, try not to in development.
Try to get student version for Framer
Front-end designer, not full-stack web developer.
Have visual references, look for many

Week 2 (00/00/00)

!

REFLECTION

Experience

!

Observation

!

Findings

!

Comments

Post a Comment

Popular posts from this blog

INTERACTIVE DESIGN - PROJECT 1: DIGITAL BUSINESS CONCEPT

-
Image
21.04.26 - 12.05.26 (Week 1 - Week 4)  Michelle (0373843) Interactive Design  / Bachelor of Design (Honours) in Creative Media / Taylor's University Project 1: Digital Business Concept TABLE OF CONTENTS 1. Class: Lectures, Tutorial, & Practical 2. Instructions 3. Process Work 4. Feedback 5. Reflection CLASS: LECTURES, TUTORIAL, & PRACTICAL Week 1 (21/04/26) Introduction, assignment brief, group forming, & idea brainstorming. Web Languages: HTML CSS JavaScript PHP Phyton SQL etc.  Week 2 (28/04/26) Code Learning Website: w3schools AI Tools: Deepseek Qwen Gemini Microsoft Copilot GitHub Notepad Fig 1.2.1 Notepad Visual Studio Code Install extensions: Fig 1.2.2 VS Code Extensions ...
Read more

INFORMATION DESIGN - EXERCISES

-
Image
04.02.26 - 14.02.26 (Week 1 - Week 2)  Michelle (0373843) Information Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Exercises TABLE OF CONTENTS 1. Class: Lectures, Tutorial, & Practical 2. Exercises: Process Work 3. Feedback 4. Reflections CLASS: LECTURES, TUTORIAL, & PRACTICAL Week 1 (04/02/2026) Information Design :   Design to deliver information - clarity of message first, then aesthetic. Flip Topic 1: Infographic meaning, examples, and its different types. infographic  by Group C - Green Team Bonus Marks Question : Why is it that making people take action is the hardest step in infographic design? Some infographics could be overwhelming due to the many amount of information provided causing cognitive load. Most infographics are made to be understood simply and attractively, so they're good in educating but they could be lacking i...
Read more

INTERACTIVE DESIGN - PROJECT 2: INTERACTIVE PROTOTYPE DOCUMENT

-
Image
12.05.26 - 23.06.26 (Week 4 - Week 10)  Michelle (0373843) Interactive Design/ Bachelor of Design (Honours) in Creative Media / Taylor's University Project 2: Interactive Prototype Document TABLE OF CONTENTS 1. Class: Lectures, Tutorial, & Practical 2. Instructions 3. Process Work 4. Feedback 5. Reflection CLASS: LECTURES, TUTORIAL, & PRACTICAL Week 4 (12/05/26) Modifiying template using google developer tool. HTML Favicon ICO, PNG, GIF, JPEG, SVG Advanced Search Table default format padding&spacing colspan&rowspan styling table colgroup Video VSCode - table Week 5 (19/05/26) Create website design in Canva. Download image - ask AI tools to generate code Paste the code to coding softwares (VSC, Dreamweaver, etc) index.html styles.css Edit & replace elements (links, texts, images) LISTS BLOCK & INLINE DIV within container internal style can be overwrite by inline style. has padding same height? CLASS (.) no space bar can call multiple class - separated with sp...
Read more