Monday, 26 December 2016

Wireframes


Title/Logo: This is the loading page once the app has been accessed. The logo is positioned central to focus the viewer and set the tone of how the app will appear throughout. The large scale of the logo was decided to be impactful and rememberable, hopefully leaving a lasting impression.


The Logo will be a feature throughout the app, making a visual statement on the majority of the pages to help keep the aesthetic alive and to constantly remind the viewer what app they are using.

This is the landing page of the app, where the majority of pages will link back to. I kept the three links central to the page as once the loading page fades out they appear in the same position as the logo, making it flow more and easier on the eyes.


The large box represents the link to the uploading of the photo for the image search. This was created large purposely so the viewer can basically click anywhere within the square shape. A pictogram of a camera will also be positioned within the box to represent the image upload process without having to put in extra text. This was a common theme seen throughout the apps that have been researched, a symbol/pictrogram can communicate much more than a word can in some cases.

At the bottom right there will be an arrow to take the user back to landing page. This feature will continue throughout the app.


This represents the link between photos being accessed on an iPhone/Android. The design represents a list of the current images that are in the viewers "Camera Roll" so the correct image can be selected to enable the image search for the price comparison.


Similar to prior design, with included link to upload the selected image. Also features the option to exit back the landing page.


This showcases the original product, pricing, name, brand name and selected photo. Following this are the cheaper alternate options showing an image

The text boxes for the original product have been made larger to showcase the dramatic price difference and to make appear separately from the new options.




Barcode section so a product can be scanned in person, accessing the viewers camera to do so. Also features an alternative option to type in the barcode if the first option fails.




URL entry box with "search" button. 

  • The layout was designed to be simple, easy to use and clear with its direction
  • Negative space has been included heavily to appear less intimidating and more relaxed
  • Large buttons have been used to make for an easy click 
  • Sharp shapes have been used to express a sleek, professional style
  • The backspace follows on from the safari aspect of the app
  • Large images will be used to attract the audiences attention 
  • Type used will be minimal, as younger audiences prefer more image heavy designs 



The above image shows how the wireframes work with each other.

Wednesday, 21 December 2016

Typeface experiments

After searching for many different types of fonts to use for the logo or main body of text for the app, these three stood out the most. They each have bold attributes and are all professional looking enough to represent a high end clothing brand theme. Although they will be representing the feeling off one. Layout is important when it comes to creating a theme, but writing is what communicates language the most. 

  • Editorial 
  • Sleek, professional looking
  • Appears striking and bold in capital form
  • With kerning it adds a more dramatic sensation 
  • Has a serious tone of voice due to its straight/sharp features


  • Rounded edges give more of a friendly vibe
  • Softer on the eyes
  • In capitals with kerning, the F and the double E's look very similar and create a small illusion that could be quite distracting, making it illegible 



  •  It's quite neutral, could be for multiple types of brands/apps
  • Has neither male or female attributes that suggest it has no gender to stereotypically represent





Thursday, 15 December 2016

Target audience/general theme

The younger generation the majority of the time have a restricted budget when it comes to spending money on clothing. Many of us are students or are working themselves up through the social heidchary within careers and are often faced with low pay brackets and lack of working shifts.

Being young, fashion is very important to many people. It's often difficult viewing high end fashion shows from laptops and observing the latest trends from Instagram feeds, knowing those designs are out of our reach due to their price tags.

Shopping for cheaper alternatives on the high street market is the only solution, however, searching for a cheaper alternative is very time consuming and its lengthy process.


Wednesday, 30 November 2016

Children's cover award chosen brief

The Secret Diary of Adrian Mole Aged 13 3/4 by Sue Townsend

The Brief

You are invited to design a cover look for The Secret Diary of Adrian Mole to bring this much-loved classic to a new generation of readers. The design should ensure that this original and hilariously funny book remains a must-read for every child.
Your cover design needs to include all the cover copy supplied and be designed to the specified design template (B format, 198mm high x 129mm wide, spine width 16.6mm), incorporating the PUFFIN branding and all additional elements such as the barcode.
What the judges are looking for:
We are looking for a striking cover design that is well executed, has an imaginative concept and clearly places the book for its market. The cover should encourage children to pick up the book and buy it for themselves and should also engage adults to want to buy it for them.
While all elements of the cover (front, back and spine) need to work together, remember that the front cover has to be able to work on its own, and to be eye-catching within a crowded bookshop setting as well as on screen at a reduced size for digital retailers.
The winning design will need to:
  • have an imaginative concept
  • be an original interpretation of the brief
  • be competently executed with strong use of typography
  • appeal to the broadest possible audience for the book
  • show a good understanding of the marketplace
  • have a point of difference from other books that it will be competing against in the market
  • be able to sit on the shelves of a supermarket or ebook store as easily as it sits on those of more traditional bookshops 
