Changes To The Logo

ORIGINAL DESIGN

FINAL DESIGN

All in all the logo design has barely changed. I purchased the correct font that Company use called Graphique AR and simply created the text in the appropriate typeface. The ombre background remained the same. The original logo design was never going to remain the same simply due to the fact the font wasn't correct. The logo was made temporarily until the font was found and bought.

Final App Icon Designs

I had a lot of experimentation with the colour as there are quite a few in my palette. I can't decide which colour works best as a simple background; the blue and lilac stand out as their very appealing colours plus known to be pleasing to the senses according to colour psychology. I am also really drawn to the pink and blue dip-dye background as it's something a little bit more interesting than simply a plain block colour. Of course, not every consumer is into 'ombre' however, so a block colour may be better. 

At first I didn't know if I would like the design with all the clothing in but I think it makes the app seem more fun and friendly, but it's growing on me as it's something a bit different. It retains the font that Company use to consumers know it's part of the brand but then the illustrations differentiate the app from the magazine side. In addition, Company often use illustrations within the magazine, however they are more 'sketchy' rather cartoon like, however I'm not good at sketchy drawings. I'm going to get more feedback on my icon as I won't be able to make the decision by myself.

Creating The App Icon

In terms of my app icon, it's very simple. I didn't want it to be too busy as it's only going to be seen fairly small, and if it looked too full it may put consumers off. Instead I looked at Company's old Weekly Edit App logo (before they merged the app with the magazine download), which was simple a background colour and the words 'Company Weekly Edit' on.

I am using the same font found on the Weekly Edit app and their High Street Edit magazine so all the brand extensions link together nicely. As of yet, I can't find the exact font used, so in the mean time I've been told to make it myself. I've done this by using the font Helvetica Neue (the closet me and Paz could find to the real text) and extruded it (as seen in the first image). I also tried manually creating a drop shadow by copying the text and placing it behind, but this meant the shadow didn't join up with the text, so the extruded version looks much better and a lot more like the original font. From here I experimented with different colours from the palette I had selected and tried out dip-dyes, which can be seen in the next post. 

I also decided to experiment with some other elements of the icon design. I thought it might look good to have some clothes on the icon similar to the Stylebook icon. I simply drew out clothing shapes and coloured them with shades from the palette so everything is kept ordered then arranged them onto the background. These can be viewed on the next post also. 

Colour Palette

The following colours are those I have taken from both Company magazine and their High Street Edit magazine. The High Street Edit tends to have a fairly monochrome palette with the odd hints of some pinks, blues and purples, mainly however, they tend to fill the pages with clothing and images that it detracts the attention from a plain white page. 

The magazine uses lots of pastel colours within the pages and on the front cover. I think this helps them stand apart from other publications as most others use bright colours to stand out on the newstand. For Company's target demographic, the pastels work really well. They also use a lot of dip-dye and ombres within their colour scheme and backgrounds. They always give the impression of spring/summer and are used more withi the magazine at this time.

The colours I have thus selected for my app are above. These colours will be seen on different pages on the apps, little features and doodles, as well as within the promotion. I've kept the majority of colours from the magazine to retain continuity and also because they're not too bright and garish for consumers to deal with. I think the main colour in the app will probably white as it's easier for the clothing to sit on, however, the main page and other features can experiment with the colour scheme.

Fonts

The following fonts are ones taken from the magazine. I wanted to keep all fonts the same as the ones used by the brand to maintain continuity, plus it's a key part of the assets that the consumers recognise. The most obvious of the Company fonts is Brainflower and Levi Brush as these are used for their headings. The fonts like Courier New and Avenir Light are used for texts within the magazine. Although Brainflower was the obvious font to use within the app, I want to use the fonts more associated with their Weekly Edit app and their High Street Edit magazine. 

Therefore, these are the fonts that will be used within the app. The title font is yet to be found (in the meantime I will be making it via extruding the fonts).  I will be using this text for the headings and home page. The other main text will be the 'KG The Fighter', again until I find the exact font used, I will be using this one as it's the closet match. This will be used for subheadings and within doodle features. For the main font and general text it will be these Sans Serif easy to read typefaces that aren't distracting. These are also found within the Weekly Edit App and High Street Edit magazine.

User Interfaces

