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.

 

Screenshot 2018-06-01 19.42.02Screenshot 2018-06-01 19.39.57Screenshot 2018-06-01 19.39.04Screenshot 2018-06-01 19.42.11

Advertisements

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.

 

img_20180601_1813094331695616054170657.jpgimg_20180601_1813144104623399133858729.jpg

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.

FMP – Considering The End User

This step is pivotal to the success of the design and the app. Not only in app design, but design in general, considering the end user needs, and what they want to get out of the design.

My research has lead me to identify the audience as having the following attributes:

  • Optimum age – 16-28 – A young demographic looking to give themselves identity and stand out from the crowd.
  • Interests – Sports. Appearing cool. Being different / unique. Popular music. Selling the high life, American style.
  • Colour – Big, bold vibrant colour. Dynamic gradients.
  • Interactions – Instead of design still images, and creating a static prototype that has some small, clunky interactions, I want to experiment with animation, creating dynamic interactions and transitions between screens to try and stimulate excitement from my audience.

The structured analysis of my target audience helps me to understand what they want to see from the design. Moving forward into the digital design process, it’ll be easier to exploit the audience, targeting their needs as a consumer, introducing signifiers that the audience can identify and, by association, link the brand to the “cool” vibe.

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.

Wordpress_New_software.gif

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

Animation_01_start_6.gifInsta_upload_animation.gif

 

FMP – New Software Skills: Sketchapp

The reason I originally chose to design an app for my final major piece, was to explore a new discipline that’s boomed in recent years. Apps are a great way to target audiences with the revolution of smart phones. Everyone has access to app that all provide a service to the consumer.

With starting a new job in web-design, the company have also been looking to venture into the apps market, designing bespoke apps that can be easily changed to represent a brand. I’ve talked for weeks in preparation with my mentors at both work and college, and decided to use Sketchapp to design screens for my app. I’ve watch loads of tutorials online to understand the advantages of using Sketchapp Vs Photoshop.

One thing that bugs me about photoshop is the inability to make changes to a style globally. For example, if I had a purple button style but wanted to change the colour, I’d have to make the change on every single layer. Sketch encourages the use of symbols, that give the user the ability to quickly change button styles globally, thus speeding up workflow, which is paramount for this project as I’ve taken on quite a lot of work.

Although my initial sketches show a rough user journey, this journey changed dramatically whilst designing in sketch. Once I could see the refined design in front of me, I could see where I could change it to make it more dynamic and engaging for the end user.

I’m not going to say Sketch has been easy to learn, but I’ve been persistent and fallen asleep watching the tutorials every night to get the best out of it. The other feature that’s come in hand is the ability to export individual elements as well as artboards, at whatever size and file type I want. by choosing “1x” or “2x” I can choose the resolution, whether Im designing for a retina display or not, that has two times the pixels.

Screenshot 2018-05-15 10.55.00.png