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.