Tagged: colour Toggle Comment Threads | Keyboard Shortcuts

  • Tony Pritchard 9:29 am on August 2, 2014 Permalink | Reply
    Tags: colour, , , Design Research, Design Theory, , , , Sketchbook, ,   


    These two films look at how Henrietta Ross and Cat Drew developed their sketchbooks. Too often we look at the finished items and not the process that led to the resolution of projects. Henrietta and Cat take you through how they documented, contextualised, experimented and evaluated their work on the Design for Visual Communication course at the London College of Communication. Those new to visual communication from other disciplines or a text-based education might find these films useful in understanding this part of the design process.

  • Tony Pritchard 4:36 pm on May 16, 2010 Permalink | Reply
    Tags: Art, , Color Theory, colour, Colour Theory, , Fine Art, , Johannes Itten, Josef Albers, The Color Wheel, The Colour Wheel, , Victor Pasmore,   

    The Colour Wheel Tutorial 

    This is the transcript of the voice-over from the movie. This is a version of the colour wheel. It was introduced to me by Geoff White who was taught it by Victor Pasmore whilst at the Central School of Arts and Crafts.

    The equilateral triangle
    The design constructed from equilateral triangles. An equilateral triangle is one which has all sides measuring the same. The internal angles are all 60 degrees. One could equally construct the design using other shapes such as circles or diamonds or squares.

    The construction
    There are five rings to the design. I began by constructing the triangle. This can be done at any size. I copied the painting lent to me by Geoff White. The triangle was 70mm.
    1 I set a 70mm square and deleted the top and two sides, resulting in a single line.
    2 I rotated this 60 degrees and joined the two lines. I then joined the other two points to create the third side.
    3 I then set a circle with a radius of 210mm. I placed the triangle centrally on the vertical. And placed it so that the two base points of the triangle touched the circle.
    4 I then rotated the triangle by 20 degrees around the centre of the circle. This results in 18 triangles.
    5 The four rings inside this are created by progressively scaling the rings by a 70% reduction from the centre of the circle. The outer ring is scaled by 70% to create the fourth ring. Then the fourth ring is reduced by 70% to create the third ring and so on.
    6 A black circle is placed at the centre, this measures 6mm in diameter. And a 50% grey circle measuring 18mm in diameter is placed outside this.
    7 The third ring from the centre is comprised of pure colours.
    8 The first and second ring from the centre have had black added to them making them darker. The first ring has 50% black added and the second ring has 25% black added.
    9 The fourth and fifth rings from the centre have had white added to them. I have done this by altering the opacity of the colour. This allows the white background to show through the colour and thereby lightening the colour. The fourth ring has 75% opacity and the fifth ring has 50% opacity.

    Complementary colours
    Colours on opposite sides of the colour wheel are known as complementary colours. Orange and blue are complementary colours, as are red and green, and purple and yellow.

    I have used Cyan (which is a blue colour); Magenta (which is a pinky red colour); Yellow and Black (K=Key) to mix the colours. This is the CMYK colour system which is commonly used in printing.

    Colour rotation
    As the orange colour moves to red I have added more magenta. As the red moves to blue, cyan has been added. As the blue moves to green, yellow is added. And as green moves to yellow blue is extracted.

    Colour against a white background
    When viewing the colours against a white background, some stand out better than others. The purple contrasts well with the white background. Whereas the yellow is quite faint. The eye finds it quite difficult to detect subtle contrasts where a colour tone is close to the background colour.

    Colour against a black background
    Changing the background to black increases the contrast of the yellow to the background but decreases the contrast of the purple. These types of effects are also influenced by the media used. Colour will appear differently on a computer screen than when printed on paper.

    Although colour is basic to visual communication. It is important to understand its properties and how these change through different situations such as lighting conditions. A little time studying this will benefit the designer and give a more informed basis for choosing colour.

  • Tony Pritchard 4:38 pm on January 17, 2010 Permalink | Reply
    Tags: Baines, Baldwin, colour, , , gestalt, , , Noble, semantics, semiotics, Theory, Triggs, , , ,   

    Design theory 

    I would like to preface this entry by explaining that I am not a theory expert. This post is a work in progress that hopefully others, more knowledgeable than myself, will contribute ideas to a growing collection of design-related theories.

    Theoretical foundations
    A theory is a set of speculative ideas that attempt to describe and explain the practices of a particular subject. The theories surrounding visual communication are many and varied and beyond the scope of this blog. What follows is a brief overview of the significant ideas that have shaped visual communication practice. As my colleague Teal Triggs reminds me, knowledge of these theories will not guarantee you success as a designer but will ensure that you are a more informed practitioner. I would also urge students not to become too embroiled in theory at the expense of practice but to see the relationship between the two. Don’t be too fazed by theory either, eventually it becomes something in the background that underpins your practice. You don’t consciously need to invoke theories to design. My colleague Ian Noble has commented that it is not the ‘practice of theory but the theory of practice’. Which ever way around you wish to see it there is a symbiotic relationship between theory and practice. Theory often describes the many conditions in which practice exists. Develop your practice, but know about where it will ultimately be situated, who will be looking at it, and from what perspective. You need to know a bit about say colour theory in order to function but you don’t need to be expounding about colour saturation to impress your peers. Let them see your understanding in practice.

    Communication theory
    Communication theory is an attempt to describe how meaning is shared and understood between people, primarily through visual and aural information transferred through various media/channels.

    Humans make signs and symbols to communicate meaning. We convey our feelings through verbal and facial expressions. We gesticulate with our hands and arms to give emphasis to our utterances. Emotions are represented through laughter, anger or crying. To create permanent representations of communication we make images that embody concepts. Language is a method of associating sounds with symbols. These symbols developed into letters and words and were captured on stone then paper and now stored digitally. The digital realm allows for information to be recorded, compressed, stored and transmitted in a common form.

    Words are a method of encoding language just as musical notation is the way in which music is encoded. To understand information it is necessary for us to understand the code. The code of language is geographically and culturally specific, if we do not understand all of the world’s languages then for us those codes will fail. The three stages for the transmission of information are: firstly the message is encoded; it is then transmitted through a communication channel; finally it is decoded on reception.

    Information theory
    Claude Elwood Shannon and Warren Weaver, two engineers working at Bell Laboratories, evolved a prototype theory of information in 1948 based on the technology of the times (telephone, radar and radio). Their proposed model was encapsulated in the flow diagram: information source > transmitter signal > noise source > received signal > receiver > destination. The theory was based on how information is sent, transported and received and not on how it is interpreted for meaning and understanding. The theory was known as ‘The Mathematical Theory of Information’. As a student at MIT in 1937, Shannon had previously taken the binary system of ones and zeros and applied it to electrical impulses derived from switching an electrical source on and off. This insight is credited with initiating the digital revolution and the birth of the computer. This breakthrough identified the method by which information, in the form of words and numbers, could be structured and converted to what Shannon called ‘bits’. Information could be translated in terms of ones and zeros (binary code) and transmitted.

    The growth of information transmission through telecommunications has been phenomenal. In 1950 the most advanced communications cable could transfer 1800 conversations. By 1975 this had increased to nearly a quarter of a million. At the start of this new millennium Lucent’s WaveStar™ optical fibre can accommodate over six million conversations. This has been likened to transmitting nearly one hundred thousand encyclopedias a second.

    Steve Holtzman, a leading commentator on digital developments, describes the concept of designers and artists working in the digital medium as ‘sculpting in ones and zeros’. Holtzman continues ‘…information is now, in this information age, taking its rightful place beside energy and matter as a fundamental shaper of the world we live in. Of the three, only information is at the heart of who and what we are. It is a manifestation of our humanity that, in digital form, is sculpting new worlds’.

    Other fields of enquiry
    Shannon and Weaver’s work described the mechanics of how information is transferred. Their theories do not address all aspects of communication. To gain a more complete picture it is necessary to look to other fields of enquiry such as linguistics, sociology and psychology.

    Semiotics is the study of signs and symbols and their relationship to what they represent in the physical world. Ferdinand de Saussure and Charles Sanders Peirce are both credited with separately pioneering study into this field. Saussure’s approach focused on the structure of language whilst Peirce concentrated on how meaning was derived by a reader. Letters represent sounds. Combinations of letters represent words. Words represent objects. A word is a ‘signifier’ and signifies the relationship to the object which is known as the ‘signified’. The word ‘cup’ for example in English is a signifier for the object we drink out of. Different languages have different words for objects for example in France a ‘cup’ is known as ‘tasse’. These are learnt codes. This means that words and their associated sounds have no inherent relation to the things they represent. A word-based language requires a common understanding and agreement amongst a community that the symbol of a word represents a particular object. Words and sounds are information but if they can’t be translated and understood there will be no communication.

    Peirce suggested that a sign and the object it represented could be subject to multiple meanings depending on the individual’s prior experiences. He termed this interpretation of meaning ‘semiosis’. Peirce also categorised signs into three groups. Iconic signs look like the thing they represent. Indexical signs indicate the relationship to the thing they correspond to such as smoke to fire. Symbolic signs are those where there is no recognisable connection to what they stand for and are reliant on readers making the association, for example a green cross represents a chemist. Information designers are often charged with determining the most appropriate method of representation (monogram, logotype, symbol, lettering).

    Semantic typography
    The word semantic relates to a branch of linguistics concerned with meaning. This could apply to a word, sentence, phrase or text. Signs and symbols give form to ideas and in turn can influence the meaning that is conveyed. Graphic designers working with typography have attempted to enhance the meaning of words through their designed appearance. Design educator, Wolfgang Weingart has lectured widely on the semantic dimension in typography. Weingart talks in terms of ‘activating the part of typography dealing with the meaning of the design elements’ and states that ‘graphic modifications in typography, or lettering can intensify the semantic quality of typography as a means of communication’. Recognising the visual characteristics of typographic signs such as the Coca-cola logo allows us the same association when the logo is created in another language. The illustration ‘falling’ below shows how a simple typographic modification helps express the meaning of the word.

    Typographic syntax
    Typographic syntax is concerned with the arrangement of words and phrases within a chosen medium and format. The mechanics of typography such as: letter, word and line spacing; symmetrical and asymmetrical layout on a specific format; and choice of weight or size all influence typographic syntax.

    Gestalt theory
    There are a number of principles belonging to this branch of visual perception.
    These include the principles of similarity, proximity and continuity.

    The principle of similarity
    The principle of similarity is a branch of Gestalt theory, which states that objects sharing the same visual characteristics will be perceived as belonging together. This notion has been exploited by artists and designers, such as Malevich and Seurat, within their compositions. This is often made manifest in angles or elements being repeated throughout the composition to enhance a sense of harmony. The left side illustration shows a grid of squares. Two squares have been rotated 45 degrees. The eyes see the change in pattern and makes the connection between the two angled squares. The illustration on the right shows elements repeating themselves for example the vertical black line repeats the right edge of the red square.

    The principle of proximity
    This principle states that those objects that appear closer together will be perceived as belonging together.

    The principle of continuity
    This principle relates to the belief that humans attempt to simplify complex visual propositions. A plus sign is perceived as two lines crossing each other rather than four lines meeting at a centre. In the example below most people will see the form as two overlapping squares as opposed to an eight-sided shape. This conforms more readily to our visual expectations or making sense of what we see.

    Colour theory
    Colour can be described in terms of its physiological, psychological and socio-cultural effects. Colour theory covers aspects such as: hue (primary, secondary and tertiary colours); saturation; tone; complimentary colours; temperature; advancing and receding colours; vibrancy; and harmony. Students of design will often undertake many different colour exercises in order to experiment with and understand the effects of colour. It is also important to understand how colour changes through different lighting conditions and media such as print and screen. I have written in more detail about colour in a previous post.

    Visual language and grammar
    Visual language is comprised of simple fundamental components such as dots, lines, circles, squares and triangles. Colour, texture and space are also basic elements of visual language. Certain shapes have become connected with deeper psychological associations we have as humans and our existential experiences. Circles have strong meaning in terms of our knowledge of the universe. Our planet, the sun and moon are circular and this has a particular resonance with us. Squares are solid and stable. We use these associations when making compositions in the abstract to represent our concrete (real) world. Visual language can be manipulated to express, represent and communicate understandable concepts such as rhythm; speed (fast/slow); distance (near/far); movement (direction – up/ down, forward/backward, left/right); denseness; space; weight (heavy/light), force (strong/weak); impact; light/dark; proximity (close/apart); and structure (regular/irregular). Please also see my previous post on visual language and grammar.

    The theory of data graphics
    In the Visual Display of Quantitative Information Edward Tufte devotes the second part of this seminal book to detailing his theory of data graphics. The section begins with a clear statement of his view; ‘data graphics should draw the viewer’s attention to the sense and substance of the data, not to something else’. The theory encompasses the idea that in printed design the maximum amount of ink used in a data graphic should be dedicated to representing the information. The challenge for the designer is to analyse the ratio between redundant and non-redundant visual elements. In other words what can be erased without loss of information. The designer’s motivation for designing is very much called into question. Are we genuinely interested in conveying information for the purpose of communication or in demonstrating our graphic skills and aesthetic judgment to our peers? In terms of screen-based design, such as with I-Phone applications, Tufte implores designers to remove admin debris and clutter as they provide barricades to communication. These visual impediments to communication are what Shannon and Weaver would have called the ‘noise’ or interference.

    LATCH theory
    LATCH is an acronym coined by Richard Saul Wurman, which stands for Location, Alphabet, Time, Category and Hierarchy. This theory proposes that these are the five ways to organise information. Please see my previous post on methods of organising information for a more in-depth post on this theory.

    Idea generation
    Edward de Bono is a name most would associate with the term lateral thinking. Lateral thinking aims to make a break from ‘logical’ reasoning by employing less obvious methods to develop ideas and solve problems. Edward de Bono has written extensively about creative thinking and ideas generation. Six thinking caps is a well know tool for developing six different perspectives on a particular focal point.

    Denotation and connotation
    Denotation can be defined as the specific intended meaning of a word or image whereas connotation refers to the possible interpretations that can be placed upon words and images. This is an important concept for designers to grasp as often they are in the position of distilling specific meaning into designed communications and conveying this to users who may bring their own interpretation to the intended message.

    Post-structuralism embodies theories that explore the relationship and distinctions between the spoken and written word and how it is received and interpreted. During the 1960s post-structural thinkers such as Roland Barthes, Michel Foucault and Jean Baudrillard began to question the validity of Saussure’s assertions that words were neutral. They challenged the idea of absolutes in communication.

    Deconstruction is the critical analysis of language to expose alternative readings of a message and its meaning. This approach questions the assumption that communication occurs in a singular objective fashion. The philosopher Jacques Derrida expounded upon the relationship of writing and speech seeing them as the co-creators of meaning. The reader or receiver of a message places an interpretation of meaning on the communication, bringing his or her own experiences and ideas as an influence. This meant that the domain of meaning was no longer the sole ownership of the author. Information designers acknowledge that users of information bring a multiplicity of interpretation to communications. By understanding this they can ascertain the ways in which designed communication may be interpreted and account for this through user research and testing.

    Modernism encompasses a number of art and design movements of the twentieth century. The movement within graphic design can be characterised by what were perceived to be a rational and functional approach embodied within the maxim ‘form follows function’. This approach manifest itself through the use of asymmetric layout; sans-serif typography; and grid structures. Although the philosophical premise of modernism has now been questioned, information designers acknowledge the continuing importance of key concepts such as structure as a device to order complex information.

    This movement rejected modernist ideas as dogmatic and lacking in intuition and expression. Many of the key protagonists eschewed rationalised order in favour of the vernacular and a referencing of eclectic styles. The lesson for information designers is that communication has many forms, and that information has no inherent meaning other than that which we ascribe to it.

    Visual rhetoric
    Visual rhetoric is the use of words and images to persuade or influence users of information.

    Ethnographic theory
    Ethnography is primarily a social science qualitative research method. It is the study of a particular culture through situated participation such as observation, interviews and questionnaires. For graphic designers this involves immersing yourself within the culture under observation.

    Content analysis
    This is a stage within cultivation theory, which analyses the content of subject matter and its effect on perception.

    Discourse analysis
    This is a branch of linguistics concerned with the analysis of written and spoken language.

    Iconography relates to the meaning of symbols and images within the visual arts.

    This theory represents the idea that people experience and think about things in different ways.

    Marxist/social interpretation
    Marxism derives its name from the thoughts of Karl Marx. It is a theory based on the relationship between social classes. The view is that our perception is manufactured and controlled by dominant forces such as prevailing political and media ideologies. The book Visual Communication by Jonathan Baldwin and Lucienne Roberts provides a more articulate description of the relationship of Marxism to visual communication.

    Feminist theory
    This theory attempts to describe the essential differences in gender perception. It provides an understanding of how lived experiences shape our view of the world.

    This theory was established by Sigmund Freud and aims to provide an understanding of the conscious and sub-conscious mind. A Freudian slip refers to an idea that something said by mistake reveals what we might truly be thinking.

    This theory relates to writing describing those counties that had previously been colonised. It challenges the assumptions and perceptions brought by the colonising powers.

    In writing this article I realise the confines of my own knowledge of the theories relating to design practice. Some of my observations as a consequence are a little naive and superficial. If I have inadvertently stated anything incorrectly please let me know. It also occurs to me that design related theories are perhaps limitless. There are growing theories relating to online interaction and usability such as Ben Schneiderman’s Principles of Interface Design or Don Norman’s ideas on the psychology of product design. There are however limits to a weblog post and I’ve reached that point.

    Information Anxiety 2, Richard Saul Wurman
    Graphic Design Theory, Helen Armstrong
    Visual Research, Ian Noble and Russell Bestley
    Visible Signs, David Crow
    Typography, Wolfgang Weingart
    The Visual Display of Quantitative Information, Edward Tufte
    Type and Typography, Phil Baines and Andy Haslam
    Universal Principles of Design, Jill Butler, Kritina Holden, and Will Lidwell
    Information Design, Robert Jacobson
    Visual Grammar, Christian Leborg
    Visual Communication, Jonathan Baldwin and Lucienne Roberts

    Thanks to my colleagues Ian Noble, Dr Russell Bestley, Dr Teal Triggs, Dr Alison Prendiville, Dr Ian Horton and Dr Nicky Ryan at the London College of Communication for their contributions to this list.

    • Richard Saul WURMAN 9:40 pm on January 17, 2010 Permalink | Reply


      • Tony Pritchard 8:11 am on January 18, 2010 Permalink | Reply

        Thanks for the comment Richard and apologies for the omission. We’re indebted to your work on this theory and we use it in a very practical everyday sense at the LCC.

  • Tony Pritchard 12:08 pm on December 13, 2009 Permalink | Reply
    Tags: Circle, colour, , Line, Square, Triangle,   


    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.

    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.

    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.

    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.

    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, , , , navigation, website design   


    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.

    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 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.

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

  • Tony Pritchard 10:46 am on October 25, 2009 Permalink | Reply
    Tags: Albers, , colour, Itten,   

    Colour (US spelling Color) 

    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.

    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 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.

Compose new post
Next post/Next comment
Previous post/Previous comment
Show/Hide comments
Go to top
Go to login
Show/Hide help
shift + esc