Category Archives: Part 4

Road trips

‘A new TV programme exploring historic road journeys around the world wants you to pitch some ideas for an opening credit sequence. The programme will be showing car and cycling journeys along America’s Route 66, Land’s End to John O’ Groats and the Tour de France.

Develop your ideas for an opening credit sequence through a storyboard. The opening sequence needs to give a general feel of the programme, as well as presenting the name of the programme, the different journeys it’s going to explore and the name of the presenter.

This exercise is an opportunity to explore moving typography, drawing on the visual cultures of roads, maps and signage.’

It turns out Route 66 is Chicago to LA…across the width of America. Yes, I know its really famous. I just wasn’t sure where it actually went!

I gathered relevant images…

Chicago Skyline

Chicago Skyline, morning. Chicago, Illinois, USA

And some points of interest along the way…

Shea’s Gas Station Museum Illinois

Ed Galloways Totem Pole Park (Oklahoma)

Cadillac Park (Texas)

Retro Diner (Alberquerque)

Wigwam Motel (Arizona)

Grand Canyon

And ending at Santa Monica

I would think the most appropriate form of transport for this journey is a cadillac?

Im more familiar with the Tour de France as my partner is a cycling nut, and of course I already know Land’s End to John O’ Groats (Yup. Thats in Scotland isn’t it) 

I also picked some images from along the route –

Bristol

What about Hereford cows milling about in the road?

John O’Groats

I also had a think about some cycling inspiration – which is thankfully easy to find in my house! Just a thought, but the spokes of a wheel make excellent shadow shapes…

The route of the Tour de France does vary year to year, but there are usually spectacular mountain climbs, and the big finish at the Champs Elyses.

These images from a cycling magazine give a flavour of the sort of mountain scenery that might form part of the programme

Yes. He owns several bikes…

Dusseldorf

Pyrenees

Champs Elyses

Then I looked at how some travel tv programmes have handled the opening credits:

Around the World in 80 Days

This consists of a vintage style map, dates and train information, and ‘torn photos’ with images along Micheal Palin’s route.

Long Way Round

Here Ewan and Charlie’s route is suggested by these yellow lines snaking through the scenery

And directing us towards each chap with the use if these diagonal lines

Theres no mistaking this is a road journey via motorbike!

This website has a great archive for opening credits of all kinds. I’ve never seen the film, but the Captain America title sequence is well worth viewing its really dynamic!

Next I needed to distill all this inspiration down into a rough sequence for my story board. Its clear it would need to include references to all three routes, and the two methods of transport. Mostly likely a series of clips from the programme – some of the highlights along the way with the presenters no doubt having interesting encounters with the locals, and a glimpse of the relevant maps showing an overview of their journeys.

As I mentioned I would like to include the shadow of a bike wheel. It also makes sense to have a close up of cycling gear and parts of the cadillac. there is a rather obvious connection of the two kinds of wheels – Im not sure how to avoid cliches here, as I’ve never thought about moving images and certainly never studied film! I’m hoping that part of framing a shot is similar to a still image in photography?!

I had a think about further ideas…We were asked to consider maps and signage. I think this would be part of the opening credits but probably a bit dull in isolation??

Meanwhile I found some tips online:

Avoid large typography…except for the main title

No novelty ones

I was pondering on some solid no nonsense sans serifs to echo road signage

Helvetica, Raleway and Aileron

Aileron has this nice shaped ampersand which might work well with the shape of roads?

My other thought was to be handwritten and playful

Skinny Regular, Salamander, Jinky

Daniel and Reenie Beenie

Are these inviting? Or a bit cheesy and could date?

I also discounted a few wild cards. Airstream does evoke an american diner, but this is also about European roads. Pleasantly plump is quite cartoon-y, and Century Gothic is too retro, it just doesn’t have the right tone

See what I mean?!! Awful.

What about something different?

Loaf and Signpainter. Loaf could possibly work as a bit rough and ready if they are spending many hours on the road? Smaller lettering is hard to read though…

I decided to stick with Aileron as I feel the mood of the title sequence should hopefully be inviting without needing gimmick-y typography.

What about the theme of the opening credits? Where is my brain storming? Sorry! This time I was pondering in my head! I’ll re-cap on my thoughts…

