Barcodes linking to online content III

In Japan, more than 68 million people can access internet from their mobile phones; book trains, airplanes, cinema, you name it, you can probably do it from your keitai (mobile in Japanese). However, some web URLs can be quite tedious to enter on the limited keyboard of a mobile phone. Enters the QR-code.
Those 2D barcodes released in 1994 are set to replace traditional barcodes on all products on the long term; they can encode more data than previously possible and are still decryptable even when part of the symbol is damaged. In Japan, they have been assigned many roles: one of them is to help us input web addresses on our mobile phones and jump from printed content to online content. They can be photographed and decrypted by more than 50% of all mobile phones on the market in Japan (87M), that almost all sport digital cameras. A few seconds are needed to take a close-up photo of the code which can be decrypted. You are automatically offered to launch this address in the phone browser.
I found 2 of those codes in my magazines this month. But the trend started a few months ago. Many more applications have been found for this printed QR-code / keitai duo. I will detail a few more in upcoming entries.

Relax Magazine April 2004

Relax Magazine April 2004

Unfortunately for RVSI, those 2D barcodes are known as QR-codes in Japan and they seem to be the industry standard… We use them at work, I see them at the combini… I see them on business cards (just today), I have them in my Tokyo Map linking each page to restaurant and lodging infos about the area drawn on that very page, I see them on book covers (don’t have a pen and paper but want to remember the reference of the book – type of situation), I see them on websites promoting their mobile content. And I gotta make a t-shirt with a big one printed on it. I give it only a few months before the first QR-code tatoos and graphic design students using it in their projects (*bad taste alert*) in the manner of the UPC barcode.

This is not a Magazine

This is not a magazine.
This is a book.
This is internet on paper.
276 Pages change shape and layer like browser windows.
330 Artworks interweave, hyperlink, and flow.
60 artists make Chaos Happen*

1200 copies / 330 artworks / 276 pages / 60 artists Printed and collated, glued, stapled, and taped, and then mechanically perfect-bound in a hardcover.

This new issue just came out and looks like a really exciting piece. I just bought my copy and will have to wait for 2 weeks. I will add more pics as soon as I receive it. In the meantime, here is a spread animation.



Books24x7 announces book nominations

Books24x7, a subsidiary of SkillSoft PLC and the developer of online Referenceware(TM) for IT and business professionals, today announced the nominations of its third annual Referenceware Excellence Awards. The awards will recognize the most widely used computer technology and business books available through Books24x7, which offers subscription clients detailed online searches to more than 5,000 unabridged IT and business books.

Winners will be announced at the 14th annual Waterside Publishing Conference, attended by authors, publishers, and third-party vendors, April 15-16, in Berkeley, California.
For each of 14 major categories, five book titles were selected based on actual usage by Books24x7 subscribers from January 1 through December 31, 2003. Judges, selected from the Books24x7 editorial advisory board, will choose each category winner after considering a variety of qualitative data, including content organization, depth and quality of subject matter coverage, and graphics.

“Throughout our long-standing partnership, we’ve seen how Books24x7’s powerful search engine can increase the usability of our print books,” said Scott Rogers, associate publisher of McGraw-Hill/Osborne Media. “Books24x7’s established presence in corporations worldwide and its successful business model demonstrate the value of electronic book delivery.” A leading technical publisher, McGraw-Hill/Osborne Media has six books among the Referenceware Awards nominees.

“These awards give us the opportunity to formally recognize those authors and publishers whose books have proven to be indispensable in the day-to-day work of thousands of IT and business professionals,” said John Ambrose, general manager of Books24x7. “As one of the major events for the publishing industry, the Waterside Conference is a perfect venue for honoring these top achievers.”

Hyperlinks in Print IV

[cityofsound] Porter notes that they’re dealing with“readers who get most of their news from television and the internet now” and without the hours to spend reading the paper that people used to have. He can’t assume that people are going to read the whole thing – so there arenavigational cues, layout guides, and other devices toalert the reader to other articles of interest within the paper (and presumably online) – almost, “if you like this article, you’ll also like this one on page 14”.

I’ll look forward to seeing how these work in practice. I’m quite a fan of two devices used in the hugely popular Grazia magazine and hugely populist Heat magazine. Now apparently the biggest selling ‘glossy’ in the UK and rather beautifully laid-out, Grazia deploys the thumbnail preview of features on their contents page (see below), providing both a hint of the spatially classy layouts the magazine is developing as well as visually lodging a cue for subsequent reveal.


[…] Heat deploys one of the more compelling bits of in-magazine navigation around (see snaps of the bottom of Heat pages below), indicating what’s to follow if you just turn that page. Quite brilliant. Absolutely one of the best bits of ‘navigation’ I’ve seen all year. Now that’s what I call a navigational hook. I’m not sure what the interaction design pattern name for this might be, however. Any suggestions, decent or indecent? Something involving ‘cheeky’, ‘pull’, ‘arrow’ and ‘crop’, perhaps.

