Recent Updates RSS Toggle Comment Threads | Keyboard Shortcuts

  • Tony Pritchard 1:37 pm on December 20, 2009 Permalink | Reply  

    Structure (grids) 

    Grid structures
    The notion of structure implies the ordering of elements into a co-ordinated whole. Information design has adopted ‘the grid’ as a method by which components of a design are brought into a formal relationship to one another. The grid is particularly associated with the work of pioneering modernist designers such as Jan Tschichold, Josef Müller-Brockmann and Wim Crouwel. Find images created by Tschichold, Müller-Brockmann and Crouwel. The grid, however, is a ubiquitous and utilitarian device unconstrained by associations with art and design movements. Anyone familiar with word processing or page make-up software programmes will be aware of the grid when making decisions about what goes where on the page. Grids are apparent in both man made and natural structures. Georgian architecture exploited a modular approach to the relationship between, and proportion of, windows and doors. The classic Georgian window has a unit structure of three horizontal panes of glass by four vertical panes. A pine cone or sunflower head is comprised of units making up its overall structure. The illustration below shows a geometric construction of a typical Georgian facade.

    Efficient organisation of information and dramatic compositions
    How things are arranged, grouped and ordered can influence the way they are perceived and read and as a consequence is often an aid to understanding. The designer needs to evaluate which layout best supports the information to be communicated. The grid is seldom visible; however, the way in which structure is employed can have a dramatic effect on the appearance of the overall design composition.

    Evolving a grid structure: single to multi-column
    The most basic grid structure is that of a single measure or column width. The measure is determined by the size of the margins. The reason for margins is to contain elements on a page and to prevent them from being inadvertently cropped off when trimmed. Non-crucial elements can often ‘bleed’ off the page as a feature. Placing critical information that is to be read too close to the edge of the page is not a good idea. A printer can only guarantee a certain amount of tolerance. Put a page number near the edge and it may get chopped off and in doing so a vital navigation device is lost. A single column grid would be appropriate for desktop published reports consisting mainly of text. Due to the relatively wide width a larger size of type and generous leading would be used.

    One can further subdivide the measure or column width into the required number of columns or units if there are more complex requirements. Grids composing of 2,3 or 4 columns allow for: a smaller type size to be used; for pictures, graphics and diagrams of varying sizes; for captions to be set over a different measure to the main text; multiple alignments and tabulations. The space between the columns is known as the inter-column space or gutter. Each job requires a specific grid designed for its individual needs, however, one should not solely rely on the grid as this can leads to a sterile looking design.

    Integrity of text
    When considering using a grid the integrity of the text must be paramount. Forcing type, which contains information to be conveyed and read, into unnatural widths will provide a barrier to the accessibility of ideas the text contains. Royal Designer for Industry, Derek Birdsall famously implored designers not to ‘torture the text’. Too short or long a line length within text will tire the reader.

    Analysis of text
    A grid will become apparent once an analysis of the text to be structured has been undertaken. The designer and editor will consider heading structure, captions, pull-out quotes, text, paragraphs, page numbers, running heads and use of hanging line.

    Modular grids
    The same information can be treated differently depending on whether a two or three column grid is used. The designer will need to evaluate the relative advantages of each layout. A vertical grid can also be devised based on the lines of the text type, this allows for the top of a picture to align with the capital height and for the bottom of a picture to align with the baseline of a line of type. When vertical and horizontal grid structures are combined the page becomes divided into a ‘field’ of modules. The available design space is the field and the individual units are known as modules. The look of the design will become, by definition, modular. The illustrations below are from a 140mm square 12 page booklet I edited and designed. The square modules are equivalent to 6 lines of 8pt type on 10pt line feed. The space between is equivalent to a line space of the text. The design allowed for text to be set both horizontally and vertically and still relate structurally.

    The freedom of the grid
    Grids are useful for lengthy, complex documents and achieve a consistency and uniformity that allows the user easy access to the information. Not all designers like using grids, it is felt to be a restriction on their creativity, but there are occasions when the grid is essential, for example a daily newspaper. A grid provides some basic guidelines for work that requires a fast turn around and when it is not practical to design each page as a bespoke item. The design below is by Simon Esterson and Mark Porter and builds upon the pioneering work of David Hillman.

    The grid as a way of understanding the world
    Design academic Ray Roberts has suggested that grids act as ‘metaphors for the human need to make sense of the world and to position ourselves in control of it’. The grid can be seen as a method of shaping information so that it becomes more understandable and therefore enabling the user’s empowerment through accumulated knowledge.

    Further Reading
    Roberts L, The Designer and the Grid, Rotovision SA, 2002
    Müller-Brockmann J, Grid Systems in Graphic Design, Verlag Niggli AG, 1981
    Bosshard H R, The Typographic Grid, Verlag Niggli AG, 2000
    The Art of the Grid (website visited 20.12.09)

     
  • Tony Pritchard 12:08 pm on December 13, 2009 Permalink | Reply  

    Shape 

    Introduction
    Shapes have gained social, cultural and political significance. The dynamic primary shapes of circle, square and triangle give form to much of the physical world we see. They are the basis of the Roman alphabet. Shape can be a way of grouping and classifying information. Shape and colour are combined in a myriad of permutations to create the world’s flags. They are used to embody visual identities. Often shapes act as a container for another element. Shapes relate to our human experience of orientation: vertical, horizontal, slant, rotating and centrality. These illustrations are from a book by Arjan Groot called Universal Authority for National Flag Registration.

    Point
    A point is a small dot and can be used alongside a list of words to indicate they are a list of separate bullet points. They create a focus, emphasise and draw attention to their subject. We often talk in terms of making a point. Points can also represent junction points on a diagram or map. The image below is a poster I designed based on the essay on The Dot by Armin Hofmann published in Graphic Design Manual.

    Line
    A line has been described as the shortest distance between two points. As simple as a line may seem it can take many forms: straight, horizontal, vertical, diagonal, curved, continuous, broken, loops and spirals. Lines form shapes when linked to one another and make connections between other items. They can signify a direction, a boundary or a separation. Underling a word gains emphasis for that word. Lines are used in the construction of diagrams and form the X and Y axes. Lines can be used to separate categories either vertically or horizontally. They are the fundamental component of a timeline; the lines of longitude and latitude on a map; and the construction lines of grids. Lines have various thickness and lengths. They can be dots, dashes and solid lines.

    Squares and Rectangles
    The square is a fundamental structure implying stability and permanence. Much of our lives are contained within a rectilinear experience for example buildings, roads and computer screens. A square is a shape of four equal sides each meeting at 90 degrees. The square can be a container of information and describe a relationship with other elements. Information that is boxed out has been highlighted as having special significance. Rectangles are intrinsic units of construction, they can be placed side by side or one on top of each other forming rudimentary grids. X and Y co-ordinates are plotted on axes that are at right angles to each other. A design begins on a rectangular piece of paper, which is further subdivided into smaller proportionate units of the rectangle. Aerial photographs of cultivated landscapes reveal a patchwork of rectangles. A rectangle with dimensions is a cube. Gravity’s effect has ensured the cube has remained ‘humanity’s chief structural resource’. The image below shows the construction of a Roman letter A and was designed by Root 2.

    Circle
    The circle is constructed by establishing a centre point around which another point rotates at a fixed radius. It starts and finishes at the same point. The circle implies movement in either direction. It suggests rotation around a centre. The circle defines the area that it contains and the area that surrounds it by its circumference. It is a symbol of completeness, of wholeness. Transcribed into three dimensions the circle becomes a globe. Our earth, the moon and the sun are spherical. They all support our life and have significant psychological inference. Wheels rotate around a central axis. The circle is implied in the many words ending in centric such egocentric and eccentric. When we rotate in a circle we see our surroundings as a 360-degree view. The globe is a continuous shape with out beginning or end, bottom or top and sides. It is often thought of a shape of perfection and significant in geometric constructions. Stone circles have cosmic or religious significance. Domes in religious buildings often represent the heavens. The circle in its smallest form is a dot, which is the basic unit of lithographic printing reproduction; it describes tone and colour. The circle can be a container; it encloses an area; sets a boundary; locates elements as internal or external. Circles can be applied as elements in a diagram such as pie charts and Venn diagrams.

    Triangle
    A triangle is formed from three sides meeting at three angles. A triangle formed of three equal sides is known as an equilateral triangle. A triangle formed of two sides of equal length and one odd size is known as an isosceles triangle. The triangle can represent three aspects of something. Because of its angles it can point in directions. The triangle can sit either on its base or pivot on top one of its points. The triangle is a stable shape and is used as a strengthening device in other constructions such as girders. Triangular grids can be used for axonometric and isometric projection. The three-dimensional projection of a triangle is a tetrahedron. Four triangles on a square base is a pyramid. The pyramids of Egypt are a powerful signifier of that country’s ancient history. They are regarded as one of the wonders of the world. The triangle is often used as an analogy for a hierarchical organisation.

    Shape, colour and road signs
    The triangle, square and circle have been used in conjunction with colour to signify specific meaning when used for categorisation of road signs. In 1949 the UN World Conference on Road and Motor Transport in Geneva instigated a protocol to govern the actions of road users. Circular signs give orders. Those with a red outline are mostly prohibitive. Signs with solid blue circles mainly give positive instructions. Triangular signs with a red outline give warnings of potential hazards. Direction and information signs are mainly rectangular. In Britain blue rectangular signs indicates information on a motorway and green indicates information on a primary route.


     
  • Tony Pritchard 11:45 am on December 6, 2009 Permalink | Reply
    Tags: colour, exhibition design, information design, maps, navigation, website design   

    Navigation 

    Introduction
    The Encarta World English Dictionary defines navigation as ‘the science of plotting and following a course from one place to another’. This requires the individual to know where they are; where they want to be; monitor the route of their journey; and know when they have arrived at their destination. Maps are the way in which we record the geographic position of places in relation to one another and enable us to orientate our location within the physical environment. Print and screen media use metaphors of the ‘real’ world to locate our position within printed and digital information.

    Multi-navigational systems
    In the book ‘Experience Design’ Nathan Shedroff states that ‘there is usually more than one way to get anywhere’. He suggests that experiences should be designed to allow the audience to navigate information in multiple ways. When walking or driving we may take the most direct route, or the scenic route, or a route that stops by a place to eat. We have a choice of routes depending on our mood or need. Some authors or playwrights have entertained the notion of non-linear navigation through narratives or stories, for example allowing the viewer to choose the ending from a set of alternatives. The contents page or index within a book enables alternative means of navigating information. Micro-navigational systems operate at the level of the page. Footnotes are a link to further information held at the end of a chapter or the book. Folios, running heads, headings and sub-headings indicate your location within sequential information. Road maps and A-Z street guides in conjunction with street and road signage are the ways in which we commonly orientate through and between towns and cities. Within digital and online media it is accepted practice to provide alternative routes and methods of navigating through information: site maps, search facilities, menus, navigation bars, buttons, hypertext links and image links help the user plot their journey through information and maintain a sense of orientation. Too much or contradictory choice can confuse the user. The digital breadcrumb concept enables users of a site to backtrack or jump along the directory path. Horizontal navigation explores individual categories of information sequentially. Vertical navigation facilitates an overview of potential other pathways to new categories of information. Cascading menus and fish-eye views allow layers of information to be displayed so that future navigational decisions can be made.

    Direction
    In terms of direction the ubiquitous arrow is the most fundamental of signs. It directs us left, right, up, down, straight on or back. The arrow has been widely used as a metaphor to represent: play or start; fast forward; rewind; please turn over the page; advance to the next web page or topic; as well as in signage systems that facilitate navigation around and between buildings and cities.

    Navigating an exhibition
    Exhibitions are designed taking into consideration the numbers of visitors expected and how they will flow through the space. Often type, graphics, symbols and icons on the floor or walls are instrumental in guiding people through the museum experience.

    Textual navigation
    Printed publications, exhibitions and hypertext links use text as a means of navigation. Information should be designed in a way that enables the user to navigate at the surface (headings) and deeper levels (text) of information.

    Online navigation and hierarchy
    Hierarchy is a word often used in tandem with navigation when describing website design. The ‘tree structure’ or ‘hierarchical’ site is engineered to guide the viewer in a specific direction through the content. The ‘network’ or ‘democratic’ structure offers the viewer freedom of choice as to what pages they view and in what order with all pages being linked to each other. Navigation through complex networks can become unwieldy. The purpose of navigation is to get someone from where they are to where they want to be. Requiring a user to search endlessly through links doesn’t do this. A combination of both systems means viewers are guided in part but also have the opportunity to link to pages outside the hierarchical structure.

    Site maps
    Site maps and extended menus can give an immediate overview of the size, contents and organisation of a website. A user can scan the main sections and sub-categories and ‘jump’ immediately to a particular subject.

    Search engines
    Search engines are often the quickest method of finding information and provide links to pages within sites. Search engines have systems of rating the relevance of the results and listing them in a hierarchical order. To understand where you are in a site on arrival clear navigational devices are required. Relying on a back button will only direct you back to the search engine.

    Colour
    Colour is a useful tool for navigation. Sections of a site can be colour coded to differentiate between subjects and levels of information. Active and visited links are additionally indicated by a change in colour. Different lines on a transport network can be differentiated through colour. Sections in a publication can be colour-coded.

    Three states of navigation
    There are three states of navigation: this is where you are; this is where you have come from; and this is where you can go. How they are represented and how understandable they are is critical to user comprehension.

    References
    This article features work by Ian Noble; Root 2; Spin; AIG; Studio Myerscough; and Bibliotheque.

     
  • Tony Pritchard 12:29 pm on November 29, 2009 Permalink | Reply
    Tags: comics, graphic design, narrative, sequence   

    Narrative and sequence 

    Introduction
    These set of notes were written whilst I was researching for a book on information design. I think of the audience as being first year undergraduate graphic designers.

    Narrative
    A narrative is a written, spoken or visual account of connected events. A narrative can best be understood in terms of the tradition of storytelling. A story can be factual or fictional. It can be conveyed through books, magazines, newspapers, comics, film, television, exhibition and the web. Designers have adopted the form of the story or narrative as an engaging and efficient method of sequencing information.

    Sequence
    A sequence is the specific order in which a series of related events proceed. Designers consider the story that is to be told and make decisions regarding the order in which key information is to be seen or heard. A sequence of information may flow continuously or be punctuated with silence, noise, space or time. Clear segmentation of information that can be reconnected back to an overall concept allows an appreciation of the individual parts as well as the whole. The division of a book into pages, sections and chapters allows for natural breaks to occur within information. Progressive disclosure is a term to describe the sequencing of information for example on motorway signage.

    Comics
    Comics demonstrate the concepts of narrative and sequence well. In the book ‘Understanding Comics’, Scott McCloud describes comics as ‘juxtaposed…images in deliberate sequence, intended to convey information’. A comic uses space to unfold its story whereas film or television sequences images and sound in time.

    Once upon a time – a brief history of comic art narrative
    Information has been conveyed in sequence as a narrative form from early civilisations onwards: Egyptian hieroglyphics; the Trajan column, ancient Greek paintings; Japanese scrolls; pre-Columbian picture manuscripts; the Bayeux tapestry; stain glass windows; Hogarth’s satirical commentaries; Rodolphe Töpffer’s introduction of panel borders; Lynd Ward and Frans Masereel’s woodcuts; and Japanese manga comics.

    Audience involvement
    For a story to be successfully conveyed, an audience needs to be able to relate to the key characters. Characters in comics are often drawn in an iconic fashion so as to broaden the potential viewer identification. Books and dramas use archetypal characters to identify with.

    Words and pictures
    Words are described as perceived information in that it takes time to decode the abstract symbols of language. Pictures are received information in that the message is received immediately. We more readily understand pictures of things rather than textual descriptions of things – early words were stylised pictures. See also World Without Words by Michael Evamy.

    Transitions between sequential events
    Scott McCloud identifies six categories of transition within the comic art. Moment-to-moment transitions are like the individually drawn stages of an animation with little differences between frames. Action-to-action transitions show a distinctive re-action to a previous action involving a single subject. Subject-to-subject is a transition from one subject to another but within the same idea for example a winner crosses the line and the camera pans to the stopwatch. Scene-to-scene transitions require a level of deductive reasoning making connections across time and space for example if we were wondering where to go on holiday we might envision three separate shots of different locations. Aspect-to-aspect transitions are where a series of images convey various aspects of a scene. The non-sequiter transition is a series of unrelated events. Karen O’Neil has produced an interpretation of these six narrative transitions which can be viewed at her website.

    Literary theory and the function of stories
    A ‘Story’ can be defined in terms of a news broadcast, a written article, a sequence in an exhibition or a series of navigated links on a website.

    Narratology is the theory of narrative structure and describes: notions of plot; types of narrators; and narrative techniques. The basic structure of a story has a start, middle and end. The phrase ‘to have lost the plot’ indicates that the sequence of a story has been disturbed.

    The literary theorist Jonathan Culler has stated that stories are the way in which we primarily ‘make sense of things, whether in thinking of our lives as a progression leading somewhere or in telling ourselves what is happening in the world’. Everyone loves stories, both telling them and hearing them. Unexpected twists, turnarounds in fortune, good triumphing against evil are all satisfying resolutions in plot. Stories operate as educational devices and we are often driven by the desire to discover and acquire knowledge. We can see ‘experience’ through the various vantage points literature provides us. Novels are representations of social reality and allow us to act out scenarios through vicarious experiences. Culler suggests that ‘we become who we are through a series of identifications, novels are a powerful device for the internalisation of social norms’. See also Literary Theory: A Very Short Introduction.

    Representations of narrative
    A narrative is influenced by who the narrator is. The events of a story may be described in the first or third person. The narrator could be a central character who conveys their perspective or an observer of events. Audience and tone of voice are key narrative concerns. Many radio and television broadcasters imagine addressing an individual. Narration can occur live as the events unfold or after the event in retrospection.

    The type of language used may change depending on the perspective of the character conveying the story or the audience being addressed. The language of a particular age group, gender, culture or class may be adopted to convey certain narrative sequences.

    Stories or events may be seen through the eyes of a key protagonist. This is called focalisation. The focaliser may envisage events at the time or reflect through hindsight.

    The authority of the narrator and credibility of their message is vital to an audience’s belief in what they are being told. When information is tainted with bias the receiver of the information may question the particular interpretation.

     
  • Tony Pritchard 8:22 am on November 26, 2009 Permalink | Reply
    Tags: design, fonts, lettering, modernism, sans serif, Typography   

    Staff as Students 

    This is a poster I designed in October 2009. It is for an exhibition of staff work at LCC. Staff were asked to revisit the student experience by undertaking workshops in processes that were unfamiliar to them. This gave them a heightened empathy with how students learn.

     
  • Tony Pritchard 10:01 am on November 15, 2009 Permalink | Reply  

    Interfaces and interactions 

    Introduction
    An interface is the point at which two things meet and interact. It provides a bridge between the user and an experience. The term derives from phrases such as ‘Human Computer Interface’ and ‘Graphical User Interface’. Bob Cotton describes the act of interfacing as ‘being able to control machines by communicating with them, and receiving feedback from them’. We encounter screen-based interfaces when we use information kiosks, DVDs or purchase tickets from a machine. We interface with cookers, washing machines, videos, HI-FI systems and our cars. David Fisher of product design company Seymour Powell admitted at the D&AD Xchange 2009 that he had to get an expert in to explain how to operate his latest Hi-Fi system. Most of us would expect to be able to use products without sitting an exam or reading a manual. Non-technological experiences can also involve interactions with an interface. A book is an interface between the user and the ideas it contains. Interfaces allow the user to interpret information they are confronted with. We are familiar with operating machines through buttons, sliders and switches; we follow directional signs and stop when we see a red light. These ‘hard’ devices provide the conceptual models or metaphors for ‘soft’ computer interfaces. Virtual onscreen handsets visually replicate physical handsets.

    Mapping and interfaces
    Switches, knobs and buttons on interfaces provide designers with a particular conundrum. Minimalism and uniformity seem to drive design aesthetics. To make operating devices unobtrusive the design approach is normally to minimise their size; make them of uniform appearance; and organise them in rows. This results in switches that look the same in close proximity to each other but having separate functions. The latitude for error is therefore increased. The hotplates on a cooker’s hob are operated by separate controls. If the hotplates are top left, top right, bottom left and bottom right, it makes sense to repeat this visual pattern with the controls. Often they don’t and a poor interaction experience results. It is common to observe people switching on and off banks of switches hoping that eventually, like cracking a safe, they will get the right combination. The illustration below is of my cooker’s hob. I always turn the top knob on expecting the top left hotplate to come on, as you can see it actually operates the top right. From this can you work out the relationship of the controls to the plates they control? Which one turns on which plate?
    cooker hob

    Desktop organisation
    Most people tend to structure their lives with everything carefully positioned to facilitate memory. Whilst working at Xerox in 1983, Thomas Malone wrote an influential report entitled ‘How do people organise their desks: implications for designing office automation systems’. His studies of the importance of physical organisation are often cited as influential to the development of the desktop metaphor of computing interface systems. Malone wrote: ‘Many people organise their lives in the world, creating a pile here, a pile there, each indicating some activity to be done, some event in progress. Probably everyone uses such a strategy to some extent. Look around you at the variety of ways people structure their rooms and desks. Many styles of organisation are possible, but the physical arrangement and visibility of the items frequently convey information about relative importance. Want to do your friends a nasty turn? Do them a favour – clean up their desks or rooms. Do this to some people and you can completely destroy their ability to function’.

    The Apple Macintosh computer uses a desktop metaphor as its interface. It provides the familiar concept of a desk on which documents and files can be organised into folders or printed out. Recognisable icons connect functions to actions; placing a file in the trash and emptying the bin will dispose of your file.

    Anatomy of an interface
    The design of a computer interface will determine its appearance and functionality. An interface comprises of: windows, icons, menus, tools, navigation devices, buttons, sliders, check boxes, dialogue boxes, alerting messages, help documentation, scrolling mechanisms, click-able items, rulers, palettes, key commands, and feedback devices. The pointer or cursor will often change shape to indicate specific functions. Care needs to be taken with the amount of onscreen graphics. Information design expert, Edward Tufte advises us to reduce the amount of screen admin debris and clutter as they provide barricades to communication.

    The tools
    The tools required for interaction with a computer are: a screen, keyboard, mouse or track pad. There are rules of engagement such as touch screen interaction, voice commands, typing and clicking. Windows 7 is likely to come with touch screen capabilities, however developers may be assuming that everyone has the capability to use human finger touch screens. Many groups are calling for greater voice activation tools.

    Understanding interfaces
    Usability and comprehension of an interface will be determined by: the terminology used; how functions are accessed and actioned; and the relationship between the various levels of operation. The surface appearance of the interface for many users is key to being able to operate within the system. Interfaces are expected to be user-friendly and understandable not only within and throughout a particular software programme but also as a standard across different programmes.

    An interface introduces and provides an overview of the contents of the information that will be encountered. It also provides the means by which information can be navigated. An interface should facilitate an engagement with the content so that the user can interact with the information and gain knowledge. Information design provides the service by which the user is given access and connected to their desired information. People such as Ben Shneiderman working at the University of Maryland have been creating data visualisations dealing with the presentation of complex data through accessible interfaces. Smart Money’s Map of the Market and Film Finder are two examples.
    Picture 1

    FilmFinder

    Onscreen typography
    The function of onscreen typography is to provide a connection with deeper levels of information and experience. It is not primarily concerned with mimicking a print-related aesthetic where the nuances of typographic style may not be of the highest priority to the reader. Hamish Muir has suggested that much of what is designed for the digital experience is not much more than print behind glass. This questions the notion of real-world metaphors and whether we should be designing a new visual language for screen interactions. Oliver Reichenstein suggests that we ‘treat text as the user interface’.

    Information management
    The design of interfaces requires an understanding of information management and human perception. The information designer organises information and provides the navigational tools by which to view information in the desired sequence a user requires.

    Access to information
    Access to clear, accurate and comprehensible information is central to most users requirements. Interfaces that allow rapid navigation to information pertinent to a user’s request place those sites at an advantage. Interfaces such as those designed for Google, Amazon, Adobe or E-bay have proven popular with users. Conversely, as John Heskett states in ‘Toothpicks and logos’, ‘…virtuoso visual effects are useless if the ability of users to take action is not taken into account’.

    Further reading
    Designing Interactions, Bill Moggridge
    Interface, Gui Bonsiepe

    Experience Design, Nathan Shedroff
    The Design of Everyday Things, Don Norman

     
    • Claudio 3:46 pm on November 16, 2009 Permalink | Reply

      Hi Tony,
      last week I read this article on the AIGA website. Don t know whether you came across to it. It is interesting though.

      http://www.aiga.org/content.cfm/answering-the-call-to-service-design-an-interview-with-phi-hong-d-ha

      • Tony Pritchard 4:09 pm on November 16, 2009 Permalink | Reply

        Hi Claudio, no I haven’t seen the link so thanks for posting it here. Service Design has been emerging over the last couple of years. Each new discipline attempts to trump the previous one. First there was graphic design, then information design suggested that it was the umbrella title that subsumed graphic design, then Nathan Shedroff coined the term experience design and that took in information design. It makes sense to see design as part of a multi-disciplinary solution – some people operate at the micro level and others at the macro. Can you think of people who operate equally well at both levels and the levels in between?

    • Mark Horgan 6:31 pm on November 17, 2009 Permalink | Reply

      This is an interesting development on the standard GUI where multi-touch replaces the mouse.

      http://10gui.com/

      • Tony Pritchard 6:59 pm on November 17, 2009 Permalink | Reply

        Thanks for the reference Mark. It would be interesting to see inclusive developments for people who don’t have use of their hands as well.

  • Tony Pritchard 12:49 pm on November 8, 2009 Permalink | Reply  

    A response to the TWP definition of typography 

    “We define typography broadly as the solid form of language and situate it in any physical or virtual spaces where visible language is originated, mediated or experienced”.
    Paul McNeil, Typographic Working Party LCC

    Paul has asked me to write a response to the TWP definition above. Here is my draft response.

    Typography provides an interface to information. Its considered use can make information more accessible, understandable and useful. Communication can be described as the successful transaction of information. Poor typography can provide a barrier to successful communication.

    The basics of typography are neither hard to learn nor difficult to teach. This is dependent on the student’s willingness to learn and the teacher’s competence. Most people have the capacity to learn and be functional typographers. Students of typography should initially acquire a knowledge of the mechanics of typography (experimenting with the impact of changing type size and weight on information). Designers need to develop an understanding of how typography serves information on the one hand and engages interest with the form it takes on the other. Skillful judgement lies in determining the balance between form (visual) and function (cognition), based on context and an understanding of the user.

    Typography is not merely choosing a typeface – its arrangement (syntax) and form related to meaning (semantics) has arguably more importance when considering how information is to be communicated and to who, when and where.

    Caution should be exercised in elevating the status of a practical discipline (more akin to plumbing) to an elitist, esoteric pursuit. Typography is utilitarian and belongs to everyone.

     
    • Erin 8:00 pm on November 8, 2009 Permalink | Reply

      Nice draft version. In the first sentence of the next to last paragraph, you mean its arrangement, not it’s arrangement, no?

      • Tony Pritchard 8:16 pm on November 8, 2009 Permalink | Reply

        Thanks for reading Erin and noting the error. You are right, its its, not it’s . The TWP met last week with some strong personalities around the table including Phil Baines from CSM and Hamish Muir from LCC. We were discussing the teaching of typography and the value of typographic research.

    • Tony Pritchard 6:01 pm on November 15, 2009 Permalink | Reply

      My colleague at LCC, Martin Ashley, wrote this in response to the TWP definition on Typography:
      “When discussing typography, it is essential to separate typography which primarily has to inform (and then persuade) from typography which has to persuade (and then inform)…a subtle but critically important distinction”.

  • Tony Pritchard 1:11 pm on November 1, 2009 Permalink | Reply  

    Information design and writing 

    Introduction
    Words are a primary means of communicating information and their arrangement (syntax) and meaning (semantics) require consideration if they are to convey ideas effectively. The initial decision on choice of words and their composition into sentences can be critical to the reader’s understanding of the concept being expressed. Conversely a lack of thought prior to the composition of words can lead to ambiguity and confusion. In 2003 the United States Secretary of Defence made the following press statement: ‘Reports that say that something hasn’t happened are always interesting to me, because as we know, there are known knowns; there are things we know we know. We also know there are known unknowns; that is to say we know there are some things we do not know. But there are also unknown unknowns – the ones we don’t know we don’t know’. See The Poetry of D H Rumsfeld.

    English as a global language
    In 1550 the number of English speakers in the world was estimated at 5 million. In 1950 this was said to have increased to 250 million. In this new millennium the figure is thought to have risen to 400 million. In 2050 it is thought that 50% of the world’s population will be competent in English. English has been adopted as a global language and is the prime means of inter-cultural communication – from international air traffic control to MTV. In June 2009 the one millionth ‘word’ entered the English language and it was web2.0.

    Cross-cultural implications
    Businesses and governments have had to develop a respect for the cross-cultural values of other countries they have contact with. Global communication requires a sensitivity to: the tone of voice and level of directness adopted; the relative importance placed upon certain information; assumed level of knowledge and education; the technological infrastructure (a high-tech culture may fail in a low-tech context); and cultural aesthetic standards.

    Translation between languages
    Whether translating information from one language to another or using English as the language of preference the following is useful guidance: use short words, sentences and paragraphs;
 use one idea per sentence;
 remove superfluous information;
 use standard and consistent terminology;
 use a consistent tense and active voice;
 compile a list of acronyms and technical terms for a glossary;
 avoid culturally specific phrases or humour that may not translate well;
 avoid metaphors, similes, slang, analogies, ambiguities, jargon, fashionable, scientific or technical language that might not translate across cultures;
 consider how graphics, devices, iconography, numbered lists, bullet points will translate.

    Ambiguity
    The writer John Simmons encourages us to ‘avoid jargon, let’s aim to be clear, but let’s not remove idiosyncrasy from language’. Plain English has its limits, over editing can alter the original meaning or intention of the communication. Simmons is fascinated by ambiguity. ‘Ambiguity is never far away from the surface meaning of words…words are capable of many layers of meaning’. Ambiguities can cause confusion and on occasion be amusing, however they can be dangerous too. When Derek Bentley called out ‘Let him have it, Chris’ it cost both his life and that of the policeman. Was he in fact indicating that the gun should be handed over? See the following clip at 7 minutes and 20 seconds in.

    Conversational and written language
    Choice of words is important in helping people understand concepts. There is a tendency for academic and legal writing to use impenetrable and convoluted language. Conversational language is different from written language. Which of the following words would you use in a conversation? Utilise or use? Buy or purchase? Drink or beverage? The types of words we choose effects the accessibility to the message and tone of voice. Written language is altered to suit particular situations. Business with its insistent and urgent agendas favours the language of bullet points. Defining and writing for an audience is important when you want to communicate specific things to specific groups of people – ‘words are dead until they are read’. See The BBC News Style Guide.

    Evolution of the English language
    Changes in technology bring about changes in language usage and as a consequence shifts in the ways in which information is conveyed. The introduction of printing gave rise to new graphic expression such as bold type to gain emphasis. Conventions governing the presentation of information were set in place through layout techniques. The introduction of radio led to a range of styles of presentation such as commentary (sports and political), news broadcasts, weather forecast and the commercial. Television added vision to sound and again language was modified, as things that could be seen didn’t require describing. With the advent of satellite television language was further modified, with global broadcasting – alluding to the time of day had little meaning due to different time zones.

    The Internet has had a profound effect on the way information is accessed, disseminated and exchanged. Email, the web, chat rooms, message boards and weblogs all have their associated language and communication conventions. The interactive and dialogic nature of this mode of communication has led some to comment that it is akin to ‘written speech’. The web and mobile phones have seen the emergence of an abbreviated form of message transference for example gr8, cul8r, m8 (great, see you later, mate). See also David Crystal on Txting.

    Writing styles have changed dramatically. Sentences and paragraphs are shorter both in printed documents and in online text. Time is an increasing factor in our lives. Writers prepare text for ease of use. There are summaries, fast-track text and pullout quotes. We navigate information at different levels such as headings or summaries. With time at a premium you cannot assume your message will be read let alone absorbed and remembered.

    Plain English
    In recent times there has been a trend towards ‘plain’ English in terms of official speech and writing. In the past official communications such as letters from insurance companies often used convoluted language. Government, business and the public sector are making efforts to express their messages in a manner that most people are likely to understand. The Plain English Campaign has focused on the language used on medical packaging. The use of ambiguous language such as ‘use sparingly’ or ‘take after meals’ was found to be open to many interpretations.

    Unclear English
    In the past application forms, safety instructions, official letters, hire purchase documents, guarantees, licenses, contracts, insurance policies all attempted to communicate with people using their own specific language. In Britain the Golden Bull and Foot in Mouth awards identify examples that have baffled users of information. The Double-speak awards in the US have much the same objective in highlighting factually incorrect, deceptive, evasive, euphemistic, confusing or self-contradictory information. Positive benefits have been experienced by organisations that have revised their forms or instructional literature in the form of increased sales and customer satisfaction. See Boag Associates reference.

    Readability scores
    Rudolph Flesch devised a reading test that scored texts between 0 (unreadable) to 100 (easy to read). Using Flesch’s system many states in the US require insurance documents to score between 40 and 50. Reader’s Digest publications average scores of 65, Time magazine scores at 52 and the Harvard Law Review 32.

    Online translation service
    The accuracy of online translation services, such as Babelfish, cannot always be guaranteed. Below are well known English phrases that have been translated to another language and back again.

    ‘He does not want to be pigeon-holed’ became: ‘it did not wish to be perforated dove’.

    ‘Sticks and stones may break my bones, but names will never hurt me’, became:
    ‘the posts and the rock can break my bones, but the names never distort me’.

    These examples point out how rapidly language can lose its meaning when relying on mechanical means of translation. Thanks to my colleague Biggles for these examples.

     
  • Tony Pritchard 10:46 am on October 25, 2009 Permalink | Reply  

    Colour (US spelling Color) 

    Introduction
    Understanding the properties of colour (US spelling color) both in print and on screen is essential when ascribing colour values to elements of a design. Colour can be perceived both in terms of its physiological effect and its cultural or social significance. It is associated with various emotional states: green with envy; yellow with cowardice; and blue with melancholy.

    Colour is a means of gaining attention and adding visual dynamism. It can be used to aid navigation through media. Colour can enhance visual communication imbuing it with emotional value. It can organise and categorise elements through use of a colour coding system. Colour can help unite nations as in the Olympic symbol and what it represents. The image below is from this source.
    olympsym

    The colour wheel
    The colour wheel demonstrates the organisation and inter-relationships of colours. It consists primarily of 12 colours with black representing the mixture of all colours. Image Source.

    Hue (primary, secondary and tertiary colours)
    Hue is another name for colour. Colours can be grouped in three distinct types: primary, secondary and tertiary. Primary hues are red, yellow and blue. Secondary hues are the equal mixtures between pairs of primaries for example: red and yellow gives orange; yellow and blue produces green; and blue and red yields violet. There are six tertiary hues or colours. A tertiary colour is formed when a primary colour is mixed with an adjacent secondary colour. There are six tertiary colours: red-orange, orange-yellow, yellow-green, blue-green, blue-violet, and red-violet.

    Primary colours
    Primary colours are absolute colours and not mixed from any other.

    Red, yellow and blue are the staple colours used by artists they appear in the pigments of inks and paints. All other colours can be mixed from these three.

    Red, green and blue are the additive primaries forming light and responsible for all the colours we see on screens. When all three are added together in equal amounts white light is formed. When added together in varying quantities they form other colours.

    Magenta, yellow and cyan are known as subtractive primaries. These colours (along with black) are used in four colour lithographic printing.

    Saturation
    Saturation describes the intensity of colour. Pure unmixed colours have maximum intensity. Adding black, grey or white to alter the colour will reduce its intensity and create tones.

    Tone: colour values
    Adding white or black to lighten or darken a colour creates tints and shades and alters the colour’s tonal value.

    Complementary colours
    Complementary colours are opposite hues on the colour wheel and provide vivid contrast. Red and green, yellow and violet, and blue and orange are complementary colours.

    Colour temperature
    Colours can be described as warm and cool. Red, orange and yellow are warm colours whereas blue and green are cool. Greys can also be described in terms of warm and cool depending on the tint of red or blue they contain.

    Colour combinations
    Many artists and designers such as Johannes Itten and Josef Albers have experimented with the use of colour. Colours are conditional and depend on the surrounding environment in which they are set. Particular pairings dramatically alter the visual perception of both the colour and the shape it defines. Colours appear to change vibrancy depending on the colour surrounding it. Colours can also appear to advance and recede. Red on yellow will appear to advance whereas blue on green will recede. Image Source.

    Colour harmony
    Colours with similar properties appear to form harmonious relationships. Mixing two colours to form a third provides a bridge between the two colours. Rob Carter, author of many books on fundamental design principles describes this as ‘the offspring hue resembling both parents’. This technique also creates the illusion of transparency, as if one colour is overlapping the other.

    Colour emotions
    Colour has many qualities that are open to emotive interpretation. Some colours are perceived as masculine or feminine, soft or hard, trendy or traditional. Colour portrays the richness of culture and evoke atmosphere.

    Colour and type readability
    Type readability is dependent upon sufficient contrast between the foreground and background. If the type and its background are too close on the colour wheel there won’t be sufficient contrast. Yellow on black provides a high degree of contrast whereas yellow on white is very subtle. Blue on black provides very little contrast but conversely blue on white does. The image below demonstrates the limits of the physiology of the eye in perceiving colour. The eye has increasing difficulty in distinguishing between foreground and background colours when the contrast between the two becomes very slight.

    Complementary colours vibrate against each other. When applied to type and its background this will cause visual dissonance and detracts from readability.

    Information designers will often use colour as a functional rather than a decorative element. Colour can be used to code sections of a book. It can gain emphasis for a particular word by either placing it in colour or within a colour bar of sufficient contrast. Colour bars can also be used to underline information or run vertically along side a number of lines of type to highlight their importance.

    Cultural significance of colour
    In Western cultures white is a symbol of purity and associated with weddings. Black is linked to funerals and mourning but is also the colour many of us choose to be formal or stylish. Red represents good fortune in China and is the colour used at weddings. In Western cultures red is associated with danger but also with passion. In India red is a colour of purity. Orange is the colour for Halloween in the US and also the colour associated with Irish Protestant faith. Yellow is a sacred and imperial colour in many Asian cultures. Green is the colour of Islam but a lack of fidelity in China. Blue is a holy colour in the Jewish faith; a sacred colour to Hindus for whom it represents Krishna; a colour of protection in the Middle East; and immortality in China. Purple is a symbol of royalty in European cultures. The image below portrays the rising sun of the Japanese flag.

    Political significance
    Political parties adopt colour as part of their identity. In many countries red is associated with left wing politics and blue with right wing politics. In 2004 orange took on a more chilling significance. Terrorists in Iraq have dressed their victims in orange as a political statement against the Iraqis being held in Guantanamo Bay who are also dressed in orange. A red cross is both the Swiss and English flag. It is the symbol of the International Red Cross. In Islamic countries it still might provoke associations with the Crusader Invasions.

    Environmental factors effecting colour
    Taxis and trains often use a combination of black and orange for lettering and background colours. This is a combination that works well both during the day and at night. Colour will appear to change under natural daylight conditions and as daylight fades colours become more muted. Colour again changes when subjected to electric light conditions.

    Specifying colour for screen, visuals and commercial reproduction
    No system of colour specification across a range of media is 100% accurate. The way colour looks on screen will be different from the same colour laser printed or lithographically reproduced. The human eye perceives colour differently. To ensure accurate colour matching you will have to be the judge and not rely on others.

    There are two main ways of specifying colour in print. Cyan, Magenta, Yellow and Black (CMYK) is a four or full-colour process. K represents black as it keys in the other colours. CMYK is used to reproduce colour photographs where a likeness to reality is required. Percentage tints of cyan, magenta, yellow and black are used in various combinations to achieve a multitude of colours. The Pantone Matching System (PMS) is a system of pre-mixed special colours. Pantone colours can be printed as flat 100% colour or specified in percentage tints of the colour. A dark and light colour combination can be used in varying tints to create photographs as duotones.

    Colour and the web
    The Hexadecimal system is used to specify colours for the web. Colour is intrinsic to the psychology of communication on the web. Colour can be used to aid navigation. Colour is also used to represent whether links are active or visited. Not all screens will ‘see’ colour the same way and therefore testing across platform and browsers is always advisable.

     
  • Tony Pritchard 11:47 pm on October 16, 2009 Permalink | Reply  

    The Life Cycle of a Mobile Phone 

    This is a video by Claudio De Paula Graciolli Jnr who is a student on the Graduate Certificate Design for Visual Communication course at the London College of Communication

     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
esc
cancel