Copyright must be cleared for all images used in your cover design and you must include a credit line on the back cover of your design for any third party images used. For example: ‘Cover photograph by Joe Bloggs’.



 Breakdown of the Brief


  • Has to appeal to children and adults (for them to buy it for a child)
  • "loving for a striking cover design... has imaginative concept and clearly places the book for its market"
  • All elements of the cover (front, back and spine) need to work together, but the front cover has to work on its own to be eye-catching in a crowded bookshop setting
  • Needs to designed for screen for digital retailers


Questionnaire

Question: "Would you ever use an app that searches and provides cheaper alternatives to clothing brands you possibly could not afford?"

Asked people who fit within the target audience.

Answers:

"There has been so may times where I've seen something expensive and never bothered to look up anything for a cheaper price. I'm quite lazy, but if there was an app that could do that for me I would 100% use it."

"That would be really cool to have, I constantly see stuff on blogs and sites and just wish I could afford that look and if finding a less expensive version of it was that easy... it would belong on my home page."

"Having something like that would be pretty useful, I'm always wishing I had something I can't have clothing-wise and it could help me out."

"I mean I am known for scouting out cheaper alternatives, but if the whole process could be done at the click of a button I'd happily use it."


All the answers I have received towards the idea of this app/wesbite have been extremely positive. This backs up my thoughts on there being a gap in the market for this kind of service.

Tuesday, 29 November 2016

Clothing app research




As the app loads a domineering logo of Topman fills the screen, which is a simple introduction, yet 
bold. This sets the tone for the app as it flows with a similar bold design. 

A 'sign in' page is something that is not necessary for my app as I feel it may slow the process down as it increases the amount of "clicks". Also it is unnecessary as the app will not be used for buying products, but to link them to the source of another.




  • negative space is effectively used
  • colour scheme use in type reflects the fashion photography/clothing displayed
  • more than three typefaces have been used
  • scale of type increased to create a more dramatic effect and to draw attention to the most important information for the user e.g. 70% sale









Friday, 25 November 2016

Personas for app

Age: 18
Gender: female
Salary: 12,000
Occupation: Recieptionist
Hobbies: Singing, acting
Do they buy clothes online: Yes
Shops they buy from most often: New Look

Age: 22
Gender: male
Salary: 20,000
Occupation: CO-OP manager
Hobbies: football, tennis
Do they buy clothes online: Yes
Shops they buy from most often: American Apparel

Age: 16
Gender: male
Salary: 8000
Occupation: Window cleaner
Hobbies: Rugby
Do they buy clothes online: Yes
Shops they buy from most often: H&M


Age: 26
Gender:male
Salary:26,000
Occupation: Office worker
Hobbies: darts, rock climbing
Do they buy clothes online: Yes
Shops they buy from most often: Topman, River island

Age: 17
Gender:female
Salary: 2,500
Occupation: Retail shop assistant
Hobbies:Make up tutorials, acting
Do they buy clothes online: Yes
Shops they buy from most often: New look, River Island, Topshop


Age: 20
Gender: female
Salary: 20,000
Occupation: Graphic designer
Hobbies: Craft, socialising
Do they buy clothes online: Yes
Shops they buy from most often: Urban Outfitters, Next, Very



From doing this exercise it is clear that most young people do not have the funds to spend on expensive clothing, and often buy bulk from much cheaper brands. From this it is fair to say that there would be a target market for the app.

Thursday, 24 November 2016

Millennial research

Basic statistics about millennials

To reach the Millennials and integrate a brand into their lives, you’ll need to understand the basics. There are roughly 79 million Millennials in the United States—25 percent of the population. The Millennials exceed the number of Baby Boomers (often their parents) by about 3 million.1. Millennials expect technology to simply work–so you’d better make sure that it does.

Millennials and technology

More than any other generation, Millennials rely on each other, sharing opinions with friends to make more informed decisions. They have technology at their fingertips (smartphones) and a number of platforms by which they communicate (Facebook, Instagram, Twitter, etc.).

Social media has transformed how this generation shares its thoughts and extends its influence over others. Stars, Likes, and comments have given them power to share their opinions and pass judgment on the things they approve and disapprove.

Whether supporting a cause, offering an opinion about a product, or simply giving their support to a political figure, Millennials know their voice has power—and they are wielding it.