heat1 heat2

Those are excerpts and pics from the great article over at cityofsound.

Web fonts used in print

I am always amazed, though, to see grossly overused“Web fonts” show up as display type on a printed page. Yet I did on several entries this year. If I were to return exclusively to print design, one thing’s certain: I’d never again use Verdana, Georgia or Trebuchet!

Jay Small shares his observations made at the earlier reported Society for News Design’s25th Annual Best of Newspaper Design competition.
Well, I am only mildly surprised that somebody would use those fonts for print design. After all they appear by default in the font list on your computer. Not everybody knows that all three were created specifically for enhanced legibility on screen display. Moreover, most reports typed in on the computer are then printed out, leading people to get used to reading them on paper.

What about you? Did you ever use those fonts for print jobs, or were you ever asked to? How did you react and did you manage to convince the client or your friends otherwise?
I also found this interesting study (2001): A Comparison of Popular Online Fonts: Which is Best and When?

Indeed it is interesting to see Verdana and Georgia in print. Like mentioned ablove, they were all designed for screen by our beloved MC. I have to disagree though when somebody says that verdana is a good font for print. For my personal taste it is heavy and clumsy. However – I have recently compared Georgia to some of the classic typefaces and the outlines are not bad at all. What Carter said in one of his interviews was that he paid much more attention to the space in between the letters than on the letters themselves. This is a standard typographic procedure (since a punch cutter had to cut the counter punch first – which was the space) but often neglected. If you look at Georgia in detail, you will se certain slightly odd features, which are adjusted with excellence, but still visible. I think it is completely fine to use it for smaller – ‘homegrown’ – printed matter, but for continuous text I suggest to look somewhere else.

Trebuchet however is not a nice face at all. The lowercase ‘e’ stands there with an open mouth, the ‘i’ amd ‘j’ have very strong upper serif-terminals and the lowercase ‘g’ has got a really big upper bowl. I think – again because of personal taste – it is kind of ‘all over the place’. Maybe good for screen, not good for print.

But what is interesting is that we might be talking about something that is soon irrelevant anyway. OS X has introduced to its font smoothing capabilities and the fonts we are talking about are mainly designed to work as pixelated faces. So let’s see what comes next.

To continue this talk of converting screen typefaces for print applications, I would like to add the thought about whether this is of any use. I have a few comments:

There are a multitude of typefaces to choose from – needless to say – (nearly) all designed for specific reasons. If a font is designed for screen based work then why feel the need to use it in print? I acknowledge the ‘split’ of designer / non-designer work, and the perceived attitude that ‘we are all designers’, but those with knowledge of type and design should not fall from their pillar into non-designed territory.

Concerning issues of legibility and readability,there is currently an interesting article by Phil Baines in the latest issue of Eye magazine. Coming under ‘Agenda’, it looks at guidelines issued by organisations such as the Royal National Institute for the Blind (UK), and responds with reference to debates of legibility that have been the concern of type designers for over 500 years. Government’s and certain organisation’s views over factors of readability seemed far removed from what type designers and graphic designers have been studying for centuries. Reading the article in conjunction with views from John Tarr (writing in the Penrose Annual of 1949) and Zuzana Licko (in Emigre), presents an arguement that ebbs and flows in design circles. Who controls / states what is legibile or readable? (It might be of interest to note that in Dutch these two terms come under one word. As indeed I believe the words ‘handwriting’ and ‘printing’ use the same basic term in the German langauge).

Verdana or Georgia should remain where they are – on the screen. The adage ‘we read best what we read most’ (Licko) holds true. But as designers we should try to honour for what purpose type was designed for. Otherwise we should all just use Helvetica for everything!

Hyperlinks in Print III

This third chapter of our investigation into the use ofhyperlinking metaphores in print design takes us to a page of theApril 2005 issue of The Atlantic Monthly magazine: David Foster Wallace’s cover story about talk radio. The layout of the article has been altered to facilitate interaction between the main text and the footnotes (not unlike the work done in I.D. magazine in early 2004).

[if:book] Wallace is well-known for his copious use of footnotes & endnotes, and this article is no exception. However, either Wallace or The Atlantic’s art director have decided to treat his digressions differently in this case: words or phrases in the main text that signal a jumping-off point have lightly colored boxes drawn around them, rather than a superscripted numeral after them. In the print edition, boxes in the margins – one immediately thinks ofwindows – with notes in them appear, color-coded to match the set-off phrases. Some of the notes have notes; they get more boxes of their own. It’s subtle and well thought out, and considerably more inviting to read over 23 pages than footnotes or endnotes would be. Most interesting is how the aesthetic draws inspiration from the web: the boxed notes suggest pop-up windows (or the electronic – not so much the paper – version of Post-It notes), especially when they’re layered. And the boxed phrases suggest nothing so much as the underlining that the Web has taught us signifies a hyperlink. The HTML version (preview) on their website follows this exactly, presenting the notes as pop-up windows (some of which pop up their own windows).


