Art Direction - All Project

 

Week 1 - Week 15 (24/08/21 - 03/12/21)
Ng Mei Ying (0340563)
Art Direction
Exercise: Good & Bad Art Direction (10% Group)
Project 1: Project Proposal (25% Group)
Project 2: Project Management (25% Group)
Final Project: Final Presentation  (30% Group)



INSTRUCTION






πŸ“ŒExercise: Good & Bad Art Direction


 (W1)  Team Up & Game Time! 

In this class, a brief introduction regarding the module expectation was given to us by Ms Anis. Aside from that, the lecturer informed that Discord would be used as the main channel for students' weekly classes and communication, whereas the Miro board would be used for idea brainstorming. After the formal module briefing, students were required to form a small group of 3 students for the project and start playing the mobile game namely "Among Us" by combining 2 groups of students. Students were required to observe and identify the gaming experience visually and emotionally. 

 # Reflection:  I was confused about the game interface as well as the playing rules at the beginning as I wasn't a veteran gamer for this game. However, I took this as a good chance to enjoy a fun game with a batch of lovely new friends. After the gaming session ended, my group members: Latifah, Zi Yi and I started some simple discussions regarding the gaming experience as well as the art direction. Plus, I was glad to have team members with digital drawing experience as we could have broader options for visual solutions.

Playing Among Us with our classmates





 (W2)  Game Art Analysis 

Today was a holiday, and our team continue to make use of the time to do the game analysis. To start with, I created several boards template in Mirobard which included the Team canvas as well as the weekly progression chart. Regarding the game analysis for "Among Us", the visual analysis was divided into 3 main categories which were the character, environment and user interface design. Each of our teammates was required to paste sticky notes that reflect their individual insight towards the game visual without commenting too much on the game mechanic. By completing the visual analysis of the 3 visual aspects (character, environment and user interface design), we did an individual final summarization afterwards. 

 # Reflection:   I was unsure sure of should I create the team canvas at the very beginning as it may not be a necessity to fill up that canvas. However, I found the team canvas very useful to get to know my teammate's personality and their strength better and it was a good warm-up for our teammate who was not familiar to use miroboard. 

The Team Canvas: get to know our teammates better!

Game Analysis in Miroboard

Character Design Analysis

Environment Design Analysis

UI Design Analysis

Game Analysis Summary Based on My Observation




 (W3)  Preliminary Research & Brainstorm 

Moving on, we proceed to conduct further research regarding the games that were similar to the Among Us as well as the potential new visual design as a reference to redesign the current Among Us mobile game. The current Among Us game was featuring the Survival genre with a spaceship theme in an unpolished 2D line art style. During the research, my teammates had come out with several themes such as island adventure, pyramid maze and so on. The game reference that I recommended the most was the "Monument Vally" which features a poetic and minimalist visual style with a smooth gradient colour.


Game Visual Idea Brainstorm (Phase 1)

Game Visual Idea Brainstorm (Phase 2)

The list of game research that is similar to Among Us



 (W4)  Good vs. Bad Art Direction 

Good vs Bad Art Direction Presentation
Moving on to this week, our group was tasked to compile the game analysis we had completed during last week into the Google slide version. After the slide presentation, our group conducted a meeting to have a discussion regarding our final planning to redesign the game. During the meeting session, our teammates decided to enhance the current game spaceship genre by adding some visual twist, instead of coming out with a totally different design. We intended to redesign the game in a sci-fi genre that features a cyberpunk theme in a 2D lineless vector style.

The original game design visual collection (by Zi Yi)

"Among Us" Mobile Game - Good & Bad Art Direction

 # Consultation Note:  Listening group 4 presentation was enjoyable as if resembling the analysis video on the YouTube channel. The group had made thorough observations for the little details like the flooring pattern design. Ms Norania also likes the ratings at the end of the sides, and she hopes that our group cloud comes to a new art direction that could get stars.



New Art Direction Confirmation & References Collection
After confirming our art direction to redesign the mobile game, Latifah, Zi Yi and I started to gather visual references from the internet and arrange them in miroboard as our visual reference to design the game. Zi Yi was in charge of the visual reference for Ui design, Latifah was in charge of the visual reference for environment design/lighting and I was tasked to search for visual reference for the character design. I also help to add on some more visual references for the perspective environment design as well.

