Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Table of Contents: Creative Examples

Table of contents is often considered to be one of the most unspectacular design elements ever invented. Because of its simple, usual form, table of contents is often not given the attention it may deserve — after all, it is just a list of the parts of a book or document organized in the order in which the parts appear. But why not use exactly that and surprise the reader of a booklet, brochure, annual report or a book with some beautiful and original table of contents? In fact, many creative approaches are possible. And this post attempts to prove exactly that. [Content Care Oct/19/2016]

This post showcases creative and/or beautiful tables of contents. We have tried to include creative, visually appealing and interesting design solutions. Hopefully, everybody will find something interesting and unusual for herself or himself. Please take a look at the references section at the end of the article — there you may find further examples of interesting and unusual tables of contents.

You may want to take a look at our related posts

Please notice: some photos look not beautiful at all — here the idea matters more than the quality of the screenshot. The showcased tables of contents aren’t necessarily useful in practice as they may be hard to read; they should serve as the inspiration for your future works and show you that even in the design of table of contents some unusual approaches are possible.

Creative and beautiful examples Link

So how beautiful or creative can a table of contents be?

PRINT Magazine Spread: Table of contents3

Table of Contents Showcase4

Guide to grammatical errors5
“Interesting table-of-contents page in a 1940s grammar guide, found in a thrift store in Roswell.”

Table of Contents Showcase6

Table of contents7

Table of Contents Showcase8

Sonic Travel Guide9
Illustrated section heads and selected pages from the Sonic Travel Guide book. Content pages are absent as they contain internal information about the organization. Designed by Jenkin Hammond.

Table of Contents Showcase10

Be somebody11
Acknowledgements, front matter, and table of contents from Lester’s Be Somebody (2008, Effing Press).

Table of Contents Showcase12

“Flavors” Mason Williams. Doubleday &Company, 1970 (design: Mason Williams).

Table of Contents Showcase14

Table of contents: Содержание15

Table of Contents Showcase16

The inside cover of A Field Guide to the Birds (Peterson 1934).

Table of Contents Showcase18

Annual report19

Table of Contents Showcase20

indice de obras21

Table of Contents Showcase22

The Pocket Manual of Chinese Medicine

Table of Contents Showcase

Stage door23
All of the lettering except or Stage Door act one, is pen and ink.

Table of Contents Showcase24

Table of Contents25

Table of Contents Showcase26


Table of Contents Showcase28

Annual report for SB bank29
Designed by Danil Kryvoruchko.

Booklets - Statistical data30

Table of progress31

Table of Contents Showcase32

Universe/Rizzoli, 2001. Design: Christian Küsters.

Table of Contents Showcase34

“Sense, Memory” Table of Contents35
“Ink. I want to use symbols to describe each of the pages content. I think I did an adequate job. In order: Introduction, Sight, Sound, Touch, Taste, Smell. The epilogue was included after this was made, but I felt it could easily be a back cover.”

Table of Contents Showcase36

Designing Design by Kenya Hara37

Table of Contents Showcase38

Hyperborder: The Contemporary U.S. – Mexico Border and It’s Future by Fernando Romero39

Table of Contents Showcase40

Creative Time: The Book by Anne Pasternak and Lucy Lippard41

Table of Contents Showcase42

Examples with leaders Link

If the page numbers appear after the heading text, they might be preceded by characters called leaders, usually dots or periods, that run from the chapter or section titles on the opposite side of the page, or the page numbers might remain closer to the titles. In some cases, the page number appears before the text.

Book Paul Renner 194843
A classic.

Table of Contents Showcase44

Endsheet table of contents45
Handwriting in use. Why not?

Table of Contents Showcase46

La cuisine au fils des mois by, Suzanne LABOUREUR Table47

Table of Contents Showcase48

A List Apart 2007 Survey Results49
In April 2007, A List Apart and An Event Apart conducted a survey of people who make websites. The results represent the first data ever collected on the business of web design and development as practiced in the U.S. and worldwide.

Table of Contents Showcase50

A. W. von Schlegel51
A. W. von Schlegel: Indische Bibliothek. Bd. 1 (1823). Inhaltsverzeichnis.

Table of Contents Showcase52

The Living World53
My great-grandfather’s book, published circa 1890.

Table of Contents Showcase54

Atlas Table of Contents55
A Finnish atlas from 1958. “Isänmaan ja maailman kartasto” (Atlas of the Homeland and the World).

Table of Contents Showcase56

The Telephone Book57
“The Telephone Book: Technology, Schizophrenia, Electric Speech” Avital Ronell University of Nebraska Press, 1989 (design: Richard Eckersley).

Table of Contents Showcase58

The Next Page – Cover59

Table of Contents Showcase60

Buying In by Rob Walker61

Table of Contents Showcase62

Examples without leaders Link

