OUGD504 - Design for Screen - Further research into the problem

Research and Insight -

During a lecture on what stage we should be at so far it became aware to me that my research into the problem may not have been as in-depth and thorough as it should be to best answer the problem. Identifying some aspect highlighted in the lecture and answering them relative to my problem.


User Cases - 

What is on in (London) this week?, Where is it?, When is it on?, How much is it?, Has it got any reviews?, Where can I get tickets?, What am I going to see? (pictures).

Where can I see (Picasso) paintings in (London)? Where is it? How long is it there for? What else is on show there? How do I get there?

What is on at (Tate Modern) today? How much will it cost? When is it on till? What are the reviews? What will it look like? (pictures) How do I get there?



Personas - 

- Male art student, 21, living in London, some knowledge of international galleries and exhibitions, no real knowledge of smaller independent galleries, interested in photography and the arts, users phone all the time, constantly checking Facebook, Snapchat, Instagram. Lives in Camberwell studies fine art at UAL Camberwell. Low to medium income, will spend money on galleries if its worth it. 

- Female Design student, 19, living in Amsterdam, no real knowledge of the arts but a desire to find out more. Always looking for free or cheap things to do near her. Has an Iphone but doesn't use it all the time. 

- Male product designer, 40, living in Berlin, Loves the arts and always wants to find new things, always trying to find fun things to do with his family on the weekend, Medium to high income, disposable income, will spend money on going to museums every weekend.  

- Female, waitress, 30, living in Paris, loves getting out visiting exciting things, wants to know more about the arts but hasn't had the opportunity, very little knowledge about the arts but a will to know more, uses her phone minutely, passion for photography. 

- Male Chinese tourist, 27, visiting London, wants to see as much as possible in the week he is there, a passion for sculpture, art and design. Hates fashion and classical art, has money to spend on galleries, uses smart phone all the time.

- Married couple, 60+, Living in Greenwich, London,  has a membership to Royal Academy, Loves all areas of the arts, wants to see more, has an Iphone but finds it hard to use, wants to get out more, high to medium disposable income. 

SWOT Analysis

Art Map

Strengths

- Shows all galleries large and small (gives level plain field to smaller galleries)

- Gives a wide range of choice

- Personal to the user

- All information in one place

- No exclusivity, information open to everyone

- Encourages people without prior knowledge on the subject

- Allows users to find something new

- Bringing art to everyone

- Accessible 

Weaknesses

- Complex, overload of information

- Not specific enough

- Not everyone uses computers/phones

- May not reach the audience

- Hard to navigate

- Only showing cities

- How do I get to the gallery/museum

- Current and changeable times

Opportunities

 - Free Advertising for small galleries

- More people going to galleries

- Convocations in app about what people have seen

- App could sponsor smaller exhibitions

- Users can create their own exhibitions 

Threats

- non-verified galleries and museums creating exhibitions

- Not acquiring all information 

Refining Target Audience  

Who?

Individuals.

Age range - 16 - 60+

Gender - Both men and women

Non-Country specific, anywhere there is galleries museums, City Specific?

Based in mostly urban areas

Low to High income

Occupation - Any

How often do they use interfaces - Daily

What devices do they use? - Websites, Apps.

Companies -

Size of the company? - Big and Small

Position of people in the company? - Marketing team, Tour Guides, Publicists, Journalists, Gallery owners. 

Using site for themselves or someone else?  - Both

How large is the budget they control? - Big and small

Why?

Why are/would users visit your interface? A really wide range of Information about a hard to reach subject. What is the specific reason the target audience would engage with your interface? - All information in one easy to access place

Motivations-

both general and very specific information

The goal is gaining information to see art and design out there.

Spending time on interface is more of a luxury 

Goals- 

The users may be unfamiliar and familiar with the subject of art and design.

The information is very time and date sensitive, changeable and current.

They need specific information about a service as they in some cases are paying for it.

What?

What information do users need in order to achieve their goals quickly and effectively?
-What is on? Where? When? How much? Is it good? Till When?

Key Information:

As the product is new it needs some explanation/description

Users will be both familiar and unfamiliar to the subject so introduction could be optional.

