OUGD503 - Responsive - Penguin Books - Final Feedback

After finishing the cover I had the opportunity to receive some feedback, asking some really specific questions insured the feedback was relevant and appropriate. 

Question 1. Is the concept clear? If no how could it be improved?

- Concept clear and has been executed well.

- Clear link to newspaper headlines from event

- Clear and with an attention to detail that reflects the book. 

- Bold  and reflects the content of the book

- Newsprint adds to the context

- Try changing the opacity of all type apart from title?

Question 2. Should the cover look more aged? More texture?

- More texture would take away from the content. 

- Would withdraw from the legibility 

- Already have the right balance

- Try a more yellow paper

Question 3. Does the back cover reflect the front? Should the back look more or less like a newspaper?

- Yes it continues the newsprint narrative.

- reducing the white space might help continue the newspaper theme

- Maybe use another picture to fill the space

- it flows nicely now from the front and back.

- maybe put the text into a black box

Question 4. Any ideas for the spine?

- Neutral design with only title /authors name. Keep type consistent

- A black/contrasting colour

- a bright colour maybe? red could make it stand out and contrast with the cover

- Front cover title horizontal across spine 

- Very simple, a bit of ageing 

- as simple as possible

Overall this feedback has been useful in ensuring the cover as done what was intended. It seemed that the cover was well received and I am confident about taking the designs forward.

OUGD503 - Responsive - Penguin Books - Final Cover

 After printing the cover on some really thin stock to give the impression of newsprint I then scanned the cover. This gave the design an extra texture that was needed but allowed the content to remain the central focus. 

Overall the layout of type, texture of the paper and type has come together to make a really successful cover. 

OUGD503 - Responsive - Penguin Books - Finalising Design

This image shows the more redefined cover, removing the copy from the right had side allowed the cover copy to be much more direct and inline with the daily prophet covers. 

 Though the overall delivery was much more in line with my original idea it wasn't really right, experimenting with some different typefaces, weights and page layouts allowed me to see what looked most natural and together.

I decided against the use of an image on the front cover, this would put the whole focus onto the bold type at the forefront. 

Each of the letterforms in the typeface has been slightly rounded and made to be more irregular this is to give the impression of a woodblock printed cover. 

The balance of texture was very important, I wanted to give the impression the newspaper was quite old but not totally unclear. 

With the subheading ' A true account.... ' I experimented many times with typefaces and spacing, this type shown seemed to have the best communication, balance with the other imagery and a directness that reflected the contents imediacy.


















As well as the cover the back seemed to be take a much better shape, the hiearchy of information was more relivent and seemed more like a back page of the cover. Informed by the daily prophet cover I used the same outline image with some small type spelling out 'In Cold Blood - Truman Capote'.

Overall I was pleased with the communication of the covers and how they related to the theme of the book as well as the target auidence.

OUGD503 - Responsive - Penguin Books - Designing Final Covers

These images show some of the initial cover designs from the original idea, the research into newspapers and the Minalima daily prophet work. Overall the communication was not right as there was too much extra content and the key information title, subheading and author wasn't the central focus. I additionally experimented with some blood drops coming from the word 'blood' but this seemed childish and didn't reflect the serious nature of the book. 

This image shows an initial mock-up of the back cover but again the overall hierarchy and communication needed much more work. 

OUGD503 - Responsive - Penguin Books - Old newspapers

These images of Newspaper Covers were very useful in understanding the style, amount of texture and use of type on show during the time the book was published as well as newspapers about the murders themselves. 

This imagery has served as really useful research for my book covers, when designing the printing out all this imagery and referring back to it constantly helped understand how aesthetically the cover should look. 

OUGD503 - Responsive - Penguin Books - Daily Prophet

 This work by the studio Minalima for the fictional newspaper from harry potter shows amazing use of typography and graphic imagery.

These works in part have really inspired the designs for the In Cold Blood. 

The use of large type and really direct communication was really interesting and would make a great book cover. 

The extra level of typographic intrigue is another design feature to carry through into the cover designs. 

The apparent texture of the paper, type and the way the covers have been printed makes for a more tactile piece of imagery. 


At the Minalima store in London I had the chance to look at these newspapers up close and the level of detail on show close up is something that is really interesting and gives an extra level of intrigue. 

I hope to replicate this level of professionalism and direct communication in the In Cold Blood covers. 

OUGD504 - Design for Screen - Designing App

Opening page and prompts.

 Informed by the great user interface of Tate.org these three prompts What? Where? When? come together to make up the the opening page of the app. The idea is that this would allow quick easy access to the information the user is looking for as well as giving options for if the users doesn't know what it is they would want to see.

Simplifying the information that is on show is important as often there would be an overload of content. 

Navigation bar.

This image shows the navigation bar, using three simple shapes inspired by the Bauhaus designs using a triangle, circle and square in the colours shown. This relates to the theme of art but in a simplistic way that doesn't take away from the content on show. 

These drop sown menus give categories of art, about the galleries and what day/week/month etc. 

This quick process will thin down the results considerably and show the user hopefully exactly what it is they want to see right away. 

The option to skip could be a feature of this screen that allows existing users to get to where they want right away. 

Home page.

The next page would be the results of the initial prompts in this case 'Everything', 'Amsterdam' , 'Today'. 