I was thinking about some sort of narrative, which would involve scene setting, showing the different routes travelled and of course the presenters.

I had the idea of Mel and Sue sitting in an American diner. I was wondering about a piece of paper coming flying through the air which hits one of them on the head, and they unfold it to reveal a map. And variations on this…Oh crikey I can’t actually remember the other stuff I cam up with!

Anyway, I decided to start sketching a storyboard, but without a definite sequence in mind, just snippets I thought would work – then I could cut them out and assemble them together.

I also printed out my font with the relevant wording and sketched a map of the UK, France and the USA, making photocopies to I had plenty to work with.

Anita Rani is for backup in case Victoria’s busy!! (She may not be a cyclist, but she looks slim and outdoorsy)

As I started to sketch I was drinking tea and thinking I better not spill it (which is my trademark) which gave me an idea – what if they DO spill coffee?

I have previously played with blowing paint across paper, and it can give nice paint effects but its quite hard to control. Oops.(I chose paint – it shows up better than coffee)

So I carefully blew the paint first…then drew my map. Like this. I don’t know how this would best be animated – but heres my concept.

Some little sketches cut up (I didn’t use all of them)

And my storyboard taking shape. I also had the idea of the shape of America appearing in the cappuccino – this happened as I was drawing – sometimes sketching  works as well as brain storming?!

I also wante each map to go from ‘paper’ to digital, with the routes lighting up with a little glowing line and each dot expanding and brightening as we pass through it.

Some typographic notes to myself about the movement of type on the screen. The main ideas are that I wanted the dot/tittle over any i to appear afterwards. And for the titles to travel horizontally and vertically in a ‘grid’. Sometimes arriving from different directions, pausing and continuing their journeys until they have left the screen.

I wasn’t sure how much my story board should show every frame or just give a flavour of the general ‘story’, so I went for the latter. I hope it makes sense. I can see it in my minds eye, but I don’t know if my scribbles translate to anyone else?!

My Rough Storyboard

 

I really enjoyed this its was fun to ‘tell a story’ and generate ideas suited to a medium Ive never really thought about before. I wonder if we were really being asked to dwell more on the typography than I have, but I just got carried away with the wider visual aspects in general – so I hope it hangs together creatively!

 

Advertisements

Research Point: Film Titles

‘The graphic designer and film-maker Saul Bass saw the creative possibilities of making film title sequences more than simply a typographic exercise in delivering information, with his ground-breaking sequence for Otto Preminger’s The Man with the Golden Arm (1955); this was followed by the development of a form of moving kinetic typography for Alfred Hitchcock’s North by Northwest (1959), Vertigo (1958), and Psycho (1960). Since then, the creative use of typography within film and television programmes has become the norm. Find examples of opening credits that you think work particularly well, reflecting on how designers have balanced information needs with a creative introduction to the content of the film or programme.’

I’d also like to add ‘It’s a Mad Mad Mad Mad World’ – by Saul Bass, with the animated globe to the suggested list!

So what other opening title are worth talking about? Well…

The opening sequence of the Sopranos sticks in my mind for the sound track, and the car journey back to Tony’s house. Its hard to say why this works… But you enter his world by taking the journey with him – and one of the strongest parts of the show was the juxtaposition of his life as a crime boss and the apparently calm domestic life at home.

Logotype designer – Brett Wickens. Apparently when the creator of the show first saw this he was immediately happy, though he did feel it was a bit cliched…but Wickens wanted to be very clear that The Sopranos was about the mob, not classical music!

The Path animated by ACME Filmworks has wonderful opening credits, with a gorgeous hand painted animation style. Its an unusual and highly effective for the subject matter (about a family who belong to a cult). Each image tells an aspect of the story in a surreal disjointed morphing from ‘scene to scene’. It is the perfect introduction to a well made programme.

I was able to look up the development process – here are some roughs and a mood board the team used to help develop their ideas

The Pink Panther is great fun. He’s such an appealing character isn’t he? The humour is set from the start, as the letters fail to behave themselves  – the poor chap is no match for the unruly typography.

I haven’t actually seen Dr Strangelove, but Ive just watched the first few minutes in order to see the really fun typography with its wobbly hand drawn lettering and improbably soothing music. This sequence was by the American graphic designer Pablo Ferro…

