Advanced Interactive Design - Task 2: Interaction Design Planning and Prototype

on

23/10/2024 - 10/11/2024 / Week 5 - Week 7
Joey Lok Wai San / 0350857
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media 
Task 2: Interaction Design Planning and Prototype


TABLE OF CONTENTS


LECTURES

All lectures and exercises completed in Advanced Interactive Design - Lectures & Exercises


INSTRUCTIONS

https://drive.google.com/file/d/1jb7SAHLergayyQzswyaGmOKr6Rq0Kefj/preview


TASK 2: Interaction Design Planning and Prototype

We are required to work on our visual design and start planning our website’s interactive design elements and features. Unlike traditional static websites, 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. We can build their animation or user-reference animation to demonstrate the intended idea.

Requirements
  • 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.)

Changes from Task 1
To start this project, I decided to adjust my moodboard a little bit to have a more specific vibe, because my original idea moodboard seemed a bit too vague. Star Wars takes place in a science-fiction setting and uses science-fictional devices and technology. I wanted to incorporate this theme into my website design by making the website look like Star Wars' sci-fi technology screens.

This website shows the UI design in Star Wars -https://www.hudsandguis.com/home/2016/3/14/star-wars#google_vignette

Fig. 1.1 Star Wars' Technology UI Design, Week 6 (30/10/2024)

Visual References
The UI design of Star Wars looks very complex, which would be difficult to do and makes it overwhelming for the users. Mr. Shamsul also suggested the design style should not be too complex, instead using simple shapes to make the entire composition. Due to this, I decided to find simpler design references similar to those in Star Wars. 


Fig. 1.2 UI Design Reference, Week 6 (30/10/2024)


Fig. 1.3 UI Design Reference, Week 6 (30/10/2024)

Selecting/ Click Content 
On top of the UI design references I found, I also drew inspiration from a few games that had the same vibe. Tomb Raider and Star Wars Jedi: Fallen Order contained some interesting concepts of displaying content into categories, and how the content is displayed when users select, hover or click.
  • Tomb Raider - Selected content is displayed in colour, while other content remains in black and white.
  • Star Wars Jedi: Fallen Order - A border is displayed around selected content, and the brightness is increased compared to the unselected content 
Fig. 1.4 Visual References - Tomb Raider, Week 6 (30/10/2024)


Fig. 1.5 Visual References - Star Wars Jedi: Fallen Order, Week 6 (30/10/2024)

Asset Creation
Darth Maul only makes an appearance in one real-life action movie and a TV series. I tried to create as many of the assets as possible and find images that were related to the content needed. I mainly used Adobe Illustrator and Adobe Photoshop to make the assets.

Fig. 2.1 Created Assets, Week 6 (02/11/2024)

On my first attempt, I wanted to do a flat-style illustration. I found a silhouette of Darth Maul in a few colours and traced it to make the illustration clearer. This was before I changed my website design idea.

Fig. 2.2 Flat Style Illustration, Week 6 (31/10/2024)

I then decided to make a hologram version of Darth Maul just like the Star Wars movies do. This took a while to figure out, I had to watch a few YouTube tutorials as well as add my own adjustment values to it. Once the effect was placed, I photoshopped it onto a Star Destroyer ship background in order to make the home page of the website.


Fig. 2.3 Hologram Effect in Adobe Photoshop, Week 6 (31/10/2024)

Fig. 2.4 Hologram Effect with Background, Week 6 (31/10/2024)

Once I was done photoshopping Darth Maul, I did the same to the other characters as well, as shown on the 'Affiliations' page. This helps maintain consistency throughout the website as well as relate it back to the Star Wars universe. 

Fig. 2.5 Hologram Effect on Characters, Week 6 (02/11/2024)

Prototype Progress
This is the progress of creating the prototype design in Figma. Animations that cannot be created are shown through references to existing animations that closely represent the intended design.

Initial Prototype Design
Before giving birth to the brainbaby of using Star Wars UI on my website, I tried to do a flat-style illustration for my website. The idea was to have Darth Maul's eyes blinking before revealing his silhouette. The animation works... sure... but honestly, it I didn't like the idea of using flat-style throughout the whole website so I scrapped it.

Fig. 3.1 Initial Attempt - Flat Style Illustration, Week 5 (25/10/2024)

Fig. 3.2 Initial Attempt Animation, Week 5 (25/10/2024)

Refined Prototype Design
I started redesigning my user interface design from scratch. I referred to the references I collected from Task 1, going for glowy red visuals to match the red lightsaber effect. I designed a few variations for each page. I started by using simple shapes to block out how I wanted the layout to be and making rough animations of how the content would flow. 

