textwrap

running words around
design education and visual communication
authored by chris m hughes

Classic Election Posters

Wednesday, 14 January 2015

Over the next few months in the UK we can look forward to lot of awful graphic design in the shape of the campaign posters by the main political parties as they proclaim, dismiss and lie their way to the General Election on May 7th.  Bad typography, dodgy cropping and clumsily applied Photoshop filters will be everywhere.  We can also expect to be mildly amused by a never-ending stream of parody samples and mashups via social media. The Tories have been quick off the mark, and their opening salvo, the 'Road' poster, has already been widely ridiculed.

In terms of visual communication, real ideas in election campaigning have been in decline since the late 1990s.  The 2010 election is a case in point, where the main campaigns ran embarrassing parody posters based on 'Ashes  to Ashes' - a popular TV show featuring a time-travel plot and set in the early 1980s.

We need to go back to 1970 for the beginning of a golden era of design in political posters and election material, and its entertaining to look at some of the best ones, especially given that regardless of their success or failure, nothing written in any of the strap-lines or quotes was true or came to pass.  In fact, it was mostly the opposite.  Which is as good as reason as any to hope that 2015 will see a definitive end to two-party politics in this country.

In 1970, the cult of personality was emerging in British politics, and the Conservatives took the lead with this classic poster of Edward Heath, who led to Tories to an election win that year.



Heath did manage to decimalise the currency and take the country into the EEC, but by 1973 Britain was crippled with the three-day week and a series of damaging miners strikes. It wasn't a better tomorrow after all, and in 1974 Labour found their way back into power.

In the run-up to the 1979 election, after 5 years of an equally inept Labour administration under Harold Wilson,  Saatchi & Saatchi came up with probably the most famous poster in British political history -



In actual fact, the real campaign poster was yet to follow, this was just the primer for what turned out to be a winning campaign for Margaret Thatcher.  The official election poster was this frightening and unforgettable effort  -



By 1983 the UK had woken up to what it had really voted for.  The nation was in a serious mess, with 3 million unemployed and interest rates at a whopping 12%.  This Trade Union Congress spread shows the depth of loathing aimed at Thatcher and her then Employment Secretary, Norman Tebbit -



Thatcher survived until 1991, losing power through an internal coup rather than an election defeat. The Conservatives retained office under John Major, and this amusing campaign by Labour caught the mood of the electorate in the run-up to the 1993 election after the fiasco of 'Black Wednesday' when the Stockmarket crashed and forced the UK to withdraw from the Exchange Rate Mechanism -



Which leads us to another classic poster.  If it looks like this New Labour poster is familiar, that's because it's practically a carbon-copy of the Heath poster from 1970 -  the lowercase sans serif, the moody lighting, the cropped portrait, and the wistful yet assured gaze. Obviously a winning formula in art direction.



Conservative retaliation wasn't far away though, and the final example I've selected is a design classic from 1997.  'New Labour New Danger' was a controversial campaign, again courtesy of Saatchi & Saatchi, and although it failed, the example below marked a high point of political poster design in the UK.




Dynamic Sketching

Saturday, 10 January 2015

Sketching transcends languages and cultures, and despite all of the apps and digital tools available these days, the humble pencil remains the most important tool a designer can call upon. The reasons are many. Sketching is fun, spontaneous and artistic. It lets you focus on simple choices rather than get bogged down in technology and process. It promotes open thinking, and allows you to take risks and visualise ideas no matter how off-the-wall they sound. You can alter, revise, bin or rework a sketch at little cost or loss of time,  plus you can do it on a train, a bus, in a cafe, and all without wi-fi, power cables or batteries. Sketches are easy to share with colleagues and peers. They are tangible, easily duplicated, and surprisingly effective at showing off your design ability and productivity.

As a designer, the more you do it, the faster you will solve design issues. For design educators, sketching also plays a key role in objectively assessing certain aspects of design thinking.


Sample preliminary sketches.

In a student sketchbook we should expect to see two different kinds of sketching activity - 'freeform' sketching, which evidences the genesis and development of ideas or concepts (these can include drawings, doodles, diagrams, thumbnails and so on) and 'preliminaries', which are representations or plans of the actual design applied to various formats.

Preliminaries can contribute a substantial proportion of the design work before the project is brought to the screen.  They are the key support material for the creation of wireframes, navigation maps, flowcharts and flatplans. The more detailed these sorts of sketches are, the more effectively problems get solved, the faster the execution, and the better the result. Good preliminary sketching uses design principles like consistency, accuracy and hierarchy.  Rather than purely lo-fi roughs, this kind of sketching produces detailed blueprints that show off organisation, interactions, transitions and functionality.