New art direction settings

Visual reference collection for colour & texture design (by Mei Ying)

Visual reference collection for costume design (by Mei Ying)

Visual reference collection for archetype design (by Mei Ying)

Visual reference collection for stylisation design (by Mei Ying)

Visual reference collection for perspective view design (by Mei Ying)

Visual reference collection for lighting design (by Latifah)

Visual reference collection for Ui icons design (by Zi Yi)

Visual reference collection for Ui interface design (by Zi Yi)




 (W5 )  Design Exploration & Proposal Presentation 

This week, all our teammates were required to come out with our own idea sketches for the character, environment as well as user interface design. After completing the design sketches, we compile all of our sketches into the final design proposal. For the character design, I came out with an abstract concept design featuring robotic and field lines elements. The character would have a visor showing customizable icons that mimic the slot machine design concept. There were several customisable cyberpunk stickers available as well. For the environment design exploration, I did some design sketches on the isometric space and in-game map with some adjustments which includes refining the shape for in-game map design. While for the Ui design exploration, I did some design trials by applying some cyberpunk ink splash elements along with the sci-fi typeface.

Design Exploration by Mei Ying

Character Design Exploration Sketches (by Mei Ying)

Environment Design Exploration Sketches (by Mei Ying)

User Interface Design Exploration Sketches (by Mei Ying)

Final Design Proposal

 # Consultation Note:  Ms Noranis mentioned that it's very interesting that the group is having an idea to come out with a new art direction by combining the visual element from three different games. By looking at the visual sketches, she can visualise the outcome which would hype people up as it looked like a game thriller that was exciting to play. 



Design Exploration Combination & Summarization
After the design proposal presentation, our group proceeded to combine and finalise our design exploration. We also started to plan our tasks to do and delegate the task based on our teammates' strengths and weaknesses. Latifah was in charge of doing the character design as she had more experience doing character design. Meanwhile, Zi Yi was choosing to do Ui design as she felt she is more confident to do graphic design related tasks as compared to designing the environment. Since I'm fine with any of the tasks, therefore I would be the one doing the game environment design.

Character Design Combination

Environment Design Combination

User Interface Design Combination




 (W6)  Gantt Chart + Task Management 

Last Sunday, I had created a Gantt chart for our group in order to monitor the group members' weekly task progression. On the other hand, I did some more research on the game visual to get more references to draw a proper isometric game map. The original game map was imported in Ai and sheared 30 degrees (both isometric & normal grid lines were created as the guideline).

There was no lecturer today, and the class was mainly get informed regarding the next course of action to complete the whole project. While waiting for the other group to complete their timeline in the Gantt chart, I decided to make use of the time to invite Ms Anis to go through our current progression in Miro board and also the Gantt Chart (The consultation note given by the lecturer was listed below)


 # Consultation Note: 
 
  • The character design development was nice, abstract shapes added more visual excitement.
  • For the environment drawing, we need to redesign the whole guide map based on the existing design perspective projection (can recycle the existing props and asset design). 
  • Chose another 3 rooms to produce isometric rooms perspective were sufficient.
  • Make use of the Gantt chart to ensure all tasks were on track & evenly distributed.
 # Reflection:  While testing the isometric game view in Ai, I found there were some difficulties to estimate the dimension of the space and environment. Thank god that I didn't go too far for the isometric drawing as I may kill myself during this semester.




 (W7 - W13)  Project Management - Design Production 

Below were the weekly design progression in mirobaord, we also had a weekly meeting on Tuesday and Saturday for design checking and consultation among our group members. Along with the environment designing progress, I found that it's not as easy as I think to create a new room design from scratch using Ai. In the past, I would rather do any design drawing in Ps, Sai or CSP drawing software as I would have more control over the colour blending and texturing effect. However, the more I practise using Ai to create the environment design, I found that Ai software had slowly become handy to me. 

 # Reflection:  I found that our team progression was slowing down due to the adding project from the other modules and I found myself working too slow on the guide map and interior design. On the other hand, I very appreciated the hard work from my teammate Ziyi as she was able to pull out an efficient work on game interface design. Her working attitude really inspired me to dedicate the group in an effective manner.


