Art Direction
23.04.2024 - 28.07.2024 ( week 01 - week 14 )
Len Hoi Yee / 0353430
Art Direction / Bachelor of Design in Creative Media
Instruction
In this module, we were tasked to redesign the Among Us game from a violent to a more children friendly genre game, instead of showing violent action and blood spilling all over the place. In this task, there are 3 aspects of designs that we are to take into consideration which are UIUX, environment and character design. In a group of 3, I was in charge of the UIUX design, where i have to redesign the ui screens. After a brief discussion with my team, we have decided to redesign the home screen, customisation screen, join game screen, and voting and chatting screen. We are required to study and observe the concept of the game, in order to recreate an enhanced version of the game.
Week 1-4
Exercise 1: Observational Study
To understand more in depth of the game, we conducted a thorough research on the game by doing an observational study on the concept of the game These are the 3 design aspects that we looked into:
- Visual Design
- Game Design
- UIUX Design
Fig 1.1 Research compilation
Fig 1.2 Pros & Cons of the game
After conducting our own research, we all came together and listed out the pros and cons and came up a conclusion for the research.
Identify Visualisation factors
 |
Fig 1.3 Visualisation factors discussion board |
After studying about the overall game experience and setting, we immediately dove into our main goal of this project. We had a proper discussion on the art direction of the game. We started discussing on the main concept of the game that we were told to change, a more children friendly game. First, we decided on the theme which came out to be underwater theme. By using underwater and land animals as a contrast, the underwater mammals will be the imposters, while the crewmates are the land animals. The land animals will be repairing and doing tasks in the broken-down submarine, and the underwater animals will disguise themselves as a land animal to disrupt them.
We started by identifying the genre, theme, and style, whether our direction is a stylised or a non-stylised design. In order to solidify our art direction, we created the 'is/is not' statement. This allows us to focus on our direction and to be used as a reference when we get distracted. When we confirmed all these factors, we did a positioning map to see where our style fits in the map full of other games. Besides, we also discussed about the stylisation range in a range full of other games so that we know where we land on in the game world.
Week 5-7
Project Proposal
After confirming our art direction, we began to prepare a proposal as a kickstart of the project. To propose an idea, we did a lot of considerations in many aspects.
Fig 1.4 Research based on our art direction
We started doing more research after a thorough research based on our art direction.
Fig 1.5 Rough sketches
However, due to time constraints, I was unable to deliver as many sketches as i could for the proposal. I needed more time on expanding and exploring different variations on the screens that i have to work on, hence, I am only able to expriment it after the proposal, and I wish to deliver more outcomes.
Proposal Slide
Week 8-14
Project development ( reference > sketches > final design)
Buttons
Initial sketches
Homescreen  |
Fig 2.1 Initial sketches for proposal |
References
 |
 |
To match the underwater theme, we went for a more bubbly and juicy pop buttons that will attract the players to want to touch the button more, in a way kind of improving the user engagement activity, HAHAHA. I especially like the last design as it suits our theme the most, and I plan to use that as one of the main buttons in the homescreen and throughout the game.
Sketch
Fig 2.3 Sketch
These are the first sketches i did for the buttons. #1 a more 3d button design while #2 is more bubble with gradient touch on the inside. After showing them to my teammates, we all agreed on #2 as it fits our theme more. The reason to use this design is to make the screen interesting yet not stealing the main element's thunder. So the gradient and highlight are a touch to enhance yet lowkey adding colours to the screen.
Final Design
 |
Fig 2.4 Final Button design |
 |
Fig 2.5 Colour palette |
After finalising the button design, I designed a list of potential buttons to be used. The colours used were from our colour palette, to make the buttons pop, i implemented some contrasting colours like orange to the frequent press buttons.
Initial sketches
Fig 2.6 1st Rough sketches
The rough sketches sketched for proposal.
Reference
Fig 2.7 Reference for home screen
After the proposal presentation, I started off by doing a thorough research. These are the first few references that i have researched. I researched based on the underwater and submarine assets. There's float, submarine window, and ship anchor. then, I implemented them in my sketches.
Sketches & Exploration
 |
Fig 2.8 First 4 sketches |
Fig 2.9 More exploration
Fig 2.10 Stainless steel bg
 |
Fig 2.11 2nd sketch After exploring more designs for the background, my teammates and I decided to opt for the stainless steel bg > wooden. Then, I tried around with the buttons placed on the screen and tested out the colour for the background to match with the buttons. Then, after trying, we realisd the green steel bg suits better, mostly because the window is a slightly green shade > blue. I also tried toning down the buttons, giving less shadow and highlights so it doesnt empower too much in this screen. In the end, we opted for the original bubbly and juicy button with shadow and highlights for the main buttons in green. |
 |
Fig 2.12 Add lighting |
Moving on. adding lighting and shadow to give a depth to the screen. I tried with yellow and white light, but it seems the yellow light pops more.
Fig 2.13 Elements placement
 |
| Fig 2.14 Elements placement in a screen |
Then, we thought of the light is a bit distracting on the screen, so I tried taking it down and focus on the placement first before adding the lighting. I also tried putting them left and right to see which fits more, and initially we think the left one is better when the light is not there.
 |
