Final Outcome and Critiques

Home page

- fun bright colours to catch the audiences attention

- paper cut background to add texture and depth

- paper cut scribble logo to match the overall aesthetic 

- simple layout so people can understand and use it easily as it is something familiar

Shoe Pages
- paper cut shapes change colour to match the shoes, presents itself as engaged and considered
- again simple format to easy to navigate.

Logo

- scribbled chinagraph texture to have a fun playful aesthetic

- paper cut to compliment the background of the website and demonstrate a more crisp design

- type is soft and friendly to compliment the circular shape

• I like how the colours relate to the shoes!! Really sick
• Maybe have some of the shapes with the same texture as the logo, or incorporate that china marker somewhere else. - was tested earlier in project, produces a busy result, people in crits didn't like it as much as the original. Could incorporate into other parts of the branding, such as ads or in store?
• Also could possibly appear childish with the fun colours and shapes and scribbles etc, but if that’s your demographic then that does it really well. - target audience is pretty young, but could maybe have a more mature colour palette to appeal to a slightly older age range as well.
• The overall appearance of the branding and the site is really contemporary and exciting, really modern in approach and simplistic but very effective.
• The hand rendered qualities of the design add a niche quality which also adds a personal touch to a brand that adds value to the product.
• I think the only improvement i could suggest is that if you had more time i would look at redesigning the website layout to match the contemporary vibe and create something unexpected as opposed to the current template design. - experimented with this by altering the shapes of the boxes containing the shoes to try and match the background, but again looked messy and made the shoes less of a focus. With more time could have tried to demonstrate some of the ways the website would move between pages, having interesting animations for example.

Animated Logo Tests

Experimenting with the use of colour in the logo gif of the website, it would animate as the cursor passes over the logo to add an interactive layer to the website.
Tried adding the coloured paper logo to the website to see the impact:

The result didn't compliment the website, the colours were too different and it became really busy with the textured shapes on the back of the website.

Then used the original idea of the black and white sketches but incorporated the paper cut element suggested in crits:

This looks more considered than the coloured logo gif as the black and white complimented the rest of the website, it didn't contrast or look to harsh amongst the bright colours.

Feedback from peers suggested that the black logo was a better one to go with as it was less distracting without the colours, and worked better with the website. People felt the colours didn't compliment those on the background and made the website look less considered.

Shop Mock ups

How to translate the visuals from the logo and website to the store, thinking of using the paper cut shapes in store.

• Could be made into inflatables and be placed in store, or around the lights to create a lampshade.
• Could become an installation piece similar to Isabel and Helen - think about the use of inflatables to emphasise this as well as if they would move or not.
• Display pieces in window, large vinyl stickers to attach to the windows, or large masses made of material to sit in the windowsill.
• The shapes could be made 3D and mounted on the walls, used as shelving units within the shop to display the shoes on, similar to the website design. The shapes could also be turned into plinths to display the shoes on. 

The idea of using the shapes as lighting around the shop. The lights could be neon tubing or have fluorescent panel lights inter-weaving with the shapes. The shapes could also be used as lampshades and be patterned with similar textures to the logo.

The demonstration of shapes being incorporated into the store using 3D techniques. The pieces on the floor show how the shapes could be turned into plinths for displaying shoes, while the shapes mounted on the wall would bring the customer's eyes up across the whole shop. The shapes on the all could also be used as a lighting source or shelving. - Think about ways to demonstrate/take this further.

Using the shapes within a window display, shoes could be placed on shelves, or be incorporated into the shapes themselves as shelves for example. The issue with the shapes being on the bottom of the display people wont see as easily since they'll be covered up by people walking on the street. Would need to rearrange to make them more obvious and eye catching.

The shapes being used in the window display again, having the shapes be elevated allows for people passing to fully see the bright colours and be intrigued into the store. Solves the problem highlighted in the previous test.

Incorporating the chinagraph into other elements of the visual identity,
Thinking of advertising, taking advantage of the digital age and including ads within this. 

Thinking back to the animated transitions in MGMT Kids, making the logo transform from one thing to another, could become shoes, could become info about the company or the link to the website. 

@Crud55 (Al White) Research

Al White (@Crud55), works a lot with screen print, producing highly textured and patterned images. Despite the wide range of textures and patterns the image doesn't look too busy due to the considered composition. Link to Al White's Instagram  

The colour palette in this image is really eye catching the use of contrasting colours helps keep the image vibrant.

The accents of red in this image make the small details in the sleeve really noticeable. The records inside follows a really similar theme, the shapes were really organic and had a similar texture.

