Labels

ADVANCED INTERACTIVE DESIGN / TASK 1: THEMATIC INTERACTIVE WEBSITE PROPOSAL

╎Gwendalyn Firly Bong / 0374580

╎Bachelor of Design (Honours) in Creative Media

╎Task 1: Thematic Interactive Website Proposal

TABLE OF CONTENTS

I. Instructions

II. Lectures 

III. Process

IV. Feedback

V. Reflection

I. INSTRUCTIONS


II. LECTURES

Week 1
Mr. Shamsul briefed us on Task 1 and told us to download Adobe Animate. 

Week 2
During this week, we were introduced to Adobe Animate for the first time. 

Figure 1.1: First Tutorial

Using the object drawing tool, we were told to make this bouncy ball and trace this boat. 

Figure 1.2: Bouncy Ball

Figure 1.3: Tracing Boat

Week 3
No class!

    Week 4

    This week, we were taught how to start animating in Animate. To start, we have to create a spider. 

    Figure 1.4: Spider

    After that, we have to convert the spider into a symbol in order to animate it.



    Figure 1.5: Spider GIF

    Week 5
    This week, Mr Shamsul explained to us the differences between the Graphic symbol and the Movie Clip Symbol

      Week 6



      Week 7



      Week 8
      This week, we were introduced to GSAP to create the animations. We were tasked to create this horizontal slider.  





      Week 9

      III. PROCESS

      For the first task, we were told to give 3 ideas. The topic can be based on any of these:
      • A specific product of a particular brand launch/special, beauty product lunch
      • Movie promotion
      • Game release promotion
      • Gallery/museum exhibit launch
      • Band/artist's latest release
      • or anything else you have in mind


      I created this presentation to showcase my 4 ideas:

      After consulting with Mr Shamsul, he said that I should proceed with the 4th idea since it has the most potential. 

      Research
      Before starting on the prototype, I went on to do some research on the 3 disabilities I have selected: ADHD, Colorblindness, and Dyslexia.

      ADHD

      Based on this website, people with ADHD experience life more intensely, as compared to neurotypicals. Their experience of their five senses and their thoughts are always on high volume. Their nervous system is overwhelmed by life experiences because its intensity is so high.

      How to translate into the website?
      • Oversaturated colors
      • Distracting, bouncing elements
      • Bright fonts, elements
      Colorblindness

      Colorblindness is a condition where a person has difficulty seeing or telling apart certain colors. There are basically 3 main types: Red-Green Color Blindness, Blue-Yellow Color Blindness, and Complete Color blindness. Each type also has a varying level of severity. For this project, I decided to focus on 2 types of colorblindness, Deuteranomaly (Green-blind) and Monochromacy. 

      How to translate into the website?
      • Based on each of the colorblind types, the colors within the website will change
        • Using this colorblindness simulator to change the colors: link

      Dyslexia

      Dyslexia is a learning difficulty that makes it harder for someone to read, spell, write, or recognize words.

      How to translate into the website?
      • The words will be jumbled  up, along with slight movement horizontally and vertically


      Here are the final proposal slides:

      Prototype

      When creating the wireframes, I made them directly on Canva to help me visualize the site. Mr Shamsul said that it's better to not have vertical scrolling pages, so I adjusted my pages. 


      I had the most iterations for the ordering/experience page.




      Here is the complete prototype process on Figma.

      IV. FEEDBACK

      Week 1:
      We were briefed on what to do for Task 1. 

      Week 2:
      I showed Mr Shamsul my ideas, and he approved the final idea. He then told me to prepare the wireframes by the following week.

      Week 3:
      No class!

      Week 4:
      I showed Mr Shamsul the finalized idea along with the wireframes. I was confused about the experience page, and whether to do 3 separate experiences for each of the disabilities, or just 1 experience with 3 of the disabilities experiencing it. He told me to just go with 1 experience, as the comparison between each of the POVs would have a bigger impact on the user's understanding. Overall, he was okay with it, but told me to fix the layout for the main experience page. 


      V. REFLECTION











      Labels:

      Comments

      Post a Comment

      Popular Posts