FMP – Sketchapp – Initial Attempt

After scamping my idea out, I jumped into the the digital design quite quickly, as I was worried about time constraints given my ambitious project. The screens below show my intitial efforts. Although rough, it show the user journey, and could be tweaked into a more coherent design later. I became frustrated very quickly with my progress, so took to the web to gather more information after this process.

Screenshot 2018-05-31 20.10.15Screenshot 2018-05-31 20.10.28


FMP – Final Prototype

Below is a link to the final prototype, designed in Sketchapp, and made in Invision.


My final major project has really developed my skills as a designer, opening new opportunities to learn new software skills to push my designs even further. My ability to use After Effects to animate screens has opened new opportunities for me, and look forward to new projects I can use these skills in.

FMP – Prototype Development – Invision

Working in an organised fashion, I created order between the screens in the dashboard, making it easy to understand the userflow, and not getting confused between screens.

Screenshot 2018-05-31 16.00.58.png

During this process, new ideas sparked about how to transition between screens, and animate, increasing the user experience to a new level. This is evident in the take a selfie screens, where I animated a white screen between two other screens. This was done by creating a new artboard in Sketchapp, and filling it with white and reducing the opacity slightly. I then exported this element as a PNG file, maintaining the transparency effect, and created a timer in Invision, transitioning quickly to the next screen “continue”.

Screenshot 2018-05-31 16.04.17Screenshot 2018-05-31 16.04.28

FMP – Prototype Development – Sketchapp

Now normally I’d be panicking about leaving the prototype to the final day to complete. However, I already had the bare bones and structure to the design, so really, all I had to do was follow the story, and create links between the screens I had created in Sketch.

After animating my screens in After Effects, my Sketch app file was all over the place, and had been dissected and moved around to export all the elements. So I decided to create a duplicate file, and tidy up the screens, showing the user journey from start to finish.

Screenshot 2018-05-31 15.54.11Screenshot 2018-05-31 15.54.15

Using Invision and the Craft plugin, I was able to quickly make changes to the design file in Sketchapp, and sync the changes directly to my prototype, allowing fast workflow.

Screenshot 2018-05-31 15.58.01.png


FMP – Prototype – Animating Intro Screen

I’m prototyping my screens in Invision, and this is good in some ways, however, it doesn’t support video which is quite annoying for animating. However, the way round it is to create a GIF in Photoshop after creating the animation in After Effects.

To do this, I exported the elements of the design I needed from Sketch app, like the background plane, and the animated elements that lie on top as layers.

Screenshot 2018-05-31 15.45.07Screenshot 2018-05-31 15.38.18Comp-1.gif

I created key frames for scale along time to create a pop effect, and then moved the position of the enter button from below, creating interest to the call to action.

I rendered the video as normal, and then imported the video composition into photoshop, where I was then able to export as a gif, ready to put into my Invision prototype.


FMP – Imagery Research

I have a fairly good idea of the type of imagery I want to use in my design. Appealing to a younger audience, I want to excite them by using imagery that may cause controversy, break social norms, innovating, showing urban landscapes.

Imagery is an important part of my design, as it deImage may contain: shoesImage may contain: shoesfines the audience I’m trying to target. Get the imagery right, and the feeling of the app completely changes.

I follow some good instagram channels for shoes, that helped me gather inspiration for my app.

Image may contain: shoesImage may contain: shoesImage may contain: shoes

Above are just a select few that I looked at. Often, the shoes are photographed on plain backdrops, or blurred urban scenery. This is to draw focus to the main focal point, the bright, vibrant, pristine shoes. Speed and sport is often a common theme running through the imagery I’ve looked at. This is to encourage the idea of competition, endurance, and having a competitive advantage over everyone else.