MA Games Design Diary

Presentation:  https://drive.google.com/file/d/1QhkMzNZO3P9qAi6y2KUc2oVgk7tCH7yn/view?usp=drive_link Research + Development:  https://drive.google.com/file/d/16C6lPeOt6vzIOZZBhckt_PudIyyuKJZi/view?usp=drive_link Reflection  The 4-week diagnostic project challenged me to define my area of interest within game design by conducting research and producing outcomes within my chosen speciality. At the beginning of the project, I was unsure what I wanted to specialise in as I was interested in prop design, texture art, UI design and tabletop game design; however, after thorough research, I became more interested in UI/UX design and decided to produce UI designs for a conceptual first-person shooter sci-fi horror game set within a submarine.  Since I come from a graphic design background, the diagnostic project was my first proper introduction to game design, therefore I used it as an opportunity to discover resources and do broad research into game design studios, artists a...

Today, I designed the HUD for my game concept using Adobe Illustrator. Since I aim for the game to be immersive, I used a minimal number of UI elements within the HUD to avoid distracting the player. I aimed to subtly represent submarine technology in the UI elements by using a monospace font and glow effect. The red highlight within the crosshair design appears when the player loses health and the direction of the highlight rotates to show the direction of enemies, similar to how a real submarine radar works.

Today I created 3 main menu designs for my game concept. Since the main objective of the game is to escape to the surface of the ocean, the main menu changes as the player progresses using backgrounds of the ocean getting lighter to visually represent their journey.  I sourced the ocean backgrounds on  Artlist  and used Adobe Photoshop to colour-correct them and remove unwanted elements such as divers and bubbles using Content-Aware Fill and the Clone Stamp Tool.

I began today by collecting assets, such as fonts and colour schemes, which I can use throughout my project to create a consistent UI design system. I also created a logo design, inspired by submarine UI, for my game concept featuring the font, VP Pixel Hi-Res, and a glow effect.

Today I continued to create rough sketches of UI designs to help me brainstorm various concepts. My mind map of design characteristics was very useful during this process as it helped me to make connections. For example, I had the idea to use the distinct design of a submarine radar within my crosshair and weapon wheel designs. For the crosshair design, I could incorporate the rotating pulse highlight used within real radars, within my game as a Non-Diegetic UI element which alerts the player to the direction of enemies.  I also considered how UI design could affect gameplay while generating concepts, and I came up with the idea of a risk and reward UI minigame which players can interact with to open submarine doors quickly. The minigame would feature a rotating circular UI design, inspired by a submarine door handle, and players would have to press a button along with the rotation or else the door would jam and take longer to open, resulting in the player being at risk of ene...

Today I made a mind map of design characteristics associated with submarines, such as pixel fonts, glow effects and monospace fonts. I also continued to sketch various concepts for my UI designs, do research and make a  Pinterest Board  to collate inspiration for my submarine UI designs. 

My research this week has helped me a lot to identify visuals associated with submarines and develop ideas for my diagnostic project. Next week, I aim to have a clear style direction and start producing UI designs using Adobe Illustrator, Photoshop and After Effects.  Over the weekend, I continued to research game design studios and designers, such as  Room 8 Studio  and  Carlos Villarreal Kwasek . I also received my  Laws of UX  deck of cards which I aim to use in future projects to learn more about the principles and psychology behind UI/UX design.    

The main objective of my diagnostic project is to explore the impact UI design can have on gameplay and immersion. For example, for my game concept, a Diegetic pressure meter could add suspense because if the player chooses to not look at it, the submarine could implode at any second. 

Following my research into submarine technology, today I used the imagery I collected to create a mind map of visuals associated with submarines.  I used this mind map to help me generate some initial ideas for my game concept and UI designs and make creative connections; for example, a circular valve could be used as visual inspiration for a rotating loading icon design. In the next few days, I aim to create a mind map of design characteristics associated with submarines, such as colours and fonts, which I can use within my UI designs.  

