Week 01 - Week 14
Ahmad Firas Bin Ahmad Fisal | 0345121
Advanced Interactive Design | Bachelor of Design (Hons) in Creative Media
Lectures & Exercises
INSTRUCTIONS
Module Briefing:
Main Software: Adobe Animate
-Find concepts and ideas to kickstart the proposal for our final project in week 01.
-Web animation fundamentals and interactive elements are some of the main components in this module to make a responsive design layout.
-Scripting animation will be taught as an advanced animation technique besides Adobe Animate. To make us acquainted with the real-world method differences.
-Audio and Video integration to our design layouts.
-Event Handling
Prototype stage
-Build important parts of the website, such as transitions, animation, anchoring, etc. The bigger things that tie the whole project together. Over the weeks, making it functional is the goal.
-We will have usability testing in class with 3 users before continuing the project for the remaining two weeks (13-14). Possibility of extension to Week 15 as per usual.
Task 01
- Choose a brand that we choose to work with and target to enhance the brand experience.
- Choose a thematic website for a specific product instead of the launch of the website generally. A more targeted website.
- Usually, a usability-focused website can be boring although functional. This is the time to create something different that focuses on new ways of navigating a website while still maintaining a little bit of principles on usability
- Coherent and Familiar CTA buttons are ways to ensure that the usability is not lost in more unique websites.
- Micro and Macro animations.
- One-way canvas type of layout is what's shown as the website example.
- Subtle animation when it's in idle mode or not interacted with is also a plus point.
- Focus on clicking for interactive and responsive elements.
- Generating 3d-looking images in photoshop could be possible // layered 2d images to make 3d environment // high quality 2d
- Sequencing in blender and export is as video to have a linear exploration.
Task 02
- describing the type of animation we would want in our final project at this stage.
- The cursor design, button design, transitions, etc.
- show video examples from interest or any other source that could show your idea when it's live because it is understandable that students are not yet animating it as this is just in the presentation of the prototype for Task 02.
- showcasing of sketches is permissible.
- user flow charting of what the website would have
- storyboarding with images on the side and text on the other during the proposal presentation, would be highly beneficial for our lecturer to check our work.
- showing other ways to present our animation idea, if we can't build it with Figma, show examples from Pinterest or other sources that are showing the animation live.
Exercises (Week 02 - Week 03)
Adobe Animate Learning
1. Classic Tween - To move the shape
2. Motion Tween - To move the shape non-linear
3. Shape Tween - To morph the existing shape
4. Transitions - Ease in and Ease out, Alpha (Opacity)
Recap Exercise:
We are required to use the knowledge we have learned listed above to move our shape around the project with appropriate timing and morph the image into our version of a rabbit. After we have completed it, we are given a project file with the necessary elements for u to do a mini logo animation with it. This is to teach us frame-by-frame editing and the importance of transitions.
Week 04-05: Absent due to the death of a family member
Week 06-08: Lecturer was not around // Independent Learning Week
Week 09: Absent due to the death of a family member
Week 10-15: Consultation approach with upon-request tutorials to give way for Final Project Making
Comments
Post a Comment