Pablo Ferro animated the opening sequence for other famous films, including The Thomas Crown Affair, which is packed with visual tension

Catch Me if You Can is another film opening dripping with visual tension – I think its one of my favourites for its retro styling and complex animation with great typography. It suggests that the film will be gripping and intriguing , which it certainly is.

Title sequence by Olivier Kuntzel and Florence Deygas

And lastly, I have to go for the opening of Terminator 2. I love the character Sarah Connor in this film and it contained amazing visual effects for its time. It sets the scene so well with the combination of the soundtrack and the flames. What is on fire? A childrens playground. Everything is burning in an intense apocalyptic scale. A then a metallic face appears, which is definitely not human. SO scary. I think the ‘futuristic’ typography just about stands up today?

Ernest D. Farino – visual effects designer responsible for main titles Terminator & Terminator 2

It has been interesting to see how some graphic designers crossed over into animation, and to explore how the title sequence sets the mood of the subsequent film or television programme so well. As our notes suggest, a strong opening goes so much further than listing the relevant cast members.

 

Refs

http://www.youtube.com/watch?v=s4L9J-CUAl8
http://www.youtube.com/watch?v=KVUnUmPV33c
http://www.youtube.com/watch?v=s1A7bJD3atk
http://www.youtube.com/watch?v=3sA1en26sgM

http://www.youtube.com/watch?v=86znnjhYrq4

http://decider.com/2016/03/30/hulus-the-path-opening-credits-exclusive-interview/

http://www.artofthetitle.com/designer/pablo-ferro/
http://www.artofthetitle.com/title/the-thomas-crown-affair/

http://www.cartoonbrew.com/classic/making-nuclear-apocalypse-iconic-sequence-terminator-2-created-141209.html

http://www.artofthetitle.com/designer/ernest-d-farino/

Pixels – an alternative national heritage

‘A Sunday paper is running an article called ‘Pixels – An Alternative National Heritage’ looking at the legacy of onscreen technology over the last 40 years. They want you to playfully represent traditional views of heritage through the lens of the pixel.

Working within the limitations set by a grid of square pixels, and a range of no more than six colours, recreate a range of national landmarks, personalities, characters, flags, landscapes, names or other indicators of traditional national heritage.

Set your grids to any size and dimension, but remember that they want the qualities of the pixel to be dominant so the fewer pixels you use the better. You may want to work on graph paper, work at a low resolution on Photoshop or set up your own grid system on your DTP package.’

Having decided on a short list of the following: a stamp, teapot, slice of cake, jar of jam…

…union jack and policeman’s hat, I worked out the construction on squared paper

Switching to Ilustrator, I used the rectangular grid tool as a guide

It was pretty fiddily, and difficult to work out the placing of some of my coloured squares…

Here they are in their most simplified forms

I decided to add a bit more colour, and some variation within the tones to make it look more ‘pixellated’… Baring in mind it still needs to be easily recognisable.

And the finished work…

Pixels – An Alternative National Heritage

I think the slice of cake is the least successful shape – it is just a rectangle! I found it quite frustrating reducing simple shapes into squares. I really wanted half squares, diagonals, curves – all of which you can normally use even on the most pared down logo design!

Pine Marten

‘A small publishing company called Pine Marten Publishing wants to develop an online presence. They produce a wide range of books that focus on different aspects of nature writing: short stories set in distinctive natural landscapes, volumes of animal, plant and insect illustrations and photography, volumes of poetry and travel guides. They employ traditional paper-making, printing and binding techniques to produce limited editions of their books and pamphlets, and pride themselves on their craft ethos. As a consequence they have tried to avoid the internet, but as many of their customers are abroad, they have realised they need a website to be economically viable for the future.

Pine Marten have asked you to research the competition online, analysing the visual feel, layout and navigation of small and large publishing companies as well as online craft and book shops. They want links to some of these sites and some narrative about what makes them successful or which elements might suit Pine Marten’s needs.

The company also needs advice on what is currently the best way to present and sell items online. They would welcome any suggestions on which kinds of technology would best suit their needs, bearing in mind that they want to update their current stock on a weekly basis. As a small company they are keen to know whether there are any freely available web design tools or shops already online they could use instead, perhaps linking together different elements from different sites.

