ART DIRECTION : FINAL COMPILATION
30.08.2022 - 22.11.2022 | Week 1 - Week 13
Ng Wai Fern | 0354966
Bachelor of Design in Creative Media
Art Direction | Design Extension
Final Compilation
INSTRUCTIONS :
Week 1
In week 1, Ms. Anis give us a brief introduction regarding the module. After the module briefing, we are split into groups for the projects.
Group members :Shofwa Alyadiena | 0350019 (Leader)
Metta Angelica | 0349095Ng Wai Fern | 0354966
In week 1, Ms. Anis give us a brief introduction regarding the module. After the module briefing, we are split into groups for the projects.
Group members :
Shofwa Alyadiena | 0350019 (Leader)
Metta Angelica | 0349095
Ng Wai Fern | 0354966
We got a first-hand experience on good and bad art direction design by playing the games, Among Us and Goose Goose Duck. We are required to observe the game play as players and designers. After playing a few rounds for both games, we are required to list down the pros and cons for both game.
Fig 1. Game analysis in group Miro
Week 2
In week 2, we are required to present our analysis on the good and bad of the both games that we have played.
Week 3
In week 3, we brainstormed a new game narrative for Among Us. We came up with a few ideas on what kind of theme we would like to do. We also list out what is good to have, must have and nice to have for the game.
Fig 2. Group discussion in group Miro
Week 4
In week 4, we brainstormed a new genre, style, theme and name for our game. We have also come up with the final new game narrative. We decided to go with Egg theme for our new game, Eggsit!. The game takes place in the kitchen and the map take place in the fridge. We have also brainstormed some idea for the character roles.
Fig 3. Group discussion about Eggsit! in group Miro
We decided to start working on some design. We split the parts into 3 parts, UI/UX design, character design and environmental design. Metta is in charged of environmental design, Shofwa is in charged of character design and I am in charged of the UI/UX design.
Week 5
In week 5, we start working on some visuals and prepared the visual goals part of our proposal. I start to work on some ideas for the logo, title scene/main menu and meeting room.
Logo
As our game is called Eggsit, I was inspired by the exit sign. I work on some initial idea and work with some different colour scheme.
Fig 4. initial design for logo in red
Fig 5. initial design for logo in green
Title scene/ main menuFor the main menu, I have also work on some initial idea and work with some different colour scheme.
Fig 6. initial design for title scene option #1
Fig 7. initial design for title scene option #2
Fig 8. initial design for title scene option #3
Meeting roomFor the meeting room, I sketch out some initial idea for the meeting room
Fig 9. rough sketch for meeting room
Week 6
In week 6, we present our proposal in class and received some feedback. After the presentation, we decided to work on our parts and have a meeting to discuss the layout of the map.
Fig 10. analysis (week 2) and proposal (week 6)
Week 7 - 9
In this week, we decided on the colour scheme and line weight. The colours scheme is a mix of pastel and vibrant colours which suit our theme.
.png)
Fig 11. colour palette
For this week, I start working on the icons, buttons and the game UI layout.
Icons
I start working on the icons for the map blueprint. After some discussion, we decided to use shapes for the icons so it is easy to identify in the map blueprint.
Fig 12. icons ideas
Task and sabotage Icon
I created the task and sabotage icon using different shapes to see which looks the best.
Fig 13. sabotage icon option #1
Fig 14. sabotage icon option #2
Fig 15. task icon option #1
Fig 16. task icon option #2
After sharing with my group members, we decided to stick with the initial idea that we have discussed.
Fig 17. final sabotage icon
Fig 18. final task icon
Player icons
As our game Eggsit has different roles, I created some icons for the different roles. I have also tried some variety of colours for some of the role icon.
Fig 19. good egg icon options
Fig 20. bad egg icon options
Fig 21. infected egg icon
We have decided on the pastel look for the roles
Fig 22. final bad egg icon
Fig 23. final good egg icon
Fig 24. final infected egg icon
Buttons
For the buttons, we decided to use different shapes to help people with disability to identify the buttons easily. Besides that, the buttons have different icons and colours to help players with dyslexia. Overall, we would like the game to be enjoyable for everyone. For the font used, it is different from the proposed font as I felt the proposed font does not reflect the game's narrative. After suggesting the new font to my team member, they agree with my idea.
Fig 25. sabotage button
Fig 26. vent button
Fig 27. kill button
Some feedback was given by my team member, Shofwa , she suggested that instead of 'kill', the button can be 'infect' since the eggs are infected by the bad eggs.
Fig 28. infect button option #1
Fig 29. infect button option #2
After sharing with the team, everyone agreed that the second option look the best.
Game UI layout
For the game UI layout, we have discussed on how we would like the layout to look like. Based on the discussed idea, I start to digitize the sketches.
Fig 30. game UI layout sketches in Miro
For the task bar, I was inspired by grocery list since our game is food theme. Player also can know their role by looking at the top left icon. After including all the component (buttons and mini map). I shared it with the team and everyone liked it.
Fig 31. good egg game UI layout
Fig 32. bad egg game UI layout
Week 10 - 11
For this week, I refined the main menu and logo. I also work on some more buttons, task UI and the meeting room.
Logo (refined)
Based on the initial idea and design, I refined it into a more clean look and make sure it look consistent with the other UI buttons. In week 6, Ms. Anis suggested that we can create the app icon based on our logo design. 
Fig 33. Eggsit! app icon
Fig 34. Eggsit! logo
Main menu
Based on the initial idea and design, I redesign the main menu to reflect the game narrative, where the eggs trying to escape the fridge from the bad eggs. I decided to play with some lighting for the main menu and share with the team my ideas. Everyone decided on the second option.
Fig 35. Eggsit! main menu option #1
Fig 36. Eggsit! main menu option #2
Buttons
I created button for the doctor role which is to heal the infected eggs and customize button for the customization room.
Fig 37. heal eggs button
Fig 38. customize button
Meeting roomFor the meeting room, it is inspired by the layout of the fridge since the map is taking place in a fridge.
Fig 39. meeting room #1
After sharing with the team, Shofwa suggested that the background should have line art. After discussing, we decided to make everything have line art to be consistent.
Fig 40. meeting room #2
Fig 41. final meeting room
Task UI
For this week, I created some initial idea for the task UI
Fig 42. task rough idea #1
Fig 43. task rough idea #2
Week 11 - 13
In this week, I work on the lobby UI, game title scenes (victory, impostor and game start), task UI, customization UI, map blueprint UI and refine the game layout.
Game layout
After week 9 progress update, I have noticed that the game layout is missing the task bar progression, setting button and game UI layout for the doctor role. I refined the game layout based on what is missing. For the task progression, I was inspired by cooking thermometer.
Fig 44. doctor egg game UI layout
Fig 45. good egg game UI layout
Fig 46. bad egg game UI layout
After completing the game layout, I placed it together with the background design to see the final outcome.
Fig 47. doctor egg game UI layout in game
Fig 48. good egg game UI layout in game
Fig 49. bad egg game UI layout in game
Game title scenes
For the game title scenes, I was inspired by Among us title screen.
Fig 50. start game title screen
Fig 51. impostor title screen
After sharing with the team, they suggested instead of infecter, it will be more suitable to put bad eggs instead. After doing the changes, everyone liked it.
Fig 52. final victory title screen
Fig 53. final start game title screen
Fig 54. final impostor title screen
Customization UI
For customization UI, I designed it similar to the meeting room to keep the design consistent. In the customization UI or beauty room, player can select different costume options. Player can navigate by using the arrow to scroll through the options (Disable friendly).
Fig 55. 'beauty room' or customization room
Task UIFor task UI, I split the list of task with Metta. The task consist of :
1. Clean the Hay
2. Feed the Babies
3. Organize the Recipes
4. Clean the Portrait
5. Electrical: Fix Wires
6. Throw Garbage
For my part I did task 1,2 and 5 while Metta did task 3,4 and 6. After completing the task, I placed them together with the other game layout for the final outcome.
1. Clean the Hay
For this task, player are required to sweep the hay.
Fig 56. clean the hay task
2. Feed the Babies
Player are required to make milk then feed it to the babies in the nursery.
Fig 57. make milk task
Fig 58. feed the babies task
3. Organize the Recipes
For this task, players are required to organize the recipe by rearrange the pictures. After rearranging the images, they are required to place the book back into the shelf.
Fig 59. organize the recipe by rearrange the pictures task
Fig 60. place the book back into the shelf task
4. Clean the Portrait
Players are required to clean the King's portrait for this task.
Fig 61. clean the King's portrait task
5. Electrical: Fix Wires Players are required to fix the wires in the electrical room for this task.
Fig 62. fix the wire task
6. Throw Garbage
For this task, players are required to collect the trash and dispose them.
Fig 63. throw the garbage #1
Fig 64. throw the garbage #2
Fig 65. throw the garbage #3
Lobby UI
Based on the sketches done by Shofwa, I digitize the lobby and added the UI. The lobby is inspired by egg cartons when view from the top.
Fig 66. lobby sketch
Fig 67. lobby with UI
After sharing with the team, Shofwa suggested to add the couch back into the upper floor as it seems a bit empty
Fig 68. final lobby with UI
Map blueprint UI
Lastly, I work on the map blueprint. I added the icons to the blueprint and included it into the game layout for the final outcome.
Fig 69. map blueprint in game
Final Outcome and presentation (week 13)
FEEDBACK
Week 2
Interesting findings
Week 6
Interesting narrative
Week 9
Consistent line art and nice character design
Week 11- We might want to look into the colour for the character when they are on the map
- Can have different colour floors for each room
- Can have different flooring texture for each room
Week 13
- Everything look good together- The design is family friendly- Our group did a good job as everything is consistent
- For the game UI layout, might want to place a shadow below the character to make it stand out.
REFLECTIONOverall, this module taught me the extensive process of Art Direction. I have never thought that there were so many aspects to consider. From our game play for Among Us and Goose Goose Duck, the experience allow me to understand how designs work from a designer and user point of view. Besides that, art direction as a design process help us as a team to know what we want and help us to come up with a design that suits the game narrative. Lastly, I am very grateful for my team members for their insightful feedback and ideas and their contribution to this project.
Fig 1. Game analysis in group Miro
In week 2, we are required to present our analysis on the good and bad of the both games that we have played.
Week 3
In week 3, we brainstormed a new game narrative for Among Us. We came up with a few ideas on what kind of theme we would like to do. We also list out what is good to have, must have and nice to have for the game.
Fig 2. Group discussion in group Miro
Week 4
In week 4, we brainstormed a new genre, style, theme and name for our game. We have also come up with the final new game narrative. We decided to go with Egg theme for our new game, Eggsit!. The game takes place in the kitchen and the map take place in the fridge. We have also brainstormed some idea for the character roles.
Fig 3. Group discussion about Eggsit! in group Miro
Week 5
In week 5, we start working on some visuals and prepared the visual goals part of our proposal. I start to work on some ideas for the logo, title scene/main menu and meeting room.
Logo
As our game is called Eggsit, I was inspired by the exit sign. I work on some initial idea and work with some different colour scheme.
Fig 4. initial design for logo in red
Fig 5. initial design for logo in green
Title scene/ main menu
For the main menu, I have also work on some initial idea and work with some different colour scheme.
Fig 6. initial design for title scene option #1
Fig 7. initial design for title scene option #2
Fig 8. initial design for title scene option #3
Fig 9. rough sketch for meeting room
In week 6, we present our proposal in class and received some feedback. After the presentation, we decided to work on our parts and have a meeting to discuss the layout of the map.
Fig 10. analysis (week 2) and proposal (week 6)
Week 7 - 9
In this week, we decided on the colour scheme and line weight. The colours scheme is a mix of pastel and vibrant colours which suit our theme.
In this week, we decided on the colour scheme and line weight. The colours scheme is a mix of pastel and vibrant colours which suit our theme.
.png)
Fig 11. colour palette
For this week, I start working on the icons, buttons and the game UI layout.
Icons
I start working on the icons for the map blueprint. After some discussion, we decided to use shapes for the icons so it is easy to identify in the map blueprint.
Fig 12. icons ideas
Task and sabotage Icon
I created the task and sabotage icon using different shapes to see which looks the best.
I created the task and sabotage icon using different shapes to see which looks the best.
Fig 13. sabotage icon option #1
Fig 14. sabotage icon option #2
Fig 15. task icon option #1
Fig 16. task icon option #2
After sharing with my group members, we decided to stick with the initial idea that we have discussed.
Fig 17. final sabotage icon
Fig 18. final task icon
Player icons
As our game Eggsit has different roles, I created some icons for the different roles. I have also tried some variety of colours for some of the role icon.
Fig 19. good egg icon options
Fig 20. bad egg icon options
Fig 21. infected egg icon
We have decided on the pastel look for the roles
Fig 22. final bad egg icon
Fig 23. final good egg icon
Fig 24. final infected egg icon
For the buttons, we decided to use different shapes to help people with disability to identify the buttons easily. Besides that, the buttons have different icons and colours to help players with dyslexia. Overall, we would like the game to be enjoyable for everyone. For the font used, it is different from the proposed font as I felt the proposed font does not reflect the game's narrative. After suggesting the new font to my team member, they agree with my idea.
Fig 25. sabotage button
Fig 26. vent button
Fig 27. kill button
Some feedback was given by my team member, Shofwa , she suggested that instead of 'kill', the button can be 'infect' since the eggs are infected by the bad eggs.
Fig 28. infect button option #1
Fig 29. infect button option #2
After sharing with the team, everyone agreed that the second option look the best.
Game UI layout
For the game UI layout, we have discussed on how we would like the layout to look like. Based on the discussed idea, I start to digitize the sketches.
For the game UI layout, we have discussed on how we would like the layout to look like. Based on the discussed idea, I start to digitize the sketches.
Fig 30. game UI layout sketches in Miro
Fig 31. good egg game UI layout
Fig 32. bad egg game UI layout
Week 10 - 11
For this week, I refined the main menu and logo. I also work on some more buttons, task UI and the meeting room.
Logo (refined)
Based on the initial idea and design, I refined it into a more clean look and make sure it look consistent with the other UI buttons. In week 6, Ms. Anis suggested that we can create the app icon based on our logo design.
Based on the initial idea and design, I refined it into a more clean look and make sure it look consistent with the other UI buttons. In week 6, Ms. Anis suggested that we can create the app icon based on our logo design.
Fig 33. Eggsit! app icon
Fig 34. Eggsit! logo
Main menu
Based on the initial idea and design, I redesign the main menu to reflect the game narrative, where the eggs trying to escape the fridge from the bad eggs. I decided to play with some lighting for the main menu and share with the team my ideas. Everyone decided on the second option.
Based on the initial idea and design, I redesign the main menu to reflect the game narrative, where the eggs trying to escape the fridge from the bad eggs. I decided to play with some lighting for the main menu and share with the team my ideas. Everyone decided on the second option.
Fig 35. Eggsit! main menu option #1
Fig 36. Eggsit! main menu option #2
Buttons
I created button for the doctor role which is to heal the infected eggs and customize button for the customization room.
I created button for the doctor role which is to heal the infected eggs and customize button for the customization room.
Fig 37. heal eggs button
Fig 38. customize button
Meeting room
For the meeting room, it is inspired by the layout of the fridge since the map is taking place in a fridge. 
Fig 39. meeting room #1
After sharing with the team, Shofwa suggested that the background should have line art. After discussing, we decided to make everything have line art to be consistent.
Fig 40. meeting room #2
Fig 41. final meeting room
Task UI
For this week, I created some initial idea for the task UI
For this week, I created some initial idea for the task UI
Fig 42. task rough idea #1
Fig 43. task rough idea #2
Week 11 - 13
In this week, I work on the lobby UI, game title scenes (victory, impostor and game start), task UI, customization UI, map blueprint UI and refine the game layout.
In this week, I work on the lobby UI, game title scenes (victory, impostor and game start), task UI, customization UI, map blueprint UI and refine the game layout.
Game layout
After week 9 progress update, I have noticed that the game layout is missing the task bar progression, setting button and game UI layout for the doctor role. I refined the game layout based on what is missing. For the task progression, I was inspired by cooking thermometer.
After week 9 progress update, I have noticed that the game layout is missing the task bar progression, setting button and game UI layout for the doctor role. I refined the game layout based on what is missing. For the task progression, I was inspired by cooking thermometer.
Fig 44. doctor egg game UI layout
Fig 45. good egg game UI layout
Fig 46. bad egg game UI layout
After completing the game layout, I placed it together with the background design to see the final outcome.
Fig 47. doctor egg game UI layout in game
Fig 48. good egg game UI layout in game
Fig 49. bad egg game UI layout in game
Game title scenes
For the game title scenes, I was inspired by Among us title screen.
For the game title scenes, I was inspired by Among us title screen.
Fig 50. start game title screen
Fig 51. impostor title screen
After sharing with the team, they suggested instead of infecter, it will be more suitable to put bad eggs instead. After doing the changes, everyone liked it.
Fig 54. final impostor title screen
1. Clean the Hay 2. Feed the Babies 3. Organize the Recipes 4. Clean the Portrait 5. Electrical: Fix Wires 6. Throw Garbage
For my part I did task 1,2 and 5 while Metta did task 3,4 and 6. After completing the task, I placed them together with the other game layout for the final outcome.
1. Clean the Hay For this task, player are required to sweep the hay.
Fig 52. final victory title screen
Fig 53. final start game title screen
Fig 54. final impostor title screen
Customization UI
For customization UI, I designed it similar to the meeting room to keep the design consistent. In the customization UI or beauty room, player can select different costume options. Player can navigate by using the arrow to scroll through the options (Disable friendly).
For customization UI, I designed it similar to the meeting room to keep the design consistent. In the customization UI or beauty room, player can select different costume options. Player can navigate by using the arrow to scroll through the options (Disable friendly).
Fig 55. 'beauty room' or customization room
Task UI
For task UI, I split the list of task with Metta. The task consist of :1. Clean the Hay 2. Feed the Babies 3. Organize the Recipes 4. Clean the Portrait 5. Electrical: Fix Wires 6. Throw Garbage
For my part I did task 1,2 and 5 while Metta did task 3,4 and 6. After completing the task, I placed them together with the other game layout for the final outcome.
1. Clean the Hay For this task, player are required to sweep the hay.
Fig 56. clean the hay task
2. Feed the Babies
Player are required to make milk then feed it to the babies in the nursery.
Fig 57. make milk task
Fig 58. feed the babies task
3. Organize the Recipes
For this task, players are required to organize the recipe by rearrange the pictures. After rearranging the images, they are required to place the book back into the shelf.
Fig 59. organize the recipe by rearrange the pictures task
Fig 60. place the book back into the shelf task
4. Clean the Portrait Players are required to clean the King's portrait for this task.
Fig 61. clean the King's portrait task
5. Electrical: Fix Wires
Players are required to fix the wires in the electrical room for this task.
Fig 62. fix the wire task
6. Throw Garbage For this task, players are required to collect the trash and dispose them.
Fig 63. throw the garbage #1
Fig 64. throw the garbage #2
Fig 65. throw the garbage #3
Lobby UI
Based on the sketches done by Shofwa, I digitize the lobby and added the UI. The lobby is inspired by egg cartons when view from the top.
Based on the sketches done by Shofwa, I digitize the lobby and added the UI. The lobby is inspired by egg cartons when view from the top.
Fig 66. lobby sketch
Fig 67. lobby with UI
After sharing with the team, Shofwa suggested to add the couch back into the upper floor as it seems a bit empty
Fig 68. final lobby with UI
Map blueprint UI
Lastly, I work on the map blueprint. I added the icons to the blueprint and included it into the game layout for the final outcome.
Lastly, I work on the map blueprint. I added the icons to the blueprint and included it into the game layout for the final outcome.
Fig 69. map blueprint in game
Final Outcome and presentation (week 13)
FEEDBACK
Week 2
Interesting findings
Week 6
Interesting narrative
Week 9
Consistent line art and nice character design
Week 2
Interesting findings
Week 6
Interesting narrative
Week 9
Consistent line art and nice character design
Week 11
- We might want to look into the colour for the character when they are on the map
- Can have different colour floors for each room
- Can have different flooring texture for each room
- Can have different colour floors for each room
- Can have different flooring texture for each room
Week 13
- Everything look good together
- The design is family friendly
- Our group did a good job as everything is consistent
- For the game UI layout, might want to place a shadow below the character to make it stand out.
- For the game UI layout, might want to place a shadow below the character to make it stand out.
REFLECTION
Overall, this module taught me the extensive process of Art Direction. I have never thought that there were so many aspects to consider. From our game play for Among Us and Goose Goose Duck, the experience allow me to understand how designs work from a designer and user point of view. Besides that, art direction as a design process help us as a team to know what we want and help us to come up with a design that suits the game narrative. Lastly, I am very grateful for my team members for their insightful feedback and ideas and their contribution to this project.
Comments
Post a Comment