Showing posts with label layout. Show all posts
Showing posts with label layout. Show all posts

3 May 2014

One Item- Four Ways



Originally, this part of the magazine was going to be a photoshoot, the same style as the images I took for the app. However, I realised for the magazine it wouldn't look as good or professional if the images of the clothes were taken in this style. Therefore, instead I saved the images from the website. This way looks a lot better than if the clothing had been photographed myself. It worked for the app, as that gave a more realistic view of how it worked.

1 May 2014

Company High Street Edit

 

For my promotional magazine, I will be laying it out in the same style as Company's HIgh Street Edit to maintain continuity with their brand extensions as well as the design of the app. All the pages will be white and plain, however, they will be filled with images making them seem a lot more colourful. In addition, only a few pages will have a lot of text on them, the rest will be more visually stimulating!



28 April 2014

Board Arrangement


After showing Paz my initial board design (see above), he highlighted that A2 is a really large size and probably too big for my board. He made the point also that having all my app screens on the board may look overcrowded, plus if they were all in iPad frames it would look over saturated with hardware opposed to my software. He made the suggestion that instead I just have the main screens on the board with the middle screen in an iPad to highlight the app. I have taken this suggestion on board. In addition, he also pointed out that A2 would be too big for social media and it may look odd all crowded in one corner, here he said it would look neater and easier to read if everything was in lines, therefore I have changed my layout slightly. All my promotion now sits in lines and I have got rid of my adhsel as there wasn't enough room. I wasn't too keen on my adshel being on the board anyway.  I am pleased with the layout of my new board, I just need to go through and add titles and rasterize everything.

22 April 2014

Final Stand Layout Ideas





In order to lay out my final stand, I needed to try out some different designs. All promotion has to be put onto different sized paper templates then the templates added to the stand design. Above I have tried out some different layouts with different paper sizes, but it's quite difficult to experiment with different looks as my app is the main part of the stand and needs to go at the top quite largely. I'm going to lay out my board using the first design as I think this lays everything out neatly and in order of important and main promotion. I feel the other designs look a bit more messy in terms of the app being presented. I need to consult with my tutor also that the layout is fine and that everything on my board is needed, plus make sure I don't miss anything out, then I can go ahead and add my promotion to the final stand.

Hard copy promotion such as the promotional magazine and flyers will be printed out and put on the table with the final board therefore they aren't necessary on the final stand.





28 March 2014

Customer Profile Board Inspiration











(All Images from Pinterest)

The following images are of customer profile board ideas. I wanted to keep the customer profile board in keeping with the rest of my dissertation layout to maintain continuity so some of the more busier and collage like designs are not as applicable to the sleeker dissertation layout I have gone for, however I do still really like the designs of them. I love the more linear moodboards and use of squares and rectangles over-lapping. What makes the majority of these moodboards striking is the colour palette used within them, as all the pictures derive from a certain colour. Finding relevant customer profile images that are all within one colour scheme may be difficult, however this is what makes the boards look really good. I really like the idea of taking a picture of a picture, e.g. taking pictures of all the customer profile information and then taking a picture of that all together like the 7th image above. However, I don't know if I will have the time to produce that now. I think the style I like most is the 10th image whereby there are coloured lines to break things up; this could work well in terms of keeping a colour scheme, plus I like how the images are laid out randomly not made into a box shape.



19 March 2014

Final App Visuals


The images above are the finals of my app design and drawing. Overall it took me two days to complete it and I'm really pleased with the results. Although, to me they don't look realistic but I think that's because I've seen them so much and obviously I know I've drawn them out.

I decided to keep the menu bar at the bottom rather than at the side because I felt this would make navigation easier given that Instagram is so popular primarily due to its easy layout. The options along the bottom are as follows; Home, Wardrobe, Outfits, Outfit Suggestions, Calendar and Wishlist.  I have drawn out every version of the page for the iPad version and the main pages for the iPhone version. All elements have been drawn out.

I've decided to add a sign up feature so each user has a profile. This will gain them access to vouchers and exclusive features on the website. In addition, having a profile will also mean Company can gather data. Having a profile also means that users can access their wardrobe and outfits from any device or on the website.

