I found this really interesting shoe customiser on the New Balance Website. I love how the shoes really pop from the background, and the use of shadow underneath gives a realistic feel to the design.
I also like how the user is able to have complete control over each element of the shoe, and has a variety of different views and materials to choose from. I also like the option to share the design with your friends, showing everyone your identity through shoes.
Another feature I like is the users ability to start from scratch on a blank canvas shoe, or adapt a featured design. As the user scrolls down the page, they are able to view more details about the product and materials. The site also suggests other shoes they may like based on what they’ve been looking at on the site.
This has given me loads of inspiration for my app. Although this is a desktop design, there are tonnes of elements that I can take away from this, and adapt and strip back for a nice mobile design.
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.
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.
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:
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.
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.
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 defines 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.
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.
In this post, I want to outline my proposal for my final major piece of the year.
Throughout this year, I’ve learnt a huge amount about advertising in my dissertation, and learnt new skills in typography, layout design, web design, and animation. With this in mind, I want to try and push myself to do something that I’ve not done in great detail. At this stage, my ideas are fairly embryonic. I intend to use Sketch App, to hopefully design screens that will build an app in Invision. I also want to create strong brand identity, which will include choosing the name and creating a suitable logo that will entice my target audience.
Below is a link to my FMP proposal.