User Interface

Back

Relevant Experience:

  • UI Designer and Artist at Snood LLC, working on live-service mobile puzzle games
  • Lead UI positions on Scrapped, Pack the Court, and other game projects
  • Extensive use of Figma for design and wireframing on multiple game UI projects
  • 8 yrs experience with Adobe Illustrator
  • 8 yrs experience with Unity UI system

At a fundamental level, game design is about communicating information to the player - and there's no more effective way to do that than through UI. UI combines everything I love about graphic design, games, and web design. As I work on more games, it's become one of my favorite parts of the medium.

UI Layout and Design

As a UI designer and artist working on the Snood puzzle game series, my work involves creating new interfaces as well as updating existing ones to meet modern design standards.

In addition to designing individual interfaces, I also map out the user experience using flowcharts and interactive wireframes.

On other projects, I've drawn inspiration from very different sources for my interface designs: monochrome computer GUI for Scrapped, and medieval scrolls for Pack the Court.

Scrapped UI

Pack the Court UI

Wireframing and Journey Mapping

Good UI needs good user flow, so I've been practicing wireframing and journey mapping by looking at the UI of some of my favorite games.

I first practiced making a wireframe of existing UI systems,challenging myself to include as much of the game's UI as possible - that meant everything from the main menu down to individual setttings in the options menu! Practicing creating a wireframe on an established game taught me just how much goes into a full game's UI system, especially one that feels simple and intuitive to the player.

Clickable Figma Wireframe

Figma Project

Once I was familiar with the process of wireframing, I designed and wireframed a new UI system for an existing game, Nintendo Land. In addition to designing the layout and elements of the new screen to fit the game's established style, I focused on the interactive flow of the system. The end result is an interactive Figma wireframe and pitch deck.

Pitch Deck

Clickable Figma Prototype

Whenever I'm designing UI, I always make a stylesheet. Especially when working with a team, a good stylesheet can bring an entire game's UI under one consistent aesthetic umbrella, and it helps speed along the design process too. For my Nintendo Land design pitch, I made a stylesheet as I went along to make sure I stayed within the game's visual style.

Stylesheet

UI Programming and Implementation

There's so much more to good UI than just the graphical elements - it has to work in-game, of course! I'm very comfortable with UI systems, so they end up playing a major role in most of my games. As a result, I spend a lot of time programming UI elements that respond to gameplay or represent gameplay information. In a recent game, for example, I built a system to dynamically display and update a segmented bar chart, with icon labels on groups of segments.

Accessibility

As I design and implement UI in-engine, one big thing I look at is how it will look on different systems. In one recent project, I was making a game to run in browsers, meaning that players could stretch the window to any resolution and aspect ratio they wanted. Because of this, I designed the entire UI using a modular system of "windows" anchored to different areas of the screen, so all the relevant information could fit on any size or shape of screen.