Advanced Interactive Design---Task 2: Interaction Design Planning and Prototype
14/10/2024 - 17/11/2024 ( Week 5 - Week 8 )
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Advanced Interactive Design
Task 2: Interaction Design Planning and Prototype
Jump Link
1. Instructions
1.2 Card Design1.5 Figma
2. Reflections
Instructions
MIB of Advanced Interactive Design
Task 2 Requirement:
Students are required to work on their visual design and start planning
their website’s interactive design elements and features. Unlike traditional
static website, when it comes to interactive design where animations are
present, the plan not only should include the layout visuals but also the
animation example or reference. Students can build their animation or
user-reference animation to demonstrate the intended idea.
- Walkthrough Video presenting the plan and showing the animation examples and/or references.
- Online posts in your E-portfolio as your reflective studies with links to any resource involved in the creating of the plan. (i.e.: Figma link, Miro link, etc.)
Finding References
My theme is tarot cards, so the focus is on the cards themselves, followed
by the website. With that in mind, I started looking for references.
Based on the previously established design, I began searching for related
designs and selected the ones I liked from the references.
|
| Fig1.1 References in Pinterest |
|
| Fig1.2 References |
The design for the tarot-themed website focuses on a vintage and mysterious
style. Dark tones are used for the background to create an aura of mystery,
while gold and silver details add a sense of luxury and contrast. Light
colors are applied for transitions and to balance the overall color scheme.
The layout is minimalist, prioritizing user-friendliness and highlighting
interactive elements without overwhelming the design. The fonts chosen
include Great Vibes for titles and navigation, Lobster for
subtitles, and Playfair Display for regular text, all contributing
to a cohesive and stylish presentation.
|
| Fig1.3 Galaxy |
Card Design
Card BackNext, I'll begin the design. In my concept, I plan to use simple lines for the back of the tarot cards. Since the tarot cards should evoke a sense of mystery, they will include elements like the sun, moon, and stars. To make it more unique, I will also incorporate the ram horns, a characteristic of my Aries zodiac sign, into the design.
|
| Fig1.4 Simple element design used in card back |
|
| Fig1.5 First and second version design card back |
At first, I wanted to create borderless tarot cards, as they would look
more comprehensive and refined. I also chose a longer size, different from
the standard playing cards or Uno cards, since tarot cards are generally
longer.
I combined the ram horns with the moon, but it looked too strange. I
started reducing the size of the horns, and it looked much better.
However, there is still room for improvement, as the center felt too
empty.
|
| Fig1.6 Logo |
|
| Fig1.7 Card back with logo |
Of course, the result was quite strange, so I gave up on the previous design and decided to only use this logo along with some elements for the combination.
|
| Fig1.8 Horn and circle |
|
| Fig1.9 Star |
I used simple line combinations and repeated these elements in the layout to create a new design for the back of the tarot cards.
|
| Fig1.10 Combination of element |
|
| Fig1.11 Final Card Back Design |
|
| Fig1.12 3D box |
I used 3D tools to change the perspective and thickness, transforming it into the look of a tarot card box.
Card Front
|
| Fig1.13 Card Front Layout |
For the front of the card, I wanted it to be distinct from the back, as the front will feature images, names, and numbers as the main focus. To avoid having the same repetitive lines and making it too monotonous, I decided to switch to dots instead.
|
| Fig1.14 The Fool Card |
For the front of the card, you’ve included a name box. The layout features
an image in the center, with the number at the top center and the name of
the card, such as "The Fool," which represents the 0th card in the Major
Arcana of the tarot. This design gives a clear and structured look while
keeping the focus on the image and card details.
|
| Fig1.15 Card |
During the design process, you adjusted the font sizes, using Great Vibes for the card name to match your title fonts. For the Roman numerals at the top, you opted for Playfair Display, as the spacing between Roman numerals in the other fonts was too wide. Additionally, you added some elements to fill in the blank spaces, giving the design more balance and detail.
Figma Prototype Design
|
| Fig1.16 Wireframe |
Based on my previous wireframe, I started working on the prototype for the main interface, as the presentation only requires animation and the conceptual flow.
|
| Fig1.17 References for animation |
Of course, I initially went to Pinterest to look for animation inspiration and selected a few to study and reference.
|
| Fig1.18 Prototype |
After creating the relevant elements, I refined them based on the wireframe, which became my prototype. I then turned it into a presentation slide.
Presentation Slide
In my presentation, I included the art direction, featuring the background,
fonts, and elements that will be used on my website. It also covers
reference animations, the overall concept, and a flow chart to illustrate
the user flow.
For my website, every page includes animations, with the start page
featuring more animations at the beginning. I'm designing a scroll-based
website, where users will keep scrolling down to access different sections
that introduce tarot cards and other related content. I've also included
references for animations such as loading and card animations.
Figma
In my Figma file, there are two pages: one for the wireframe and the other
for the prototype.
Presentation Video
Reflections
The design process can feel mentally exhausting and challenging, but it becomes rewarding and fulfilling when the final product is completed. Throughout the process, there's a lot of uncertainty — never knowing if a better idea will come along or if a small mistake could ruin everything.
Yet, these challenges make the journey more engaging and encourage me to keep going. Once started, there's no turning back; it's a path that leads forward.
I've referenced many works, including tarot card designs, web designs, and thematic interactive websites. Some of my ideas involve 3D elements, which I know are a huge challenge, not just technically but also in terms of time and quality.
As Shamsul mentioned, other designers often work in teams, but I'm doing this alone, so I hope the process goes smoothly and I can achieve the results I want.
Comments
Post a Comment