Task: to follow the established art direction and reskin the wireframe provided
Tools I Used: Figma and Photoshop
Art Direction to Follow: Persona 5, bold, textured.

What I learned/What I’d do Differently: Overall, I’m really happy with this! It was my first time working in this style, and I loved it! SO different from what I’d ever done before. I learned a lot about how to make the specific icons and their shading! I wish I could have just spent some time on the UX and maybe updated some of the settings and menu icons to be more readable as separate from gameplay (the blue is hard to read in my opinion).

Final Files

Process

Recreate Wifreframe in Figma & Build out Foreground & Background Elements
- I made all the icons from scratch, learning how to make their current UI elements was crucial to getting the art style right after

It was important to me to find the right Missions for this assignment. The project is based in advocacy and community work, so I found missions that I myself would like to complete or places that I’d like to support.

I made components in Figma and plugged them into my wireframes and slowly adjusted colours! I also started to update all the icons to bring them to the UI style guide that was provided to me and to push me to get more comfortable with the art style.

It was also important to start experimenting visually! I started to break out the navigation component and experiment with it.

And then…

I iterated the heck out of it… I needed to find the right background, the right colour values, the right levels of texture and distress, the right amount of clarity versus art, and I wanted it all to adhere to the hierarchy that the wireframes were providing (and that I had cleaned up!)

Some examples of my components page in Figma and my references page! I iterate a lot and very quickly. It was hard to make clean components in such a short timeline, but I did my best.