Rewind – Button States

App Design, Buttons, Design, UI Art

This game takes place in a sci-fi world. A rustic landscape with neon lights sparingly placed throughout. I wanted the buttons to reflect the same environment. When these buttons are selected they have a neon glow.

Ultimately the project has probably changed greatly from these original assets, but I still learned a lot while working on it.

Please ignore the silly Lorem Ipsum and Ben Kingsley photo I included for the screenshot.

Advertisements

Transparency as a Design Element

App Design, Art, Buttons, Design, UI Art

I was recently obsessed with the role-playing text game A Dark Room. The game itself is comprised almost entirely of UI and text. Part of the game is maintaining a fire as the fire dies the room gets darker as does the game itself. This mechanic inspired me to redesign the UI in the game.

I created semi-transparent buttons that would show the transition of the room getting progressively darker as the fire dies out. It all added up to a beautiful transition.

Monster Guard Main Menu

App Design, Buttons, Design, UI Art

An app I have been working on, Monster Guard was recently released. It was created in collaboration with the American Red Cross and Disney. It helps teach kids about what to do during a natural disaster.

You can learn more about the app here https://itunes.apple.com/us/app/monster-guard-prepare-for/id925537299?mt=8

Above is the main menu I designed for the app. I worked with a programmer to create the transitions and audio cues. You can also see a glimpse of the Logo I created for the app.

Background Variation

App Design, Background Art, Design, UI Art

Background graphics tend to be the largest 2D graphics in any app. They can take up a lot of room and make an app overloaded. On my most recent project I tried to create graphics that could be changed and modified in many different ways with very few graphics to create a variety of backgrounds.

For these backgrounds I created a painted texture that can be layered over a single color to create a painterly, watercolor look. I then created tileable patterns to layer on top to add even more variety.

Making Buttons

App Design, Buttons, Design, UI Art

The goal when creating 2D UI is to make graphics that can be repurposed and resized to fit many different circumstances. When creating a button I want it to be easily adapted, to achieve this I often create buttons with several graphics that I layer over each other. All graphics can be created in white and then programmatically recolored. I tend to work in Unity 3D with the plugin 2D Toolkit in which I can easily layer the button graphics and recolor them to my liking.

This is an example of a recent button I created for a preschool educational app.