Finally, they want a website to show their back catalogue of books, the different ranges they offer, as well as their current stock and forthcoming publications. They want to sell this material online, provide links to a range of organisations such as the RSPB, and create a space for writers and customers to review and write about their work. They want you to suggest a suitable way to organise and navigate this content into a menu by developing flow diagrams of how the content links together as well as mock-ups of how a number of the web pages will look.

Put all your research, links to examples, recommendations on existing options, flow diagrams and mock-ups into either a PDF document that can be emailed to the client, or a series of web pages they can view.’

I have a (small) amount of experience in this area, and in real life I discussed this information via telephone and email with clients. I found actually managing expectations in reference to ongoing budget is really important. You can’t simply ask ‘What would you like?’ without giving a clear idea that low running costs involve some compromise, its a matter of balance. Hopefully through communication we can find ‘the sweet spot!’

Pine Martin concern me a little in terms of expectations…

‘Freely available web design tools or shops already online they could use instead, perhaps linking together different elements from different sites’

Um….. this sounds like ‘Can we display loads of stuff for free?’ And ‘Can we use different stuff from free sites and cobble it together?’ Oops. Did I say that outloud?!

Unless they are employing a high end developer (which I’m not) who can strip apart back end code and rewrite to your requirements for 50 pence per hour, you’ll need to pay a few quid per month to have something that looks nice.

Seriously Pine Martin we will need some sort of budget. And I promise it could be very small.

They’ve mentioned showing a ‘back catalogue of books, the different ranges they offer, as well as their current stock and forthcoming publications’ This requires a good database/storage capacity as does a ‘a space for writers and customers to review and write about their work’ – this might actually work better outside the main website, such as via Facebook. Amazon do it internally because they have a mega large budget. I’d suggest looking into this and I’d price up the best option.

They’d like to provide links to a range of organisations such as the RSPB.

NO! Step away from your keyboard. Slap wrist. Thats how to make your site really hard to optimise! I just. Can’t. No outgoing links to websites bigger than your own  – unless google likes it.

It loves google maps.How about a map?

This doesn’t sound like a small hundred items or less set up, and this does effect what sort of web hosting they will need – and thats unlikely to be 100% free. I need to put across its kind of a false economy; its just likely to be too restricting for their needs.

Incidentally, when it comes to E-commerce web hosting, so far I have arranged for clients to sign up directly with the relevant company. Then its clear what these monthly costs are from the start, and they are in complete control of them. And if I disappear in a freak accident, no big deal – its all set up and fully editable.

So. Here’s my PDF… (I have feeling I was really supposed to focus on design wasn’t I?)

Ecommerce Info

PS I don’t have to be that polite because Pine Martin don’t exist. Obviously in real life I have lovely manners

Research Point: Web pages

‘You can distinguish a HTML from a PHP page by analysing the kinds of data being used, seeing whether a page is static or has options to update it live (for example by offering a log in option), or simply by looking at the URL address to see if there’s a .html or .php after the page name. Similarly, Flash pages can be spotted by the kinds of information they present and whether it’s animated or interactive. Scan through some of your regular web pages and try to work out what scripting language has been used to create them.’

I’m pretty familiar with web design, as I have slogged my way through 5 courses on the subject! Sometimes I find myself actually being paid to build them for people (hooray)

As well as the information above, you can also right click on a web page (if you are using a PC) and view the code. I’ve sometimes done this to better understand how a page has been built.

A good example of a website using php is this one – WordPress uses php because it allows for users to add information, as I’m doing right now!

Obviously Flash was a problem for a while, as it wasn’t compatible across the board, thanks to Steve Jobs. I have only built one website with a small amount of flash animation (the relevant part is a balloon floating up and bursting with a satisfying ‘Bang!’) I was so chuffed when I was able to get the audio to synch with the ‘pop’! I would be extremely rusty with it now.

You can view the balloon popping here (Providing you have a compatible browser)

