Art Direction | Project 1

on

7.10.2025 - 18.11.2025 (Week 3 - Week 9)
Caitlin Ong Lynn Dee / 0343801 / Bachelor of Design (Hons) in Creative Media
Art Direction
Project 1

INSTRUCTION


Project 1: Art Direction Ideation

In this project we are supposed to create an art direction concept for a proposed project that fits within our creative domains.

Art Direction Concept:

  • Advertising / Social Campaign
  • Digital Experience / Interactive Media (UI/UX)
  • Animated Short / Motion Design
  • Entertainment or Game Concept Visualization

The art direction concept of the project has to be aligned with one of the United Nations Sustainable Development Goals (SDGs). From there we have research on why this problem matters. 


Week 3

Game Concept
We discuss on what SDG we want to go with; in the end we decide on SDG 15: Life on Land Matters as the theme for our game concept. The game will be side scroller with classic pixel art style. The game is set in a post-apocalyptic world featuring a fox as the main character navigating through the old ruins of human civilization.


Week 4

Unfortunately, I got sick, so I was unable to go to class I know what is going on thought text. The team and I discuss more about the game concept in great detail. Deciding on a platform, writing the plot of the game, creating mood board for the different categories such as the characters, the environment and the visual identity. As the group's only graphic designer I am in charge of brand and promotion. I was told to create the game's logo and UI design.


Visual Identity:
  • Color Palette - From the synopsis of the game the environment is surrounded by nature therefore the game's UI is muted nature colors
  • Typography - From what Tao told me text should be pixeled to suit the art style of the game 
  • Logo - The Logo is also pixeled to suit the art style of the game
  • Home Screen & UI - The game will have a minimalist sci-fi style to highlight the fact that human civilization is gone.

Fig 1.1 Color Palette Mood board


Fig 1.2 Typography Mood board


Fig 1.3 Logo Mood board

Fig 1.4. Home Screen & UI Mood board

Week 5

I took some inspiration from fonts that I found on Pinterest. According to the description of the game's world. The buildings is a brutalist design surrounded the by nature. With that I tried to experiment different types of styles. I tried making the font either loose or stiff or even fuse both styles together.


Fig 2.1 Logo Inspiration


Fig 2.2 Logo Sketches

Week 6

I didn't do anything for this week because I am still stick and focusing on other modules, but I tried consult with Tao to make sure the UI style is exactly what he wants.


Fig 3.1 Discuss with Tao via WhatsApp Part 1

Fig 3.2 Discuss with Tao via WhatsApp Part 2

Week 7

Again, I didn't do anything for this week, still sick but I manage some feedback from Mr. Kamal. When I explain the rational for the UI design mood board, he said the UI design is too serious and to make it simpler, still grim but less serious. I was confused what he meant because it contradicts the mood and tone of the game, which is atmospheric, melancholic, and mysterious. I tried clarifying further though text, but it left me more confused. 


Fig 4.1 Clarification with Mr. Kamal via WhatsApp

Week 8

I am still left confused on the direction of the UI design but after clarifying with Mr. Kamal in person along with my friends helping me. I understand a little bit, now that I know the sci - fi style UI didn't match with the game's story and setting.

After that, I started digitalizing the Logo. During the process I find it difficult translating it to its pixelized form, by the time I finish creating its basic shape and form it always didn't turn out as well as I hoped. So, I started experimenting on different stroke thickness and making adjustment to the shape for each of the letters. 


Fig 5.1 Draft 1 Pixelization Process

Fig 5.2 Draft 2 Pixelization Process


Fig 5.3 Draft 3 Pixelization Process

Fig 5.4 Final Logo Design

I use Hollow Knight's UI as a reference to create the UI design. And use vintage ornament boards to fit in the nature theme of the game.

Hollow Knight UI Screenshots Website Link:


Inspiration


Fig 6.1 Hollow Knight's Home Screen
Fig 6.2 Hollow Knight's Pause Screen

UI Design Draft

Fig 6.3 Home Screen Design Draft 

Fig 6.4 Pause Screen Design Draft 

Week 9

Final UI Design 
I created the extended version of the menu screen, and I even made the health bar.

Fig 7.1 Final Home Screen Design

Fig 7.2 Final Pause Screen Design

Fig 7.3 Final Options Screen Design

Fig 7.4 Final Brightness Screen Design
Fig 7.5 Final Audio Screen Design
Fig 7.6 Final Video Screen Design

Fig 7.7 Final Keyboard Controls Screen Design

Fig 7.8 Final Quit to Menu Screen Design

Fig 7.9 Final Quit Game Screen Design

Fig 7.10 Final HP Bar Design

Final Outcome

Fig 8.1 Written Proposal

Fig 8.2 Slide Presentation


Fig 8.3 Weekly Project Management Report Compilation

FEEDBACK

Week 5

General Feedback:

  • The game's concept is complicated to understand

Specific Feedback:

  • None*

Week 6

    General Feedback:

    • None*

      Specific Feedback:

      • None*

      Week 7

      General Feedback:

      • None*

        Specific Feedback:

        • The mood board for the UI design currently looks too serious to simplify it. It should still maintain a grim mood but appear less formal or heavy.

        Week 8

          General Feedback:

          • The contrast is too dark, giving the overall design a more serious tone than intended. Consider adjusting brightness or color balance to achieve a lighter, more approachable feel.

          Specific Feedback:

          • None*

          Week 9

          General Feedback:

          • None*

            Specific Feedback:

            • Make the Logo have a glowing effect
            • The vines on the home screen doesn't fit in with the ornament design shown in Options screens
            • The border doesn't fit in the theme of the game use overlap as a background

            REFLECTION

            This is my first time designing a UI for a game plus I don't know the setting for a pixelized game. In addition, I don't know the core mechanic of the game which makes it harder Throughout the project I was confused on how create the UI due to conflicting direction from my team and the lecturer. Majority of the time didn't do anything in the following week after the feedback. I learn that I should not overthink and do the best I can. 

            Comments

            Post a Comment