On the wardrobe page the boxes will be different sizes depending on the amount of clothing the users uploads. For example, if the consumer has more tops than dresses then the top box will be bigger. This provides the consumer with a visual representation of the amount of clothing in their wardrobe.

I think the app is very self explanatory from the visuals above, however upon opening the app the consumer will be greeted with help tips explaining what all the features do to help users navigate the app on their first use.

15 March 2014

Editing Photos


Although all the images were taken on a white background they have turned out quite grey. Therefore it was needed that the backgrounds were cleaned up as the items will be placed on a white background on the app. I did this by roughly drawing around the items, adding two new layers one of a white background and one for pasting the cut out item on. From here the grey background left showed up on the new white background and it was simply a case of using the eraser tool to rub away the grey marks. I've done this on all the items of clothing as seen on the top image.

During the photoshoot I took images of the outfit suggestions together. I did attempt to remove the backgrounds from these images but it proved to be very time consuming and I found it was easier to manually make up the outfits using the cut out items. This way I could also mix and match the items I think may look better. I am really pleased with how the images look now they've been cleaned and it will make placing them on a white background on the app visuals a lot easier!




14 March 2014

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.


9 March 2014

Dissertation Layout Ideas #4



The images above are all from H&M's free magazine. Out of all the magazine layouts I've looked at this one is definitely my favourite. The white space is perfect and makes everything look crisp and sophisticated. Everything is so simple and laid out really well. Again, everything is very linear and grid like, but I think combined with the fonts it works well and gives a really professional vibe. The text over images looks aesthetically pleasing also, however I don't know if I would be able to do this over my own images as it could distract from the promotional picture. I also like how the text boxes and images overlap each other to give that relaxed edge in such a formal structure. This is definitely a layout I am considering using, although I am worried it may clash with the general ethos of my app which is fun and friendly, whereas this looks more serious and formal.

8 March 2014

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. 

Dissertation Layout Ideas #3




The above images are from River Island's magazine. This style of layout is a lot more sleeker and sophisticated than the previous two magazines. The clean cut text also appeals to me as it's very simple and doesn't detract too much attention away from the content of the page.  The use of white space is utilised well and I think the boxes of texts over images are a really nice touch. Whether we can have text over images is something I will have to discuss with my tutor. Again, linear is a popular layout design and I do think grids and squares do look more sophisticated.  My favourite layout so far is the collection of images with the small rectangle of text to the right of it, this would be a good way to display promotion and have space to talk about it. 

This is definitely another layout I am considering as it's more practical than previous ones I've looked at.

Dissertation Layout Ideas #2




The following magazine is Office's free publication. It was actually designed by the Company magazine team so there are some similarities between the two magazines. Therefore this may be a good layout avenue to go down given that it's similar to Company but not the same. 

I like the use of pastel colours and range of fonts, however this could get a bit messy looking if not executed correctly. I think the coloured backgrounds look great too, but I think everything would look much better on a white background for my dissertation, especially when adding my images to the layout. I like the grid layout above which could be a nice way to display images and small parts of text if required. Similar to Company (and previously seen at Cosmopolitan), there are a lot of illustrations which seems to be a popular theme within magazines now making me consider them for my own layout.

Dissertation Layout Ideas #1





The following images are from Cosmopolitan's bi-annual fashion magazine. A magazine layout would be most appropriate for my dissertation, focusing on Company magazine, however I don't want to completely lay out it the same as I have done this for previous projects. Therefore I have been looking into different magazine layouts.

I like the random nature of this layout, how every page is different but there is consistency through fonts and grid formats. I've noticed that everything is very linear and square and there are few examples of the use of circles which may be something to consider also when creating my app. I like the fonts, use of borders and how some images are cut up and stuck together like a collage. However this might be quite difficult to produce given that my own images will be of the promotion. I also like the little touches like the illustrations which make everything seem more scrapbook like. White backgrounds and white space is also something I really like and images overlap the borders to provide a more relaxed, colloquial feel. 

This type of layout is definitely one I am considering and will discuss further with my tutor.