Yung Siew Weng / 0339847
Art Direction /
Bachelor of Design (Hons) in Creative Media
Project Compilation
Project 1
MODULE INFORMATION
Art Direction - Project Compilation
INSTRUCTION
We are required to propose a re-imagined art direction strategy for the game “Among Us” without altering the original narrative plots and game mechanics. As this is a video game, the new proposed art direction must capture the essence of “playfulness” at the heart of the new aesthetics. Think of creating visual design that presents the essence of the game as a thrilling, whodunit sci-fi, in space narrative that relates players to the original game.
EXPLORATION
After the observational study and visual analysis that conducted under Art Direction / Lectures & Exercises, we continued our development to our project proposal. The main element of our project proposal was to having "sketches" of our new art style.
As a group, we chose not to rush the process of finalizing the art style. Instead, we decided to present at least one character design by each team member and collectively select the most appealing and suitable design. Although character design isn't my primary expertise, I put in my best effort to share my ideas with the team.
Fig 1.2 New Among Us Character Idea Sketch, Group
Continuing from there, our leader, Jiahui, took the initiative to gather all the character sketch ideas we had generated. She then embarked on a new phase of character design, incorporating some of the distinctive traits from the characters we had conceptualized. Meanwhile, other members are responsible for other task. We decided our individual tasks in a rather unique way – by relying on a spin of the wheel. Yes, it was all left to chance. The wheel determined that Pei Yun and Jenni would work on the killing animation sketch, Jiahsuan would focus on creating the emergency meeting animation sketch, and I was given the responsibility of crafting the logo design.
For logo design, I particularly very in struggle that how shall I proceed with our "cute, stylish" idea. From the mood board that we had gathered, it seems to be very hard for me to explore and develop to a stylise version of 3D logo, and feeling the sense of my team might more prefer on gradient, y2k style of design direction. To fulfil the sense of cute and the direction that I think the members might agreed with, I started exploring AI's 3D feature, inflate.
Fig 1.3 Logo Design Outcome
#Summary of Logo Design Ideation
The development of logo design took two distinct directions, each aimed at encapsulating different aspects of the game's essence:
1. 3D Playfulness and Style : The logo design aimed to achieve a 3D, stylish, and playful look. It was intended to incorporate space-related elements like orbits and stars to match the game's cosmic theme.
2. Stones in Space Ideation : In the second logo concept, we considered the notion of stones appearing in space. The idea was to convey the presence of randomly scattered stones in the cosmos, adding an element of surprise and curiosity. This concept was meant to capture the sense of mystery and exploration in the game.
<!-- end of #Summary of Logo Design Ideation -->
Following the logo design exploration, we proceeded to the next phase, which involved finalizing our proposal. During this time, I had responsibilities for parts of the UI design, including buttons, the customization screen, landing screen, logo, and font design. On the Monday of the proposal presentation week (9/10), we conducted a brief team meeting to discuss character and environment design progress. Honestly, before the meeting began, I had to apologize sincerely as I hadn't made significant progress over the weekend as I was busying with other module deadlines. However, I did manage to explore and share the button designs that I envisioned for our game. To my pleasant surprise, my team was very supportive of the button style concept I proposed, even though I hadn't been able to invest a lot of time into it. This positive feedback and their support were truly motivating.
Fig 1.4 Button Development
With the support of the team, I continued my exploration towards the other UI design elements:
#Preloading Screen
Fig 1.5 Preloading Screen Development
The concept of "stones in space" inspired me to delve into crafting the ideal visual composition. Drawing from the design concept I gained from Professor Phil Cleaver during a workshop in Week 6, I was particularly drawn to the idea of emphasizing and contrasting a sentence to convey two different meanings. This concept sparked my exploration, focusing on introducing a sense of contrast, especially in the letter 'u.'
And, continue, I applied the effects from Canva //thanks for the wonderful technology// by "animate" it to visualise our concept.
Fig 1.6 Preloading Screen - Animated Demo
#Character Design / Icon
Fig 1.7 Character Design - 3D inflate
To enhance the interactive and visual appeal of our presentation, I opted to employ a 3D "inflation" technique for the character designed by Jiahui to showcase the character on various screens with a more engaging and three-dimensional visual effect.
#Customisation Screen
Fig 1.8 Border 2D vs. 3D
To ensure consistency among the UI elements, I made a request from Pei Yun for the border design document (left). And, I decided to experiment with applying the 3D inflated effect to this art version as our team's previous discussion had discuss about incorporating 3D elements into certain interfaces, aiming to create a cohesive visual experience.
And, continue then, I implemented the 3D border design into the customisation screen :
Fig 1.9 Customisation Screen
The concept for the customisation screen took its cue from UX design. Notably, I considered the positioning of characters within the screen. In the original Among Us, characters are on the right side, which can be less user-friendly for right-handed players. This arrangement may inadvertently lead to player frustration, a psychological aspect of design that I had felt when I experienced the gameplay. To make the design feel more space-themed, instead of changing the color of highlighted buttons, I think to opt for using orbits as a visual cue to represent various game design elements is more approachable.
Another aspect that explored was the idea of having a 3D outer layer and 2D graphics within the border. This decision was influenced by the desire for the border to resemble a technological screen, and thus, i felt that all elements within the border should be in 2D for a consistent visual experience.
<!-- end of #Customisation Screen -->
After the art exploration, we are instructed to cut and paste our ideation into our proposal for the coming presentation:
Fig 1.10 Project Proposal
Feedback @ Week 7 / 12.10.2023
- Enhance preloading screen depth with foreground, mid-ground, and background layers.
- Explore changing the color of the "U" in "Among Us. U" on the preloading screen for better visual appeal.
- Consider maintaining a 3D approach for character and environment elements while keeping UI/UX screens in a non-3D format to maintain consistency and contrast.
Once our proposal was completed, we carried on with our exploration of the art direction, with the intention of finalizing it during the independent learning week. However, we encountered some challenges, particularly in the UI/UX domain. We felt that until the character and environment color schemes and elements were solidified, it would be difficult to establish a clear art direction for the UI elements.
At the moment, the whole process seemed complex and lacking clarity for our future direction. As a response, during the week, Pei Yun and I took the responsibility of further developing the analysis of the original Among Us' UI/UX. Our goal was to determine which screens should be our primary focus as we continued to shape the overall design. This additional analysis would help us make informed decisions about the direction of the UI/UX design.
Fig 1.11 Among Us' UI/UX Analysis
After our analysis, the team engaged in discussions focusing on the required elements, ultimately deciding to model all interfaces akin to Among Us. While awaiting the team's completion of the environment and character design, we delved deeper into refining our UI/UX components. Upon receiving the colored 3D character designs, Pei Yun and I initiated discussions on how to approach the comprehensive development process. Due to limitations in props and elements, we experimented with various props and opted to modify the 'brush' concept, shifting towards a filled-type option border to ensure better contrast and clarity, as the gradient colour scheme in the brush concept was proving less distinct.
Fig 1.12 Amendment & Exploration
During week 9/10 of the semester, our UI/UX development encountered considerable fluctuations due to challenges in establishing a consistent art direction and concepts. The uncertainties surrounding the color scheme for the environment design posed difficulties. With varying colour schemes each week, aligning our UI colour scheme and direction became increasingly challenging. So, we opted to wait for the team to finalise the environment design before delving deeper into exploring the most fitting outcome.
Once the environment design was finalised, and the ambient lighting was established, it became evident that our initial direction involving stones and 3D elements might not fully align with the overall design direction. Pei Yun and I encountered challenges in finding a solution that harmonized our design concepts with the team's environment and character design. In a sudden breakthrough, we revisited our previous mood board and conceived an idea: incorporating virtual touch screen panels. These panels would have a transparent appearance, allowing them to seamlessly adapt to any base colour changes, offering a more flexible design solution.
Fig 1.13 Virtual Touch Panel, Attempt 1
In attempt 1, our ideation revolved around creating a curved edge border, intending to give the touch panel a 2.5-Dimensional appearance, almost as if it were right in front of your eyes, materialising on the screen. We experimented with this concept on the previous panel, utilising Adobe Illustrator to create a simple rectangular shape with added gloss and arc effects. However, despite our efforts, we sensed a missing element, though we were nearly capturing the desired feeling. So, we continued to explore about the potential of the border.
The exploration ended up when we decided to move all our UI/UX design into Figma in order to create something useful and more applicable for our specialisation. With Figma, we delved deeper into exploration, specifically focusing on animation and effects. Guided by tutorial video, notably Thalion - UX MISFIT, I experimented with creating gloss effects to enhance the panel design and the final outcome was documented under #Attempt 2.
Fig 1.14 Virtual Touch Panel, Attempt 2
By having this #Attempt 2, both of us felt that this simple shape with the help of effects had really make the environment design and the overall aesthetic works, and it become more elegant and luxury for futuristics theme to go. Also, the freedom of a rectangular border and maximise the ideation of us to create in a large panel, so we decide to proceed by set this as our final outcome of the panel.
Fig 1.15 Inventory / Customisation Screen Exploration
By having the inventory / customisation screen as a base, I crafted three types of buttons for the team to explore: a fully filled button with one border, an active button with both a border and stroke, and an active button with only a border. After discussion, the team reached a unanimous decision to proceed with option #2 as its simplicity and clarity in guiding users were the primary factors driving this choice.
Fig 1.16 Settings
For the settings screen, as the previous Among Us' screen is when user click it will change the words on the button and active a green border; but for us, we think that it might be more effective if we use the toggle effect that the user can navigate with, which all the detail and options are clearly indicated on the screen as it offer a more straightforward interface for users to manage settings.
Fig 1.17 Landing Page
Also, regard to the landing page, by using the original logo as base, I adjusted and constructed the UI layout of the landing page by adding setting, toggle panel and etc.
Fig 1.18 Development, Week 11
The development of the week seems to be very great and accomplish compared to the previous, and we believe that this would be a very good start for user to go through and design the full interface.
Feedback @ Week 11 / 09.11.2023
Good Job! Keep pushing forward with the UI/UX design work, ensuring that we have substantial progress to showcase by next week.
Continued then, we continued our UI/UX development journey this week. Pei Yun took charge of the voting and chatting screen, while I concentrated on logo design and the landing page. Our progress was slower than anticipated as we dedicated significant time to exploring the best dimensions and layouts for our work.
Fig 1.19 Logo Exploration
Inspired by our initial ideation, we aspired to craft a delightful, whimsical sci-fi game design set in a futuristic environment, featuring endearing and playful characters. During our exploration, we delved into various typefaces, ultimately gravitating towards a concept centered on rounded edges, space textures (like cosmic holes), and a notion of virtual transparency integrated into the logo. These elements felt more aligned with our envisioned game concept, offering a fitting representation of its essence and style.
Fig 1.20 Landing Page
Building upon last week's progress with the Landing Page, my focus shifted towards integrating essential buttons and elements into the layout such as the online profile panel, friend list, and news. A standout addition was the utilisation of lighting visual cues, akin to the original Among Us interface, to indicate a user's online status within the online panel.
During our routine meeting discussions this week, the team raised concerns about the high transparency of the logo's color, which affected the contrast of the text. In response, I made adjustments by reducing the logo's transparency. The updated outcome is detailed below :
Fig 1.21 Logo Exploration 2
Continuing from the task involving the security room design, the team expressed a desire to integrate virtual touch panel borders as the keyboard elements. In response, we were required to implement the keyboard design by using our designed virtual touch panel to align with their vision and maintain consistency within the interface.
Fig 1.22 Virtual Keyboard, Task Design
Feedback @ Week 12 / 16.11.2023
Prioritise the environment and character sequence designs over UI/UX exploration in Figma. Aim to finalise all the elements within the week for a well-prepared presentation in Week 14.
Following the team's feedback on the logo design, I realized the current outcome that we amended didn't quite align with our vision for the virtual panel, so we continue to explore on the logo design :
Fig 1.23 Landing Page, Logo Exploration
With several adjustments and Pei Yun's Advanced Typography Outcome of the creation font "Ahoy_Popeye" now incorporates transparency effects like drop shadows, inner shadows, and multiple layers of adjustments, making it a great fit for our "virtual panel" concept and complement in the landing page beautifully.
Continued then, I move towards to the #Game Guide of the gameplay :
Based on the observation, it can be stated the font size, colour contrast and position of the content text seems to be very complicated to read as the visual images is much bigger than the text. So, in the new design, I applied the ideation of left and right; construct the text on the left, visual image on the right.
Besides delving into the logo and game guide, we also progressed in developing the pre-game interfaces, including News, Account, Inventory, and Shop.
Fig 1.25 Development, Pre-Game Interface, Week 13
To be mentioned, aside from the pre-game interface, we also did some amendment to the 2D map design :
Fig 1.26 2D Map Design
As the original base version created by Jenni having corridors, but the 3D outcome was free of corridors, and the colour schemes seemed overly bright and divergent from the intended design. To streamline progress and avoid complications, I promptly developed a 2D map version for the map indicator. By using the architecture drawing "door", it seems to having a more clearer indicator on where is the entrance of each room.
Feedback @ Week 13 / 23.11.2023
Look good, macam you all like gamers.
After the last general consultation, we continued our development into finalise the final outcome of our redesigned Among Us. This week, we focused and finalised all the leftover part including pre-game and in-game interface.
Fig 1.27 Inventory, Interaction
Finally, it's time to wrap up the inventory design, which has been the primary element I've been working on since the beginning of the project. There were some delays due to missing elements each week, pushing back the completion of this interface. However, when all the elements finally came together, the interface became truly interactive. This should be credited to Jiahui for the significant contribution she made with her animation sequence for the rotating character, which greatly enhanced the overall interactivity.
Fig 1.28 In-game interface
Continuing with the in-game interface, once the team wrapped up the environment and character design, our focus shifted to integrating buttons and UI/UX elements into the design. This step aimed to immerse users deeply into the gaming experience.
Fig 1.29 Map Indicator
As the original version of Among Us having different map colour for both cremate and impostor, In our version, we tried to implement the idea by having two version of colour. Unlike the original version where the map icon required users to click and view their location, we reimagined this concept, inspired by Goose Goose Duck, by replacing the map icon with a larger map interface for easier visibility and accessibility.
Fig 1.30 Impostor's View
Furthermore, we focused on implementing interactions for the impostor's view, particularly concerning the vent and sabotage actions.
Fig 1.31 Voting & Chatting Screen
To be mentioned, when I proceed on the closing towards our outcome, I figured that the voting and chatting flow somewhat to be a bit complicated for user to experience, so I decided to make some amend onto it to make it to be overall more user-friendly for user to navigate.
After completing our tasks with Pei Yun, we felt accomplished and relieved, finally able to take a breather. However, we were suddenly request to "help parts" of the animation sequence, adding "simple" animations to integrate it seamlessly into Figma. Although it was a bit frustrating, we understood it was necessary to achieve the final outcome, so, yea, no choice. 😶
And, as the original version does not having any interaction and animation in Figma, but just static images, Pei Yun and I spent some time to done the missing part and tried out best to make the overall stuff to be consistent and match to our outcome.
Fig 1.33 Refined Version with animation & Interaction
Fig 1.34 Final Interaction, Figma
Fig 1.35 Final Prototype, Figma
Ogeh, it seems to be the end when we settled down these "challenge", we headed to the final presentation desk and showcased our video demonstration with added background music and sound effects by Pei Yun. Her work with the BGMs and SFX significantly enhanced the final outcome, and I'm immensely proud of her. Despite facing a few issues during the final presentation, I appreciate the effort put into the video.
Fig 1.36 Final Presentation Desk
Fig 1.37 Video Demonstration
//animation + transition by Figma; SFXs + BGMs credit to Pei Yun//
YouTube Link : https://youtu.be/izy7LIpPlgk?si=4DCA7BxAlzoqhbdO
FEEDBACK
Week 7 / 12.10.2023 @ Project Proposal
- Enhance preloading screen depth with foreground, mid-ground, and background layers.
- Explore changing the color of the "U" in "Among Us. U" on the preloading screen for better visual appeal.
- Consider maintaining a 3D approach for character and environment elements while keeping UI/UX screens in a non-3D format to maintain consistency and contrast.
Week 11 / 09.11.2023 @ General Consultation
Good Job! Keep pushing forward with the UI/UX design work, ensuring that we have substantial progress to showcase by next week.
Week 12 / 16.11.2023 @ General Consultation
Prioritise the environment and character sequence designs over UI/UX exploration in Figma. Aim to finalise all the elements within the week for a well-prepared presentation in Week 14.
Week 13 / 23.11.2023
@ General Consultation
Look good, macam you all like gamers.
Week 14 / 30.11.2023
@ Final Presentation
No comments for the final presentation. You guys do great as usual.
REFLECTION
In my second foray into "game design" following the Game Studies module, I anticipated this particular module to be a shining example of entertainment or animation design as I am not good in drawing. However, from the outset until Week 10, I struggled a bit, feeling like I wasn't contributing as much to the team due to a lack of clear direction. With everyone specialising in different areas, we worked separately on distinct parts that would eventually merge together.
This time around, Pei Yun and I collaborated again on the UI/UX design aspect. Initially, we divided our work on buttons, but it felt like our interest waned as the environmental and character colors shifted weekly, affecting our design process. At one point, we paused our efforts for a while, and I appreciate my group leader, Jiahui, for understanding our temporary slowdown in productivity. Before Week 10, it seemed like we were only designing panels. Then, a sudden thought struck me : why not utilize Figma? As a UI/UX student, I strive not only to shine but also to make meaningful contributions to a project. Otherwise, I'm hesitant to include it in my portfolio if I feel like I wasn't particularly helpful. Figma reignited our passion for UI/UX design and brought back our enthusiasm for creating something remarkable.
During the final presentation, there was panic and apprehension when our outcome lacked a BGM, essentially undermining our entire plan and success. It was regrettable. I tried my best to salvage the situation, as I am the one who suggest on the Figma planning, thinking this is part of my responsibility. Reflecting on whether having a more solid plan in place earlier could have made the presentation smoother is something that still lingers. Nevertheless, I've done what I could to rectify it. Well, is ok to fail and panic right, at least, this time, wasn't so painful. Overall, it's evident that the collaboration was generally effective, especially within the DisneySea team: Pei Yun and Jacq (as always), and my trusted leader, Jiahui! Working together was a smooth process, and the three of us trusted and supported each other well. I really appreciated with the moment when we tackled challenges and navigated struggles as a team.
Comments
Post a Comment