Human Interface Guidelines

I've been researching on the developer.apple.com website into guidelines i should follow when creating the app and I've found some useful information on the website.

If possible, support both portrait and landscape orientations. People prefer to use apps in different orientations, so it’s best when you can fulfill that expectation.

Above are the size specifications for different apple products. I had it in mind to design the app predominantly for phones rather than ipads, as the user is more likely to have their phone on them whilst out of the house, than an ipad. And so for design purposes i will design the app to an iphone sized format.

According to market research firm Strategy Analytics the iphone 7 and iphone 7 plus are the world's most popular smartphones. For this reason it seems appropriate that i create the design following either the iphone 7/7 plus size guide lines.

closet +

Before designing the app i carried out some research on existing apps and websites similar to the one i'll be creating.

 Closet + is an app which allows people to upload their wardrobe and create outfits themselves.

I found reviews for the app useful as a way to show me what aspects i should not include within my app, and how mine can be made more efficient for the user.

"Closet+ Worked fairly well but it was pretty basic.  You could take photos of your clothes and add them but you couldn’t edit out any backgrounds.  Compiling an outfit consists of adding putting the pictures of the outfits next to each other. It wasn’t very “pretty"  
The problem with Closet+ seems to be that the user has to do all the work them selves, it's more of an organizer than an outfitter planner. The reviewer also commented that the app wasn't very 'pretty', from the images of the app below it shows a very bland, simple 

design, add in different backgrounds is something i feel i need to consider, along with using colour rather than black and white, neutral and minimal tones. Clueless needs to be a fashionable, creative, stylishly designed app which brings back the fun of planning an outfit, rather than solely making the app function-able and time saving, it needs to be fun, unique and makes the user trust and want to wear the outfits created by the app. 

brief

Clueless;  for when you have a spare minute, but you're not by your wardrobe. 

I will be designing an app under the name 'clueless' the name comes form the initial inspiration behind this whole project, the 90's film Clueless. In addition to this, the word also suits the actual purpose of the app, to help women who are 'clueless' about what to wear, decide. 

The app is targeted a 18-25 year old women, 

User profiles:

Female, 25, works in an office, likes to socialise with friends, work orientated and professional, wants a more exciting job so dresses stylish to work. 

Female, 20, university student, very big wardrobe, goes out with friends and on dates, at uni till late & struggles to find the time to plan what outfits to wear.

The design of the app should provoke a sense of order and clarity. As well as this, i wanted to experiment with using 90's aesthetics within the design, in reference to the film i could also take patterns from stills within the films, or colour combinations. 

Although the app needs to eliminate the stress of looking through loads and loads of clothes, i still want the design to be playful and fun, as the app is all about different combinations, and each persons individually style being tailored in the right way to make a complete outfit. 

The type used for the body copy within the app should be easy to read, yet modern and appropriate to the context, however i think including some hand drawn type within the app will link to the aesthetics of the film and link to the fun nature of the app- as it's almost like a 'grown up' kind of dressing up game, and by connecting to this feeling i believe the users will like and appreciate this. 

layout ideas

When thinking about the most effortless way for the app user to receive accurate and appropriate outfit choices i made made a diagram above of what i believe is an effective way to allow the user to quickly make decisions to inform the app in order to make the most appropriate outfit choices.

Each time the user clicks on an option it will then transfer to another option screen, the user will be able to choose more than one option, if say they want the outfit to suit work and a party.
After completing the option choices, the user will be presented with 5 relevant outfit options.

screen based design analysis

I analysed the Lazy Oaf website and its screen based design in detail in order to see what elements work, and what make the design more difficult for the user.

when the user first goes on to the website the logo can be seen at the top of the screen, and it's position remains there throughout the navigation of the website, as i later noticed whilst going through the website; the little con accompanying the logo text is animated, and the eyes change position every 10 seconds or so.

The layout of the website home screen is very clean with a focus on the outfits- the white background assists the minimal design along with the black text with the accent of colours matching the tones within detailing on the outfits.

when the user clicks on the shop icon, different options drop down within a faded box so you still see the home screen whilst choosing options. 

when you the click on an option eg 'womans' more options appear, theres then a light grey highlight when you hover over a more refined option. 

