Destiny Ghost Hunter

A personal 8-hour UI design challenge

A designer needs to stay sharp, so I often do practice challenges to keep my visual design skills evolving.

I play Destiny every once in a while, and at one point was trying to collect all the hidden dead Ghosts in the game. When I came across Destiny Ghost Hunter, I felt like it could use a facelift.

Designing the UI

I popped open Photoshop to stretch my legs after a lot of wire framing at work and grabbed some reference screenshots from the game.

Project Stats

Duration:

1 Day

Role(s):

UI Designer

Tool(s):

Adobe PhotoShop

For this exercise, I imposed a single restriction on myself: an 8 hour time limit.

Image Sourcing

I wanted to create all the assets from scratch, and first things first was the map of the planets. I went to NASA's website for high definition, open source images and went to work editing them into the style of Destiny's UI.

Non-Destructive Editing

I'm a big fan of non-destructive editing, so I rarely flatten layers when I'm done with raster effects.

Instead I prefer to use masking, grouping, and effects layers to get the effects I want.

For example, the planet Venus began as a high-resolution NASA image (01.), I steadily layered effects on until it was the green and yellow of the one in Destiny.

Vector Art

Once the planets were done, I found some UI reference from in-game to use for the lists of Ghosts. I created the shapes by hand and retrofitted them for the purpose I had in my UI.

To top it all off, I re-created the UI frame elements using vector shapes and paths. A layer mask with some grunge texturing gave the scalable vector art the look I needed, while being flexible in case I wanted to increase the resolution in the future.

Logo Design

The last element I wanted to add was a logo. Destiny Ghost Hunter didn't have a logo, so I found a font that matched Destiny's look and create a custom logo mark using vector shapes.

What I Learned

This was a fun exercise, and a great opportunity to mix vector and raster effects to make the UI for a game I enjoy. The end result was something I'm confident I could code in HTML and CSS without issue, which is a goal I constantly strive for. A practical design leads to easier code implementation, and faster implementation means more learnings, faster.

Do you play Destiny or other console games? Find me on PSN as SuperScott597 and lets play together!