Designing The Waste Land iPad App

Posted on June 11th, 2011 in General by admin

I was lucky enough to have the opportunity to work with Touch Press as the designer of their latest iPad App, The Waste Land by T. S. Eliot, published jointly with Faber and Faber. I have previously had the pleasure and privilege of working with Max Whitby and John Cromie, whose achievement is legendary in developing and publishing interactive media content.

TWL_menus

The Waste Land launched this week in the UK and US and thus far is being well received, making App of the week in the US. This is fantastic considering The Waste Land does not have the same mass appeal as other more general titles – after all Eliot’s poem, though a milestone in modernist poetry, is difficult for contemporary audiences and is loaded with academic references. The Waste Land iPad App, is a contemporary re-presentation of the poem as a true multimedia textual experience. Around the core poem text, there are carefully crafted layers of interactive media including: readings (by Alec Guinness, Eliot himself, Viggo Mortensen and others), a video performance by Fiona Shaw, critical perspectives (by Seamus Heaney, Craig Raine amongst others), detailed annotated notes, an overlay of the original manuscript and a gallery of related images. All of this additional material serves to enhance the readers’ engagement with the core text of the poem rather than distract from it. Together they build an expanded experience for the reader that helps them to understand the richly woven texture that is The Waste Land.

TWL_readings_perf

Designing a successful interactive experience only comes about through real collaboration between technical, creative, subject matter expertise and producers who can glue it all together. The Touch Press team and Faber Digital possess that magic.

For my part, I have tried to present the poem as a beautiful, readable, usable text within an interface that causes minimal interference with the reading experience.  Effectively, I wanted the interface and typography to almost go unnoticed – not to compete with the readers’ attention for an already demanding text. Scala is the typeface family used throughout (designed by Martin Majoor in 1990) - chosen because it is a modern classic, that looks and feels good to read! Scala has good legibility on screen (because of its straight serifs and low contrast) and it encompasses both sans and serif typefaces with a good range of weights that enable texture and contrast in the typography. Making good typography on screen is tricky – in the case of the iPad – because half of the control is split between CSS and Apple’s IOS. It requires a patient understanding software engineer (thank you John!) who will labour with the designer to make small tweaks that ‘nobody else notices’.

TWL_poemtext_detail1

Another aspect of design that made for an interesting formal consideration was that of orientation. For example, both the title and contents pages had to work in portrait and landscape format as did the poem text itself. The measure of the type for these orientations also needed to be the same for seamless transition while some features really worked best in one format over another (Notes and Perspectives for example). The issue of type size was significant – initially I designed it in four different measures – to cater for a range of readers. However, the practicalities of ‘pinch & zooming’ the text was difficult because of the poem line breaks which needed to remain faithful to the printed publication. The App does enable the reader to view the text in a larger size via Settings.

TWL_perspectives1

There were lots of ‘cool’ things I wanted to try with the typography in The Waste Land when we embarked upon the project – and gradually I realised that you have to walk before you can run. I thought it would great to experiment with three-dimensional representations of the text or to use visualisation techniques to ‘see’ the text. All that remains of these ideas is the Navigator, a view of the text in its entirety that comes up in an overlay on the right margin.

TWL_manuscrpt_navigator

From my perspective, The Waste Land represents an interactive text, and thus is interactive typography as typography gives form to the words in the poem. The words are both content and interface alongside more traditional UI elements such as the tool bar and pop-over menus. My future goal will be to design an interactive text with no visible interface where only the words embody all of the interactivity. Touch-tablet displays offer great potential here – but it takes a while to understand the various gestures available to the reader – and even more time to prototype whether they are intuitive and usable.

TWL_notes_hdrnav

In the meantime, The Waste Land is a beginning, there’s lots more to be done.

Check out the links below – some demos and commentary on The Waste Land from various sources including the Guardian, The Independent, The Huffington Post, The New York Times and Gizmodo.

Preview of The Waste Land at the App Store

Faber launches The Waste Land app – video, The Guardian, June 7th 2011.

A Walk Through The Waste Land – video demo by Max Whitby

Raising the Bar for Digital Poetry, The Huffington Post, June 10th 2011.

The Waste Land by App, New York Times, June 11th 2011.

TS Eliot’s The Waste Land Replaces Angry Birds as Greatest Modernist App, Gizmodo, June 10th 2011.

Video Lessons from T.S. Eliot by Steve Smith, Media Post, Thursday, June 9, 2011.

The Revenge Of The CD-ROM by Steve Smith, Thursday, June 9, 2011.

T.S. Eliot’s ‘The Waste Land’ Is iPad App of the Week, Craig Morgan Teicher, Publishers Weekly, June 10th, 2011.

The Waste Land for iPad lovers, by John Naughton, The Observer, June 12th 2011.

The Waste Land, Terry Gray at Palomar College, June 9th 2011.

Technical Web Typography

Posted on March 22nd, 2011 in General by admin

True to Smashing form, they have collated a bunch of useful information about the technical aspects of web typography, everything from glyphs to grids. Its a very useful reference. Note of caution however, there are some errors in the article in relation to type measurement on the web, mainly the part about em values. Em is a relative measurement on the web and is a handy work around W3C standards for designers who want to control type size but want to avoid fixed size settings in pixels.

Earlier this month Smashing also did another piece on web typography which focuses on the @font-face rule and the various aspects around embedding fonts on the web.

Another useful reference is Khoi Vinh’s book published just before Christmas on grid principles for web design.

ATypi 2010 Dublin

Posted on August 30th, 2010 in General by admin

This 2010 ATypI conference is being held in Dublin, Ireland, from 8 to 12 September 2010. The main conference sessions will run from 9 to 12 September in the historic venue of Dublin Castle. This year’s theme is the  ‘The Word’ – will explore the word in its various dimensions including typographic, literary, historical, political, technological and aesthetic. I am speaking at this year’s conference. I am presenting a workshop about the practical application of my PhD research and also a paper on the theoretical background to my research.

The programme is packed with very interesting speakers and presentations on typography and the Preface has a range of papers on various aspects of screen typography. Keynote speakers include Robert Bringhurst, Martin Bantjes and Ellen Lupton and there is also a scheduled lettering walk of Dublin with Phil Baines and Catherine Dixon on Sunday 12th September at 3.30pm, meeting at the main conference hall. Should be great!

Web Typography links

Posted on August 10th, 2010 in General by admin

There are more and more resources on web typography emerging every day, so here is a list of some of the most useful web font sources with @font-face licenses:

  1. FontSpring – Open type fonts for your desktop and webfonts for your sites.
  2. Fontdeck – Fontdeck is the professional webfonts solution. You only pay for the fonts you need, when you need them.
  3. FontShop Webfonts – Web font service on selection of their fonts deemed suitable for web use. Includes handly little tool Fontfonter to see how the fonts look in a website.
  4. Typekit – One of the first web font services, also has quite a useful blog.
  5. Typotheque – Web Font Service enables you to use custom fonts in your website using the @font-face rule in CSS.
  6. Fonts.com from Monotype – Web font service using Monotype fonts.
  7. Extensis WebInk – High-quality fonts for your websites. Easily use professional type from trusted foundries in the sites you design.

Nice Web Type – One place for web typography, using our collective knowledge for the betterment of typographic style and practice. A web type blog written by by Tim Brown.

Also worth mentioning some of this year’s Atypi workshops which is being held in Dublin which focus on web typography and web fonts.

Next Page »