What is special about what you offer that differentiates you from competitors? - Unbias, all information in one place, specific and descriptive, overview of all on offer.

How often will people engage with your interface? Daily, weekly, monthly, it depends on the person.

OUGD504 - Design for Screen - Type on Screen - Ellen Lupton

Type on Screen, Ellen Lupton.

This book offers a very comprehensive guide to type and design on screen, as it is published in 2014 the content is fairly up to date and totally appropriate to this project of design for screen. The book outlines the fundamental processes and ideas of working on screen and what to avoid. Overall this book has become a bible for this project and every page give more and more information on this process. Designing on screen is fundamental within contemporary graphic design and vital to understand and master these processes. 

 Fonts on Screen
The first chapter of the book begins explaining the use of fonts on screen and how this is the key part of design for screen, as type makes up most of the content online typefaces become even more important than design for print. 

Licencing for type on screen is very different to print, as printed matter takes only a singular form the licence to buy is much cheaper as type on screen use is infinite the price of a licence sky rockets, this is something to consider when picking type. Another great consideration is pixels, as screen uses pixels often classic typefaces simply don't work on screen. This book gives a guide to some typefaces and their effectiveness and use on screen. This page explains that san serif fonts are preferred as they work with pixels and that using slab serif type is a way of finding a middle ground within readability and function.

Much like designing for print the hierarchy of information is key, on screen it dictates what the reader does and how much they engage with content. Using headings and bodies is an effective way of insuring that what is intended to be communicated is. 

The idea of certain type for body copy and headings is the same as in print and considering the communication of type in this context is important. .

 Headings in san serif and copy in serif fonts is a common technique in making sure this hierarchy of information as well as clarity is appropriate. 

In this section on font on screen it gives a survey of some web fonts and their communication. Rated on Legibility, Flexibility, Classiness, Readability, Showmanship and Amphibiousness (has it been optimized for screen). These categories are a useful test when looking at type on screen and could be applied when picking what type for the Art Map.

The type surveyed is split into the Serif, San Serif and Slab Serif categories. Thinking about how these relate to my content of museums and galleries could be useful at this point.  

Adelle, not the singer, this typeface's slab serif forms make a clear and ambiguous type face that  works both in print and on screen. When considering type for a product printed collateral must also be considered, advertising for the product may often include printed matter so type that works in both is useful for a designer. 

 San Serif type is often preferred on screen due to its modernity and clarity. This typeface DIN's use on German train yards and Highways means its is designed for clarity on information. Sometimes though san serif type can be slightly stark and uninviting. 

Museo Slab, this typeface seems to score high on the rating chart and is a friendly but clear typeface, the 'Museo' name relates interestingly to my project and could possibly be a possible display and heading typeface for my Art Map. The fact it is designed as a screen font means its clarity is translatable across a range of platforms and formats. Even though it is early stages this typeface is a real candidate for use in this brief.















Text on Screen 

The next section of this book deals with what to do once you have selected the type, looking at type in terms of size, contrast, weight, colour, rhythm, texture and hierarchy.

  Something that I was unsure of when designing for screen is the screen size, I was unsure where to start with screen size but this book offers a basis for most web based design. 960PX - 650PX the book explains is a good standard, this works within the normal 1024 x 768 size and insures transferable use across multiple screens. 

Much like screen size, type size is another thing that I was very unsure of again this book offers really helpful information, it explains that 17pt for the typeface Georgia is a good starting point. It also explains that computers often are further away from a book so this is a consideration. 

With small type it explains that 12px is often a president for small type and that bellow this is achievable but may not be advised. 

This page on space between lines explains how this space can dictate style and structure. It also gives this useful diagram on sizes of headlines and subheadings and text. This may be appropriate for website designs but could be useful when thinking about size, space and hierarchy.

 Though it has been touched on before this section looks at hierarchy in more detail. Hierarchy is so vital in screen design as it dictates the user experience, the book explains that hierarchy should be built in a way that gives nontraditional users equal access. As my project is really about giving information to everyone effectively this universal standard will be vital in my project. 

 These images show how hierarchy can be really simple, this page just uses a split in a paragraph to create this change in content. 





















Digital Publishing