Posters using a similar colour palette, the two on the right show the full thing and a close up. When viewed closer the texture and small details in the posters are seen much more clearly.

Could develop a more textured layer to the shapes on the background, testing bitmap as well as a rough paint texture. See the effect to all shapes then to a select few.

Research for Practical Applications

Isabel & Helen

Moncler Genius Project: Installation design for AW18 collection at Milan Fashion Week

Large inflatables, designed as an installation piece, the pieces were inspired by the Craig Green jackets, have a similar aesthetic due to the bubbliness of the outfits. Wanted to translate this from the clothing to the event space, the installation pieces themselves move up and down, present the idea of motion. 

- In own work could incorporate themes of inflatables, have the shapes that appear on the website also appear in store and on ads. The shapes themselves could animate to produce a floating effect as if they're bubbles. 

London Design Festival 2016 - A kinetic sculpture inspired by the Constructivist design movement. 

Again Isabel and Helen using physical shapes and playing around with the movement, of the shapes and they they translate when people use them.

I find the triangle shape to be the most successful as the shapes are mimicked by the person using the swing. Makes a basic swing set look more interesting, and has something more encapsulating to watch. 

- Could use the shapes to develop a feature in store or that would promote the shoes using similar shapes to the ones used on the website.

Olivia Hodder

 

Artist based in Kent.

Produces technical drawings, and produces a physical object from them. Experiments with paper stock, colour as well as pattern. Really like the application of colour within her work, very considerate of both the space and the audience, nothing is too overpowering and the composition compliments the space the objects would be found in. Really like the ambiguity as to what the shapes are meant to represent within the space. 

- Again physical applications of the shapes into a space, leaning against walls, becoming 3D sculptures to be used as an advertising campaign etc.

Website Developments

Thinking of the tpe that will be used on the website, the type for the logo is Franklin Gothic Demi

The Franklin Gothic Demi didn't work as it is a bold typeface, the other fonts within the typeface had a lighter weight, Franklin Gothic Book was within the same family but was a finer type. 

Other typefaces that looked good were Bahnschrift, particular in light, the overall appearance was less condensed and the ampersand looked more considered within the design. 

Franklin Gothic 

Bahnschrift

The Franklin Gothic looked too much like a story books, the only lighter font contained a lot of small details, it looked like a combination of serif and sans serif type.
The Bahnschrift type had more variations within weight, this allows for more development of the hierarchy within the website, directing the audience's attention across the page.

Feedback from peers stated that the website is looking sparse in the top right hand side.
How to rectify?
- Do more scans and add over the top of the existing one.
- Bring everything up to reduce the gaps at the top.

To fix the problem of white space the website was altered to have more shapes at the top and the content was brought up a little to fill the space more.

Crit Feedback and Developments

Feedback/Suggestions from Critique:

• Use the china graph pencil to scribble over the paper shapes on the background of the web design.
• Scribble onto paper with china graph pencil and then cut the logo out, could produce a clear appearance  - also could experiment with different paper stock or colour of the scribble. 
• Animate the shapes in the background so the move ever so slightly, would tie the themes together. 
• Experiment with coloured pen for the logo. 
• Maybe use HT for the logo instead of the whole name.
• Make the shape of the shoe boxes be wonky also, compliment the design. 

Papercut Logo Designs:

Using red and blue paper was a way of incorporating colour into the logo in the same way as the website. The red was really intense, the colour didn't translate well onto screen, especially with the intense black scribble overt he top. With the less intense scribble the red was more manageable.

The blue was more manageable again, the cooler tones complimented the black better than the red, it appeared less intense. 

Peer Feedback:

• Prefer the cut out logo rather than the scribble one as the shapes within are more defined. 
• You notice the arrow shape in the paper cut logo more than the scribble one, but the scribble logo is darker and more intense, could maybe try and make the cut out one match. 
• The colours look really cool, the less coloured in ones in particular. I like how they catch your eye because of the colour, you should try and incorporate them into the design somewhere. 

- Could try and incorporate the coloured cut outs into a gif for when the mouse hovers over that part of the web page?

Adding Texture to the Background Shapes:

Taking the texture from the logo and placing it over top of the shapes, as the background. 

Has a strong impact over the rest of the website, the overall effect isn't that appealing. The black scribble is quite distracting from the original web design without the scribbles. 

Also altered the shapes of boxes containing info about the the shoes as well as category options, again it looked too over crowed and the techniques are look overused. 

Feedback from peers stated that:

