.jpeg){kind=small}
26/06/2024 - 03/08/2024 / Week 9 - Week 15
Reema Arif Hamza / 0362792
Advanced
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's
University
Task 3: Thematic Interactive Website
Content
Week 9: Text Masking
Week 10: Illustrator to Animate
Week 11: Consultation
Week 12: Consultation
Week 13: Consultation
Week 14: Consultation
Week 15: Submission for Task 3
Instructions
Task 3: Thematic Interactive Website
Students will create integrated visual assets and refine the prototype into a complete working and functional product experience.
1. Upload the website to a web server.
2. Record a video walkthrough.
3. Online posts in your E-portfolio as your reflective studies
4. Make sure to embed or provide a link to the website and the video from the blog post.
Process
I started by refining the existing visual assets created during prototyping.
My prototype is linked here and Figure 1.1 shows all the frames.
Fig. 1.1 Existing High-Fidelity Prototype, Week 9 (23/06/2024)
During the consultation on Week 11, Mr. Shamsul suggested making my buttons
fit my website's thematic style. He showed examples of other websites/apps
incorporating their theme into all UI elements. I brainstormed ideas for
buttons that would fit the theme of "matcha". I used the shape of green tea
leaves to add a border around my buttons. Figure 1.2 shows the outcome of
the thematic buttons.
Fig. 1.2 Thematic Buttons, Week 11 (06/07/2024)
In Week 12, I added my buttons to my existing website designs. But something
felt off to me about the overall composition. At first, it was just the
title page that seemed weird. The idea of a Japanese themed cafe was cute
and had all the architectural details to match. However, the layout didn't
translate well for a website design.
I spent 1-2 Weeks just playing around with the title page, and exploring
other Flash websites to get more inspiration on how make the composition
work. I talked about it with Mr. Shamsul and he suggested exploring
different approaches, something conceptual could also work. He gave ideas
like animating a drop that splashes then becomes the start page.
I tried a bunch of different conceptual ideas (which I don't have picture of
haha) but none of them worked with the existing ideas. At this point, it was
a busy time for other modules so I put this task aside for a while.
While, I had free-time I would look through the FWA and see what different
sites would be like. Some that I really liked were
Kaizen and
Kerrygold The Magical Pantry. With Kaizen there was a beautiful storytelling aspect and The Magical
Pantry had a really fun character customization feature. They were also
really thematic, all the elements matched an overarching theme. As I looked
at my designs, I realized there was no true connecting theme that tied
everything together.
I began to think what is a website I would have fun playing and interacting
with, a website I would actually visit again because I genuinely liked it.
From this point, I had a shift that let me breakthrough my creative block.
I like things that are defined as very cute. So I focused my illustration
style to reflect that. One important thing I wanted to get right this round
was the story-telling aspect. I wanted to take the users through a little
adventure into the wonders of matcha and get them excited to drink it. After
mulling it over, I figured having a little character to guide them would
help add a narrative to the website. That's why I came up with a bunny
character, based on a barista.
Fig. 1.3 Little Barista Bunny Sketch, Week 15 (01/08/2024)
Fig. 1.4 Simple Wireframe sketches, Week 15 (01/08/2024)
The idea of it all was inspired by those cute cooking games I used to play
as a kid. I wanted a soft pastel theme with cute illustrations. I was really
satisfied with the idea so I finally started working on building my assets
on illustrator. I initially thought I would have until Week 16, but with the
deadline moved up to Week 15 I was on a time crunch to get things done.
Fig. 1.5 Bunny brought to life, Week 15 (01/08/2024)
Fig. 1.6 Title Page, Week 15 (01/08/2024)
Fig. 1.6 Initial Menu Design, Week 15 (01/08/2024)
I used illustrator to make all my assets because it was flexible and allowed
me to add the level of detail I wanted. The plan was to import everything
into animate and build from there. I had quite a lot of pages I wanted to
add, more so than initially planned so there lots of frames to build.
Fig. 1.7 All the frames and final assets, Week 15 (01/08/2024)
For the recipes page I included some of my favorite recipes and designed
cute illustrations that matched the theme to click as buttons. The buttons
would direct users accordingly to the matching recipe card.
Fig. 1.8 Recipe, Week 15 (01/08/2024)
For the history section I included the story of how matcha came to Japan and
created bunny characters that reflected the historical figures. For the Monk
bunny it was modeled after actual paintings of Monk Eisai. The Samurai bunny
was based off what Kamakura samurais traditionally wore in that
period.
Fig. 1.9 Monk Eisai Bunny, Week 15 (01/08/2024)
Fig. 1.10 Kamakura Samurai Bunny, Week 15 (01/08/2024)
For the how to make matcha section I followed my sketches and created a
storyboard of how I wanted each step to animate. Then illustrated all my
assets on Illustrator.
Fig. 1.11 Step 1 sift, Week 15 (02/08/2024)
Fig. 1.12 Step 2 add water, Week 15 (02/08/2024)
Fig. 1.13 Step 3 whisk, Week 15 (02/08/2024)
Fig. 1.14 Step 4 add milk & matcha, Week 15 (02/08/2024)
Fig. 1.15 Step 5 Finished, Week 15 (02/08/2024)
The character maker referenced the bunny from my website. It included the
characters like the monk and samurai plus additional outfits. Users could
customize their eyes/mouth/outfit/background to create their own matcha
adventure character. Below Figure 1.16 shows all the different characters
and backgrounds.
Fig. 1.16 Character Maker Illustrations, Week 15 (02/08/2024)
After finalizing all my assets I began to work on my animate file. I would
put each page on a separate illustrator file and separate it into different
layers according to what I wanted to animate. For the Title page I made the
graphics around the border wiggle side to side and the steam and title fade
in.
Fig. 2.1 Animate title page, Week 15 (03/08/2024)
For my start page I added a click to start button and a green transition
screen from the title to start page. I tried to reuse layers as much as
possible to keep everything easy to see, I also added labels to make things
organized and easy to find. It helped to label things because linking
buttons was a smoother process.
Fig. 2.2 Animate start page, Week 15 (03/08/2024)
For the menu page I kept it relatively simple and made each icon a
button.
Fig. 2.3 Animate menu page, Week 15 (03/08/2024)
Fig. 2.4 Animate recipe page, Week 15 (03/08/2024)
Separating items into different layers on illustrator is one of the more
time consuming parts. For example I wanted each point in the navigation bar
to be a button which already means 5 more layers. I tried to reuse lots of
elements in animate when possible. If the menu button was in all pages I
just dragged it till the end of the timeline.
Fig. 2.5 Illustrator layering, Week 15 (03/08/2024)
The main interactive elements in my website were the step by step
animations. It took a while to piece each animation together to make it as
smooth as possible. One thing that helped was adding lots of animation
frames, making it flow better overall. I had to adjust the speed for some of
the animations so they maintained a consistent pace throughout.
Fig. 2.6 Animate steps, Week 15 (03/08/2024)
Each step needed an animation button for users to press in order to play the
animation. I animation a spinning star as seen in Figure 2.7. The star spins
twice before showing text that invites the user to click on it.
Fig. 2.7 Animation button, Week 15 (03/08/2024)
Initially I wanted to add a background soundtrack in my website with a
button to mute/unmute. I did consult Mr. Shamsul on how to achieve it, but I
was unable to make it work in my animate file. there were issues with the
sound playing twice, playing automatically, and not muting. I tried lots of
different resources but was unable to include it. At the end, I removed the
button from my site.
I still added some small hover effects on buttons and a click sound for
some, everything worked out well when testing it. I finished everything up
and uploaded it to netlify. I am proud of what I did manage to achieve in a
short amount of time. I believe it reflects how much I like matcha and it's
a fun website for people to play around with. Unfortunately, there were some
more animation elements I wanted to include but opted out of due to time
constraints.
Final Thematic Website
Brought to you by Matcha Adventure
Final Walkthrough Video
Fig 2.8 Final Walkthrough Video
Feedback
Week 13: Maybe try something more conceptual, it doesn't need to start
on the cafe page. It could be like a drop of matcha then a transition. Look at
the FWA site and get more inspiration on how they design their website
composition.
Reflection
Experience
This assignment was tough in the sense I had a big creative block while doing
it. It took a lot to breakthrough that but I am really proud of what I did
come up with. Animate was a bit troublesome to use while making the website.
There were certain animations and elements I wanted to include but kept having
technical issues. I do think there's some areas left for me to add interaction
such as transitions in and out and more sounds. However, the step by step
animations make up for that because they were more complex to do.
Observation
I noticed lots of websites on the FWA have a big story telling element to
them. It's part of what makes it so engaging to users. I wish I had known that
from the start because building a story for my website would have really
helped guide my design choices early on.
Finding
I found animate both easy and hard to use. There are some elements and tools in it that are extremely useful like onion skin, tweening, and a java script helper. But there were some parts which lacked flexibility or were too complex as a beginner. I think as a student who is learning the application as I do the work, my website turned out fine. But if I had more time to learn more about animate, I think there is room to improve.
Comments
Post a Comment