The Last of Us Ingame App - Step 3: Mock Ups

Last of but not least, the mock ups are here. This app is meant to be used by Joel, the main character, of The Last of Us game. The idea came up from a night with the guys. We were talking about how do characters know what to do or how to do something. So I thought maybe they have an app for it!

Now let's go through it shall we. In terms of overall aesthetic I tried to mimic the UI in the game. It has a restricted palette relying heavily on overlays and floating GUI. They do this to let the content be the star; they let it have breathing room to work and capture the player. They use a lot of white text, it works for the game because there is not a large amount of body type. The UI elements are generally white and sit on top of a darker overlay to create some contrast. 

Now for my work. I mimicked the restricted palette using visual hierarchy and contrast to draw focus. I chose to use DIN because the game's UI uses it (or at least it looks like it does). I chose to show the main screens and ones that had a major difference from the others.

The HOME screen background changes based on the time of year. The game uses the seasons to mark chapter transitions so I thought it would be neat to use to keep track of seasons. This page's content comes from the FEDRA and the military but the Fireflies (a rogue group) has something to say ;). The NAV uses the same styling as the game's menu. One feature has a drop menu for more options. 


RULES OF SURVIVAL is all about informing. Teaching the character how to survive and what to look out for. The character can navigate within a topic through the top option bar. Ellie (other main character) likes puns (so do I) I decided to add humor here as keeping a level head in this situation is important and humor could help people relax. Humor differs from the rest in this feature as you tap the question to reveal the punchline and tap again to hide it. Infected is similar to crafting style UI but I will get to that shortly. 

Crafting shows all the craftable items. clicking an item brings up the details of the object such as material needed and how to make it. As mentioned the infected UI would look similar, it would show all infected and clicking one would bring up details about it.

The MAP allows the character to search locations. Once a location is entered the app will show a route from the current location to the destination. The character could drag the current or the destination points to other locations. Above the locations are information boxes where the character could save a location by tapping the bookmark icon. Clicking the arrow will identify the character's current location. Clicking the target icon gives information about the destination and moves the map to it. The information provides distance but not provide time as it may fluctuate due to infected, road blockades, and other detours. Clicking the top bookmark icon brings up the saved locations that one could set as a destination. I know this is post-apocalypse and satellites may or may not work so I thought they would use radio and other towers to get signals and calculate distances (I don't really have an answer here but I did think about how this could work).

Lastly, ECHO LOCATION. Some how Joel can see like a bat. I thought he could use the phone to capture video and use the phone's built-in audio capture to identify where a sound is coming from and project a low frequency sound back to produce a sonar like image (again, (I don't really have an answer here but I did think about how this could work).

Wow, this was a long one. I probably missed something as we all do. I do believe nothing is perfect that is why we have iterations; to continue to improve one's work and self. Anyway, enjoy! Might prototype this as well next time.