• The wonky squares look too much with the background they make it look messy and its just a bit distracting . 
• The squares are clean cut, can easily see the information and you still get the sense of the website being fun and playful because of the squares in the background. 

What to do next?

• Test HT logo idea 
• Get feedback on the webdesigns (mini crit?)

Practical Development .5

Above are scans of the paper used within the web page, having the colours be the same as the shoes, so when you click on a certain shoes the colour scheme is reflected on the website.
Texture in the paper scans stops the page from looking so flat, has a sense of depth, engaging the audience more.

Orange, blue, and black (sugar paper), white and beige suede (printer paper and newsprint)

Purple, blue and black (sugar paper), white and beige (printer paper and newsprint).

Only the white and beige suede texture (newsprint and printer paper).

COMBINING WITH GIF:

When the cursor hovers over specific parts of the website it displays the animation, this could be used for the logo (shown above) as well as pieces of text on the web page (shown in previous blog).
- The animation of the logo looks good with the rest of the website, could it display different colours?

Taking the paper cut shapes and applying to other parts of the web page.
Using newsprint, becoming overused? When tested earlier with colour (red and blue from original logo) the shapes became lost, used newspaper to try and avoid this.
- Could the same texture of the logo be incorporated into the web page elsewhere?
- Make the paper around the text at the top be of the same colour palette as the other images. Making it more eye catching.

Practical Development .4

Thinking of ways to translate the visuals of the logo to the website.
- continue with themes of animating the type to develop the website.
- could make logo gif be present on the website.

Having the text handwritten allows for small differences in the type to be noticed when edited into a gif. The crayon text has a more childlike appearance to it, as well the small detailing added to some of the text. 

The layout of the website is good, it's similar to other online shops. I think this should be kept essentially the same as the audience will be familiar with the layout making it easy for people to navigate the site. 

The aesthetic of the website is something that could change, trying to present an idea of being more streetwear, less sports. The current website looks a lot like many other sports websites e.g. Nike and Fila, but without the fancy photography and shoes design info.

Wanting to communicate a more fun and personal aesthetic for the brand, this can be translated to the website. Logo has an aesthetic that can be transferred. 

Link to Gif

Have the text animate (as shown in the video above) would allows for the user to feel more involved with the  website and ultimately the company. The fact that the cursor makes the gif appear is a manageable way to present the gif to the audience, if it's on all the time it can become quite distracting and hard to look at. 

It's more interesting than  a regular website and really takes advantage of the digital form. 

The crayon text didn't stand out as much as the bold text, could maybe do with keeping the hierarchy of the text the same as the website so things are read as intended. 

Experimenting with the textures made when using the china graph pencil, making the marks more directional developing a sense of pattern and order (top band). Or keeping things more sporadic, less orderly and sticking with a more 'scribble' aesthetic.

Combining the old web page with the new texture, doesn't look much different to the original web page. The differences are so small and need to be developed further. The use of the black band is really distracting as it becomes the focal point of the website. Need to add colour also, looks too serious for the demographic, need to bring back to being youthful and fun. 

HOW TO ADD COLOUR

Other methods to use alongside the scribbles could be the use of cut paper, colours being inspired by the shoes themselves. 

Paper stock should have some texture would compliment the flat background, add some depth to the web page. 

Scans of paper, some sugar paper (having texture) others are flat coloured paper.
The scan provided depth within the image, can easily see the layers are made physically since there are shadows around each shape.

Less paper

medium amount of paper

a lot of paper

The amount of paper in the background was something to think about, too little looked really sparse, too much was really garish and overcrowded.

Having the placement of the paper being more considered would benefit the design, it would look more professional rather than being too sporadic (as it currently looks).

Having the paper as a background for the scrolling part of the website, changing the positioning of the top bar of the page, including the location of the new logo. The black and white keeps it within the realm of sophistication but the colours and scribbled text  bring back to a younger demographic. 

Feedback said it looked like an Instagram account, need to think of ways to reduce this impact. 

- rethink the shape of the circle, maybe have it be a different shape?

- redesign the layout of the upper bar?

Altering the cut paper snips behind the text at the top, provides come continuity between the top part of the web page and the lower scrolling section. Having it black is a bit difficult to read when far away.

Using white instead of black is more legible, as well as being consistent with the logo.                      

When experimenting with the layout I removed the white bar separating the different sections of the website, makes it look a lot less like an Instagram account.

What to do next:

• Develop what would happen when the cursor goes over the images.
• What about when you click on the shoes?
• Think about where to add text details along the top bar.