FMP – Inspiration – New Balance NB1 Customiser

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.

Reflections

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.

 

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.

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 – 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.

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 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.

FMP – Proposal

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.

Creative Brief

FMP – Reflections

Over the past 2 and a half months, I’ve learnt a huge amount. At the beggining of the process, before the idea was even born, I knew I wanted to push myself to learn new software, especially in an industry thats constantly evolving. I’ve consistently shown my strengths in layout design throughout my time at college. However, they were static, and although they hold the attention of the reader for a moment, the effectiveness of still, static imagery, is limited.

App Design

Not necessarily something I’d immediately have said was something I was interested in, because I might have doubted my ability to design such elaborate ideas. But actually, I use apps daily, and usually pick out the flaws without really thinking about it. This ability to dissect designs has strengthened throughout the year.

Sketch App

I was pushed in the direction of Sketch App through work, that bought the license and gave me the ability to experiment a new type of design, UX/ XI. Throughout the year, I’ve shifted focus very much towards considering the user. Identifying and learning about the user of the product or service, makes it easier to excite them, by knowing their interest, and what they want to see from the design essentially. This project has suited me, as I also have an interest in shoes, and design is obviously a cross over from my experience in graphics.

After Effects

I’ve been scared of After Effects for so long now, though been fascinated by its power and ability to bring motion and animation to a piece. Throughout the year, I’ve experimented with different effects and compositions within After Effects, for example, in this years waste campaign. However, until the last month or so, I haven’t fully understood the software.

My eureka moment came with a very simple animation I did at work. I was designing a login screen for an app, and wanted to animate a fingerprint to simulate someone logging in with there fingerprint, or touch ID. Making the composition the correct size, and exporting individual elements or paths in photoshop, I was able to recreate the screen in After Effects very quickly, from my original sketch design.

Creating a mask for each individual path, I was able to animate from point A to point B across time, and then offset them all to give a staggered effect. This process inspired me, and made me think maybe I could actually achieve what I had in mind.

Exporting all my elements from sketch, and naming my folders in an organised fashion, I began creating each screen in an Iphone sized composition (375px x 667px). I was then able to animate each individual element of the design, creating exciting transitions between screens, and taking the user through a user journey, an experience, displaying the ease at which they can achieve the aspirational image I’m trying to portray. Finally, considering my audience, I produced a promotional video, again, adding further dynamic elements, relating to my intended audience. The “cool” vibe, shows the audience what they could become, by giving a personalised identity to the shoes.

Final Reflections

I think throughout the year, there have been key projects that have allowed me to explore different disciplines that I may not have considered on the HND. Often, I’ve doubted my ability, however, looking back, I’ve learnt a huge amount in such a short space of time, and I think I’ve put in the extra hours exploring the design community. My social media presence has increased this year, and I think thats a reflection of my new found confidence in what I’m doing, which in turn, helps me to sell an idea when I believe in what I’m doing and considering in greater detail why I’m doing it.

 

FMP – Developement

After finishing comping together my screens, I moved on to consider what promotional material I could produce, announcing the brand in a way that would excite my intended audience. After a lot of consideration, I decided upon my target demographic being very young, between 16-30, however the app could work for everyone. I wanted to encourage the idea of “coolness”, showing the audience what they aspire to be like, whilst tying in the brand and house style.

Creating layers, I found stock videos of skater scenes that encourage the idea of coolness. The New York and California scenery, with palm tress and plenty of sun, shows the audience “the high life”, showing them they can have a taste of this life by personalising your favourite shoes in a quick and easy manner. I used multiple layers of colour correction, tinkering with the style and vibe of the final composition. These layers included:

• Lumetri Colour Adjustment – Giving a professional video colour grading
• Noise, Blur & Blending Modes – After feedback from my mentor at work, he taught me a quick and cheap trick to enhance the colours, adding a small amount of blur, noise, and then reducing the opacity to next to nothing, and chaning the colour mode to suit the peice, just to make the colour pop.

 

 

FMP – New Software Skills: Adobe After Effects

I, like everyone else, love animation. It can bring a still, flat design into a exciting, dynamic piece, engaging the audience through motion. I’ve been fascinated with Adobe After Effects, watching tutorials online and trying to understand how to get the best out of it to animate my screens. I’ve worked on a small animations at work but found it really difficult to get my head around it sometimes, which made me put off touching it for my FMP initially.

One day at work, I sparked an idea that I wanted a fingerprint for a fingerprint recognition screen in an app I was designing. I sat down with my mentor, who took me through step by step how I can animate a mask from point A to point B in time. The repetitive process of animating each individual stroke of the fingerprint was like a lightbulb moment. I suddenly grasped the concept of animation.

That weekend, I took what I had already in terms of screens in Sketch, and exported each element of the screen that I wanted to animate, and the background plain.

Using different comps to group screens together and transition between screens, I was able to remain organised.