After researching user interface trends, I decided to research more into the visuals of 'fashion user interfaces' on Pinterest. Instantly I noticed that the squares and linear detailing is popular and a recurring theme opposed to circles which I originally considered in my app design. I do think that squares and grid formations look a lot more sophisticated, sleek and simple. They make good use of white space and are an easy way of directing the eye over information. It was suggested that perhaps I design my dissertation out in the style of an app using these as my influence, however I don't think they would communicate my information correctly on a printed format. If I was creating a digital dissertation piece I would definitely consider one of these layouts. In terms of my app, I think that white backgrounds will work better than coloured like the first picture, although I would like to incorporate colour into some areas of my app to keep it consistent with Company magazine. 

Photoshoot

All in all the shoot went really well. I got the images I needed to begin creating the visuals of my app. We took images of the clothing separately and then together as an outfit, however, some of the outfit images may end up looking better if I cut out in the individual photographs and created them myself on Photoshop. In addition, some of the outfit images need a lot of editing doing to them in terms of creases in clothing and layouts, therefore I intend to play around with creating the outfit suggestions manually to see which look better. 

A lot of editing needs to be done regarding the white backgrounds as they have turned out more grey than I would of liked. Also, some of the clothing needs tidying up e.g. creases, any dirty marks, however saying this, I'm unsure as to whether to leave the clothes looking more realistic (as if a consumer has taken them) or polish them up so they look completely flawless. 

I am also considering turning some of the images into an illustration for promotional purposes. Company do a lot of illustrations within their magazine so it might be an avenue to turn down and create some visuals for the promotion using the images of clothes. 

From here I am going to put together the visuals of my app so I can begin creating the promotion.  

App Design

Here are a few quick sketches of some design ideas I've had for my app. The app will definitely work on portrait on both iPhone and iPad as this is the standard way to use both items. I think the iPad version will look a lot less cluttered because there is more space to work with, however both designs will be slightly different to each other in terms of layout. The iPad design will probably have the left hand bar there permanently for users to be able to navigate easily and quickly around the app, whereas the iPhone version will have a button to access the navigation menu at the top (like on Facebook). At the moment, I have concentrated on using circles in my design but I will also experiment with different shapes and even text, however I do like the use of circles. In addition, there will be a swipe across navigation to see outfits and clothes as I feel this is a a motion everyone is familiar with, plus given the success of Tinder with their swipe feature, this is an easy way to navigate.  

Layout Inspiration #5- User Interfaces

The following information is from Mashabale.com regarding trends in user interfaces:

• Twitter, Facebook and now Instagram lead the way in design inspiration for future apps. Twitter was the first to adopt the pull down to refresh feature that is now used by the majority of apps.
• Colours are a really strong way to make apps stand out from the crowd.
• Textured backgrounds are another design element that's incredibly popular. 'Texture can add a tremendous amount of personality to an application, but developers should be mindful of how text and button elements look on top of the background. The wrong color choice can make content unreadable or buttons hard to find'
• Clean, minimalistic designs are always popular and appeal to consumers.'Using shadows to create the perception of depth can give these buttons and interface elements a more "touchable" look and feel, while also appearing more striking.'
• Thin fonts are also more aesthetically pleasing. 'On mobile devices, the combination of thinner type and high resolution screens often makes for a more readable experience. It also helps differentiate apps. Thin sans serif fonts are often coupled with text-driven designs or with designs that utilize background texture.'

The following information comes from Hongkiat, and outlines the 'hottest' user interface trends for 2014.

• Grid Layout Systems- Social news feeds have always been in a streamlined fashion such as Twitter or Tumblr. Nowadays even many Facebook pages scatter timeline updates to appear like a grid. This isn’t something you can force into any old website. There needs to be a purpose, the user experience always comes first. In situations using thumbnail images or text updates the grid layout condenses everything into an easy-to-read format. Everything is skimmable yet still coherent and it doesn’t require much space on the page.
• Flat Design Elements- Buttons have been made sleeker and flatter, 'using natural box shadows, text shadows, or rounded corners'
• Expanding Search Bars- But there is a growing popularity for building semi-hidden or expanding search bars into your layout. The user clicks a magnifying glass icon or clicks into the form itself, and then it expands wider to allow for more text input.'
• Quick Registration Forms- Try to keep all registration forms quick and to the point. Many newer webapps include the signup form right on their homepage to capture as many visitors as possible. This happens when a new visitor is curious about your product, sees the form only has 2-4 fields and decides to go for it. You may be shocked at how well this strategy works for capturing new users.'