Today, I continued my research into submarine games and began to collect imagery for inspiration. I also researched submarine UI designs from the BBC TV show Vigil, designed by graphic designer  Anna Toffolo , and the movie Hunter Killer, designed by  Territory Studio . Researching fictional UI designs from TV shows, movies and video games, helped me to learn how to replicate complex UI systems, such as radars and terminals, in a simple way which doesn't confuse the player but also retains a distinct design style.  I also began researching into submarine technology, job roles and weapons to help me generate ideas for my game concept and UI designs. I used sources such as the  Royal Navy Website , various photos and videos, and the Channel 5 documentary,  On Board Britain's Trident Nuclear Submarine  to conduct my research into submarine technology and to collect imagery which I will use as references. 

My research into UI/UX design principles has taught me the importance of consistent design; therefore, I collated visuals from 6 video games (Alien: Isolation, Halo Infinite, The Last of US Part II, Returnal, Watchdogs and Starfield) to see how UI designers implement a consistent style throughout a game.   I also researched video games set in submarines, such as Iron Lung and Rusty Barrel, to help me brainstorm ideas for my game concept and identify design tropes associated with submarine-related media.

Today, I have been brainstorming ideas for what I will create for the diagnostic project and researching UI/UX designers and game design studios. I have decided to create UI designs for a FPS sci-fi horror game set within a submarine. I aim to do research and have a finalised game concept by the end of this week so I can start producing UI designs next week. 

Today, I continued my research into the principles and psychology behind UI/UX design further by watching more GDC Vault talks and taking notes. GDC Vault Talks  UX Summit: UX Buy In through Trust: Lessons Learned from DICE Immersing a Creative World into a Usable UI 'Halo Wars 2': A UX Postmortem Following my research into UI/UX design, I wrote a blog post about UI/UX design principles, which I will use as a reference when creating UI designs for the 4-week diagnostic project. 

The purpose of user interfaces in video games is to facilitate communication between the game and the player. A well-designed UI system allows players to seamlessly navigate through a game and find information, while enhancing gameplay, player engagement and a sense of immersion.  Simplicity   - Only necessary information should be included. Clutter can distract the player and have a negative impact on immersion, Cognitive Load and Player Engagement.  - Transitions and animations can delay a player's navigation if they are overused.  - Gradually introduce UI elements to not overwhelm or confuse the player.  Clarity  - Provide a straightforward and streamlined navigation experience. - Use simple and concise language.  - Predict how the player will interact, navigate and perceive information. - Have a beginning, middle and end to interactions and always give feedback to the player.  - User interfaces should be designed to prevent players f...

This week, I have been researching the principles and psychology behind UI/UX design by reading books and watching a variety of GDC Vault talks exploring topics such as the Gestalt Principles, negative space, the Golden Ratio, Cognitive Load and accessibility. I found Jim Brown's talk,  Bridging the Gap Between Game Design & UX  especially useful as it explored the impact UI/UX design has on gameplay and player engagement, and how designers can observe player behaviour to control challenge and fairness. For example, the Active Reload mechanic in Gears of War allows the player to get a weapon boost if they hit reload when the marker is within the sweet spot of the reload bar. If the player hits reload outside of this sweet spot, the weapon will jam and take longer to reload and the player won't receive a weapon boost. This risk and reward mechanic led to advanced players reloading early to deal huge amounts of damage and new players avoiding using the mechanic and instead e...

Today, I explored Meta and Spatial UI in more depth by creating mind maps of Meta and Spatial UI elements and collating visual examples of Meta and Spatial UI in video games. 

Today, I explored Non-Diegetic UI in more depth by creating a mind map of Non-Diegetic UI elements and collating visual examples of Non-Diegetic UI in video games.  Pros of Non-Diegetic UI  -  Non-Diegetic UI elements do not greatly impact performance or rendering.  - Development is not dependent on other areas of a game's production. - Immediate feedback can help the player to be engaged in gameplay.   - Simple to design and implement, unlike Diegetic UI elements.  - Suitable for complex UI systems with a lot of information.   - Efficient for communication in online multiplayer games. - Clear separation between gameplay and UI.  - Can be customizable for the player.  - Quick access to information.  - Easy for the player to grasp.  Cons of Non-Diegetic UI  - Screen space can become cluttered with Non-Diegetic UI elements.  - Can be overused and make a game not challenging enough.  - Breaks a sense of immersi...