You're then taken to the actual images of the clothing, two images are shown per page view, the images are very vibrant and engage the customer to look at them in detail due to the up close image view and the limited amount of images per page view (2 every time you scroll down).

when you then click to add something to your basket- the layout is more compact, the image reduces in length but expands in width and all the options and information such as sizing, size guide and item specifications are clearly visible along side the item of clothing. 

each icon changes in colour when you click it, going from white to black.

You can then see the item, its price and checkout options at the right side of the screen. 

Another thing i noticed during the course of going through the website is that on some items the image of the item changes through each stage of the buying process. 

• FIRST VIEW - in regular shopping mode where all the options are there for viewing. 
• SECOND VIEW - when you choose to look at an item in more detail. 
• THIRD VIEW - when you've added it to the basket before checkout. 

I haven't really found many faults within the website, although if i was to suggest any changes, there could be an easier way to add an item to your basket, say if you didn't want to look at it in more detail then you could just automatically add it to your basket, or perhaps a quick view like on other clothing sights where you hover over the item and you can see the details of it zoomed in. 

slight change of direction

After discussing my idea with one of the tutors we slightly developed my idea. 
The online fashion shopping store ASOS has introduced a new feature where there's the option for an online personal shopper; you can tell them what sort of look you're looking for, your price range and size and they will suggest a complete outfit for you. 

This lead me on to the idea that the app could create complete outfits for you based on the items you photograph and put on to the app, your style, where you're going to wear it to (by syncing up with your calendar). The app will therefor save you time but also suggest outfit ideas that you might not have considered, using items that you may have forgotten you even own.

The app would most likely be used late at night whilst the user is laid in bed thinking of what to wear tomorrow, or if they're rushing home from work, running late and want to know what to wear so they're not stressing about it once they arrive.

User profiles:

Female, 25, works in an office, likes to socialise with friends, work orientated and professional, wants a more exciting job so dresses stylish to work.

Female, 20, university student, very big wardrobe, goes out with friends and on dates, at uni till late & struggles to find the time to plan what outfits to wear.

Female, 30, doesn't have a lot of clothes, struggles to find time to go out and see her friends as she's always working, needs the app to make new outfits out of the limited choices she has.

group discussion

This morning whilst discussing my idea with some peers we developed some more features for my app in order for it to solve more problems. The ideas which were discussed were to include:

• A wash icon - where you can see what clothing is in the wash, and there for not available. 
• Link to the weather forecast - this will allow users to choose weather appropriate clothing, also the app could suggest items based on the weather. 
• Link to depop - depop is an online selling platform where people auction off their old clothes, similar to eBay, but purely fashion based and predominantly used by 16-30 year olds (which is the audience i think i'll target the app at), by including this feature it allows the user to reduce the clutter in their wardrobe by seeing what they don't really wear and giving them the opportunity to make money and reduce clutter. 
• Favourites section- this feature will allow the user to see their go to outfits which they know work, to save extra time if in a rush 

only studio

Today the class had a talk from only studios co-founder Matt, only studio focus on screen based design and through his presentation he gave us useful insights in to studios design process.
One point which he told us about which i found very interesting is the process they go through of making 5 personas of people who would use the screen based design.
He noted that by creating personas of the intended target audience detailing a characters name, age, job and interests provides you with the opportunity to see if your design is suitable for your customers.

STUDIO BRIEF 2: design for screen - have you seen clueless?

The brief is to create an immersive and engaging screen based user experience for a media of our choice such as website, app, streaming or a service etc etc...

I need to identify the client, problem, target audience an overarching aim of the project. The brief requires us to maximise the potential of digital devices, available to be global and use mixed media.

Other things i need to consider are the process and procedures involved in designing for screen, the relationship between designer and developer, the role and skill set of The developer and research in to what already exists and how my design can be innovative.

Whilst thinking of ideas for my screen based design i began to note down ideas of problems i face

• not drinking enough water - already an app for that 
• killing plants (by not watering them) 
• not knowing what to wear 
• clothes not looking right once they arrive from online 
• shuffle not playing the right mix of random songs

The problem i feel as if has the most potential is the not knowing what to wear/clothes not looking right. These ideas, and a solution came to mind after watching the 1995 teen film Clueless. 

Within the opening scene of the film, the main character Cher is deciding what to wear using a t.v screen based application where she can see all the clothes she has in her wardrobe and choose an outfit to wear, rather than finding different things and actually trying them on.

This saves time and makes the whole process a lot simpler. 

My idea is to create an app which allows the user to photograph all of their items of clothing and store them on the app, they can then put together items to make an outfit and save the time of looking later. The app will also allow the user to see what potential items that they are considering buying would look like with items they already have. This idea also crosses over with the 'clothes not looking right once they arrive from online' idea as it also tackles the issue of having to send clothes back if they don't look right once they arrive. 

GARM GUIDE PRODUCTION

 I used a sewing machine to bind the Garm Guide, using translucent thread. The guide was going to be sewn by hand however using a sewing machine felt more appropriate as it references the ways in which the clothes featured inside the Garm Guide were made.

GROUP CRIT

After presenting the Garm Guide (although not yet fully finished, or printed on the correct paper or bound) to the group, i received feedback.

Many people commented that the style of the guide was appropriate and visually engaging and interesting, although i received feedback from several people commenting on the cluttered stle of the guide.

As stated in the rational i wrote to accompany the guide, the style is meant to be cluttered to mimic that of a vintage/charity shop where you are looking through many many items of clothing, of all different styles and colours in order to find the one item that you actually want.
After showing my client the guide and explaining the choices behind the design, he agreed that they were appropriate.

I feel as if the people who left the comments regarding the cluttered design failed to fully read the rational, in order to fully understand the design choices.

PAGE DESIGN

I began to design the inside of the publication. Above you can see examples of some of the pages so far, and shown right is a pattern illustration i've been using throughout them all.
The design i was hoping to communicate through the publication pages is the funky element of vintage clothing with a creative and illustrative twist.
The layout of the pages in quite cluttered, with the addition of wavy text in order to provide information but also to reduce space on the page. I wanted quite a closely spaced layout to make a reference to the cluttered nature of the vintage/charity shops most of the outfits are from, with the idea that people are always having to fight through the clutter to find what they want.
The illustration (left) is used throughout the background elements of the pages, i created a design taking reference from the lines in the fashion illustration, and edit the colours and saturation slightly depending on the colour scheme of the image.
I showed my client the first few pages and he was very very happy with them, commenting that i've managed to turn the content in to a really visualy interesting and relevant design.

NEW COVER

After designing the title page of the publication, the previously designed front covers didn't look like they belonged with the style the pages are going to go in.

Taking a new approach with the front cover design, yet still wanting to keep some of the shapes from the initial design as i do think that these represent the clothing appropriately, i collage some of the images that will be within the book together.

I then used the previous pattern design to take away sections from the images, to not only hide some of the outfits but to also allow room for further imagery, in order to give the reader a taste of whats inside but not giving too much away. 

I then collage together some of the outfit illustrations. 

The cut out 35mm photographs were then laid over the illustrations. 

I believe this design works well in communicating to the reader the theme of the book, whilst still including the pattern from before but in a much more visually appropriate way. 

PAGE DESIGN

As you open the book, before getting to the double page spreads there will be a page which includes the title of the publication. I wanted this page to give a glimpse in to the rest of the book and so i've created designs using scanned negatives from the images inside the publication along with some of the illustrations and the title written in a wavy type style.

This is the initial design, using a thicker hand drawn type. The type was too big for the page and got lost when it hit the white space within the gaps of he negatives

I then drew out a smaller, thinner title type, and overlaid some illustrations, more of which will be found through the publication.

I edited the colouring of the illustrations slightly in order to go with the colours of the negatives (which colours have also been adjusted).

I want the first page to give that vintage and creative feel, i really like the style of this page, however i'm now questioning the appropriateness of the front cover as it stands.

COVER DESIGN

I started designing the cover by hand drawing imagery similar to that which can be found on 'funky' clothing. I believe this clustered cover concept will work well in providing the publication with an eye-catching and bold cover, it will also be cheaper to produce and more durable than using actual fabric on the cover whilst still relating directly to the clothing within. 

I began to add colour to the pattern after vectorising the lines, i believe the black tone works better than the white as it gives it a more 80's/90's feel which relates to the type of clothing pictured within the publication.

 I tried out using more colourful tones rather than a black background however i'm not sure which one is more appropriate.

After consulting with my client he preferred the black background with accents of colour within the patterns.

The next step is to create a number of different variations of colour in order to provide the potential buyer with option, further to this, having different covers adds to the overall subject of the Garm Guide, as the clothing is mostly from vintage shops which stock limited amounts of each item and so it adds to the one off, unique aspect of the content.

I've created 4 different variations for the cover of the Garm Guide (see left).
I believe these are appropriate to the theme of the book. Although there is no text on the cover, i think the pattern works quite nice just on it's own, the title will be on the second page as you open the book before getting to the double page spreads o the clothing.
This patterns will also be used within the lining at the front and back of the book for the first and last page (printed on the back of the cover). The patterns that i will create to go in the background of the images will be designed to look in place against these patterns to ensure continuity throughout the book.

VILLAGE BOOKSHOP TALK

Today we had a talk with Village Bookshop, they discussed what they look for in publications that they will sell in their shop. There was one point of the presentation which i found very relevant; "every aspect of the design of your publication should say something about the context".

I've been having doubts about my clients idea for the book cover, he wants material on the cover however upon thinking about this concept further it isn't going to be appropriate.
Originally my client wanted the whole cover to be covered in shirt material, i told him that this wouldn't work for the £3 budget and he agreed. We then thought of having some material within a shirt pocket shape on the cover, we both agreed that this was probably the best way to include material on the cover yet keep the costs down, however after sketching up cover designs, due to the cover not being hardback the thickness of the fabric will not work well with the thinness of the paper and will in result just look out of place.


Looking at some examples of the books they stock in Village Bookshop, i came across a cover design which inspired the new direction i want to take with the Garm Guide.
This cover design has a similar line style to the lines i've designed for the Garm Guide typography, along with the illustrations within.
I think if i follow my idea of creating a line patterns for the cover, it will be appropriate more so than using material as it isn't subjective to one item in particular, it looks fresher, it's cheap to make and we won't have to worry about the material becoming loose if students are carrying the guide in their bags.

Another element of the design which i'm going to adjust is the colour scheme. My client expressed his opinion of using purple, blue and yellow for the colour scheme of the cover (as the inside pages' colour scheme will depend on the tones within the photographs) however i think going down a more limited and unexpected colour pallet might be more effective.