Tools And Techniques

The tools are simple and cheap, but its probably worth paying a bit extra and getting good quality pencils. You can get all of this at your local Hobbycraft for less than £10.

Graph Paper - A4 Squared grid pad, (green lines), 115 gsm
Pencils - three coloured pencils, including standard black
Accessories - rubber, sharpener, a decent ruler
Extras - square post-it notes, tracing paper, paper clips.

Work with Colour 

Use a combination of colours (black and two others) to represent different aspects of the design. These can be used to signify structure, functionality and style. The black pencil is for the basic drawing, to outline formats, draw or illustrate geometry, figures, content and type, and to annotate and label.

A bold colour (e.g. red) is used to signify structure, things like margins, alignment, proximity, hierarchy, measurements, anything that's fixed and supports the idea.

A third colour (e.g. green or blue) is used to highlight user experience or movements such as interaction, navigation, flow, choice, or animation. This might include sliding menus, directional cues, flow, call-to-actions, parallax scrolling, swipes, and so on.

This gives you a three-tiered diagram that is colour-coded and easily understood.

Work with Units

Whether its print or digital you are designing for, the units are crucial, so incorporating some sort of proportional scale in the sketches is desirable.

Use A4 squared graph paper.  If you've never sketched in graph paper before you'll find it a revelation.  The squared grid is very robust.  It allows you to draw consistent, scaled boxes and shapes. It helps you set up numbered columns, use proportional margins and guides, and generally align things accurately with a minimum of fuss. The results may not be to scale, but they will be a good approximation. Graph paper is normally a grid of 18X28 10mm squares. Each 10mm square is divided into 4 X 5mm squares, and divided again into 5 1mm divisions. One thing to note is the grid area (180mmX280mm) is smaller than A4 size (210mm X 297mm), because the pad includes generous margins.

The following three samples use the tools noted above, and cover an example in print, digital publishing and web design. Obviously groups of sketches and variations would be used in each case, as the work progressed; the colour-coded notation then becomes more powerful.

Sample 1

Here's a dynamic sketch for an A4 poster. The sketch is 60mm X 100mm, using 5mm margins (signified by the red pencil) and a rule-of-thirds grid. The green pencil highlights where the strap-line or call-to-action is going, and also illustrates the flow of the users' eye through the composition.




Sample 2

Here's a sketch for an iPad article that will be laid out in InDesign.  It uses six columns (60mm), with 10mm margins, and shows the h1, h2 and paragraph arrangement.  Share icons and touch navigation elements are in red. the eye flow is in green. 



Sample 3

This sketch is for a standard 1024X768 desktop design, with a twelve column grid (5mm each column).  The call-to-action and navigation elements are ringed in red, so are the flow arrows to the various aside content. Also included is a 1920X1080 responsive variation for comparison.




Working with colour, units and guides allows you to refer to a very detailed diagram once you are working on screen, allowing really fast file setup, and giving you a solid guide to what's going on inside of the format.  Whether it's a wireframe you are working on or a layout, a lot of the nitty-gritty has already been formulated.

Work with Layers

Dynamic sketching can be taken one stage further by including layers. A good method is to use tracing paper. Trace over a sketch,  use the colour code to alter functional aspects on the trace, then pin this on top of the original.  The sketches can then be used to test or demonstrate alternate layouts in digital publishing (i.e portrait to landscape), and responsive or parallax designs for web. A helpful addition here is to pre-prepare pages with sketched formats, then use these as a tracing templates. Post-its can also be brought into the mix to add as call-out notes.

The overall aim of this kind of technique is to reduce the amount of time you spend making alterations and design decision inside of the software.  This improves workflow, keeps the original idea intact, and it doesn't sap the creative energy that so often dissipates if you are trying to solve basic problems whilst you are assembling artwork or layout in digital tools.


Are we entering the age of Material Design?

Monday, 5 January 2015

The zeitgeist of the 1980s was perfectly captured by Madonna when she sang "We are living in the material world, and I am a material girl."  Now it seems that Google are attempting to pull off the same trick for the 2010's with 'Material Design', their new visual design language, introduced at the I/O Conference in June 2014.