The following are more key trends presented through a different website Gizmodo

• Layers & Depths within apps- creating visual hierarchy between options in the app
• Blurring- 'the process by which certain layers within the UI of applications are more and more commonly being blurred. It's a logical and quite natural solution to keeping the UI minimal while still creating effective hierarchy of elements.'
• Experimentation with transitions- 'With the use of layers – or simply navigating through an interface – comes the need for clean and simple, yet unique methods of transitioning from one layer or section of the interface to the next. It needs to be smooth, but not feel sluggish. It's a fine balance between the two, even more so when you take into account the desire to stand out amongst the crowd, but such restraints continue to push innovation and creativity.'

Layout Inspiration #4- General Apps

The following are general app screenshots from a variety of different apps. The majority of screen shots were taken from an iPad so it's clear to see that the left hand side bar is a popular and prominent feature within the design. Although I do really like the bottom bar, I think that's something that may have to be kept on iPhone designs rather than iPad. Another predominant feature within these app shots are the use of either dark or white backgrounds presumably so that everything stands out and is clear. I definitely won't be using any crazy colour scheme or effects within the background of my app. Incidentally, as seen in the River Island screen shots (third image) images of clothing work much better on a white background. In addition, I definitely think some sort of box/grid system would be a good way to differentiate between outfits and navigational options.  My favourite layouts here are the Tumblr, Pinterest and River Island as they are easy to use, clear and sophisticated and appealing to the eye. 

Layout Inspiration #3- Fashion/Styling Apps

The above apps are all personal styling and fashion apps. My favourite layout is the Stylebook app (the last image), as it's clear, sophisticated and looks really easy to use. In addition, the layout is quite similar to that of Facebook with the options/menu down the left hand side of the app. Therefore users feel like they already know the design layout. I've never seen an app with it's menu bar on the right hand side, therefore left will always be used in the design of my own. I think it's also very important to have the menu and navigation available to use at all times so users can quickly swap between what they're doing.

I quite like navigation tools at the bottom of the app screen similar to that of Instagram and What I Wore Today (third image). That way it leaves the rest of the screen free to be used for the app rather than half of it covered by a menu bar. However, it's only really on iPad layouts that the menu bar is at the side as there isn't much room for that on an iPhone. It may be something to consider whether to have two slightly different layouts for an iPad user and iPhone like Facebook does. 

One of the layout ideas I particularly like is the first image whereby the home screen is a series of boxes with different options in. I think this would make understanding the app easier upon first play with it and also keep everything simple and sleek. From the home screen, the navigational options would either then go along the bottom or along the side. I think it's definitely going to be easier to create an iPad version of the app because there is a lot more space to work with. 

I also really like the use of white backgrounds with different sized circles in (see second image). The circles are also something Company uses a lot within their magazine layout (see here), therefore in terms of continuity that would work quite well on a home screen. In addition, it may be an idea to have circles representing clothing items, with bigger circles for the items they wear the most therefore consumers can visually see which items of clothing they wear the most and least.

App Logos/Icons

The icon of my app is very important in terms of promotion as this essentially is the packaging for the product. Originally, Company's Weekly Edit app had it's own icon but has since moved into the App Store Newstand under the Company magazine digital version. My app, on the other hand will be a stand alone app and have its own icon.

Its important to keep the icon very simple and sophisticated looking. There isn't much space in an icon therefore it can't be too busy, plus personally I am turned off overly- busy app icons as they look cheap. I don't think my icon will be simply a symbol as that doesn't tell the user what the app does or is. For example, Snapchat, Whatsapp and Stylebook. Whatsapp and Snapchat have become famous and globally recognised through their symbol, however Stylebook hasn't and not many people would know the brand or what the app did just by looking at the icon.

My icon will definitely have text in and be similar to the likes of River Island and Style.com. I am considering a coloured background based around the main colours I end up choosing for the entire app. As blue is a colour most people are drawn to (Facebook and Twitter both use this colour probably for that reason), I think I will use a pastel blue. Or even a pink because it's obviously quite a girly app.

Company's brand name will be on there so consumers know it is part of the Company extension and obviously the name 'Stylist Edit' will be on there as well. I will play around with different fonts that Company use when creating the logo, but I think the one they use for the Weekly Edit app and their High Street Edit magazine will work best to maintain continuity.

