A designer needs to stay sharp, so I often do practice challenges to keep my visual design skills evolving.
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.
For this exercise, I imposed a single restriction on myself: an 8 hour time limit.
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.
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.
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!