[vc_row title="UI Art + Design" swatch="swatch-vivifx-style-base" background_image="1294" background_position_vertical="-50" overlay_opacity="0.7" overlay_grid="on" background_image_attachment="fixed"][vc_column width="1/1"][/vc_column][/vc_row][vc_row swatch="swatch-vivifx-style" top_decoration="rounded-inverted" bottom_decoration="rounded-inverted" height="tiny"][vc_column align="center" width="1/1"][vc_column_text]

What makes a good user interface?

A good user interface is focused.

Each element of the interface should serve a purpose and have a singular goal. It should not meander or take its time getting the player from point A to point B. Once that goal has been accomplished the UI does not overstay its welcome and gets out of the player’s way.

A good user interface is feeling

Good UI is empathetic and full of feeling. It understands what the user is going through, and offers the appropriate responses and reactions to make the user feel understood. It is designed in such a way that it makes the player feel the proper emotional response at each stage of the interaction. In most cases the response required is a positive one - although this is not always the case!

A good user interface is flavored

Each aspect of the interface should tie into the core aesthetic of the source material and feel like an extension of the world it exists in.  While this is important in all forms of UI Design, it is particularly important when designing  UI for games.

A good user interface is functional

The number one most important thing that any user interface can be is functional. It has to work. It doesn’t matter if it hits all of the previous points - if it doesn’t work it has already failed.

[/vc_column_text][/vc_column][/vc_row][vc_row title="UI Design Process" swatch="swatch-vivifx-style-base" background_image="925" overlay_opacity="0.7" overlay_grid="on" background_image_attachment="fixed"][vc_column width="1/1"][/vc_column][/vc_row][vc_row swatch="swatch-vivifx-style" top_decoration="rounded-inverted" bottom_decoration="rounded-inverted"][vc_column align="center" width="1/1"][vc_column_text]

Asking the right questions 

I start my process by asking my team and myself a lot of questions. Over time I have narrowed this process down to six vital questions - which may look familiar to anyone who loves a good detective novel. They are:

• What - What needs to be shown on this particular element? What information needs to be presented?
• Who - Who is this being designed for? What type of user and demographic?
• When - When is this going to be seen in game?
• Where -  Where is the player at emotionally when they are on this screen? Where do I want them to be emotionally?
• Why - Why is the player using this particular screen? What are they trying to accomplish when they use it?
• How - How does this interface compare to similar products? How can I use and reinforce common mobile patterns related to this type of application? How can I educate users about new patterns for my specific game?

Using intel from my team and through my own research I use these questions to identify the goals and needs for whatever I am designing.

Sketching

I usually write the answers in the margin of my trusty Rhodia A4 Size Dot Grid pad. I like these pads because they have a cold press paper surface I love to sketch on, but they are cheap enough that I don't feel bad if I draw a ton. Which I do.

Sketching helps me get my ideas out of my head and into a physical space where they can be critiqued and improved on. When I sketch I try to get my ideas down as quickly as possible, while keeping them readable. Since I primarily work in agile environments I keep the ideas loose so they can rapidly be iterated upon.

Wireframing + Prototyping

Wireframes usually serve as a cleanup stage between sketches and prototypes. I take my workable ideas from my sketches and put them in a clean and usually digitized state so I can work with them in the future.

Often I will also create a prototype at this stage. The level of detail of the prototype is determined by the needs of my team, and how clearly I feel like we need to see a tangible example. In most cases since I work primarily with Unity, I will create a prototype in the engine itself, which can be used as a base for implementation. Sometimes I will use Adobe XD, Proto.Io or even paper prototypes as well.

This is the end point of my work as a UI Designer. However since I primarily work with small, agile teams , I often serve as the UI Artist as well. This adds three extra steps to my design process. Although I have them listed sequentially here, UI Design and UI Art are very intertwined for me, and I am often considering style choices when initially sketching and prototyping.

[/vc_column_text][/vc_column][/vc_row][vc_row title="UI Art Process" swatch="swatch-vivifx-style-base" background_image="970" overlay_opacity="0.7" overlay_grid="on" background_image_attachment="fixed"][vc_column width="1/1"][/vc_column][/vc_row][vc_row swatch="swatch-vivifx-style" top_decoration="rounded-inverted" bottom_decoration="rounded-inverted" background_image_attachment="fixed"][vc_column width="1/1"][vc_column_text]

Aesthetic Determinations

This is something I usually only have to do once throughout the course of a project, but it is vitally important. I work with the Art Director and other artists on the game to determine our core visual themes and ideas. Often I like to be able to boil our game down to one or two  tangible words - something visceral I can base a whole design on. Some examples from my storied past have been "books", "papercraft", "pre-cura (Japanese sticker art)", and more.

This stage usually involves some color palette work, since what the artists are using for our characters more often than not will not work with the UI. I also think a lot about shapes and patterns I want this interface to consistently have.

Mockups 

Once that visual planning is out of the way and the wireframes are in a good place I begin mocking up my designs. I sketch on top of my intial wireframes to create the shapes I want the UI to have, and play with textures and colors to create something that still has the functionality of the original wireframe but plays to my visceral design choice. I review and iterate with my lead and team during this process, adjusting things as need be.

Create Final Assets

Not much to say about this one except this is where I create the final assets! I usually work out of my mock up files since I already went through all the trouble of making them to size and have my initial sketches and first pass of assets in them.

Implementing

In some cases I assist programming with implementing my own assets, and placing them in Unity. Other times I am very hands off in this regard! It really depends on the needs of the team. Most times I assist with placement and small tweaks, while engineering handles most of the heavy lifting.

[/vc_column_text][/vc_column][/vc_row][vc_row title="UI Design + Art Projects" swatch="swatch-vivifx-style-on-white-with-purple-accents"][vc_column width="1/1"][portfolio categories="ui-art,ui-design" show_excerpt="hide" show_overlay="hide" show_magnific="hide" magnific_link_type="magnific-all" show_filters="hide"][/vc_column][/vc_row]