This is a poster I designed to promote a pop-up shop selling student work at LCC
Recent Updates Page 3 Toggle Comment Threads | Keyboard Shortcuts
Here is the transcript from the section describing the design of the John Miles poster:
From October 2008 until November 2009 I was asked to design posters to publicise the Talking Graphics lectures. The posters reflected the individual themes of the speakers but also work stylistically as a related series.
John Miles poster
Here you see the completed poster of the example we are about to recreate stage by stage. I will explain how I made each decision.
Enlarging the poster
So that you can see more clearly we’ll enlarge the poster and look at the poster section by section. Here you see the main part with all the graphic components we will be working with.
Now we focus in further until we arrive at the very first decision – which is the surname of the speaker John Miles. Note that the surname is tightly letterspaced but that the letters are not touching. When setting type large you can often afford to set the type quite tightly.
Here we see the first name ‘John’ the same size as ‘Miles overlaying the surname. I have coloured it a transparent blue. John is positioned so that the vertical stroke of the ‘J’ aligns with the vertical of the lowercase ‘i’. The baseline of ‘John’ aligns with the x-height of Miles.
John Miles plus colour
A block of colour with a gradient applied is added above ‘John’ aligning with the cap height. Another block is added below Miles aligning with the baseline.
Two further colour bands are added. One colour band is to the x-height of ‘Miles’ and the other to the cap height of John. I have left the white ‘shining’ behind ‘John.
A large block of introductory text is added. The baseline of the last line aligns with the baseline of ‘John’. The type runs up from this point. The left edge of the type aligns with the ‘h’ of ‘John’. Within the text I have highlighted the date and time as important information.
Adding the small blocks of type
Next we move down the poster and towards the centre.
First we add a small block of text to the left of the main body of text. The first baseline aligns through with the baseline of the large type next to it. The small text aligns left with the vertical of the ‘J’ of ‘John’.
A second small block of text is added. The baselines align through with the first block. I have overlapped the first three lines of the second block with the last three lines of the first block. This creates a satisfying step and allows for the small type to seemingly wrap around the large type without touching it. The type aligns left with the ‘M’ of Miles.
The third small block of type is added underneath ‘Miles’. The type aligns left with the ‘h’ of ‘John’. The space between the type and the baseline of ‘Miles’ above is visually the same as the space between the first small block and the cap height of the ‘J’ of ‘John’. You can see this demonstrated by the two small red squares.
A fourth and final small block of type is added to the right. The baselines align through with the third block. Again I have overlapped the last three lines of this block with the first three lines of the block to the right. The left side of the fourth block aligns vertically with the second downstroke of the ‘n’ of ‘John’.
Three vertical rules
I’ve added three vertical rules in progressively heavier weights. This is to emphasise the reading direction of the type as they appear to move from the background to the foreground. I have coloured them white to add contrast.
Top of the poster
We now move to the top of the poster. We are going to add the series title. First the word ‘Talking’. Then ‘Graphics’. The vertical of the ‘h’ of ‘Graphics’ aligns through with the vertical of the ‘T’ of ‘Talking’. This sets up a strong vertical alignment with the ‘J’ of ‘John’. ‘A series of’ is added next to ‘Graphics’. The baselines align through. The second line is added underneath aligning left with ‘h’ of ‘Graphics’. As does the third line. The notion of type stepping and wrapping is reflecting the design approach of the type below.
Key alignment points
We now reduce the poster down in size so that we see the main area of typographic design again. The red lines show you those key alignment points again.
Eight of the series
And here are eight of the series to finish with.
Transcript from the ‘Periodic Table’ movie
TPFM. This is Tony Zabalione. Sweet for the ladies, something stronger for the gents. Tonight we’re going live to the London’s O2 Arena for a rare performance by the Periodic Table. Devised by Dmitri Ivanovich Mendeleyev, the Periodic Table was formed in 1869, sweet summer of ’69. 1-8-6-9 UK Sterling Greenwich Mean Time years. 1869 was the year. Currently there are 118 members of the Periodic table. The classic formation of the table is of 18 vertical groups and 7 horizontal rows (known as periods). The Lanthanoids and Actinoids are usually separated out. I guess those guys just need their own space. We’re ready to handover to TPTV for tonight’s performance. And it’s over to you Tony Zirconium. Hellooooooo London!
Ladies and gentlemen – the Periodic Table! Here they come in order of their atomic number. Hydrogen is first out followed by Helium. Hello Helium. Number 8 Oxygen we sure need you. Fluorine at 9, remember kids keep brushing your teeth. At 13 unlucky for some it’s Aluminium. Clean in at 17 – Chlorine. Holy Kryptonite at 36. Hi ho Silver! Number 47. At 50 it’s Herge’s adventures of Tin Tin! You are Gold! In at 79. Hey lighten up Lead, you’re 82.
Vertical groups and horizontal rows (periods)
The horizontal rows are known as periods – hence the Periodic Table. These rows are organised by the chemical properties of the elements. We have metals to the left and non metals to the right. The elements are listed by their atomic number (which is the number of protons in the atomic nucleus). From top left Hydrogen with an atomic number of 1 to Ununoctium bottom right with an atomic number of 118. Ladies and Gentlemen – I give you the Periodic Table in classic formation. Now guys on the count of three I want you to disappear behind your colour blocks. 1, 2, 3! Ain’t that purty?
Quotes about the Periodic Table
Author Bill Bryson describes the periodic table as a ‘thing of beauty in the abstract, but for chemists it established an immediate clarity’. Writer Robert E Krebs suggests it’s ‘the most elegant organisational chart ever devised’. Tony Pritchard of the LCC considers the Periodic Table as a classic of Information design. Praise indeed.
I want us to get to know the different groups within the table. Here are the metals. First up the Alkali metals, six in total including Lithium, Potassium and at 11, this guy is the salt of the earth, literally! It’s sodium. Give it up for the Alkalis – our kinda guys.
Alkaline earth metals
Next up it’s the Alkaline earth metals. Including at 12 that bright light, Magnesium. Transition elements make yourselves known! We got some beautiful metals here: Titanium, Copper, Platinum and Mercury. Up next the Lanthanoids and Actinoids. The Actinoids doesn’t include my anium, no it’s Uranium. Finishing off the metals – it’s the ‘other metals’. Aw – you’re not just any other metals to me guys, you’re the special metals. Hey what are you guys doing on stage? Oh oh – it’s the metalloids! Can you guys make your minds up are you metals or not? [They are also known as semi-metals]. Give it up for the metals. Metalloids what are you doing?
Time for the non-metals. Can we restore some calm and dignity. Introducing the other non-metals. Up next the Halogens. Add bulbs to shopping list and save the planet. Now these next guys get a bad press. Some call them inert, I think they’re rather noble. I like these guys, I know you’re gonna love them – the inert gases! There you have it – the non-metals. Oh no! It’s the metalloids again!
Unknown chemical properties
Have we left anyone out? Hey you guys don’t know who you are – you’re the unknown chemical properties!
Solids, liquids, gases, unknown and synthetic categories
I don’t want to over categorise you guys but who are the solids? Let’s get wet with the liquids! A right couple of show offs – Mercury and Bromine getting it together there. Hissss – here come the gases! Now did I turn the gas off? They should really know who they are, we certainly do by now – it’s the unknowns! And finally the synthetics – are you guys for real?
There you have it, the periodic table. In devising this method of vertical and horizontal cross referencing Mr Mendeleyev is said to have been inspired by the game of patience. Where the cards are arranged in suits horizontally and by descending number vertically. However you did it sir, we salute you – you sure dealt the world a good hand!
Bre and Tony Pritchard are discussing. Toggle Comments
Transcript from the ‘Typographic Hierarchy’ movie
Welcome to this tutorial on typographic hierarchy. We will be looking at word shape, copy analysis, syntax and semantics. Typographic hierarchy is about analysing text-based information and creating levels of importance based on the meaning of the words. The designer can determine the order in which the reader sees the information through basic typographic techniques such as changing the size, weight or position of the type. This activity is fundamental to typographic communication irrespective of choice of typeface. The work of Emil Ruder, Wolfgang Weingart, Armin Hofmann, Josef Müller-Brockmann and Helmut Schmid is worth investigating. Their typographic compositions not only exhibit the notion of hierarchy determined through analysis but the power of visual form inherent in letters and words. The beauty in their work isn’t necessarily imposed through personal whim but rather in discovering typographic ideas within the given information and drawing this out. The skill is in this intense form of seeing.
For the exercises within this tutorial I’ll be using the widescreen format of 16:9. I have divided the screen size into 16 horizontal units and 9 vertical units. These I have subdivided into half again. Although designing for the screen (such as in web design or moving image) or for three-dimensions (such as exhibition design) or print-based design has conventions related to the medium, the principles I’ll be introducing can be applied across media.
We recognise words through their shape. In our exercises we will be using a typeface called Helvetica Neue. It has a simplicity in its designed form. We don’t read individual letters and then work out what the word is, rather our eye scans the text and recognises distinctive word shapes. Compositions that use a lot of words set in capitals or uppercase only can look blocky and reduce the immediacy of word recognition. Capitals are important in recognising the start of single words as you might find in airport or road signage. For most designs using typography (such as posters) upper and lowercase is advisable.
We’re going to consider copy analysis. Copy is another name for words or text. You may have heard the term copy writing. The copy writer or copy editor is someone who writes words for advertisments or articles in magazines. In our exercises we will imagine that we are designing an invitation to a private view of an exhibition. Typically publicity will be comprised of certain types of information. To be able to act upon information we need to know what the event is, when it is taking place, who it involves and where it will be. It aids our understanding if we read information in a meaningful sequence. This is the task of the person commissioning the publicity and the designer who will use typography and layout to present the information in a visual form. Typography has to attract attention and then inform. Our information is currently a grey block of type. If we analyse the copy we see it is comprised of four pieces of information. What is the event? It is an invitation to attend a private view called Typescapes. When will it be? It is on Friday 4 December. Who will it involve? There are four well known people in the field giving gallery presentations. And where will it be? It’s at the Design Museum.
We can clarify the groups of information by introducing line spaces between the groups. We can also consider the location or position of the information. Drawing some out to the left gains emphasis for that information. We see it first and therefore read it first. In this composition we have placed the information in 5 horizontal groups, giving each piece of information a separate location. We read the information sequentially from left to right. This helps the reader build up a picture of meaning, each piece of information adding to the previous. In information design this is known as progressive disclosure. When driving along a motorway you appreciate information being broken down into digestible chunks. Being given all the information in one go can be confusing. If we want to raise the level of importance of individual pieces of information we can literally raise them up. Here’s the what – Typescapes exhibition. The when – Friday 4 December. The who – the four people speaking. And finally the where – the Design Museum. In this layout I’ve decided that it’s the what and when that will be seen first. I could equally have fronted up on the personalities involved. These are the types of decisions designers and their clients make. The red lines show the key construction or alignment points. The composition is divided into thirds vertically. The top third is pure space. I tend to prefer layouts that use space to the left and top of the composition. The yellow lines demonstrate that I have used vertical increments based on the lines of type.
So far we have only used one typeface, one size of type and one weight. In this next sequence we will consider the impact of weight, but again keeping to one type size. I will move the weight sequentially through the block of information. When selecting a change of weight of type remember that contrast is a key tool for designers. Choose a significant weight change where you can see the difference. In this version I am using weight to emphasise the event title and layout to group information in key locations. These techniques not only articulate the information but through considered use of position and space create visually intriguing layouts. This is known as typographic syntax. I’ve used key words in the main horizontal statement to structure the other information. The date aligns with the word Typescapes. The gallery presentations align with the word Typography (all the people are known for their typography). And the location (the Design Museum) aligns with the word Environments. Considering the meaning of words when aligning typography is known as semantic typography.
Now we consider the impact of changing the size of type. Again think contrast. Setting type twice the size makes it more noticeable than say just going to the next point size up. In these exercises I have been setting the type bigger and bolder than I would due to the screen resolution on YouTube. If I was designing for print, I might choose 9pt regular for the text, maybe 9pt bold for sub-headings. If I wanted to gain additional emphasis say for section headings I might go to 12pt or 18pt headings. You will notice there is a mathematically proportional relationship between the sizes. On screen we have a layout based on changing the size of the event title (the what). The type is twice the size of the smaller type. The other information is structured in relation to this first main statement. Next it is the turn of the date to take dominance. Again the information is structured to this typographic statement. Then the people’s names are emphasised. And finally the location is emphasised. Notice in each case the overall design is driven by the the first large statement. This way of working through analysis and determining hierarchy often yields the creative solution to the layout. You don’t always have to impose another conceptual idea on top. You can let the idea grow organically from the information. If I grey out the information then bring each part back in order of the sequence in which the decision was made you will see how the design is constructed. First the large title. Then the line above it is added. The You of You are invited is aligned with the T of Typescapes. The date is then added – it aligns with the type to the left but also with the S of Spatial. Again I am considering significant words to align with. The gallery presentations align left with the date and the S of Spatial. Then the location, Design Museum, with the E of Environments. The red lines show you those key construction points. Here the date takes prominence. First the date is set. Then the type underneath is structured in three columns aligning with Friday, December and 2009. Then the title aligns above December. With the private view finally aligning with the Friday. You will notice that I often choose not to space the components out evenly. This is an attempt to create visual tension and dynamism within the information. The type at the top clings to the top edge and the type under the date clings to the date. The edges and the white space are considered as equally important in their contribution to the composition. The redlines show the key alignment points. In this composition I have emphasised the speakers’ surnames. Sometimes a design comes together in parts. The first idea sees the information at the top stepping down. The alignment points are again on significant words. It’s as if the words are clinging to milestones as it steps its way through the information. The steps create 4 potential alignment points for the names. Before arriving at this location I will have tried the others. I felt this position afforded the best sense of balance for this asymmetrical design. I wanted the feeling of pulling off the centre to a more right sided balance. The red lines allow you to see those key decision points. I often think all I am doing is making decisions as to where to line things up. Finally we are using the location of the event, the Design Museum, as the driver for this composition. I let the rest of the address flow on to the right. A simple typographic observation – Design Museum is made of two words. Both have strong vertical initial letters – ideal for left aligning other information. The gallery presentations list gives me the most number of lines which creates a strong left edge. The date is broken into 3 lines to align with the word Design. Don’t be afraid to experiment with splitting the lines. Look for visual splits but also keep in mind splitting for sense. Maybe read out aloud the words as you have split them to see if it makes reading sense. The title hooks onto the word Friday and extends out to the left. Finally I am isolating the words private view from the main group to create emphasis for it.
This has been Typographic Hierarchy with me Tony Pritchard. We’ve considered copy analysis and how you can create emphasis for different parts of the information through size, weight and position of type and how doing this can produce many different types of layouts.
Transcript from the ‘Visual Language and Grammar: Composition with Letterforms’ movie
Welcome to the fourth episode of Visual Language and Grammar. In part four we are going to be considering letterforms and understand their relationship to the concepts introduced in the previous episodes of Visual Language and Grammar. Letters are made of shapes such as circles, squares, triangles and lines. Letterforms are symbols that represent sounds and form words and sentences that help us communicate ideas. We can also view letters as visual forms in their own right.
The white square on screen measures 150mm. We will be using a 90mm square centred on this. And this square has been divided into nine 10mm units.
If we draw a diagonal line from bottom left to the centre at the top and then down to the bottom right corner we have the beginnings of the symmetrical capital letter A. The left half of a circle looks like a letter C. The right half a capital letter D. Three horizontal lines and a vertical on the left makes a capital letter E. The word capital means major, important or large. The top of the architectural feature column is called a capital. The most important city in a country is a capital. Capital letters are used to begin sentences and therefore are considered important. They are also known as uppercase letters, a term that derives from letterpress typography where letters were kept in drawers or cases. Capitals were in the upper case.
A small circle with a vertical line to its right looks like a small letter a. Small letters are also know as lowercase. In letterpress the letters were kept in the lower case under the upper case. Extend the line up and place the circle to the right and we have the small letter b. The vertical line extending up is also known as an ascender because it ascends. Next we have a three quarter circle representing the lowercase c. Complete the circle and add a vertical line and we have a d. Drop the line and place the circle to the right and we have a p. Lines that drop down are known as descenders because they descend. Move the line to the right and we have a q. The English phrase ‘mind your Ps and Qs’ means to watch your language. It is thought to derive from the ease of which you could mistake the lowercase p and q in letterpress setting. Letters on metal or wood blocks were reversed so that they printed the right way around when inked and transfered onto paper.
Often letters are modified to create graphic marks which can be used as distinctive monograms. We start with an equilateral triangle. A smaller white triangle is placed on top. And finally an inverted triangle is placed at bottom centre to create a very triangular letter A. This distinctive letter could be used as a visual identity, say for an architect. The arrow shape could be used on printed matter to point at important information. Or used in a signage system. The term branding comes from the old practice of branding cattle with an identifying mark from a hot iron. The next graphic letter begins with a vertical double square. We add a 45 degree triangle to the top. Rotate a smaller 45 degree triangle and place this underneath to create a letter F. A monogram is usually made from the combination of two letters to form one mark. We start with another vertical double square. Have you noticed how composing with visual elements is a bit like cooking with visual ingredients? To my block I add a circle. Then to the mix I add a white horizontal bar. A vertical line is then drawn down. Hey it’s TP. The logo king has cooked up my new identity – cheers mate! Oh the invoice, OK how much? Blimey!
Constructed Roman Alphabets
Classical Roman alphabets used to be constructed on square grids like the one we have been using. Geoffroy Tory, a French Scholar living in Paris during the 1500s was well known for his constructed initial letters. More recently David Lance Goines produced a very nice book on the constructed Roman alphabet. We start with a 90mm circle. Then a 60mm circle is drawn and placed 5mm up from the bottom on the centre. Another 60mm circle is drawn above 5mm down from the top. The two 60mm circles bisect each other and create an intersection point. I’ve drawn a horizontal blue line through the points to clarify this. This intersection has a very nice term. It’s known as a vesica piscis and is a principle of sacred geometry. Hey dude, that’s like a heavy metal band and like their latest album is sacred geometry. Make the sign of the horns. Yes thank you I guess you could see it that way. But there will be no more making the sign of the horns in this class. Moving on. We draw a 120mm circle centred on the left intersection point or vesica piscis. Thank you! Enough! Then we draw a 120mm circle centred on the right intersection point. As you can see from the shading the capital letter O has emerged. If we remove the circular constriction lines it becomes clearer. And then the grid disappears. Volia! A beautiful letter O for your delectation.
We’re going to take a look at typography in a bit more depth. Typography is the study and practice of designing and arranging type. Some designers love letterforms so much it becomes the focus of their work. Looking at the handsome form of letters you can understand why. I’ve shaded the middle part of the word typography. The top of the shaded area is called the x-height and represents the height of a lowercase x. The bottom of the shaded area is the baseline. Letters that have a flat top and bottom align with the x-height and baseline. Letters that have a circular top and bottom have been optically adjusted they dip very slightly above and below the grey shaded area. This is because they have less surface area in contact with the x-height and baseline and can look smaller as a result. So they have been optically adjusted. Some letters ascend up and peak above the shaded area – those are the ascenders. Hi guys! Some descend and sneak below the shaded area – take a bow you descenders! I want us to take a good up close look at these letters. I want us to become aware of their individual qualities. First the capital letter T. What makes it a T? A top horizontal stroke and a central vertical stroke. I call this quality the T-ness of T. Next up the letter Y, all angles and curves – the Y-ness of Y. Ah the beautiful letter P – a strong vertical backbone and if you don’t mind me saying a portly tummy, oh or is it pregnant? The P-ness of P. What? Guys? I know, I know – it can seem funny but you have to get passionate about type to really love it. So come on guys quit the laughter and give it up for the P-ness of P. Yeah woah! Sheesh you guys crack me up. The circularity of O. The O-ness of O. The G-ness of G. Genius. The R-ness of R. The A-ness of A. Oh come on guys give it up. You really do have to look at the A-ness of A to appreciate its qualities. Oh no, here we go again. Yes yes, the P-ness of P – hilarious! The H-ness of H. Finally the Y-ness of Y. Why? just because alright!
And finally – a composition using the various qualities of the letter T. I’m using size, weight and position to create this composition. The different weight of the Ts creates a gradation effect. The contrast in size creates drama and a sense of space and distance. The parts of the letters that touches the edges of the square creates visual tension. That’s enough of me hogging all the fun. Why not try some of the exercises I’ve shown. Bye! P-ness of P? A-ness of A? Sheesh – I don’t get it.
Transcript from the ‘Visual Language and Grammar: Composition with Lines’ movie
Welcome to the third episode of Visual Language and Grammar. In part three we are going to be making compositions with lines exploring distribution of space, implied scale and structure and grouping through the principle of similarity.
The exercises will be performed on a 150mm square which has been subdivided into 5mm units both horizontally and vertically
9 Vertical Lines
In this exercise we will be using 9 vertical lines. Three will be 5mm wide, three will be 10mm wide and three will be 15mm wide. All must measure 150mm high and align at the top and bottom of the square. Now rearrange them into a random order. You don’t need to overly plan this aspect. Random really is the aim. The design looks like a bar code and it’s not so easy to distinguish the different thickness lines from one another. For example how easy is it to see all the medium thickness lines? How could we visually reunite the thin lines together, how could we group all the medium lines together and see all the thick lines as belonging together? And how could we do this without moving the lines back together? One way is to cut each set of three lines to the same height but distinguish each set by making them different heights from one another.
Gestalt Theory and the Principle of Similarity
This idea is known as the principle of similarity and is a part of Gestalt theory. The eye detects patterns and makes connections. It sees similar objects as belonging together. This is an important principle for designers as it is their job to make these connections and group visual and information components together. By doing so it helps the viewer to understand what they are looking at.
Analysis of the Blocks
I’d like to analyse the proportions of the three different size blocks. Although they are different heights and thicknesses they are related by the number of 5mm square units they are constructed from. The thin line is one 5mm unit wide by 24 units high. The medium size block is constructed from two 5mm units wide by 12 units high. Two by 12 is 24 units, the same as the first line. The thick block is comprised of three 5mm units wide by 8 high. Three times eight is 24 units the same as the previous two. I like this sense of unity and logic underpinning the design. It doesn’t always work and sometimes visually intuitive judgments have to be made. But logic is a reasonable starting point
Horizontal, Vertical and Angle Lines
The next set of compositions will be considering horizontal, vertical and angle designs. Lines can appear to look thicker when lying down horizontally. This design has 6 lines. Two 5mm thick, two 10mm thick and two 15mm thick. They vary in width. A sense of balance is gained by the two thick lines bleeding on from the left and the two thin lines bleeding on from the right. The two medium lines are interlocked with the thin lines. Also consider the visual impact of the resulting white space. The term bleed means that a component starts from the edge. Components that bleed on can provide visual tension or dynamic to the design.
This vertical design exploits contrast. Contrast in the thickness of the components and contrast in height. Contrast is a great tool for designers. It’s a way of getting noticed. We notice big contrasts more than subtle ones. Think about this when using all design components including type. This design has a ‘walking 1, 2, 3 approach’. Because of the contrast in scale the components seem to be walking back and forth in space. There is one thick component, two medium and three thin.
This design combines horizontal and vertical lines of different thickness. You can see how abstract designs such as Scottish tartan are derived. The beginnings of marks that have identity.
Constructivism, De Stijl and the Bauhaus
Designs that exploit the angle tend to look dynamic. The angle in this design is 45 degrees. This type of design was prevalent in the Russian Constructivism, Dutch De Stijl and German Bauhaus movements.
Abstract to Concrete
Abstract components can be used to express concrete concepts such as rhythm. Or bouncing up and down. It’s time for me to jet off…bye!
Transcript from the ‘Visual Language and Grammar: Squares’ movie
Welcome to the second episode of Visual Language and Grammar. In part two we are going to be looking at squares and how through use of colour, scale, structure and cropping we can alter our visual perception.
To structure these exercises we’ll be using a square measuring 150mm subdivided into 15 units of 10mm
In this exercise you’ll need a grey square of 150mm. Two black squares measuring 50mm and two white squares measuring 50mm. The effect of laying the white square over the black is that the white square appears to be floating above a black hole. Our visual perception is of three dimensional space on what Edward Tufte calls ‘the flatlands of the glowing rectangle’ which is your screen. If we start with a white square and overlay a black square our perception is that there is a light glowing behind the black square. Here’s that exercise again in full.
For this exercise you will need a 150mm grey square, a 50mm black square, a 50mm white square and two 30mm yellow squares. The yellow on the black is more visible than on the white. This is because of the minimal contrast between the yellow and the white background. We will repeat the first part of the exercise again, grey square, black square, white square, but now with two 30mm blue squares. The effect is the opposite to that of the yellow squares. There is very little contrast between the blue and the black background but increased contrast when on the white background.
Colour and readability
This is an important point when considering visibility of graphics and readability of typography. Yellow on white not so readable, Blue on white more readable. Blue on black not very readable, yellow on black very readable. Hey guys chill out, there is a happy medium where blue and yellow can co-exist in harmony on green. Even the crickets like it.
Gestalt Theory: The Principle of Continuity
We interrupt the broadcast to bring you an official warning. If you take two square and overlay them, although the eye can’t see the continuing edges, it will make sense of the situation and see the resulting image as two squares one on top of the other. The brain helps simplify visual messages. We don’t suddenly perceive the overlaying squares as a new 8 sided object. This is know as Gestalt theory and is the principle of continuity.
Exercise Three: Random Squares
For the purpose of health and safety can you now stand back from the screen. I’ll be throwing some sharp edged squares on screen and those corners could have your eye out. You going to need a 60mm square, a 90mm square and a 30 mm square. Now arrange the squares on the 15 unit grid we’ve been using. Do this randomly disregarding scale.
Exercise Four: Squares and Scale
Let’s consider scale. Small to large. This is almost like digital smoke. Again small to large. This is like the square is advancing towards us. Large to small. And the square is walking away from us. Again large to small. This is like a tornado spiraling down.
Exercise Five: Freeform Compositions
Try some dynamic freeform compositions using black and white squares proportioned to the grid. Consider various techniques such as overlapping or altering the proportions between black and white areas.
Exercise Six: Cropping Squares
Taking our 15 unit grid divide it into three vertically and horizontally. Threes into 15 makes 3 divisions of 5 units each. Crop black rectangles to different sizes and place them within the individual squares of the 3×3 structure. Consider whether the square diminishes progressively and what the developing relationship between each square is. The visual communication course I ran had students from all round the world. Hi guys! One student questioned my assumption of reading left to right and top to bottom in this exercise. In recognition of this I dedicate this next version to the students I’ve had the good fortune to teach. For this next one, I’m pressing the randomiser button.
When making your compositions look above and below and from side to side to see whether there are significant alignments occurring. I think it’s important there are but hey that’s just my theory. Oh no! See you next time!
Transcript from the ‘Visual Language and Grammar: Dots and Lines’ movie
This tutorial is about visual language and grammar. Language is a method of human communication. I’m using the spoken word to communicate with you. Visual communication is also reliant on a language. A visual language. The components of visual language are things like shapes and colour. Visual grammar is the system that governs visual language. If you wanted to show visual density by clustering dots together. The dots would be the components of the visual language but the notion of expressing density through clustering would be the visual grammar. In Part 1 we will be looking at the dot and the line.
All the exercises I will be demonstrating will be on a square measuring 150mm. To help structure the elements (dots and lines) I’ll be using, I’ve divided the square up into a grid of 5mm units both horizontally and vertically.
Red Dot and Grey Line Exercise
So let’s have our first red dot. And a vertical grey line please. Thank you. Our two components of visual language (the dot and the line) seem to have had a fight and are isolated from one another. The line clings to the left edge and the dot to the right. This sense of the line clinging to the edge is known as visual tension. It’s as if the edge acts as a strong magnet. Ok guys time to make friends. Note how the space either side of the grey line changes. The proportion of white decreases on the right as the left increases. The red dot now looks trapped. The red dot leaps over the grey line and makes their escape.
Abstract to Representational: The Sun in the Sky
In this composition, the dot looks like the sun rising in the east. The grey line acts as the horizon. Now it is mid-day and the sun is high in the sky. Time for a cool beer as it sets in the west.
Abstract to Representational: An Eye
Placing the line above the dot makes this look like an eye. Raising the line causes an expression of suprise.
The Dot and the Line: A Romance in Lower Mathematics by Chuck Jones
For this composition I’ve added a few lines of type next to the right edge. The type clings to the right edge causing visual tension. Type set in sentences also look like black bars of different lengths. The type adds content and meaning but also form to the composition. There is visual tension between the dot and the line and separation from the type. This gives a sense of rhythm, balance and dynamism between the elements. The white space also contributes. Considering the dot and the white space you become aware of the centrality of the dot. The mood of the composition can be altered through choice of colour.
The Cholera Map by Dr John Snow
On screen you see what appears to be dots scattered randomly. Some areas have dense clusters, other areas the dots are more spaced out. In Gestalt theory this is known as the principle of proximity. Those dots closer together belong to each other. Some larger dots are sprinkled in. This gives the composition a sense of depth and scale. The grey background circle acts as a focus – like looking down a microscope. The notion of a circle has strong psychological resonance with us. The sun, moon and earth are spherical and are intrinsic to our lives. Are we looking at micro organisms on screen on a petri dish or a galaxy in the sky? If we now add in some lines the composition becomes a little more familiar. The lines give structure to the dots. We begin to understand the distribution of the dots but not the reason for the different densities. By adding type the image is confirmed as a stylised map. The time is Victorian Britain, 1854 to be precise. The place Soho. The larger dots represent the location of water pumps. The small dots signify individual death of people. Hundreds died over a two week period and nobody new why. Dr John Snow plotted the deaths on a map and noticed a particular clustering around the pump at Broad Street. He alerted the authorities and suggested that the deaths may be due to contaminated water. The pump was closed and the deaths declined. A few years later the new medical term cholera emerged as the name for the cause of death. The street has subsequently been renamed Broadwick Street and today the Dr John Snow pub commemorates his decisive act and provides hospitality for the weary traveller.
This final example of applied visual language and grammar begins with a blue dot or circle. An inner white circle is added. Lets add a few lines. A chevron is created – the beginning of an arrow.
I hope you have enjoyed this presentation. Your mission if you choose to accept it is investigate and apply some of the ideas contained in this video. Consider how you can create visual language and grammar compositions with dots or circles in two dimensions, in three dimensional space or in moving image. Using the green canvas of your lawn you could take different types of balls such as ping pong balls, tennis balls and footballs to make a composition exploring the principle of proximity.
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.
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.
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.
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.
In the fourth and final part of this Information Encounters series I look at design for web and interaction. I first wrote this article in 2004 with a first year undergraduate audience in mind. Much has changed in the intervening years: the growth of social media such as Facebook; and the ease of use of online communication such as blogging; has meant that these modes of information transfer have been integrated into our daily experiences.
The image below is a blog theme designed by Khoi Vinh designed for WordPress
Website and interaction design
Website and interaction design are often linked as related activities, however interaction design is emerging as an overarching discipline in its own right. Interactivity is an umbrella term for many situations where there is a two-way flow of information between users or users and things. The term interactive implies that there is an element of something or someone responding to a user’s input and that there is a reciprocal relationship. Information is the base currency of most communication and is central to interactive design.
The image below is of a simple website design for Hyperkit.
Putting users first
When designing for interactivity the designer has to afford particular attention to the potential user of the experience. This means putting the user first and understanding their perspective. Many websites fail to reach their target audience through a lack of user awareness, and misunderstanding the psychology of the medium and its linguistic conventions.
We interact with the world through our five senses of sight, hearing, touch, taste and smell. They influence our intellectual and emotional understanding of all we encounter. The smell of baking bread in a supermarket or the interior of a new car can influence our purchasing decisions.
The image below is of the Famous Grouse Visitor Centre by Land Design. Digital water reacts to the pressure exerted by visitors. The technology involves seismic floor sensors which trigger data projectors.
Typography on the net
Information is the backbone of the web and typography is the interface by which we gain access to knowledge. The web designer attempts to make information navigable, interactive and where possible customised to the end user. Designers require an understanding of the ways in which typography functions differently within screen and print environments. Legibility and readability are important concerns for both situations – text on screen is not as readable as in print and. Typefaces designed for print will not always translate well onto the screen and specially designed fonts for screen use are prevalent. Text that extends across the width of a browser window is difficult to track and tires the eye, however multi-column setting that requires vertical and horizontal scrolling probably won’t get read. A type size of 9 point in print is acceptable but would have people squinting if used on screen. There are a number of ways to display type on the net such as html text and graphic text. Graphic text is a low-resolution image of type. It won’t print out cleanly, can’t be copied or edited, won’t re-flow and can’t be indexed by search engines. A good site designer will check their site on various machines, in different browsers and on different platforms because factors such as colour and html type can display differently between screens.
Writing for the net
There is more to writing for the Internet than simply transferring print documents to screen via a pdf. People don’t browse the net in the same way as they do a magazine. The text has to be written shorter in length with additional headings; broken down into smaller paragraphs; links added; and sequenced over a number of pages. A clear and consistent style of writing should be adopted throughout with consideration given to: tone of voice; language; and cultural context, particularly when information is intended for a global audience. It was reported that some early internet users, unfamiliar with the language of the web, left websites when confronted by a button saying go. The intention was that they should go to the next link not leave.
A diagnostic activity
Website design can be viewed as a diagnostic process analysing the purpose and function of a site and removing extraneous elements. The website often acts as a catalyst for evaluating the structure of an organisation and all aspects of its presentation through other media such as print. It is a sobering thought for organisations to realise that someone viewing a page on their website is one click away from leaving. User consideration is a compelling argument for businesses that want to stay in business.
Aesthetics versus usability
There is much debate over the relative importance of the appearance of design and usability. The early dot com crash was in some part due to a misunderstanding of the web. The fashion for Flash-based sites is highly seductive as they look and sound cutting-edge. Appearance is a powerful marketing tool and companies feel obliged to invest in trend-setting animated sites to remain competitive. Many designers previously concentrated on the front-end graphics believing this sufficient to attract attention to a site. What became neglected was the job of guiding people through the rest of the content. Attractive and entertaining introductory pages that were winning awards weren’t helping to sell company’s products and services. People now know the difference between Flash and html sites. If people are searching for information or want to buy something and they get a Flash intro screen they may just stop there.
Information or entertainment or both?
A visitor to a music-based website might expect to have an experience equivalent to a pop video. The site may be an infotainment site and catering for a particular audience who may have leisure time to casually surf and engage with the fun elements of the site. An information-orientated site might not work in this instance. Clear access to information might lead to a limited experience, it might not lead to chance encounters with other content.
The curse of information design
In ‘The Curse of Information Design’, Scott Jason Cohen makes a plea to remember imagination, intuition and chance when all the talk is off usability. Information architects, user experience consultants and usability experts provide useful guidelines on well-structured sites. He warns us that ‘Jackson Pollock and John Cage would run screaming from the web for one reason: there is no room for the happy accident’. Creativity can be seen as a dangerous thing on the web, it’s a business gamble. A novel presentation or pioneering interface might engage the potential visitor or simply confuse them. You might lose a customer so convention persists and a site that might have introduced new ways of conveying information is abandoned. Cohen suggests an alternative vision. ‘The Internet is the single greatest collaborative effort ever in the history of mankind. It is a funhouse mirror of our collective imagination’. Usability is an important issue but it should not be used as an argument against innovation within a growing discipline.
One of the advantages of this medium is the ability to summon and reconfigure information according to individual choice. Searching for information can equally be highly frustrating. Database sites need some parameters so as not to overwhelm users with data.
Design for intuition
When a user arrives at a web page they scan for words and images and expect to be able to click selections. These are normally links to other items on the page or different pages. The onscreen arrow may remain in the same position. The designer can choose to exploit this by ensuring another related link is at this location on screen. An unrelated link might seem counter-intuitive. The convention of clicking is now an intuitive action and we expect a response to result. Clicking a thumbnail enlarges an image. Click again and it disappears. Virtual environments use analogies of the physical world. Home is where we start most of our journeys. A link back to a home page is a reminder of a starting point. We enter or exit buildings through doors.
Search engines help people find things on the web. They are like vast libraries and allow us access to limitless information. Search engines locate and index sites through html. There are now strict protocols governing the way sites are indexed. Google assesses websites through: site name; page titles; html text; images with alt tags; meta tags; and key words. The site is scored and rated on these criteria and placed in a hierarchical index. Ratings are subject to constant change and have led to bidding wars for keywords and sponsored links. Websites can also be registered with search engines so that they are indexed in advance. Linking to a site that is already indexed by a search engine will also ensure that your site will be found through your link. Popularity or contextual ratings increase the chances of appearing higher in search results, the more people viewing and linking to your site the more popular your rating. Websites are not only to be judged on their appearance and content but also how well they have complied with search engine indexing systems. A good website designer will not overlook the ‘under the bonnet’ engineering that will ensure the information gets seen.
Interaction design is still in its infancy. As with any new discipline there is a period of experimentation and testing the technology. The outcomes may have no specific commercial or utilitarian application. These are attempts to understand the implications of the medium for the wider world. Public acceptance of interaction design will be reliant on knowledge of potential users’ and their reactions to new concepts. How will they know how to interact? Will they be curious or phobic?
The image below is the L’Oréal Poetry Harp by the Small Design Firm. Pluck a string and a digital stream of type is released extolling the virtues of women.
A new model of information communication
Interaction design allows users to experience communication in far more fluid terms, and invites people to immerse themselves in an experience where they are central to the construction and interpretation of meaning.
Immersion refers to intense experiences that engage us at the deepest levels and draw us into an alternative world. Immersive experiences can equally be as simple as reading a book, listening to music or watching a film or play.
Embracing multi-disciplinary thinking
Interactive experiences exist within real time and real space. Andy Cameron of Fabrica describes this as ‘real space overlaid with another, virtual layer of responsiveness’. Interaction design is where related disciplines such as product design, fine art, graphic design, architecture and interior design converge.
We encounter interactions daily. A good interaction allows us to perform a function and move on. These are ones that, although we may not consciously notice, have been carefully designed to ease our transactions. Stand next to some lifts and watch bewildered people wonder what floor they are on. Stand next to a machine and watch someone frustratingly repeat stages over and over again not comprehending what’s going wrong.
The cost of implementing travel card schemes is very high. They are used by significant numbers of people and are responsible for generating the network operator’s income. Ticket machines use data transfer systems and often accommodate alternative methods of reading information. One type of travel card maybe fed through the machine whilst another read on top. Some systems inadvertently cancel out the other and prevent the correct information being recorded.
The design of the fire extinguisher is an example where the architect, product designer and information designer have not communicated together. The architect builds the building, the product designer designs the extinguisher, and then the information designer designs the graphics and labels. The ability to operate this device in an emergency is vital, yet our concern for clear communication of information and its relation to the product and its environment remains wanting.
Lifts are often designed at great cost specifically for the building they are being installed in. Some lifts have poorly designed information feedback such as the position of the floor announcements. We expect to hear a bell as we arrive at out floor. When we leave the lift we expect to see the number of the floor as we exit. Signs and directories offer additional help as we navigate to where we want to be.
We interact with mobile phones via a series of messages displayed on the information panel. If one wants to send a text message there is a clear sequence of operations we expect to follow. The number of stages and the logical sequence to execute an action should facilitate ease of use.
The fascias of hi-fi systems are often overloaded with knobs, features and lights. The quantity of features can compromise sound quality. Knobs can be confusing particularly if they are in a row and are identical. It is useful to create a hierarchy of knobs for example the on/off and sound knobs being most important.
Camera phones and digital recorders have enabled people to record all aspects of their life. The ability to digitise all forms of media allows for a uniform method of storage. The memory required to store digital information is no longer such an issue. With broadband technology this information can be uploaded to the Internet and shared with a global audience.
Interactive is the future
Television is becoming more interactive; soon traditional services will become a smaller sub-division of the interactive umbrella. Radio and TV are on demand; if we miss a programme we can play it again at our convenience. Networking between communication devices such as mobile phones and computers are prevalent and enable responsive customisation of information. It should however be remembered, for all this technological focus, that there are still places in the world that haven’t heard a dial tone. What does all this mean for them?
Below is an image from Body Movies by Rafael Lozano-Hemmer. Note how readily participants interact with each other’s shadows in ways they wouldn’t in other social encounters. This piece is a reminder of the street theatre of previous generations.
The Art of Experimental Interaction Design, Andy Cameron
Digital Information Graphics, Matt Woolman
Hypergraphics, Roy McKelvey
Typography on the Net, Keith Martin
Interview with Biggles, Senior Lecturer in Interaction Design, London College of Communication
Web Design is 95% Typography, Oliver Reichenstein
The Curse of Information Design, Scott Jason Cohen
How to Save Your Life, Jack Schofield