Due to the inside pages being so colourful and using so many different tones, my idea is to use a bright colour on the cover to mimic the bring patterned shirts with white illustrative patterned lines all over the cover similar to the design i found on the cover of the book opposite along with the books title, as the lines within the typography i'm using will be similar to the lines which make up the cover pattern.
With this cover idea, it keeps the design minimal, to contrast with the busy content, using one colour gives me the freedom to make a series of different covers, perhaps every book can have a different coloured cover, to link in with the idea that each piece you get at a vintage store will be different, all with the same lines on them. By creating a rather simple cover i think it will bring a sense of balance to the book whilst still referencing the content within, but not in an obvious way.

I'll discuss with my client this idea once i've made it and express why i feel this is most appropriate,

ILLUSTRATIONS AND TYPOGRAPHY

Below are scans of the finished illustrations for each outfit that will be featured in the publication. These illustrations will be used alongside the photographs and pattern illustrations (which i will be doing today based on the patters within the illustrations).

After consulting with my client on the typography design i decided on the final choice of hand drawn type. 

I decided to go with a very wavy type style, to represent the 'funky' patterns of the clothing inside and the type of lines within the illustrations within the book. 

The type will be used throughout the book including the cover. 

STOCK AND BINDING

Whilst talking to peers about stock considerations, i developed the idea of using a mixture of different recycled paper stocks throughout the publication.
Recycled paper will be used due to the second hand nature of most of the clothes in the book, and a mixture of stocks was thought to be appropriate as it represents the different places all of these clothes have come from, and how no one vintage piece is ever (most likely) the same.

The publication will be stitched together to again mimic the stitching of clothes, not only does this make a link to the content but it also keeps the costs down which makes it appropriate for the price range.
I have not yet decided what stitch to use however i will look in to this further after the publication is designed.

