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.
Looking online, looking at google fonts, and looking through my own personal library of typefaces, I identified 5 typefaces that I’d consider for my design. They’re all personal favourites of mine, but i particularly like Roboto condensed for this project. Its a bold, impactful typefaces that does what it says on the tin. I feel like the other choices in some way or another, don’t fit the feel of the design.
Roboto has been designed entirely in-house at Google by Christian Robertson, an interface designer for Google and the reception wasn’t always positive back then. Typography commentator Stephen Coles called the initial release of Roboto as a “Frankenfont” because the similarity of some characters in Helvetica, Univers, Myriad, DIN and Ronnia. .
But since then the font went through a few updates and improvements which corrected many of the problems with the initial release.
I’ve recently downloaded the “what the font” plugin, which allows me to hover over and quickly identify typefaces. I’ve found this really useful when searching the internet, to see which sites and brands use which typefaces.
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:
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.