Material Design is defined via a set guidelines that combine the central principles of good design with current best practice in interactive screen technologies.  The result is a manifesto for designing unified experiences across platforms and devices. But is Material Design merely a trend, or is it the way digital design was always meant to be done? It certainly seems to cover most of what has been learned about interaction since the rise of mobile devices. So are we perhaps entering an age when it will dominate interactive design and visual communication?


Originally code-named 'Quantum Paper', the idea was Google's effort to encourage a consistent approach to design across all of its products.  But by extension, it also proposes a whole new standard for digital design in general, encompassing design ideas and technical execution in typography, layout, animation and interaction across all platforms, including web, Android, and iOS. 
 At the launch, Google released this short video to summarise the approach -



Concurrently, Google published their design guidelines on a beautifully realised website, which you can visit here.  In the introduction of the document Google establishes two key goals, encapsulated in three underlying principles. The goals broadly stated are -

1) The creation of a visual language that synthesises classic principles of good design with the innovation and possibility of technology and science.

2) The development of a single underlying system that allows for a unified experience across platforms and device sizes.

The three underlying principles allied to the approach are -

1) Material is the Metaphor - inferring that designers can transfer the lighting and surface experiences of paper and ink into screens.

2) Bold, Graphic, Intentional - placing print-based design - typography, grids, space, scale, colour, and hierarchy - at the centre of visual considerations and styling.

3) Motion Provides Meaning - embracing the use of animation, motion and transitions to guide and inform the user experience.

And the three principles are encapsulated by this visual in the documentation -


Material is Metaphor                Bold, Graphic, Intentional        Motion Provides Meaning

In support of Material Design, Google's documentation includes exhaustively detailed guidelines on colour palettes, typography, layout and grids, animation, touch experiences and navigation principles.


Material Design - Colour sampler


Material Design - sample palettes


Material Design - long touch, long press-drag, double-touch drag


Material Design - Roboto Sans, weights and stance.

If you are thinking this all sounds a bit like its been appropriated from the Swiss Style, you'd be right. Some of the language feels like it is lifted directly from the pages of Die Neue Grafik, which is no bad thing. The approach should serve to embolden print-based designers who are transitioning to digital, because Material Design uses fundamental tools that have come from the world of print design, like baseline grids, proportional spacing rules, and strict control of whitespace. Stuff that has been thankfully appropriated for web design since the introduction of HTML5 and CSS3.  There are a number of interesting points which serve as unifying elements -

Firstly there is a detailed section on a bespoke baseline grid, allied to the 'paper' paradigm which controls feedback, display and movement through screens and dialogues.  This is supported by a really detailed typographic hierarchy that is well researched and presented.

Secondly, there is the global use of 'dp' as the unit of measurement and size for elements, grids, spacing and so on. This may be an unfamiliar unit but dp stand for Density-independent Pixels, an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion.  The corresponding unit used for the typography is the sp (scale-independent unit), which also requires a screen resolution of 160dpi (which again makes 1sp equal to 1px).


Thirdly there is direct reference to movement in 3D where 'Z-axis motion is typically a result of user interaction with material'.  There are a series of rules to accomplish this, including a collection of situations in which drop shadows and layered elements can be used. The shadows are also given a specific depth, which is always 1dp.

Finally, Material Design proposes a rigorous model for developing wireframes and responsive patterns, which uses the 'cards' paradigm and also a set of device-based 'whiteframes'. These provide a variety of layout structures using a consistent approach to surfaces, layers and shadows.


Material Design - Metrics for margins and headers.


Material Design - Cards paradigm for layout structure.

Having read through the whole document, it seems fairly clear to me that Google have given it their best shot at articulating the current state of interactive design and usability in the way that Jakob Nielson did during the mid-1990s. What's also interesting is that with the discrete use of drop shadows and layered surfaces, Google are reintroducing a controlled amount of skeuomorphism back into screen design, allowing interaction to extend into the z-axis as a means of enhancing usability.

So Material Design could be viewed as an extension or development of Flat Design. The inclusion of downloadable resources at the end of the guidelines affirms this, with the whiteframes, iconography and components all supplied in vector formats only.

Where 'Material Design' could be extended is into interactive editorial design (for digital publishing) and in time this might provide a completely unified set of design principles for any format or visual medium.

We've already included Material Design as part of our curriculum delivery for Visual Communication in areas like web design, user experience and motion graphics, and I fully expect other Art Schools and Design courses to be thinking along the same lines.  Material Design may not be the complete solution, but it will definitely become a dominant trend in digital design during 2015 and there is much to be learned from Google's take on good design principles, minimalism and usability.


More:
Material Design Interaction demo
Material Design Palette generator