Click image for bigger version. Image originally from the if:book website. Reposted here under similar Creative Commons License.

If you have seen some kind of web-like layout in other publications, please let us know by sending us an email using the link at the top left of this site. Thank you.

Hyperlinks in Print II

Let’s start this series with one of the best attemps I’ve seen to usehyperlinks in books. For 2 years (2001 and 2002), the designers of the Central Saint Martins College of Art & Design Directory book overlayed each page of the book with a subtle and excitingsecond layer of information.

Every 4 pages, a double spread (on white background) introduces one of the courses offered by the college; every following double spread (on photographic background) introduces one student or work produced in that previously mentioned course.

On the right edge of page 3 in the 2002 edition runs an evenly-spaced list from top to bottom with the title and page number of each following double spread related to the courses; starting with Foundation 08 at the top and finishing with Research 92 at the bottom. On page 5 runs a similar list giving access to the student work-related pages’ titles and names. The two lists shown next to each other give a perfect index of the book and moreover hint that we are looking at a kind of map of the book: the BA (Honours) Textile Design 44 page is obviously half way thought the book (when thinking in terms of page numbers) but it is visibly so too being in the middle of the list and at the vertical center of the page.
Therefore, should I be looking for page 44, I would not have to flip randomly though the book staring at the page number with no sense of where it could be but instead, looking at the thickness of the book and splitting the page number in half would probably get me very close to that page, or and this is where it gets exciting, I could put my right hand thumb at the level of that tab and let the pages flip through my finger until the page number wouldrun from the top of the page at the beginning of the book (following the index map) down to the middle of the page in the middle of the book and would easily be able to intercept the right page (do I make sense here?). What an exciting and efficient way to navigate through a book!
This reminds me of the elevator (scroll) bar you see on the left of a website window; it lets you know, just by being here, that the page is longer than one screen and that you will need to scroll to see the rest of the page, but it also hints at how much of the page you can/cannotsee: a long scroll bar gives away a short page, a miniscule scroll bar prepares you for a scrolling fest.

The designers didn’t stop here though; as each double spread has some text on it and anelaborate structure of boxes and lines link each relevant word found in those texts to any related double spread on other pages. The taxonomy has been carefully chosen so as not tooverlink, and each page doesn’t link to more than 5-6 other pages. The (double-hit) green (in 2001) and pink (in 2002) lines are discreet, they do not disturb the reading or clutterthe pages, and graphic enough to bring some excitement and experimental rythm to anotherwise rather uneventful layout.
On page 48, the words performer and spectator are boxed and linked on the edge of the page to 2 boxes sending you to follow on to page 12 BA (Honours) Acting and page 18 A Venetian Merchant. Not only are you made aware of the presence of related content in the book but also, by seeing the links on the left side of the double spread are you informed that this content is further back in the book and that you’ll need to scroll/flip back in order to read it.

This is just pure genious!
My remarks:
I would not have used page numbers at all so as to make the navigation device completely standalone and easier to understand. If anything, the page numbers here are confusing; only the left page of a double spread gets the current page number and title (placed at itscorresponding vertical spot along the page to echo its position in the book)… I would have put it on both sides of the double spread since people flip though a book in both directions. I think that the designers wanted the book to be cut up in spreads rather than individual pages. I understand, but that crippled half their navigation idea as it is impossible to flip foward though the book, since there is no way to know where we are in the book on the right hand side.
Now, what if the index was too long to fit on the edge of one page and you had to have 2-3 indexes… How would you then make the distinction between links to content from another index?
How would you go about linking a word to another one in another book (and don’t answer a Bibliography at the end of the book…)?
How would you link a picture in a book to a related bit of text on another page?

I have a few other examples like this coming soon-ish, but if you came accross a book or magazines that used some similar concepts, please let me know, we should feature them here. Thanks.

Credits for the designs:

2001 Edition concept, design and production: Jannuzzi London. Designers at Jannuzzi Smith (former staff and students f the college): Ross Cooper, Michele Jannuzzi, Robbie Mahoney, Stina Nordquist and Richard Smith.
Printed by M&TJ Printers, London2002 Edition designed and produced by Jannuzzi Smith. All the designers who worked on this project are associated with the College as lecturers or former students: Sebastian Campos, Edoardo Cecchin, Ross Cooper, Michele Jannuzzi, Robbie Mahoney, Stina Nordquist, Richard Smith, Kira Trowell.
The fonts used are Mies, for headlines, created by Jannuzzi Smith for use on the web; Jo, for body text, interpolated from the outlines of Joanna by Eric Gill, who taught at the college in the 1920s; and Bliss, for captions, designed by Jeremy Tankard, who graduated from CSM in 1910.

