And everything in between

This week you’re all in for a real treat, as we’ve let one of our artists out of his cage for just long enough to type up a blog post. Steve’s going to take you through some of the things he’s learned over the course of working on the UI for Wave Crash. Sit back and enjoy, and let him know if you’ve had a similar experience working on your project!

Hello everyone. I’m Steve - the primary UI artist here at NotRobot. As we approach release on Wave Crash, I just wanted to take a moment to share a few lessons I learned while working on this project. I don’t claim to be an expert, but hopefully my experiences can be helpful to others who are interested in UI design.

My day-to-day duties usually involve turning layout sketches into polished, game-ready interfaces. That means experimenting with themes and color, working with typography, and ultimately creating the buttons, containers, and icons that you see in game. Making art is usually a very creative process which focuses heavily on expression and freedom. While that is still true in games, technical requirements can cause game developers to approach art a bit differently. Larger game companies often have a division of ‘tech artists’ who are responsible for making sure that all of the artwork conforms to these technical requirements. They serve as the liaisons between the tech and art teams, ensuring that all of the art assets are consistently meeting standards.

It’s worth noting that at other studios, these tasks fall to a producer instead. Since every studio seems to have it’s own name for things, we’re going to use the term tech artist even though it might be called something different at your studio.

At NotRobot we don’t have a super large staff where we can afford to assign someone entirely to production duties. While these tasks can end up in the art director or producer’s territory, sometimes these responsibilities fall upon us, the artists. Although this is a bit non-traditional, as a video game artist it’s essential to be versatile in your skill set. For example there’s more to being a successful UI artist than just the ability to create fancy icons. Learning to work within technical constraints and properly communicating with the tech team are just as important as developing traditional art skills.

Working within Technical Constraints

Without a doubt, one of the biggest hurdles of implementing UI art is sizing. Perhaps this text isn’t centered correctly, these two buttons are overlapping too much, or the new high score is so large that it’s causing the container to stretch half across the screen (Real issues that we faced, by the way!). When you design interfaces, you have to remember that they will be viewed on a lot of different screens and under a lot of different circumstances. The most beautiful Photoshop layout in the world could become a disheveled, ugly mess once you actually build it in game.

How do you prepare for those circumstances? The simple answer is - make your art scalable. There is a boatload of discussions online about vector vs. raster, but in summary, anything that you might need to resize should be created with vectors. As a digital painting and sprite art enthusiast myself, that can be a difficult transition to make. But even Photoshop, a primarily raster-based program, can give you the right tools to make your UI art scalable. You just need to develop the proper workflow.

This is what the process looks like in photoshop

In my case, this workflow involves using non-destructive layers. That means designing each UI element across a number of different layers. By keeping pieces like textures and shading on their own separate layers, this means I can quickly access them again later from within the file hierarchy. This method might produce some decently large Photoshop documents on your hard drive, but the time it saves you in the long run is absolutely worth it.

Speaking of file size, another technical constraint that a game artist has to consider is the amount of resources involved in loading large textures. Image size requirements for games are nowhere near as constricting as they were in the days of old, but that doesn’t mean you should throw all practicality out the window. That’s why it’s important for a UI artist to know when to re-use elements in a design.

Instead of cutting out a hole in the bamboo, our ‘Hole’ is actually ABOVE it. It’s all about perspective!

Not only does using the same assets in multiple locations promote consistency and a unified design structure, but it also saves your game from having to load 20 different images that serve the same purpose. Sometimes this requires thinking outside the box a bit. Take for example our screens that have holes cut into the bamboo background. There are holes of different shapes and sizes across multiple screens, all of which initially had separate bamboo images for each. That’s a lot of wasted texture space! So a solution we came up with was actually placing a scaleable shadow and backdrop atop the bamboo. It sounds counter-intuitive because those images appear as if they are behind the bamboo, but doing it this way allows us to re-use a smaller amount of assets and tremendously decrease the allotted texture space. Those small contributions add up and really help improve performance.

Communication Between Tech and Art

Another key responsibility that a tech artist would normally have is making sure that tech and art are on the same page. Regardless of whether your UI art is within the proper guidelines, the tech team still needs to know how to properly use these images. That means another aspect of my job is providing good documentation alongside my exported assets. This is incredibly crucial during the animation and polish (aka “juice”) process. If a certain frame needs to hold on screen for a specific amount of time, or an element of the UI needs to shift a few pixels to the left, these instructions need to be properly conveyed so that whoever handles your artwork later isn’t left guessing.

This is especially valuable when you have a team working remotely like we do at NotRobot. We can’t just walk into the next office over to ask questions because we all work from different locations - in fact, we’re not all even in the same time zone! That makes documenting your work all the more important.

We normally achieve this level of communication by leaving comments on Trello cards, but sometimes you need something a bit more visual. That’s where a UI Roadmap comes in. Across different milestones in the project, I created decently long PDFs that I like to call UI Roadmaps. These roadmaps contain screenshots of the current build alongside mockups that I created in Photoshop. The roadmap also contains short notes and arrows that help serve as a nice visual guide that’s easier to follow than a wall of text. With the side-by-side images and a brief description of what is incorrect, it’s easier for the programmers to see where certain aspects aren’t matching up to their intended designs.

Here’s an example of one of our main menu update roadmaps. This only shows you the first of many iterations. Testing out your UX flow with real users is vital!

Lastly, I frequently create another type of visual companion called Size Guides. As their name implies, these are used to help speed up the process of spacing out UI elements. Knowing exactly how many pixels large something should appear on screen makes implementing these assets in-game a lot easier. They are fairly easy to make and help to ensure that the artwork functions properly in game. This means providing these guides alongside my work is extremely beneficial.

Size guides make it easy for programmers to place assets with pixel perfect precision. No guesswork involved!

So… what exactly is my job title?

A lot of these responsibilities mentioned above seem to fall outside the realm of what an artist traditionally does. UI development is traditionally considered an area where art and design skills reign supreme, but clearly there are some important technical skills involved as well. Whether I consider myself a UI designer, a UI artist, or a Tech artist, the important thing is being flexible in my roles. Even if you create the most amazing icons in the world, if they don’t work correctly in-game you have failed as a UI artist. And so we mustn’t be afraid of reaching a little outside of our comfort zone. When working on a small team with a tiny budget, we’ve found that versatility is not only a good idea, it’s a job requirement.