ILLUSTRATIONS

Below are the first sketches of outfit illustrations for the Garm Gudie. I tried to mimic the patterns of the clothing in an exaggerated way to make them more visually pleasing and to push the 'funky' and 'wavy' characteristics my client wants this book to have.

My client was very happy with this illustration style and so i will complete the rest of the series (1 illustration per outfit).
From the patterns within the illustrations i can then begin to create the background pattern illustrations by using similar lines and colour to ensure consistency between each double page, and to bring each element together.

CLIENT IDEAS

I sat down with my client again yesterday to discuss any further ideas he has before is tart with the production, he really liked the illustrations i produced to go with the 35mm pictures (see next blog post), he also thought the removable strip with the addresses of different locations was a very appropriate idea, however after receiving the content (text) for the publication, a slip wont be on each double page spread as only some of the people photographed bought their clothes from places in Leeds.

When discussing colour schemes for the publication, my client suggested purple blue and yellow, i will see how this works, however as the content for each double page spread has such varied colour pallets perhaps using a black and white cover with a splash of colour may be more appropriate.
I discussed my idea of having the cover saddle stitched down the side with the cover content being the name of the guide written in a wavy sort of typography. My client on the other hand expressed his ideas of having the cover made completely out of shirt material (referencing the clothing within the book), i explained to him how i don't think this is appropriate for the cheap price range and he agreed, i then came up with a sort of compromise, through the form of perhaps illustrating a shirt pocket somewhere on the cover and having a swatch of material within it, this way the costs will be reduced as it's only a small amount of fabric per book.

The client made it clear that he wanted the outfits to be the focus point within the images he took, but he also wants illustration to be incorporated within each double page. We discussed a few ideas and decided that removing the model from the background of the image may work quite well in ensuring the focal point is on them and not the background, and then place it in to the illustrations which will be on the page, including: outfit illustrations, typography (using the interview answers provided) & appropriate pattern illustrations.
Although this idea may work, i believe it will be best to leave some sense of structure within the pages (coming from the 35mm prints), the most appropriate idea in my opinion would be to cut the model from the image, slightly shift it up or across a few centimeters, which leaves room for the illustration to come through in the background, yet still keeps some structure to the page and ensures that the eye is first drawn to the actual image and not the illustrations and type which the cut out model may get lost within.

CONTENT

Below is the content provided by my client. Images of people in Leeds have been taken on 35mm film, accompanying the images is text detailing how the person photographed would describe their style, how much they paid for the it, where they purchased it from and whether they've always dressed like that.

it's just me, waistcoat: £5 Blue Rinse, cardigan: £40 beyond retro (online), "my style definitely changed when i got to Leeds".

(top left) New Age Witch, shirt: £8 from a Leeds Beckett kilo sale, "My style has developed since i moved to Leeds".




(bottom) no text given for this image.

(top) wonderful, shirt: £10 from the British Heart Foundation in Leeds, "i was born with this style".






(bottom left) err...I dunno, shirt:  £10 from H&M, "i've always dressed this way, i've had this shirt for a while"





(bottom right) Leeds boi, shirt: £15 froma vintage seller on ebay, "I've always appreciated a funky shirt".

free spirit, skirt: £15 from an online vintage store, "i've always dressed like this".

(top left) circus chic, skirt: £8 from a vintage sale in Leeds uni union, "i would only wear this in Leeds to be honest".



(top right) skaterish i guess, hat: £20 bought from Natterjacks online, "For the past few years i've been dressing this way.



(bottom left) organic, £50 for the lot, the hats a family heirloom, shirt: Market, "i was wearing this style before Leeds, organic is a lifestyle, not a choice"



(bottom right) invisible, guys jackets: free from his brother, girls jacket: £12 New Look, "My brother was" "i got mine to match his".

foxy, skirt: from a vintage market in Leeds, "my style has got more funky since i moved to Leeds"

(top left and right) just a mess, shirt: £2.50 from reclaimed urban outfitters, "i bought this stuff in Leeds but i have always kinda dressed the same.

Here are scans of the film which my client wants me to experiment with incorporating within the publication.

.