The flow of content -  different ways of reading is evident throughout print and screen communication. The flow of content, is central to this. Often this flow is disrupted by screen and is not comparative to print communication. The book explains 'By organizing the flow of reading, the designer can push users toward active searching, passive receiving, or spontaneous wandering. Designers understand that layout and structure play a role in how one reads; for readers the effect may be more subconscious. 

This flow of content is controlled within this app on the work of Wim Crouwel, the image below shows how this structure is planned out using a systematic flow of content.

The next pages show different ways of planning this flow of content. Spine, Scroll, Grid and Slides are all different ways of creating a unique reading experience. Thinking about how these relate to my content will insure the best reading experience.

 Type and Interface

Wireframes - a way of understanding and planning content. 

 The book explains how there is low-fidelity and high-fidelity wireframes that can be used to show more and less detailed plans for wire-framing. 

Planning out the paths within apps make sure that navigation is effective. Insuring this clarity in my project will be vital in creating a working user interface.

 Elements of interaction it explains needs to be planned within wire-framing as this all effects the communication and navigation. Thinking about how a use will use an app or website is key to this wire-framing. 

 Menu's in screen design is something that is unavoidable for navigation. The book explains that type is an essential ingredient in creating a clear, concise, understandable menu as they mainly consist or words.

These four examples are the standards for menus - Persistent, Drop Down, Slider, Tabs. These ways of organizing a menu all effect the communication and need to be relevant to the content.

Drop shadows and gradients 

Gradients can be used to make content more three dimensional, this is often a problem within screen design and could be considered for my own designs. The book also explains that drop shadows can be used to successfully communicate the potential for interaction while indicating relationships and emphasizing specific elements.

Icons and Logotypes

This book explains that icons can help cross language barriers between computers and humans. This new language of icons and pictograms is universal and can be communicated quickly, these designed icons are key in design for screen and can be the defining factors in the overall delivery of the design. The book explains 'The design of icons is governed by tacit (understood without being stated) rules and guidelines as well as by shifting trends and constraints.' Underlining the importance of the icons being clear and understandable by anyone. Finally, the book goes on the say 'Like type designers, creators of icons and logos seek to generate images that function at sizes large and small. And, like type designers, they seek to balance the desire for originality against the need to communicate through familiar references.

Icon design over the years within on screen content has become much more decisive in the final deliverables, these icons for one of the first Mac interfaces became a real symbol for the company. These basic shapes and images not only show the user what they are looking at but become an element of the programs branding. 

These images are of some IOS icons, often the icons use singular letters and the icons are formed out of simple graphic shapes. These icons become a fundamental part of the app design, they are sometimes the only thing the user sees and need to fully convoy what the app is about and show the branding and style of the app simply.

This language of symbols and icons has been developed from characters in type, the use of hands, symbols, shapes and glyphs. Using these glyphs allows a large database of icons that are universal and can communicated very quickly.

This section on 'creating an app icon' gives some tips and rules to work by when creating icons, Keep it simple, this makes it easier to understand and highly detailed images don't translate big and small. Tell a Story, the icons must determine the tone of voice for the whole app, the app might be the most frequently seen application. Avoid Long Words, insures quick communication and doesn't over complicate the app. Grab some attention!, use the small space available and create some eye catching and direct graphics, using bring and contrasting colours make the apps stand out. 

This page gives a quick tutorial on app design, this could be something to refer back to when creating my own designs. This section also mentioned the sizes the icon HAS to work at: 1024 x 1024 px
512 x 512 px
256 x 256 px
128 x 128 px
32 x 32 px
16 x 16 px

This next page on scalability speaks about the fact all on screen content has to work big and small, with the endless variety of sized displays the design must fit to this. The book explains it is best to work large and scale down after this will insure quality in the large image.

This image illustrates the different sizes that the designer is challenged with overcoming. Creating simple adaptable icons is vital in creating a brand identity on screen. 

These icons are just as important for branding and identity as they are for interaction, it is more and more common to use icons as the main user interface for apps, they communicated quickly and universally.  The book explains they come in three types, pictorial (icons depicting an object and its intended functions), Metaphorical (example could be a lock for online security), Abstract (have an indirect meaning but become familiar over time). 

