Week 8 Reading Notes

Type on a Screen - Chapter 4 - Type and Interface

• an interface expresses the internal structure of a document (its heads and subheads, tables and lists) as well as the framework of menus, buttons, and links that guides users through it
• interactive media projects are built in layers, yielding a complex three-dimensional space that allows content to move in and out of visibility 
• the principle of hide and reveal allows designers to display more data at larger sizes - within the limited window of a browser or device

WIREFRAMES

• also referred to as a page schematic or a screen blueprint, a wireframe uses simplified elements to represent basic content areas and the elements of page navigation

TYPE AS NAVIGATION

• in a website, a path is a consistent, predictable route that connects content
• a path can emerge from the user's own habits or it can be created by a designer through explicit text-based navigation elements
• Some examples are:
• text links - word or phrase surrounded by <a href> tags. These can be styled with color, underlines, mouseover states, and other means
• breadcrumbs - a string of text shows the user their position within a path or sequence
• anchor links - named anchors take the user to a specific place on a page. These are usually styled like other text links
• tags - popular on blogs, tags apply categories to an article or entry, creating a kind of page-by-page index for the sit. Tags are usually separated by commas and appear in simple lists

DROP SHADOWS AND GRADIENTS

• interface designers use drop shadows and gradients to achieve an illusion of three-dimensionality on screen, calling attention to objects that the user can interact with and suggesting the layering of elements in depth

HIDE AND REVEAL

• the principle of hide and reveal is at work in numerous contexts within interface design
• the ability to display massive amounts of data in a small space by burying information and then bringing it to the surface is a fundamental feature of interactive media

TYPOGRAPHY AND DATA DISPLAY

• visual representations of numerical data can communicate complex information in a clear, expressive, and illuminating manner, revealing patters and relationships that would otherwise remain hidden in lists of numbers

INTERFACE DESIGN

CONSIDERING THE SCREEN

• the UI elements to be placed in he grid are defined as modules
• these are repeatable components defined from image sizes, video player sizes, and so on, on both their x-axis and y-axis
• to avoid losing information in the bleeds, designers need to ensure that navigation and content modules are placed within the defined action safe area for the chosen screen ratio

GRIDDING: BESPOKE OR DYNAMICALLY FLUID?

• having tablets and smartphones that rotate views puts strain on effective designs, as the underlying grid needs to structure the page in two orientations at once
• these problems are being solved through the intersection of clever coding and clear layout, achieved through collaboration between the graphic designer and developer
• the design team will either design the UI to fit each platform, or use jQuery code to define which platform is being used

TYPOGRAPHY FOR UIs

• the complete control a graphic designer has over static type in print is not the same with UI design, as user-control makes UI typography more dynamic
• the leading on a tablet device needs to accommodate input via a fingertip; and on a smartphone, some input is made using a thumb
• a UI on a smartphone, as opposed to a PC, is likely to have fewer available links, increased leading and reduced type size

TYPE ON A SCREEN

• a reader's tolerance to reading and understanding text on a screen is variable
• people read around 10% more slowly on a screen than with printed matter, and in reality scan more than they actually read
• text on a UI can take different forms; navigation, calls to action, captions, headings and blocks of textual content
• serif typefaces are fine as headers, but sans serif typefaces are safer fro body copy as they work consistently at any scale

COLORING THE SCREEN

• graphic design for print and screen use two different color space models
• print uses a CMYK color space of four colors: cyan, magenta, yellow, and black
• screens use an RGB color space of red, green, and blue
• modern screens can display 65,000 colors per pixel, depending upon resolution and the graphics card of the device
• traditionally, there are only 216 colors that are deemed 'web-safe'
• in other UIs, such as apps, BD/DVD and game interfaces, the RGB color values are selected either in the UI authoring software or directly referenced in the programming language by the developer

THE MEANING OF COLOR

• on a basic level, color affects our perceptions
• it can help determine how a user will perceive the UI design, its navigation, and its content
• warm colors pull forward, expanding and popping out from their backgrounds
• cold colors do the opposite and rush backwards
• neutral colors have less impact, emotionally and perceptively
• although color is useful in UI design for conveying personality, tone, information, and calls to action, it should be used in conjunction with image and text to maximize communication and minimize potential misunderstandings

APPLYING COLOR

• colors are always relative to the context in which they are viewed
• by grouping two or three colors together into a scheme, combinations can be found that work eel for the UI design
• complementary colors sit opposite each other on the color wheel
• analogous colors sit next to each other and work well together
• by selecting a three-color scheme, a triadic relationship can be established
• in triadic relationships, colors need to be balanced to ensure the UI will be usable, as some color combinations are problematic

IMAGERY AND THE PIXEL

• in UI design, images can function as content, decoration and, crucially, as navigation
• digital image files fall into two categories: vectors and bitmaps
• vectors have very small file sizes and are created mathematically, whereas bitmaps are created through coloring each pixel in the image
• when shrinking a bitmap, the image will lose quality because pixels are being removed
• vector images, on the other hand, do not lose image integrity in resizing, as the integrity of vectors is mathematically controlled and infinitely scalable without loss of quality

IMAGES AS NAVIGATION

• navigation can be represented in various metaphorical visual forms (tabs, menus, hypertext, buttons, etc.)
• by creating a visual environment for the interface to work through, an image can indicate interaction whilst still maintaining the visual metaphor
• one way to understand 'image as navigation' is to consider the UI as a visually represented environment instead of it being a container of images, text, animation, and navigation in an obvious gridded layout

ICONOGRAPHY

• the benefit of using an image as a visual context is its coherence to the user as a metaphor
• as humans, we make subconscious connections to the UI interactive functions through the use of such metaphors
• the use of icons in a UI makes it easy to differentiate interactive elements from more static content