W7: Environment Design Sketches

W8: Upper Engine Room Design Progression

Some feedback given by Ziyi was she suggested having a tiles pattern flooring design with an offset line at the beginning as an appropriate amount of the flooring details would add more cyberpunkish visual sense to the engine room design. However, we agreed on maintaining the simplicity of the flooring design due to the consideration of the character design. As the whole visual might look messy and confusing if the character with the rich design was inserted into the environment.

W9: Upper Engine Room Flooring Design Adjustment & Reactor Room Design Progression

W10: Upper/ Lower Engine Room & Reactor Room Completion without lighting

W12: 4 Rooms Design progression with lighting and galaxy background


Complete guide map (4 rooms) design without lighting & background

Complete guide map (4 rooms) design with lighting & background

Character colour testing & adjustment (group discussison)

 # Reflection:  During the collaboration with my teammates, I found the most challenging part was to ensure the consistency of the design output as some of the teammates might not have good practice on using the confirmed art style and reference images a the guidance to create a relevant design. (one of the teammates might rely too much on waiting for the feedback from the other teammates instead of coming out with some attempt to test the design) Another challenging part was to guide one of our members upon the character design including the archetype and colour design as the member still lacked sufficient understanding on doing an abstract robot-like character design. Therefore, we had to be patient to provide proper guiding and feedback to ensure the character design outcome was up to par.





 (W14 - W15)  Design Compilation & Final Presentation 

This week, Ms Noranis conduct the final consultation session with the students on Discord. During our group consultation with our lecturer, some feedback was given to us to do some minor design adjustments. After the consultation session, our group proceeded to launch a meeting to discuss the current design progression and also to finalise the design compilation. Below are the weekly progress in Miroboard as well as the development compilation of environment design.

 # Consultation Note:  Ms Noranis mentioned that the overall design was good and the new art direction gave a cutesy cyberpunk vibe. She was happy with the current outcome conducted by 3 girls in a group and mentioned that it's the girl power. On the other hand, Ms Noranis also pointed out that I should not forget to show the environment design with the task to be completed highlighted as she wanted to see how is the outcome for the complete visual. For the mobile app design, Ms Noranis recommended we use the purple crewmate design to give more contrast with the bluish in-game environment and background design.

 # Reflection:  I found that internet interruption was one of the biggest challenges I encountered currently with my teammates. Each of our teammates had encountered different levels of internet interruption and it's really hard for me to communicate with my teammates smoothly and clearly without texting. On the other hand, I found that it's really challenging to guide my teammates to produce a good design according to our art direction and giving feedback properly by using the precise word was something I need to learn more about. On the other hand, I found that it's really challenging to guide my teammate to produce a decent colour design adjustment as we all had different interpretations of colour design understanding. Overall, I really appreciated the highly cooperative attitude of all teammates. 

Weekly design update and presentation on miroboard

Character Colour Adjustment by Mei Ying

Lobby Room Design Development

Upper Engine Room Design Development

Lower Engine Room Design Development

Reactor Room Design Development

Security Room Design Development

Walkway Design Development

The 4 Rooms Design Final Outcome



Final Presentation
This module is almost coming to an end and our teammates were putting their final effort into adjusting and finalizing the design. I proceeded to prepare the final presentation slide while my other teammates were busy doing their design finalization as I've done my part for the environment design. After ensuring all visual design combinations were good to go, we proceed to finalize the slides and do a couple of presentation rehearsals before class afterwards. 

 # Consultation Note:  Ms Noranis: Well done! I love the way how the group manages the art style for the character design, environment design to the UI design soo that they stay relevant to the game setting.

 # Reflection:  I deeply appreciate the time and effort contributed by my teammates along the 15 weeks to push through the boundaries and come out with a presentable game design outcome. Although there's still has a lot of room for improvement in our design, but I believe we will be a better design with the willingness to receive critical feedback and a proactive learning attitude πŸ‘Ύ







Comments

πŸ‘‡πŸ‘‡πŸ‘‡ Check out more πŸ‘‡πŸ‘‡πŸ‘‡