Logotypes are fast becoming the main port of communication from the product to the user, with onscreen content becoming more and more available to everyone these logotypes are beginning to be some fundamental aspect of branding. The book explains,' a Logo still needs to be readable, direct, and translatable across diverse media, it now occupies a visual world replete with colour, dimensionality, detail, motion, and even sound.' All these elements have to be masted by the design to create an effective current logotype.

The final section to highlight is storyboarding, and use of basic animations. Animation in graphics is becoming more and more common with the advances in on screen content this is another design element that needs to be understood and realised in this project. 

Overall this book has been incredibly useful, it has opened my eyes to what needs to be considered for on screen design, taking what I have learnt from this book forward will be key from this project. Things like type sizes, scales, how to design icons are all design features that need to be mastered for screen based design today. 

OUGD503 - Responsive - Penguin Books - Design Ideas

After looking at many examples of successful, engaging and acclaimed book cover design it only seems necessary to look at creating some initial designs. When starting this project it was my intentions to work on both To Kill A Mockingbird & In Cold Blood, I now feel it seems more beneficial to work on one to insure the best results. In Cold Blood seems more inline with the Crime theme I have been exploring and the book I have more personal interest in. If I think of a good idea for To Kill A Mockingbird I may return to it.

Design Idea Sketches.

When drawing these ideas it is important to explain that I was looking at imagery from google of In Cold Blood, though it might not be the most in-depth research looking at the more obvious imagery can be very useful in thinking of the most appropriate cover. For this project the work of Bob Gill had a profound influence on my ideas keep it simple, effective, appropriate and thinking about how the brief can be rewritten per-say.

Idea One/Two.

Both these images are informed by the imagery of the killers Dick and Perry showing off their tattoo's, this imagery really caught my eye and seemed to reflect the strange nature of the murder and the book. Gang tattoo's is something that is often associated with crime and can be a real signifier for the viewer.

Idea Three/Four

Another piece of imagery that really jumped out is the images of Dick and Perry after being arrested the type on their Mug shots in particular really stood out, whether this imagery showed too much about the content was something to consider, This imagery could be seen as too obvious but could be tackled using illustration to change the images.

Idea Five/ Six

Idea five is influenced by the Romek Marber covers using the simple collage style showing the four bodies on the flood combined with large typography. The outlines of the bodies would create a graphic, recognisable image that links directly to the content of the book. The blurb of the book explains that four bodies are found and we (the reader) has no idea what/who has caused this.

Idea Six, Inspired by the work of Saul Bass using hand cut collaged typography showing the bold and engaging copy - IN COLD BLOOD large and direct.

Idea Seven/Eight 

Idea Seven, using the copy, In Cold Blood written in blood on the wall of the the house, an obvious but effective response. 

Idea Eight, Using the image of the Clutter family but distorting their faces to add an extra sense of intrigue and mystery. Another obvious response but effective and direct. 

Idea Nine/Ten

Idea Nine, using the imagery of the finger prints of Perry and Dick once they have been arrested playing on the idea that Perry stated that Dick was the murderer and not him, another obvious but interesting solution to the problem. 

Idea Ten, using the disturbing image of the dead girl on the bed showing it in a more illustrative and graphic style. Thinking about the ideas and processes of Romek Marber.

Idea Eleven/Twelve

Eleven, Using the famous footprint left in the Clutter house, a really obvious idea but effective and tells the reader when they are seeing, would have to be really well thought out and done to a high level to insure it stands out. 

Twelve, using the stolen number plate of the killers and the back of their car, showing the style and time the book is set.

Idea Thirteen/Fourteen

Thirteen, using again the number plate and back of car but showing it parked by the house of the Clutter family, another obvious but effective idea.

Fourteen, showing the cover as a news paper article in a crime report style, big graphic use of type, relating to the idea of the book being about crime as well as journalism.




This final idea of using a newspaper for me seemed to be really inventive and something different, right away I felt it was effective enough to look at in detail. I created these two more 'finalised' drawings of the idea and began to think about how it would be laid out. Communication was key as always in book cover design but insuring the hierarchy of information was right would be fundamental.