Today, I explored Diegetic UI in more depth by creating a mind map of Diegetic UI elements and collating visual examples of Diegetic UI in video games. I also watched  The UI Design of Dead Space 2023: A Game User Interface Analysis  and read articles and academic papers such as  Interview: Dino Ignacio  and  Exploring Diegetic Interface in videogames: Enhancing Player Involvement .  Pros of Diegetic UI - The application of Diegetic UI elements can make a game stand out from the competition.  - Results in more screen space due to less information being displayed in the HUD.   - Contributes to an overall minimalistic and reduced UI design style.  - UI integrated into a game world creates a sense of immersion.  - Can enhance gameplay mechanics and narrative.  - Creates a sense of realism within a game.  Cons of Diegetic UI  - Development requires more resources compared to Non-Diegetic elements.  - Diegetic UI can ...

Today, I watched a presentation by  Creative Assembly , one of Europe's largest game design studios, responsible for developing games such as Alien: Isolation, Total War: Arena and Halo Wars 2. While watching the video, I took notes to understand the responsibilities of UI/UX designers in the game design industry and learn about the software, skills, philosophies and workflows they use in their design process.   I also began my research into the principles and psychology behind UI and UX design. I enjoyed learning about how the Gestalt Principles, negative space and primitive shapes are used within video games to instantaneously communicate information to players and enhance their game experience. 

This week, I've enjoyed researching Diegetic, Non-Diegetic, Spatial and Meta UI elements in game design. From collecting imagery of user interfaces within various video games, I have explored how user interfaces can be stylised and tailored to different game genres and platforms. Furthermore, I have enjoyed learning about the impact UI design has on gameplay and how it can either hinder or enhance a player's sense of immersion. The survival horror game, Alien: Isolation, developed by Creative Assembly in 2014, cleverly implements Diegetic UI in the form of a motion-tracking device the player holds to track enemies. By displaying enemy locations on a physical object, rather than with a non-diegetic element, such as a mini-map in a HUD, the player is given the choice to either hold the tracking device or a weapon, therefore adding suspense and risk to the gameplay.  What I Aim To Do Next Week  - Explore UI design principles and techniques.  - Explore the role of a UI design...

Today, I researched the four types of UI design components: Diegetic, Non-Diegetic, Spatial and Meta.  I collated examples of UI design from Detroit: Become Human, Hitman 2, Firewatch, Cyberpunk 2077 and Superhot to see how user interfaces are implemented across a variety of game genres and design styles. I also watched  The Power of Video Game HUDs  by the YouTube channel  Game Maker's Toolkit  to explore how the HUD impacts gameplay. 

Today, I researched into job roles within the game design industry to help me decide what I want to explore during my master's degree. Currently, I am most interested in prop design, UI design, texture art and tabletop game design, and I aim to research these areas in more depth by collating examples of prop/UI/texture/tabletop game designs and researching game design studios.  Following my initial research into the game design industry, I created mind maps of game genres and video game platforms to use as references later in the diagnostic project to help me generate ideas.  Additionally, I began my research into User Interface design by using resources such as  Interface in Game ,  Game UI Database  and  What is Game UI?  

My Skills + Attributes  - I have a degree in graphic design! - I have experience in various digital and traditional areas of graphic design such as branding, motion design, illustration, UI design, packaging design, printmaking, editorial design and print design.  - I have experience using software such as Adobe Illustrator, Adobe Photoshop, Adobe InDesign, Adobe XD, Adobe After Effects, Figma, Autodesk Maya and Procreate.  - I have knowledge of hierarchy, colour theory, negative space, typography and grid systems.  - Problem-solving: My education in graphic design taught me that design should communicate rather than decorate. This philosophy changed my design process, enabling me to view every creative decision, such as a choice of colour or font, as an opportunity to visually communicate information.  - Thorough research skills: Throughout my graphic design studies, researching relevant historical and cultural references, artists and designers, industry trends...

The 4-week diagnostic project is a short experiment to help me define my areas of interest within the games design industry. During the project, I will identify initial areas of research, explore a variety of artists and designers, and set myself a project within my area of interest by writing a self-initiated creative brief. I will continuously document my design process and evaluate my progress and research sources on my blog. At the end of the project, I will present my finished response to my creative brief and evaluate my outcome with a short written statement.