*Not the Final Prototype (this is a progress compilation)
Fig. 3.3 All Prototype Variations in Figma, Week 5 (25/10/2024)

Navigation Page
For the navigation, I decided to make it a full-page navigation as suggested by Mr. Shamsul. I wanted to make the navigation look less plain, so a background was added to match the content. 


Fig. 3.4 Navigation Page Inspiration, Week 6 (02/11/2024)

As inspired by the animation above - the navigation page is a full-page navigation, which is revealed when the hamburger icon is clicked. Hovering on the page you want to go to, the font is bolded and the background changes to an image related to the page. 

Fig. 3.5 Experimenting with Layout, Week 6 (02/11/2024)


Fig. 3.6 Navigation Page - Initial Design, Week 6 (02/11/2024)

The colours of the image were too intense for the background, it also had no consistency between them even as much as I edited them to look the same. I then decided to stick to my colour palette of black, white and red.


Fig. 3.7 Navigation Page - Improved Design, Week 6 (02/11/2024)

Loading Page
When the user enters the website, it displays Darth Maul’s double lightsaber. The lightsaber gets switched on and the blade opens and loads until it reaches the end. I was inspired by Darth Maul's lightsaber opening in the movie, The Phantom Menace. 


Fig. 3.8 Loading Page Inspiration, Week 6 (02/11/2024)


Fig. 3.9 Loading Page Animation, Week 6 (02/11/2024)

Home Page
Design #1 - Lightsaber
The idea for the page is to have a lightsaber open in the darkness, and the light reveals Darth Maul's face. Once the page is done loading, the screen goes black. Darth Maul is then revealed as he is illuminated by his lightsaber lighting up. I drew inspiration from this Star Wars movie scene where Darth Vader reveals himself by turning on his lightsaber, right before he kills a bunch of people. 


Fig. 3.10 Home Page Animation Inspiration, Week 6 (02/11/2024)

This is my first attempt at making the lightsaber idea work (yeah it looks weird and very wrong). In the second attempt, I found a plugin called 'Glow' which creates a better effect of making it look like a lightsaber. 

Fig. 3.12 Lightsaber Animation - Attempt #1, Week 6 (28/10/2024)


Fig. 3.13 Lightsaber Animation - Attempt #2, Week 6 (28/10/2024)


Fig. 3.14 Home Page - Improved Design, Week 7 (04/11/2024)

Design #2 - Hologram
Halfway through my design, I remembered how Darth Maul first appeared in a hologram in the movie, Star Wars: Episode I - The Phantom Menace. In the movie, we also see a bunch of futuristic technology screens. I then found some visuals of Star Wars UI and tried to incorporate the sci-fi visuals such as those in Fig. 1.1, Fig 1.2 and Fig 1.3.


Fig. 3.15 Home Page Animation Inspiration, Week 6 (02/11/2024)

Once the page is done loading, the screen goes black, and Darth Maul is revealed. Users can click on the shape of Darth Maul to reveal a hologram of him. Clicking on the hologram leads to a pop up of brief information about him 


Fig. 3.16 Home Page - Initial Design, Week 6 (02/11/2024)

The initial design of the home page with the hologram effect looks very plain and boring. I decided tp place Darth Maul on the inside of a Star Destroyer for the background. I also added a glow effect around the pop-up. When the button is clicked, the hologram will become a part of the pop-up as well.


Fig. 3.17 Home Page - Improved Design, Week 7 (08/11/2024)

About Page
The 'About' page is a carousel that features the timeline of Darth Maul's life. When users enter the page, they can click on the images to reveal information about his life. The image becomes larger, comes into colour and a glowy border highlights it  


Fig. 3.18 About Page - Animation with Simple Shapes, Week 6 (02/11/2024)

Fig. 3.19 About Page - Adding Image and Content, Week 6 (02/11/2024)

In the initial design above, it looked too messy and crowded when a background was added. I decided to take it out and leave the background to be plain black. Another change I made as said by Mr. Shamsul, was to include a hover and click interaction. Hovering on the image changes color, and clicking reveals the information.


Fig. 3.20 About Page - Improved Design, Week 7 (08/11/2024)

Powers & Abilities Page
For this page, I already had a solid idea of what will look like. Hovering over the image that reveals information about his powers and abilities, the image gets enlarged and revealed in colour. It's very simple and easy to understand as well as providing an interactive element. When a section is hovered over, it reveals more content and stands out from the other sections that are in a default state

Fig. 3.21 Powers & Abilities Page - Animation Inspiration, Week 6 (02/11/2024)

