ADVANCED INTERACTIVE DESIGN / TASK 2: THEMATIC INTERACTIVE WEBSITE
╎Gwendalyn Firly Bong / 0374580
╎Bachelor of Design (Honours) in Creative Media
╎Task 2: Thematic Interactive Website
TABLE OF CONTENTS
I. Instructions
II. Lectures
III. Process
IV. Feedback
V. Reflection
I.
INSTRUCTIONS
II. LECTURES
Lecture notes are in Task 1 Blog
Lecture notes are in Task 1 Blog
III. PROCESS
For this task, I used the previous Figma prototype as reference.
To start, I went to Google Fonts to download the fonts I have used in
my Figma prototype. I learned that I had to get the static versions,
not the variable versions, as they don't work properly in an HTML5
document.
Figure 1.1: Google Fonts
Next, I started with the homepage. I basically made the overall
theme and the base for the rest of the pages here.
Figure 1.2: Home Page
Figure 1.3: Navigation Bar
Figure 1.4: Navigation Bar 2
Figure 1.5: Files
Next, I created the main experience of my website: the menu
ordering.
Figure 1.6: Main Ordering Page
To start, I went to Google Fonts to download the fonts I have used in
my Figma prototype. I learned that I had to get the static versions,
not the variable versions, as they don't work properly in an HTML5
document.
Figure 1.1: Google Fonts
Next, I started with the homepage. I basically made the overall
theme and the base for the rest of the pages here.
Figure 1.2: Home Page
Figure 1.3: Navigation Bar
Figure 1.4: Navigation Bar 2
Figure 1.5: Files
Next, I created the main experience of my website: the menu
ordering.
Figure 1.6: Main Ordering Page
Figure 1.7: Main Ordering Interaction
I also started adding the homepage text and transition
animations.
Figure 1.8: Home Page Animation
After completing the Homepage, I moved on to the variations of the
Experience page. I duplicated it and named it after the
disabilities: ADHD, Colorblindness, and Dyslexia.
Figure 1.9: Dyslexia Ordering Page
For the Dyslexia page, I took inspiration from this simulator: Link!. I decided to make the words (except the title and the
navigation bar) move and change into slight variations of them. In
order to do that, I had to do it frame-by-frame.
Figure 1.10: Dyslexia Text Format
Figure 1.11: Dyslexia Text Format 2
Next up is the ADHD page. This one was relatively simple, and I
just added a few pop-ups to "distract" the user.
Figure 1.12: ADHD Ordering Page
I also animated the pop-ups to further add more motion.
Figure 1.13: ADHD Popup Animation
Lastly, I did the colorblind pages. I decided to cover 2 types
of colorblindness: Deuteranopia, the most common, and
Monochromacy, the rarest.
Figure 1.14: Deuteranopia Colorblindness
Figure 1.15: Monochromacy Colorblindness
Figure 1.16: Colorblindness Timeline
After completing the main experience pages, I moved on to the
Information Pages. I changed it up a bit from the Figma prototype, as I felt that it wasn't consistent across all pages.
Figure 1.17: Information State Page
I made it so that the Information page also used rectangles, with each of its representative colors and shapes complementing it.
Figure 1.18: Final Dyslexia and ADHD Information Pages
The specific information pages all follow the same layout. However, I added more information for the Colorblind Pages, as it needed to be more specific, and I covered 2 of these types.
Figure 1.19: Final Colorblind Pages
Final Netlify Link: https://incluvo.netlify.app/
Figure 1.7: Main Ordering Interaction
I also started adding the homepage text and transition
animations.
Figure 1.8: Home Page Animation
After completing the Homepage, I moved on to the variations of the
Experience page. I duplicated it and named it after the
disabilities: ADHD, Colorblindness, and Dyslexia.
Figure 1.9: Dyslexia Ordering Page
For the Dyslexia page, I took inspiration from this simulator: Link!. I decided to make the words (except the title and the navigation bar) move and change into slight variations of them. In order to do that, I had to do it frame-by-frame.
Figure 1.10: Dyslexia Text Format
Figure 1.11: Dyslexia Text Format 2
Next up is the ADHD page. This one was relatively simple, and I
just added a few pop-ups to "distract" the user.
Figure 1.12: ADHD Ordering Page
I also animated the pop-ups to further add more motion.
Figure 1.13: ADHD Popup Animation
Figure 1.14: Deuteranopia Colorblindness
Figure 1.15: Monochromacy Colorblindness
Figure 1.16: Colorblindness Timeline
After completing the main experience pages, I moved on to the
Information Pages. I changed it up a bit from the Figma prototype, as I felt that it wasn't consistent across all pages.
Figure 1.17: Information State Page
I made it so that the Information page also used rectangles, with each of its representative colors and shapes complementing it.
Figure 1.18: Final Dyslexia and ADHD Information Pages
The specific information pages all follow the same layout. However, I added more information for the Colorblind Pages, as it needed to be more specific, and I covered 2 of these types.
Figure 1.19: Final Colorblind Pages
Final Netlify Link: https://incluvo.netlify.app/
Comments
Post a Comment