The Mechanical Bride63
“The Mechanical Bride: Folklore of Industrial Man” Herbert Marshall McLuhan. The Vanguard Press, 1951 (design: Ernst Reichl).

Table of Contents Showcase64

Glauber_Johnson 199965
Ray Johnson: Correspondences, 1999. Barbara Glauber, Beverly Joel/Heavy Meta, designer.

Table of Contents Showcase66

El Indice67
Capitulos Half-Blood Prince

Table of Contents Showcase68

The table of contents is repeated at the top of every page.

Table of Contents Showcase

Design Noir69
“Design Noir: The Secret Life of Electronic Objects” Anthony Dunne & Fiona Raby. August/Birkhauser, 2001 (Design: Alex Rich)

Table of Contents Showcase70

The Canadian Hockey Atlas71

Table of Contents Showcase72

ToC_Morphosys AR 200873

Table of Contents Showcase74

Complete book
Each colored bar will repeat on the right hand page of the corresponding story.

Table of Contents Showcase

Yeah, THAT Owen Wilson and THAT Wes Anderson75

Table of Contents Showcase76

Ideas matter Link

Macro- and Microaesthetics77
Niggli, 1998. Design: Willi Kunz.

Table of Contents Showcase78

Sewed table of contents
What about sewing a table of content? This is exactly what Screaming Lulu did. Limited edition.

Table of Contents Showcase

Brunetti’s Anthology Table of Contents79
This table of contents uses drawing and cartoons as metaphors for the chapters.

Table of Contents Showcase80

Last Click Link

Type Trumps
“A set of Type Trumps, a play on the game Top Trumps, in which different typefaces are attributed numerical values. These figures are then used to enable the cards to be won or lost using some of the fried and tested ‘Top Trumps’ rules.

Table of Contents Showcase

Shaz Madani’s poster
No, it has nothing to do with tables of contents, but it somehow fits to the context. This is a response designed to promote the M25 motorway. On one side the poster gives exact directions that would have to be taken in order to travel from one side of London to the other illustrating the complexity and confusion involved in taking alternative routs through the centre of the city. The reverse side reads “wipe away the confusion take the M25”.

Table of Contents Showcase
Table of Contents Showcase

Sources and Resources Link

Footnotes Link

  1. 1 /2008/06/16/beautiful-brochures-and-booklets/
  2. 2 /2008/01/14/monday-inspiration-data-visualization-and-infographics/
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    many weith poor usability though :(

  2. 2

    Excellent designs; for the most part; and excellent for inspiration.
    But there’s one which I just don’t get. Be Somebody. I can’t understand how the Table of Contents is supposed to be read… (as such it fails for me)

    • 3

      The book contains interwoven poetic sequences that are identified by sequence number and part number. the positioning reflects the rise and fall of the overall drama, the rise being where the number comes together. In this particular domain of poetry it was meant to be read and interpreted and encountered first as art rather than to just be something usual. In terms of book structure, using the dimension of space between identifier and page number gives an added dimension of structure.

  3. 4


    July 7, 2008 3:03 am

    very creative

  4. 5

    I really like the Table of Contents. What’s wrong with it?

  5. 6

    These are excellent, particularly like the final poster. I think it’s very interesting to draw inspiration from works like these which cannot be directly transposed into web design (for the most part) and then channel the ideas into making something original, functional and special. Just my thoughts.

  6. 7

    Some of these are very annoying to read and not usable at all

  7. 8

    First to comment – yowza’r!

    • 9

      Amazing – it was really cool. By chance do you know how to do a table of content for resumes?

  8. 10

    good typography and unique.
    hard to implement in web page

  9. 11

    inspiration is everywhere
    thank you

  10. 12

    The grammatical mistakes directory is the best. Absolutely fantastic. I’ll have to rip that off myself somewhere, somehow.

    • 13

      Barney Moreno

      January 8, 2010 11:20 am

      Hey my name is Barney too. AHA and i thought i was the only Barney in the world well theres my dad to but yea. ha

  11. 14

    Maneesh Prabhalayam

    July 7, 2008 2:16 am

    Awesome creativity

  12. 15

    gr8 work with Excellent designs ……. Thanks

  13. 16

    Arturo Filasto

    July 7, 2008 3:18 am

    Awesome, great design, very inspiring.

  14. 17

    great selection guys!

  15. 18

    Loving the field guide to birds – truly inspirational!

  16. 19

    Excelent, Thanks.

  17. 20

    The last one (Shaz Madani’s poster) – lovely!

  18. 21

    Loved the symmetry in The Pocket Manual of Chinese Medicine.

  19. 22

    That book, Designing Design by Kenya Hara not only has a killer table of contents, but the whole darn book is pretty amazing. The content, the weight, and that first delicate piece of paper that sits right inside the cover… all inspirational.

  20. 23

    Lots of inspiration here, I would love to see an article dedicated to website maps, they are very often dull and uninspiring.


↑ Back to top