The only change I made for this design was based on the feedback, which is to include a click interaction. Now, when users hover the image will change colour and clicking on it will reveal the information. 


Fig. 3.22 Powers & Abilities Page - Improved Design, Week 7 (08/11/2024)

Affiliations Page
In the initial plan, the 'Affiliations' page was a parallax scrolling page about Darth Maul's crime syndicate 'Crimson Dawn'. However, the content is quite limited and it may not be doable in Adobe Animate, which led me to change the topic of the page.

For the 'Affiliations' page, my first attempt was a slideshow design which looked quite boring. There was nothing exciting about it and did not match the rest of the website. 


Fig. 3.23 Affiliations Page - Initial Design #1, Week 7 (04/11/2024)


Fig. 3.24 Affiliations Page - Initial Design #2, Week 7 (04/11/2024)

To improve upon this, the design is changed to look like a character selection in a game, where you can select characters and display their information on the side. I decided to incorporate the pop-up of Darth Maul from the home page, so there is consistency in the designs. 


Fig. 3.25 Affiliations Page - Animation Inspiration, Week 7 (05/11/2024)


Fig. 3.26 Affiliations Page - Improved Design, Week 7 (08/11/2024)

Error 404 Page
This page is an additional page I created in case the website crashes or does not deploy, just so it would not be a blank screen. Drawing inspiration from Star Wars’ technology HUD and GUI, I wanted to incorporate a few of those elements in my design. I was also inspired by movie scenes where everything seems to be going wrong and lots of warning icons come up. The error icon will appear like the example in a rapid manner.

Fig. 3.27 Error Page - Animation Inspiration, Week 6 (02/11/2024)


Fig. 3.28 Error Page - Improved Design, Week 6 (02/11/2024)

Based on the feedback given by Mr. Shamsul on Week 7, I decided to make some amendments, especially in terms of adding hover and click interactions. I also removed the home page design with the lightsaber as the process would be too long and confusing with it. This is the Figma file of the original prototype before refinement:


Final Task 2: Interaction Design Planning and Prototype

Fig. 4.1 Figma File with Interactions, Week 7 (10/11/2024)


Fig. 4.2 Figma Prototype, Week 7 (10/11/2024)
Fig. 4.3 Final Interaction Design Planning and Prototype - Presentation Slides, Week 7 (10/11/2024)
Advanced Interactive - Task 2: Interaction Design Planning and Prototype by Joey

Fig. 4.4 Final Interaction Design Planning and Prototype - Presentation Video, Week 7 (10/11/2024)

FEEDBACK
WEEK 6
The hologram image looks good. Instead of hovering to reveal the hologram, allow the users to click to reveal it instead. In terms of the Star Wars technology UI design, the simple (first) one is better. You can try to include shapes from the more complex reference, but overall keep the design simple


Fig. 5.1 UI Design References (Left - Simple, Right - Complex), Week 5 (29/10/2024)

Using the bold font as the header doesn't work, use back the previous typography options you had with the curves and sharp edges.


Fig. 5.2 Design with Bold Font, Week 5 (29/10/2024)

WEEK 7
  • Instead of making the 'Navigation' page show a full background when hovering, maybe can just show the image in the highlighted section. This is so that Adobe Animate won't crash
  • For the 'Home' page, maybe can delete the section where the lightsaber reveals Darth Maul, if not the home process would be very long.
  • The 'Powers and Abilities' page needs an option to click. Hover to change colour, and then click to reveal information. Initially, Mr. Shamsul suggested clicking could reveal the whole page but that would be difficult to animate.
  • Same with the 'About' and 'Affiliation' pages, provide a hover-and-click interaction.

REFLECTION

Experience
At first, this task seemed pretty simple to execute, especially since we already had the proposal plan to guide us. However, I couldn't figure out what I wanted to do and that drained my energy to do this task which also made me procrastinate a lot. I felt my initial design looked very messy and disliked it quite a lot, so every time I opened Figma my mind went blank. In the end, I managed to push through this phase and adjust the design to my liking.  

Observations
I observed that by looking at references and inspirations, I was able to create a website design that I liked. This is especially true when I looked at Star Wars movie references. Not only was I taken back to my childhood, I also found them to have a very interesting concept which I can also apply to my website. For example, the hologram effect and the lightsaber reveal from Darth Maul and Darth Vader in the design served as a nod to the original movies.

Findings
From this task, I found that the Stra Wars HUD and GUI is very unique and exciting. There are websites that analyse the designs as well as show the progression and development of these designs. I also found how to make a hologram effect in Adobe Photoshop, which is something I never thought I would do before. It was interesting to learn new techniques that I would not have otherwise explored in my own.

Comments

Post a Comment