This page shows the generous space for the map, this will enable the user to see large where they are and what is around them - something highlighted in my feedback as important. 

Below the map shows the most relevant galleries from the initial prompts, if the user doesn't use these prompts this would show the most popular and appropriate exhibitions related to the location of the user. 

With the navigation bar the colour of the page being used is the only one to show up, this allows the user to be sure of the section they are in as well as linking to the art theme of the app. 

Informed by feedback what is on show for each exhibition is key in the delivery of the information. 

This hierarchy of information needs to show, whats on, where, will when and how much. Using coloured, italic and varied weights of type. Images alongside this text was another feature that was highlighted through feedback as key, using horizontal swipes allows the users to see more than just one image of each gallery.

If the map is clicked on the view is expanded this allows the user to zoom in and out to see in more detail what is around them. Keeping the search bar and navigation bar allows the user to search more specific exhibitions, artist or galleries. 

Continuing from this if the users clicks on a gallery in the map this large box would pop up and give information on the gallery, what is on etc. 

The size of this page needed to be readable as well as being able to be navigated, everything that can be clicked on and scrolled through needs to be at least a finger width. 

This page needed to show further information on the gallery keeping with the same design style. The same page hierarchy of the exhibitions was kept consistent. 


On the image of the building there shows a slider so the user can look at more than one image without having to load another page. 

As a part of the home page if the user is to not use the map and scroll through the exhibitions in the list on show this is the kind of thing that they would see. The same page set up and hierarchy has been used to keep consistency and insure the information is delivered in a clear and concise way.  
There is still improvements to make on this page but overall the way the content is laid out is clear and effective. 

In apps like Instagram the user is give an option to how they see the information, in a list view or a grid, this could be something to consider with further developments.

If the viewer is to click on an exhibition this drop down extra information is shown, giving again further information into the gallery or exhibition. 

Again using the slides on the image so the user can see more about what it is they are going to be seeing.

How this drop down is animated is another design consideration and need to be worked out when it comes to it. 

Three features that where highlighted through feedback as being useful is the option to - Buy tickets - Add to Map and Add to calendar. 

Other pages that will need to be designed for the home page could include, another page for specific museums or galleries, Artist specific pages etc.

Explore.

The idea of the explore page is to give users that have no real idea of what it is they want to see a range of options. 

Using the yellow triangle as the navigation to insure clarity of information throughout.

These articles would be changing and updating constantly in relation to where the user is and what it is they want to see. 

Clear and simple type insures what is being shown can be understood straight away. Large images allow the work to be the focal point. This explore page would hopefully give more of a level plain field for smaller galleries.

This page in the explore section has been taken from an article by 'The Guardian' showing how these pages would be laid out. Showing large images alongside relevant information. 

The page layout and typographic hierarchy allows the relevant information to be clear.

Profile.

The profile section is the final of the three signified with a red square.
Informed by feedback a calendar, information about personal galleries and personal artists were highlighted as important for a profile section.

With this in mind the profile section has been designed to be familiar to social media users, once again using the same typeface to keep the branding of the app consistent. 
































Influenced by the Apple design guides and their own calendar I have designed these simplistic user friendly calendars showing the weekly, monthly and daily views. 


































This page shows the daily view with a exhibition in the calendar, when the users clicks the add to the calendar button this is where the information would go. 

Conferring with my class mates I asked what would need to be shown in the profile section, the idea of being able to send notifications to friends via Facebook and Instagram about exhibitions was a feature that seemed useful and relevant. 


Further pages to develop on this page could include the My Galleries, My Artist, favourites, interests, share and add to maps.

With the icon for the app it seems appropriate to use the three shapes as it relates to the overall identify and navigation through the app. 

The name is another difficult decision, the name Museo Map seems relevant appropriate and more universal. As the app is intended for global use this could be an effective name. 

With the large amount of weights and sizes to the typeface this allows a consistency throughout but conveys very different kinds of information.


Overall so far the app seems to be very appropriate and innovative keeping up this level of professionalism is key to the communication of the solution.

OUGD504 -Design for Screen - Wireframing

Wire-framing - At this point it after researching into my problem, analysing what must be included and beginning to look at the hierarchy of information. These three prompts seemed an effective way of finding out what the user is really searching for and stream lining the information that is on show. Using the wire framing techniques that Erik Spiekermann suggested printing out the moblie phones and drawing directly onto them to gain an understanding of size and scale.  

This image of my site map informed my initial wireframes. 

Using three different sections allows the user to know exactly where they are in the app, as well as where to find the information they need. These three images represent 'Explore, Home and Profile. These three sections become the basis for the rest of the design, this way of breaking up information is a design technique seen in many app designs like Instagram and Snapchat. Vertical swipes are often the way to navigate across these three sections. 

The three images above show other screen that will be needed for the home section including, further detail on a exhibition, an option to see whats on via the map view. These loose sketches will inform my further designing. Creating wire-framing has allowed me to see how the scale of certain information will effect the overall communication of the apps content. 

These images show the use of calendar, this was highlighted in my feedback as an important part of the profile, the users want to be able to see adjust and personalise there calendar related to their own interests and galleries. 


These wireframes are a useful starting point for this project and will need to be developed and built on through the design process.