Millennials are a social generation—and they socialize while consuming (and deciding to consume) your products and services.They’re looking for adventure (and whatever comes their way).They’re passionate about values–including the values of companies they do business with.

  • Large population equals more opportunities for the app to be sold
  • Strong knowledge of technology-no need for in depth intro on how to work it 
  • Design conscious
  • Strong values
  • Interlectual
  • Confident  

Tuesday, 22 November 2016

Coding lecture notes and future design considerations


  • Majority of websites use HTML or CSS combined with other types of languages. This is important to know as it is informative on the design restrictions and processed they use which needs to be carefully considered when designing for screen.
  • A database is used with a web browser which allows the user to switch back and forth between them when using certain website pages (specifically is there is many e.g. eBay has millions of pages)
  • Responsive - responds to the device it is being used for e.g. iPhone, laptop, TV screen etc...
  • This is especially important as these different types of user interfaces each have their own layout and design restrictions. e.g. mobile phones have a narrow perspective whilst a laptop screen is wide and spacious. Most likely apps have websites versions (or vice versa) which means modifications need to be applied. They also need to be carefully considered as each interface has a different way of interacting with it, which means different results for both is necessary.
  • Being able to get from page to page is a vital tool that needs to be applied to section of the user interface. Achieving this means the user can have quick easy access to previous pages or different areas. 


  • One way of solving this issue has been proven by using the "Hamburger icon"
  • This provides a fold down list or a menu which allows a user to access different elements of the website or app without having to go back to the home page.
  • However, this design means there are two levels of interaction the user has to go through to reach another page. This is somewhat disengaging compared to a one level interaction and is something to consider when designing an user interface. Interaction and user experience is really significant for a user of interface. The function needs to be easy to use, fast and engaging if the user is to stay interested and happy with the interface.


  • When designing for screen the resolution is usually set at 72. This seems quite low and restricting, although it provides a fast effective service.
  • This is important though due to the fact it only takes users 2.6 seconds to divert from a user interface if it has not loaded quickly. Sticking to the resolution restriction is highly beneficial.


  • A major factor to consider when designing is that it needs to be accessible to everyone.
  • Often there is a restriction on the typefaces that can be used which encourages designers to use image based type instead of coded language. This becomes problematic as an image is not searchable by type for the most part. However, a solution to this is by using Google fonts which allows the use of pretty much any typeface. This can also be problematic due to the fact if a bespoke/personal typeface was to be uploaded it is technically there for the whole world to see and is easily accessible.
  • Another consideration is the license fees of using particular typefaces, especially if they are not free. They often come with charges, specifically for on screen design as it is more accessible than a print out. The whole world can access anything that is put out on the internet which can make it sometimes quite vulnerable to certain elements of the design world.


Final brief

Problem

The inability to be able to afford top brand clothing.

Objectives 

  • Provide a solution that can solve the issues of being unable to find a piece of fashion
  • Provide a system that successfully manages to recognise an item of clothing from an uploaded photo or other types of ways of image searching
  • Create an identity for the service and design that exercises an aesthetic of simplicity with easy to use interface


Target Audience 


  • 16 - 26 year olds
  • Young people with less money i.e. students

Monday, 21 November 2016

Final main ideas with formative research

Idea 1

The main aim for this i
Copy My Data



Online reviews

"Changing from Samsung S4 to iPhone 6 and have been messing around for a couple of hours to try and get the calendar and contracts onto my new iPhone."
"It worked perfectly for me! It did freeze with only thirty more pictures left to transfer but I just re-done it! Very quick!"

Yosend

We Transfer

Google Drive

iCloud

Idea 2





Thursday, 17 November 2016

After Effects workshop

Session 1




 Session 2




Session 3


Session 4

motion blur

effect controls - adding colour etc...





Potential briefs

YCN (23rd March)

Roald Dahl

http://www.ycn.org/awards/ycn-student-awards/2016-17-ycn-student-awards/briefs/roald-dahl-literary-estate


  • illustrate iconic characters/scenes from favourite stories
  • should appear as if they were part of a published series
  • "all styles welcome" - open to different types of illustration 
  • has to be relate to the logo design
  • aimed at 5-11 year olds
This competition brief has little restrictions and is quite open to how the outcome has to look. However, the target audience needs to be carefully considered throughout and there are minor restrictions on how the overall look needs to be, yet at the same time it places no restrictions on the style of the illustrations. 


Something I will have to avoid is the iconic Quentin Blake style as it is so well known and widely used for the Roald Dahl book series. My outcomes would never come out looking the exact same as this style, but it is something to consider when designing. Creating something that contrasts with this style means it is potentially going to get more attention.

