Category Archives: Navigation

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.

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 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.

The Responsive Octopus

A virtual structure designed throughphysical modelling, by informing the virtual with qualities of a physical model. The structure is responsive, it is aware of the visitors presence and redefines its geometry dependent on the visitors position. This structure functions as a navigation system for the website Allende Arquitectos in Madrid.

This is the kind of website that I find extremely inspiring, please have a look around. The navigation architecture is engaging and I dream of ways to extract some of its nectar and inject a similar experience in the printed book.

Construct a line, that is nonlinear. It encodes the whole website, the projects as well as the other fields. The line evolves, complexity emerges from repetition. The line is spatial, experienced in perspective projection that has a content sensitive, dynamic field of view. As the content loads, the experienced space undergoes a transition that seamlessly stitches the two realities together.

Nonlinearity (my favourite theme), spatiality, perspective are keywords rarely used when talking about print design. What a shame… The costs of producing and printing a book are far superior to those of making a site in Flash (in this example) and I wish that all those ideas born from the possibilities offered by animation tools would be reinjected in some ways into our books. The limitations of print design potentially represent a greatmotivation to push back the standards we have gotten used to.
I hope we’ll have opportunities to go down this route.

NOTE: If you have work that you feel is relevant to this site, do not hesitate to contact usby using our email link at the top left of the site.



More QR codes

More photos of QR-codes found on everyday items in Japan.
Starting with 2 magazine adverts for mobile phones featuring barcodes linking to the mobile site of the maker; a graphics-softwares tutorial book that has a barcode on its cover including all the details about the book so you can come back later and ask for it precisely for example; a mini-guide to Tokyo areas and streets featuring a different barcode on each spread that if scanned takes you to a mobile site page giving you more precise information on Gourmet or Lodging informations for that very area delimited by the spread’s contour; and finally an ink-stamp made by Sachihata with a barcode that could include all your contact details to then be printable on some of your belongings, letters, business cards.
I think that it is safe to say that more than 60% of all new mobile camera phones sold in Japan now have a QR barcode reader included in their system. I will get back to you as soon as I can get more precise numbers for the 3 main makers AU, DoCoMo and Vodafone.

KICX0928 KICX0981 KICX1052 KICX1053 KICX1054