Advance Interactive I Task 2: Thematic Interactive Website

 Khansa Raudlatus Syahiidah / 0374511

Course: Bachelor of Design (Honours) in Creative Media

Module: Advanced Interactive

Task 2: Thematic Interactive Website

Table of Contents:

  1. Lectures
  2. Instruction
  3. Themtic Website
  4. Feedback
  5. Reflection
1. Lectures
    For our task 2, we focused on executing what we planned to Adobe Animate. We started creating our assets, pages in Adobe Animate, and the web interactions. As we have planned and made our wireframe in Figma, we had the idea on what we need to do in Adobe Animate. 
2. Instructions
3. Thematic Website

Sketches:



Page 1: Home page


Page 2: About page

    For my "about" page, I made it as a page to get to know more about scams. I came up with a sliding to the side interaction through button. I made sure the design and layout was finalized before starting to animate it.

    As I wanted to make the button change color when hovering, I picked the color I wanted it to appear when hovering. I then connected it to the script I wrote in the "main_box" script.

    For all the animations / interactions in the "about" page, all script is put to one in the "main_box" script. So for both the sliding next and hover animation is put together here.

Page 3: Prevent page

    For the prevent page, I wanted it to scroll as we click the button, and also for other boxes that are not in the middle to appear smaller. 

    For this part, I made 5 boxes in one line and added a mask layer so there wont be overflowing box outside the panel.

    In order for the content to change as we scroll, I added the content in script. I also made sure that the "non-chosen" box would appear bigger than the others.

Page 4: Cases page



Page 5: Damage Control page

Final Website Link: CLICK ME
Thematic Website Adobe Animate: LINK
4. Feedback
    The feedback I received from Mr. Shamsul after showing him my progress was on how I must keep everything consistent. 
5. Reflection

Comments

Post a Comment

Popular posts from this blog

Minor - Cooling the Heat, Healing the Mind [Group 10]

Image
Khansa Raudlatus Syahiidah / 0374511 Advanced Typography / Bachelor of Design (Honours) in Creative Media Module: Minor Table of Contents: 1. Links     2. Introduction 3. Project: Cooling the Heat, Healing the Mind 4. Feedback 5. Reflection 1. Links Figjam board Main Google Drive Figma app link  (view only) Group 10 final proposal 2. Introduction 3. Project: CHHM Weekly progress Week 1-2: We were proposed the assignment guidelines of the assignments throughout this module and we also formed groups. Then were given the google sheets for the different projects to choose from.  Topic chosen:  Cooling the heat, Healing the mind  Team members :   Khansa Raudlatus Syahiidah As-Sajad (0374511) (team leader) - UI/UX  Erin Samantha Fenner (0381696) - Graphic Design  Feilyc...
Read more

Design Principle TASK 3 - DEVELOPMENT & DESIGN

Image
Khansa Raudlatus Syahiidah / 0374511 Course: Bachelor of Design (Honours) in Creative Media Module: Design Principles Task 3: Development & Design Table of Contents: Lectures Instruction Task 3 Feedback 1. Lectures 2. I nstruction 3. TASK 3 - DEVELOPMENT & DESIGN Task 1 & 2 recap: On our previous task, we had to sketch 3 different ideas while still applying the design principles. These sketches also referred to our ideation based on the selected design poster we did. After we have all 3 sketches done, Mr. Fauzi gave us feedbacks on what's good and could be better. Through this session, we were then able to continue further to task 3 using the chosen poster my Mr. Fauzi. Task 3 recap: For our final task, we had to develop further / refine our chosen sketch  through colour exploration, composition, typeface, positioning  with design principles in mind. Task 3 design process:     -  Original sketch     -  Refine process Final De...
Read more

Advanced Interactive Design - Exercises

Image
K hansa Raudlatus Syahiidah / 0374511 Course: Bachelor of Design (Honours) in Creative Media Module: Advanced Interactive Table of Contents: Lectures Instruction 1. Lectures Week 1: During our first week of class, Mr. Shamsul gave us an introduction on how and what we will be working on in the next 14 weeks. He showed us past seniors work to give as the idea on what we will be doing. 2. Instructions 3. Exercises 3.1 Exercise 1 - Asset Creation Sketch:     During our week 5, Mr. Shamsul gave us a task to sketch a character to use as our Adobe Animate exercise. I started of my sketch using paper before starting straight in Adobe Animate. I was able to proceed with digitalizing it after consulting my character idea with Mr. Shamsul. Digitalization:     Initially, I tried tracing my paper sketch to Adobe Animate, however it wasn't really helping. Therefore, I majority was done without tracing. I often used "transform" to ensure both sides of my character are align. I als...
Read more