An ordinary HTML page is obviously a standard static page. I found CSS complicated to begin with, but it comes with practise…though there are quirks that can drive you crazy. For example, when you specify how links should appear on a page, it has to be stated in a specific order, or it won’t work. At all.  And there are almost inevitably differences between browsers – which can be an utter pain to iron out. Oh and god forbid you should type a single piece of information wrongly – such as missing off a semi colon. Your CSS won’t work. Computers don’t do “Oh I knew what you meant to say….”

This is an example of a static page (I still work with this lady, she is a very experienced OT and provides Equine Therapy to amongst other clients, autistic children)

Its quite common to insert small scripts into HTML pages –  javascript to display images, or a bit of  php to detect what sort of device you are viewing on etc.

Your browser can read javascript – this is called client side scripting. Server side technology is more complex and belongs more to the territory of a developer rather than a designer.

I think I’ve bored myself now??

 

Research Point: User Interfaces

‘User interfaces are everywhere, from mobile phones to television remote controls, from washing machines to car steering wheels. Spend some time consciously looking at the interfaces that you regularly come in contact with and reflect on how well they work as interactive devices. Could you understand the function of the buttons without reading the instruction manual? How easy or intuitive are they to use? Is the interface using visual metaphors to help you? What responsive cues are you getting back from them?

Reflect on your experience of these interfaces from a design perspective. Look at how they’ve been constructed and think about any possible improvements you could make. You may want to widen your research and look at current developments in other forms of interface design or trace the development of interfaces you have a particular interest in.’

Software

I think I did some units on GUI (graphical user interfaces) on a previous course, but unfortunately I can’t remember much.

Its weird to think that lurking underneath any digital software its actually something far more alien. Illustrator has a user interface, Photoshop, Dreamweaver…all so normal humans can interact with software comfortably.

I think its safe to say, the more complex a programme, the more the little graphic symbols become pretty hard to understand at a glance. I don’t think its the designers fault, its simply that some functions are hard to sum up in a little icon.

Software is complex – as a designer good luck trying to come up with anything comprehensible!

Here’s the Illustrator tool bar

The pen tool, the zoom, brush, eraser, eye dropper etc pretty much look like their names. But the width and shape builder tools aren’t instantly recognisable – but these things aren’t easy to convey. (The width tool looks like a weird anchor to me)

The colours and brushes are fairly easy to guess on the next panel…

Can you spot Graphic Styles or Image Trace? Nope? Not unless you already know them

But I should also point out a lot of software is known to be intuitive. What do we mean by that? Well, probably that stuff behaves ‘like the real world’. I drag this item to the rubbish bin symbol to throw it away. I click here, it ‘picks it up’ or selects it. These actions make sense to us. Drag and drop to re-arrange items on a screen again feels ‘natural’. In this way it is comforting when the virtual world obeys the laws of physics.

 

Hardware

When it comes to operating equipment around the home, who hasn’t been driven mad from time to time?

I think the symbols on ovens are pretty easy to read…there’s generally a grill, an oven (with or without fan) and the convention of how to depict these tends to be fairly consistant.( I learnt how to use my new one without really needing instructions)

Washing machine and dishwasher programmes tend to be a bit mysterious – you generally need an instruction manual, unless you are content to guess.

Remote controls are a bit notorious – they should be easy, but somehow they aren’t! At least mine provides plus and minus button to control the volume, thats nice and clear. Also, stereos and dvd players have the standard symbols for play, stop, rewind and eject. They are so familiar its impossible to say whether they ‘make sense’. Its just that they are standardised, which is all we need. learn one, you have learnt them all!

Where possible I think text, symbols and lights in combination are the most helpful in interacting with most equipment. My printer has buttons with actual words written by each one ( like ‘Start’), and a digital display which guides you through a menu thats actually makes sense. If the paper gets stuck, it tells you what to do, and asks you to press a button when you have completed the task. It certainly helps.

I think the worst kind of technology battle is when techy people think they are explaining things in normal language. Or they are so in love with their tech terms they can’t bare to dumb down! Its hard to reverse out of what is familiar to you, and explain things afresh. On the other hand, to return to the Adobe suite, who is your audience? Is it appropriate to explain this button alters the ‘leading’ or do you say ‘line spacing?’ They went with leading. maybe assuming that people who want to adjust it would know the technical term.

I would really hesitate to suggest improvements – this area of design is hard – who am I to come up with anything better!