Thirsty Planet


  • create a campaign - quite unspecific about what they want i.e. poster, video etc... means it is open to interpretation 
  • branded at 18 - 24 year olds
  • part of the profits go to charity, so this needs to be clear/demonstrated 




Penguin - Adrian Mole


I have read this series throughout my childhood, and have thoroughly enjoyed them. They were in fact recommended by my mum who read them when she was a teenager too. Adrian's character is instantly relatable and a hilarious read. 

The brief states...

"We are looking for a striking cover design that is well executed, has an imaginative concept and clearly places the book for its market. The cover should encourage children to pick up the book and buy it for themselves and should also engage adults to want to buy it for them."

  •  






Wednesday, 16 November 2016

Initial Ideas and feedback

These initial ideas were inspired by personal problems with different types of user interfaces that I use daily for myself. i.e. social media apps, websites.

1. Photoshop app

Problem:

Majority of the time the image quality on devices (especially phones) can be quite low quality or sometimes underexposed/overexposed. Although now almost every iPhone or Android has some sort of image editing software build in with the phone that can able you to change elements of the image whether its through colour, brightness/contrast, or through filters. I find they do not produce a good result and only offer a small amount of tools. Another an alternative would be to download an image editing app that would have a larger variety of tools, I find they are again unsuccessful in creating a better image quality and fail to present a clean, simple, easy to use design layout. Adverts constantly pop up and the interfaces are often tedious to use.

Feedback and afterthoughts:
  • Found out there is actually a Adobe Photoshop app that exists called "PS Express", I somehow did not know about this and am happy I can edit on the go (even if it means my idea already exists). However I could look at the faults/issues within the app whether its with the design, layout or ability to work as a successful user interface. 
  • One main issue is that it only offers basic editing features, I could push this further and attempt to include more complicated editing capabilities. This would have be a trial and error type of process as it is understandable editing from a mobile device is not an easy way of working due to the size restrictions and lack of control.

2. Clothing comparison

Problem:

Seeing or wanting something online that is out of ones price range is a frustrating thing. We all want what we can't have... expensive clothing in this case. Finding cheaper alternatives for an expensive item can be a lengthy process, where to start, where to begin, looking on site after site searching for a similar product is a depressing a practice. A process where an image or website link could be uploaded and as a result cheaper alternatives pop up is a much easier function.

Feedback:


  • The feedback I got for this particular problem/solution was rather positive.
  • All fellow peers agreed they would find it useful and claimed they would each download the app on the basis of its promise.
  • One particular issue came up with 

3. Data transfer



Feedback:


Monday, 14 November 2016

Mindmaps



As a group we wrote down interfaces and their user experiences we each come across throughout our daily lives. 

Wednesday, 9 November 2016

Evaluation

Evaluation


The whole process of creating this publication has been an learning curve that has helped give me a complete understanding of the art of creating a
publication from scratch.

One challenging part of the brief I found was to adapt the photographs to a publication and then create a purpose for them to slot into a commercial
style of book that has the potential to be sold in a serious capacity. The restrictions of applying the method of the book making into something that has to focus on commercial aspects was also something I found quite difficult as my market was only small and niche.

The binding of the book was also a challenging process, I faced many set backs when creating the actual bind due to the thickness of the book and the awkward way in which the heavy features obstructed the process.

However, I take pride in the way in which my publication turned out. It is no best seller, but the idea behind it is constant and theme is continuous
thorough, whether it being the chosen GF smith stock or the quirky features that attempt to get the reader involved with their environment .

Friday, 4 November 2016

Book binding production


The first attempt at sticking down the photo holder feature was tried with PVA glue. The stock did not take to the glue as it is not strong enough.


To solve this problem sticky double sided foam pads were used to help create a strong fixture. The right side of the book was purposely not lined with them so the final stitching could be more easily done.


The book pages where divided into three sections so the process of stitching could be done more efficiently. However, further on it got more difficult to manage three so the book pages were split into two sections.




This page needed to be clipped separately to the rest to ensure the outline cutout was in line with the logo behind.



A template was used to measure out the correct lining of the holes for the thread. 


Breaking through these thick stock sections proved to be very difficult, the needle constantly got stuck and it was quite a frustrating process.

I only told later on after I finished binding the book that I could have used a drill to create the holes. If I had known this it could have saved a lot of time which was consumed with just getting the needle and thread through all the stock.





As all the holes were not perfectly in line like they could have been if the drill was used, I found I had to pull apart the pages frequently to get the needle through which often made the thread become slack around spine.