Colour Psychology

Although Company magazine tends to stick to pastel colours using pinks, purples, yellow and blue a lot and I will probably stick with this palette to keep in tone with the brand, I have decided to investigate into colour psychology to help my decision with logo and app design. All information is from the following website, Colour Affects.

RED: Red is a powerful colour. Although not technically the most visible, it has the property of appearing to be nearer than it is and therefore it grabs our attention first.  Its effect is physical; it stimulates us and raises the pulse rate, giving the impression that time is passing faster than it is. It relates to the masculine principle and can activate the "fight or flight" instinct. Red is strong, and very basic. It is stimulating and lively, very friendly. At the same time, it can be perceived as demanding and aggressive.

BLUE: Blue is the colour of the mind and is essentially soothing; it affects us mentally, rather than the physical reaction we have to red. Strong blues will stimulate clear thought and lighter, soft blues will calm the mind and aid concentration. Consequently it is serene and mentally calming. It is the colour of clear communication. Time and again in research, blue is the world's favourite colour. However, it can be perceived as cold, unemotional and unfriendly.

YELLOW:  In this case the stimulus is emotional, therefore yellow is the strongest colour, psychologically. The right yellow will lift our spirits and our self-esteem; it is the colour of confidence and optimism. Too much of it, or the wrong tone in relation to the other tones in a colour scheme, can cause self-esteem to plummet, giving rise to fear and anxiety. Our "yellow streak" can surface.

GREEN: Green strikes the eye in such a way as to require no adjustment whatever and is, therefore, restful. Being in the centre of the spectrum, it is the colour of balance - a more important concept than many people realise. When the world about us contains plenty of green, this indicates the presence of water, and little danger of famine, so we are reassured by green, on a primitive level. Negatively, it can indicate stagnation and, incorrectly used, will be perceived as being too bland.

VIOLET:  It is highly introvertive and encourages deep contemplation, or meditation. It has associations with royalty and usually communicates the finest possible quality. Being the last visible wavelength before the ultra-violet ray, it has associations with time and space and the cosmos. Excessive use of purple can bring about too much introspection and the wrong tone of it communicates something cheap and nasty, faster than any other colour.

ORANGE: Since it is a combination of red and yellow, orange is stimulating and reaction to it is a combination of the physical and the emotional. It focuses our minds on issues of physical comfort - food, warmth, shelter etc. - and sensuality. It is a 'fun' colour. Negatively, it might focus on the exact opposite - deprivation. This is particularly likely when warm orange is used with black. Equally, too much orange suggests frivolity and a lack of serious intellectual values.

PINK: Being a tint of red, pink also affects us physically, but it soothes, rather than stimulates.  Pink is a powerful colour, psychologically. It represents the feminine principle, and survival of the species; it is nurturing and physically soothing. Too much pink is physically draining and can be somewhat emasculating.

GREY: Pure grey is the only colour that has no direct psychological properties. It is, however, quite suppressive. A virtual absence of colour is depressing and when the world turns grey we are instinctively conditioned to draw in and prepare for hibernation. Unless the precise tone is right, grey has a dampening effect on other colours used with it. Heavy use of grey usually indicates a lack of confidence and fear of exposure.

BLACK:Black is all colours, totally absorbed. It creates protective barriers, as it absorbs all the energy coming towards you, and it enshrouds the personality. Black is essentially an absence of light, since no wavelengths are reflected and it can, therefore be menacing; many people are afraid of the dark. Positively, it communicates absolute clarity, with no fine nuances. It communicates sophistication and uncompromising excellence and it works particularly well with white. Black creates a perception of weight and seriousness.

WHITE:Just as black is total absorption, so white is total reflection. In effect, it reflects the full force of the spectrum into our eyes. Thus it also creates barriers, but differently from black, and it is often a strain to look at. It communicates, "Touch me not!" White is purity and, like black, uncompromising; it is clean, hygienic, and sterile. The concept of sterility can also be negative. Visually, white gives a heightened perception of space. The negative effect of white on warm colours is to make them look and feel garish.

For my app layout and logo, the main colours I'm going to work with are blue, yellow, pink, purple, white and black. The black will mainly be for text and the white will be for outfit suggestions and so clothing stands out on a plain background. The other colours will be in pastel tones and used similarly to how they're used in the magazine. In addition, I will also be taking colour direction from Company's website.