Vanguard UI Design Mock-Up

29 April 2019

In preparation for my First Year Portfolio Review this Wednesday, I created a mock-up for my UI design from the personal research project from this class to include in the presentation as one of my 5 pieces from my elective classes. The first one I made was done using a template I found on InVision’s website, and I used it to create several iPhones that appeared to show a selection of pages from within the app. However, this didn’t show all of the screens I designed for the app, and it was hard to see details, so I also created one image that is simply the screens of the app at an angle and on a gradient background that matches the colors used in the app. I didn’t want it to just look nice but not have any discernible content on it, and I wanted to be able to talk about it to the panel, so I decided it was better to do a fancier mock-up alongside a more informational mock-up.

These show a selection of the screens from the app that I felt were at the core of what I wanted to accomplish with this app. The screens that I left out I were things I thought were nice features, but not fundamental to the concept I started with.

This shows most of the screens in the app, and far more details are visible. Here, the audience can see the entire screen at its full length, while much of the actual content in the other mock-up had been cut off to only show what fits on the screen.