Public lettering

‘The signage of previous eras remains with us in the form of street names, plaques, older shop fronts or other signs that have never been removed. Streets and public buildings are therefore a potential source of typographic archaeology in which we can discover forgotten or obsolete forms of signage, identify a wider history of typographic styles, and pick out different forms of signage from hand-rendered, metal cast type to amateur hand-written signs. Different places have different traditions or vernaculars of typography and signage, which gives each place a sense of its unique identity. However this wealth of public signage also creates problems as signs compete for attention, take up space within our field of vision or interact with one another in unexpected juxtapositions.

Graphic designer Phil Baines developed his Public Lettering project in 1997 to document some of the typography he encountered on a walk in central London. Much of this typography is from public signage, while other examples are drawn from things like manhole covers and dates on buildings. See http://www.publiclettering.org.uk/

Following Phil Baines’ idea of taking a typographic journey, use drawing and/ or photography to document the forms of public typography, lettering and signage you encounter on a chosen walk. Reflect on what you find and compile your images in a poster, small booklet or other format than shows the chronology of your walk. Develop some narrative around your images. For example, identify and reflect on examples of good and bad signage from an information perspective, examples that you found interesting as a designer, and others than might reference the history of typography in some way.’

Here’s my journey and the photos I took…

As I stepped outside, there are bags of sand by the door. Within the home, and directly outside it, theres no getting away from big business brands. No nonsense typography describes the contents without frills. They say red is a carrying colour to attract consumers.

But red is used in lots of ways – often as an alert or caution

This sign is embellished with graffiti

Past a digger, with a typographic logo. The fluid shapes of the lettering give it a modern feel, implying that this company makes machinery that runs smoothly and with precision

One of the very few typographic signs I found that were not totally generic. Tin plate, reversed out lettering

More road signs and graffiti

Webber logo – they are a south west firm. You can see the logo is quite pared down, with a sans serif typeface

Everywhere I look, it could be anywhere…

Im pretty sure this says ‘Moobs’. Always a comedy subject.

I really should have knocked on the door of this household to get a better view of this cool vintage sign

Like I said, I didn’t find a lot of vernacular typography. There was a lot of modern generic stuff

Ah, some actual;l handwritten typography – even if it is just scrawled on a steel beam

Geometric sans serif looking very crisp – looks like Futura?

Back to the colour red to alert us of An Important Sign – all caps.

Obviously, the brief was asking for an entire journey made up of more individual typographic examples. This is as ‘historic’ as it gets round my way. Yes its kind of twee. But I like it. Its probably handcrafted by local hobbits.

Um… Yep. I wonder who decided on the gold?

You can’t get away from Apps even when at the park

Marshall look like they make nice quality paving. I like the spiral logo

Is everybody absolutely clear you might need to be careful when approaching this house???

Yes. More modern signage. A fairly boring typographical logo

Street signs tend to have a more gentle ‘voice’ in all caps, its the serifs?

I like this picture and the instruction on the sign.

I reckon yellow is very much a carrying colour too – how about a wasp colour pallette for danger?

Local scaffolding business. Not sure about the logo, but I couldn’t get that close

You can see when stuff has been designed by professionals

Heres my drive by… I like the salt rock logo – its an interesting shape, plus the slightly quirky use of upper and lower case.

And as I leave the car I see yet another big business logo. Yes. The car is very dirty.

Why was I driving? Because I have limited mobility. Why was there almost no interesting historical/vintage/handwritten typography? Because not every location has it.

Yes, I should have gone to the church! But I didn’t think of that. Do I sound a bit grumpy? Yes I am a bit grumpy.

Armed with my boring pics, I set about attempting some sort of layout. I began in Indesign, thinking I would write up this commentary in the form of a booklet… I knew I should work out my layout roughly on paper first, but I was curious how many images I was likely to fit per page depending on scale. I got a short way in and changed my mind! This seems more interesting as a collage/poster instead!

I separated the relevant images from their backgrounds in Photoshop, then I built up my a images around a letter T (Zapfino). I wasn’t able to incorporate all the available images, but a flavour of them. The results are OK, I think. Once again, I have to say I wasn’t able to find much vintage or quirky typography!

My Local Typography

I think I prefer the blue…