FMP – Button Style Development

In my original designs, I started off thinking very blocky, rigid rectangles that just felt too stiff for the purpose of the design. I wanted to excite, and I think the tone of voice should be loud and exciting and playful. With this in mind, I decided I wanted to use a pill shape for my button style. It has that bubble feel to it, adding to the playful vibe of the customisation shoe app.

Keeping the continuity of the design, I used Roboto, a popular web typeface and sourced from google fonts. Using a google font allows for wider compatibility for different browsers.

I created outlines of the type, which then allowed me to user a gradient fill, the same as the pill button.

The vibrant colours chosen throughout the design, show energy, from a warm pink/red to a cool blue colour. These contrasting colours were inspired by my initial research. I feel the colours really pop on a white background too, which is perfect for my button styles.Screenshot 2018-06-01 19.06.19.png

Screenshot 2018-06-01 18.55.53Screenshot 2018-06-01 18.56.17Screenshot 2018-06-01 18.56.27Screenshot 2018-06-01 18.56.53Screenshot 2018-06-01 18.57.22Screenshot 2018-06-01 18.57.33Screenshot 2018-06-01 18.55.07


FMP – App Scamp Sketchs

I was eager to jump straight into the digital design, feeling excited to learn the new software, Sketchapp. However, I wanted to plan the users journey through my app. I wanted to quickly plot ideas down on paper, so I could make any changes quickly. Although very rough, I know exactly what I wanted to get from each screen, showing features of the app that allows personalisation. The first screens allow the user to create an account. Each screen asks questions to allow the app to learn about the user, and target content according to their interests, gender, shoe size, and availability.

Moving through, I want to show how the shoe could be personalised, showing a blank canvas shoe, in white, and a customised shoe. This first screen has to entice the user, so I intend to show a large shoe, drawing the focus to the vibrant, exciting shoe.



FMP – Rough Storyboarding – Promotional Video

In my mind, I already knew how I wanted to compose the promotional video I intended to produce, but before I dive into the digital design, I wanted to create a rough plan for each screen, considering the user journey and experience.

This allowed me to test compositions quickly, and also gives me something to refer to if I get confused or lost during the digital design process.

Below is an image of the sketches I produced:

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.