Game UI Art

Easter Crush Game App

To create an immersive and visually captivating game user interface (UI) that mirrors the engaging experience of popular games, enhancing user engagement and enjoyment. Using this game as a appealing way to create a comprehensive promotion campaign for a shopping mall that strategically drives foot traffic, enhances brand visibility, and boosts sales through compelling visuals and targeted marketing efforts. (The Westmount Mall with student demographic.)

Project objective

To create an immersive and visually captivating game user interface (UI) that mirrors the engaging experience of popular games, enhancing user engagement and enjoyment. Using this game as a appealing way to create a comprehensive promotion campaign for a shopping mall that strategically drives foot traffic, enhances brand visibility, and boosts sales through compelling visuals and targeted marketing efforts. (The Westmount Mall with student demographic.)

date

April 3, 2023

design items
  • Game UI
  • Campaign Poster
  • Promotion Card
tools
  • Adobe Photoshop
  • Adobe Illustrator

Process

1. Research and Analysis:

  • Analyze popular games with similar UI styles, including Candy Crush, to understand user expectations and preferences.
  • Identify key UI elements such as buttons, icons, and layouts commonly used in successful games.

2. Define Technical Requirements:

  • Work closely with the development team to understand the technical specifications and requirements of the game.
  • Identify the platforms the game will be released on (e.g., mobile, desktop) and their respective design guidelines.

3. Conceptualization:

  • Brainstorm and sketch initial ideas for the game UI, considering the theme, color palette, and overall visual style.
  • Develop a cohesive concept that aligns with the target audience and the nature of the game.

4. Wireframing:

  • Create wireframes to outline the basic structure and placement of UI elements.
  • Define the navigation flow and user interactions to ensure a smooth gaming experience.

5. UI Design:

  • Design the game UI elements, including buttons, menus, score displays, and level indicators.
  • Use a vibrant color scheme, engaging graphics, and intuitive icons to enhance visual appeal.
  • Use vector graphics for UI elements to ensure scalability across different screen sizes and resolutions.
  • Vector assets are resolution-independent, allowing for crisp visuals on various devices.

6. Asset Exportation:

  • Export assets in the appropriate file formats (e.g., SVG, PNG) for integration into the game engine.
  • Optimize asset sizes to balance visual quality with performance.

7. Consistent Design Dimensions:

  • Establish consistent dimensions for UI elements to maintain uniformity and alignment.
  • Ensure that UI components fit within the specified layout and grid system.

8. Responsive Design:

  • Implement responsive design principles to adapt the UI to different screen sizes and orientations.
  • Design UI elements that can dynamically adjust their layout and size based on the device.

9. Texture Atlases:

  • Create texture atlases to efficiently manage and organize multiple UI textures within a single image.
  • Use texture atlases to reduce the number of draw calls and enhance performance.

10. Animation Prototyping:

  • Prototype UI animations to test their feasibility and performance.
  • Use tools like Adobe After Effects or other animation software to create and export animations for integration into the game engine.

This project took me great time to draw in every UI elements in Adobe Illustrator. I had to select the colours and fonts carefully. The result came out satisfying.

• Game UI

The concept is about Easter and the target audience is students so I decided to illustrate all the Easter elements including bunny, chick, eggs, and candies. The whole process was around 2 weeks to complete all the characters and the Game UI. I paid a lot of effort to each detail on the characters.

 • Promotion Card

This card was made to give customers when they buy something above 50$ at the mall. This included the QR code to the app and the Code to unlock new mission. The design was simple and to the point with some decorative elements in the game.

Images

Easter Crush Campaign Poster

Easter Crush Game Interface
Easter Crush Game Interface
Easter Crush PromotionCard - Front

Easter Crush Promotion Card - Back