| Fig 2.15 Lighting angle exploration |
Exploring different lighting angle to see which suits the best.
 |
| Fig 2.16 More exploration |
Since we thought the light shining from the top is a bit distracting, I tried creating a soft glow from the window and glowing on the outside, and combining both to compare with the original one. I even asked for some opinion and suggestions form my other friends to see which attracts better, and most of them picked the 4th one. -_-
 |
| Fig 2.17 More exploration |
Final Design
 |
| Fig 2.18 Final Home Screen Design |
Join game screen
Reference
 |
| Fig 2.19 Reference |
From my research, I realised the find game screen from Goose Goose Duck has a simple and clean look that i find interesting. After discussing with Miss. Anis, it is neccessary to create the game filter pop up if i were to use this design. So i wanted to try and went for this design.
Sketches & Exploration
Fig 2.20 1st Sketch
The title bar is to imitate the pipe shape. To make this board work, I had to experiment the colours and used, whether blue or green, and when I have decided a colour which is green, I had to play around with the colour by using different shades. This is the tough part and I have made a few variations to choose from.
 |
| Fig 2.21 Bg Design |
Fig 2.22 Colour exploration
To fill in the background of the stainless steel board, I made an underwater background to give a contrast. These are the variations I have created with same colour but different shades, then I have also tried reducing the length of the steel so it doesn't feel too packed in this screen.
Fig 2.23 Game filter board sketch
 |
Fig 2.24 Implement chosen font into the text |
Then, moving onto AI to properly create the shape of the pipe bar and the name tags. I have also entered and adjusted the font text size.
 |
Fig 2.25 Emboss title text effect |
To create the 3d effect on this screen, I decided to give an emboss effect on the title text, this is to make the title as if it's carved on the board.
 |
| Fig 2.26 Overlay shadow |
I have added an opaque blue screen on the join game screen when the game filter screen pops up.
Final Join Game Screen Design
Fig 2.27 Join Game Screen
 |
Fig 2.28 Game Filter Screen |
Votting and chatting screen
References
Fig 2.29 Reference from Among Us
Sketches & Exploration
 |
Fig 2.30 Sketch for Voting screen |
To maintain the consistency of the UI design, and to also realise this screen is another pop up screen, I decided to use a board design for this screen.
 |
Fig 2.31 Voting screen once pressed on the name to vote |
 |
Fig 2.32 Background colour for chatting screen
I have experimented different colours for the chat background.
 |
Fig 2.33 Mic button |
Final Voting & Chatting screen
 | |
|
 | |
|
 | |
|
References
 | |
|
Sketch & Exploration
 | |
|
Creating a simple shape for the assets board in AI.
Fig 2.39 Asset board colour exploration |
Initially I wanted to keep the steel board design but too any of these is just going to make the designs dull and boring, then i tried exploring different colours.
 |
| Fig 2.40 Customisation screen bg colour exploration After a few experiments, we opted for a dark background to create contrast with the foreground. So we chose the dark blue steel background. |
Final Customisation Screen Design
 |
| Fig 2.41 Clothes customisation screen bg colour exploration |
 |
| Fig 2.42 Hats customisation screen bg colour exploration |
 |
| Fig 2.41 Accessories customisation screen bg colour exploration |
Figma board
Final Outcome
Google Drive link
Final Presentation slides
Presentation Video
Reflection
Finally it's a wrap! I cant believe that this has come to an end. I would say this is the only project I have done that I enjoyed the most. When I was first briefed with the project information, I was very excited to start my exploration in this project, knowing that this involves a lot of exploring, experimenting, and drawing. The cycle repeats on each and every screen. Drawing is not my strongest skill, and there was definitely some challenges for me but I really enjoyed the process of expanding and exploring more possible outcomes for each screen. Each feedback received from Ms. Anis was another exploration for me which also triggered me to experiment more. Just like the home screen, where I have spent a lot of time on exploring it.
Though there were some off track moments, we were actually lost during halfway of the design development process, and we had a meeting to properly design and delegate each person's task . For example, different art style designed for each aspect and we had to improvise from what we have by adding texture or coming up with different colour shades. One of the biggest challenges was dealing with colours. I had a lot of moments where I had to use different shades of a colour in a screen so all elements dont crash with each other and yet still able to stand out. I have also learnt that lighting and shadow plays a huge role in 3d effect and making the element pop. I spent some time studying the highlight and shadow from the button that I used for reference and implemented it throughout my designs. I would say this is my biggest lesson from this project, as I was quite bad at highlighting and shadow on an element and therefore, I can proudly say that I rock the buttons design, especially the main buttons.
All in all, this project has expanded my creativity and drawing skills. There involved a lot of thinking, exploring, experimenting, playing with colours, lighting and shadow, and stress, of course. Well, all of these but I enjoyed the process and i am quite satisfied with the outcome. I did not expect the final outcome to be produced in such short time as I spent a lot of time in experimenting each screen. Though it was tiring but each process taught me new skills and I am able to draw more confidently from now on. I am really thankful and I dont regret switching my complementary studies from minor study to extension, or else I wouldn't have cross path with underwater among us 2.0. Really really am thrilled!!
Comments
Post a Comment