csm1 csm2 csm3 csm4


Do-Ho Suh – Paratrooper-I

[] Suh described Paratrooper-1 as being a kind of self-portrait, describing his experience of going to the United States for the first time. A shiny, metallic soldier pulls 3,000 taut, pink strings linked to the signatures of different people, sewn into a kind of parachute on the wall.
“If there’s no parachute, then the soldier dies. He has to use it. But when he finally lands, he has to fight in a completely unknown territory. That’s something I felt when I went to the United States. It’s a parachute that is directly tied into your life,” he said.

I’ve just discovered Do-Ho Suh’s work in an art magazine and was really touched by it. I was interested to see that my interpretation of his work was different from his own.
Firstly, I never did my military service in France as it was scrapped just before I was due to enter. It is now a professional-only activity. This opens up a big gap between myself and my South Korean friends who all had to serve for 3 years.
Secondly, I interpreted this piece as being a (dark) metaphore of how the military service draws people in regardless of their will and how violent and mentally & physically disturbing this can be on someone; as if the parachute was a draftee’s skin and his name had been successively stitched in his arm and then slowly ripped off.
Thirdly, I was really excited by the graphic power of those names stitched and then pulled by the G.I’s statue. I could imagine seeing in a flash all the names unstitch at the same time and leave the surface of the parachute completely clean with a G.I falling from his tower.

What made me want to write about it here is that the magazine had an interview of him with pink lines linked to some of the words. A subtle (if somewhat gimmicky) way to link the art work to the interview.
It also reminded me of a Central Saint Martin Art degree graduation show book that was using a similar trick to link keywords to a ruler on the side edge of the page that was being used as a navigation device between the different chapters of the book. More on this in a forthcoming entry.

Hyperlinks in Print I

The January/February 2004 issue of International Design Magazine (I.D. Mag) sports a complete redesign. On its last page, a new section called /flashback makes use of footnotes in an interesting way: numbered transparent yellow tapes are added to the text in lieu of the traditional footnote numbers.

Those usually nearly invisible numbers become the most visible and active graphical elements of the page layout. To me they evoke more hyperlinks than post-its perhaps because that, rather than linking to bottom-of-the-document discreet footnotes, they are mere links to other blocks of information spread on the periphery of that main block.
I tend to see that kind of gimmicks as direct descendants of web design and the rest of themagazine’s makover details seem to reinforce this probability.

If you have seen some kind of web-like layout in other publications, please let us know by sending us an email using the link at the top left of this site. Thank you.


It seems though that the “new feature” effectively takes all the attention away from the content. It has been shown that yellow and red are the two colors you use if you wish garner the eyes attention so I would definitely have to question the color selection of the new feature. However, it is an excellent implementation of an online elemetn.

Well, I agree on the theory. However, I think that the application was controlled. There are only 6 of them, so nothing too distracting here and they appear quite playful. The playfulness is, to me, good enough an invitation to make me want to read the entire content of the page. Actually, all in all, the amount of text of the notes probably surpasses that of the main block and footnotes they are not; just an interesting way to make us interact and navigate through big scary blocks of text. I want to see more of that.

Internet Art by Rachel Greene

Rachel Greene is Editorial Coordinator and a director of, an online resource and platform for new media art, and a curatorial fellow at the New Museum of Contemporary Art in New York.
The diverse forms of Internet art and the tools and equipment used to create them are discussed and placed within the wider cultural context.

When the Internet emerged as a mass global communication network in the mid-1990s, artists immediately recognized the exciting possibilities for creative innovation that came with it. After a century of unprecedented artistic experimentation, individuals and groups were quick to use the new technologies to question and radically redefine the conventions of art, and to tackle some of the most pressing social, political, and ethical issues of the day. Covering email art, Web sites, artist-designed software, and projects that blur the boundaries between art and design, product development, political activism, and communication, Internet Art shows how artists have employed online technologies to engage with the traditions of art history, to create new forms of art, and to move into fields of activity normally beyond the artistic realm. The book investigates the ways Internet art resists and shifts assumptions about authorship, originality, and intellectual property; the social role of the artist; issues of identity, sexuality, economics, and power; and the place of the individual in the virtual, networked age. Throughout, the views of artists, curators, and critics offer an insider’s perspective on the subject, while a timeline and glossary provide easy-to-follow guides to the key works, events, and technological developments that have taken art into the twenty-first century. 200 illustrations, 100 in color.

Note: I haven’t yet read this book, it is on my list. If you own this book, please let us know what you think of it.