Smashing Magazine we smash you with the information that will make your life easier. really.
Table of Contents: Creative Examples
July 7th, 2008 in Monday Inspiration | 72 Comments
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.
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 in 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
So how beautiful or creative can a table of contents be?
PRINT Magazine Spread: Table of contents
Guide to grammatical errors
“Interesting table-of-contents page in a 1940s grammar guide, found in a thrift store in Roswell.”
Sonic Travel Guide
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.
Be somebody
Acknowledgements, front matter, and table of contents from Lester’s Be Somebody (2008, Effing Press).
Flavors
“Flavors” Mason Williams. Doubleday &Company, 1970 (design: Mason Williams).
Peterson
The inside cover of A Field Guide to the Birds (Peterson 1934).
The Pocket Manual of Chinese Medicine
Stage door
All of the lettering except or Stage Door act one, is pen and ink.
Annual report for SB bank
Designed by Danil Kryvoruchko.
Restart
Universe/Rizzoli, 2001. Design: Christian Küsters.
“Sense, Memory” Table of Contents
“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.”
Designing Design by Kenya Hara
Hyperborder: The Contemporary U.S. - Mexico Border and It’s Future by Fernando Romero
Creative Time: The Book by Anne Pasternak and Lucy Lippard
Examples with leaders
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 1948
A classic.
Endsheet table of contents
Handwriting in use. Why not?
La cuisine au fils des mois by, Suzanne LABOUREUR Table
A List Apart 2007 Survey Results
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.
A. W. von Schlegel
A. W. von Schlegel: Indische Bibliothek. Bd. 1 (1823). Inhaltsverzeichnis.
The Living World
My great-grandfather’s book, published circa 1890.
Atlas Table of Contents
A Finnish atlas from 1958. “Isänmaan ja maailman kartasto” (Atlas of the Homeland and the World).
The Telephone Book
“The Telephone Book: Technology, Schizophrenia, Electric Speech” Avital Ronell University of Nebraska Press, 1989 (design: Richard Eckersley).
Examples without leaders
The Mechanical Bride
“The Mechanical Bride: Folklore of Industrial Man” Herbert Marshall McLuhan. The Vanguard Press, 1951 (design: Ernst Reichl).
Glauber_Johnson 1999
Ray Johnson: Correspondences, 1999. Barbara Glauber, Beverly Joel/Heavy Meta, designer.
El Indice
Capitulos Half-Blood Prince
Peterson
The table of contents is repeated at the top of every page.
Design Noir
“Design Noir: The Secret Life of Electronic Objects” Anthony Dunne & Fiona Raby. August/Birkhauser, 2001 (Design: Alex Rich)
Complete book
Each colored bar will repeat on the right hand page of the corresponding story.
Yeah, THAT Owen Wilson and THAT Wes Anderson
Ideas matter
Macro- and Microaesthetics
Niggli, 1998. Design: Willi Kunz.
Sewed table of contents
What about sewing a table of content? This is exactly what Screaming Lulu did. Limited edition.
Brunetti’s Anthology Table of Contents
This table of contents uses drawing and cartoons as metaphors for the chapters.
Last Click
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.
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″.
Sources and Resources
- Medieval Manuscripts
- The Next Page: Thirty Tables of Contents
- Tables of Contents Flickr Pool
- Michael Surtees’s Collection: Tables of Contents
Leave a Reply
Sponsors
- Advertise with us!
Smashing Links
Popular Posts
- 100 Wordpress Themes
- 83 Wordpress Themes
- 80 AJAX Solutions
- 53 CSS Techniques
- 40 Free Fonts
- 50 Beautiful Designs
- 50 Simple Designs
- 45 Fresh Designs
- 30 Dark Designs
- 65 Flash Designs
- Beautiful Icon Sets
- Beautiful Wallpapers
- Beautiful Photos
- Free Design Templates
- Free CSS Layouts
- Photoshop Tutorials
- Illustrator Tutorials
All Posts
- 35 Designers × 5 Questions
- 50 Designers × 6 Questions
- 404 Error Pages
- AJAX Libraries
- AJAX Solutions
- Badges and Pins
- Black & White Photography
- Block Quotes
- Blog Designs
- Blog Headers
- Book Covers
- Brochures and Booklets
- Browsers Round-Up
- Browser Test Suites
- Buzz-Monitoring
- Calendar Designs
- Charts and Diagrams: Tools
- Cheat Sheets
- Code Beautifier
- Copyright Explained
- CSS Coding Techniques
- CSS Designs 1, 2, 3, 4, 5
- CSS Editors
- CSS Expert Ideas
- CSS Float Theory
- CSS Frameworks
- CSS Free Templates
- CSS Footers
- CSS Forms 1, 2
- CSS Frameworks
- CSS Galleries
- CSS Ideas
- CSS Layouts
- CSS Menus
- CSS Print-Layouts
- CSS Specificity
- CSS Styleguides
- CSS Tables
- CSS Tutorials
- CSS-Techniques
- CSS Tools
- Data Grids and Tables
- Data Visualization 1, 2
- Date Stamps
- Design Books 1, 2
- Design Magazines
- Designer's Checkpoints
- Divine Proportion
- Domain Tools
- Dreamweaver Tutorials
- E-Mail Delivery
- Favicons 1, 2, 3, 4, 5, 6
- Firefox Themes
- Fireworks Tutorials
- Flash Designs
- Flash Slideshows
- Flash Tutorials
- Fonts 1, 2, 3, 4, 5, 6
- Form Design Patterns
- Forums
- Gadgets 1, 2, 3
- Google AdSense
- Google PageRank
- Graphics Design
- Grid-Based Design 1, 2
- Grunge Design 1, 2
- Hand-Drawing Style 1, 2
- Handwriting and Lettering
- Hotkeys
- HDR Pictures
- HTML Template Systems
- Icon Sets 1, 2, 3, 4, 5
- Icons, Templates 1, 2, 3
- Illustrator Tutorials 1, 2
- Laptop Sleeves
- Laptop Designs
- Link Building
- Links in New Windows?
- Mascots
- Motion Graphics
- Music Videos
- Navigation Menus
- Newspaper Designs
- Online Converters
- Online Generators
- Packaging Design
- Pagination
- PDF Magazines
- Photoshop Tutorials 1, 2
- Pixel Art
- Podcasts
- PNG Transparency
- Portfolios
- Product Designs
- RSS Best Design Practices
- RSS Feed Icons
- Screensavers
- SEO Tools
- Shopping Carts
- Short Movies
- Slideshows & Lightboxes
- Source Code Editors
- Splash Pages
- Start Pages
- Stock Icons
- Space, Nebula wallpapers
- Tab-Based Interfaces
- Tag Clouds
- Textures
- Textures & Backgrounds
- Texture Design
- Tooltips Scripts
- Tutorials
- Typefaces 1, 2
- Type Setting Principles
- Typography Showcase
- Typography BIG 1, 2
- Typographic Posters
- Typography In Motion
- Typography Showcase
- Usability Books
- Usability Glossary
- Usability Nightmares
- Usability Principles
- User Interfaces
- Vintage and Retro
- Wallpapers 1, 2, 3, 4
- Web 2.0 Tutorials
- Whitespace & Simplicity
- Wordpress Plugins
- Wordpress Themes 1, 2, 3, 4
- WYSIWYG Editors
Webtips
Sideblog
Mozilla has put out a call for everybody to share the vision of how we would like to see the Firefox browser and the Web in the future.
10 Free Handwriting Fonts features Sketch Rockwell, Gregs Other Hand and Imitation.
Coquette icons is a free set with curvy and colorful icons designed to get the affection of your visitors. .ico, .png, .icns, 128×128px. Backlink is necessary to use the set.
Logo Design Trends 2008 presents 15 current trends in logo design. Among them are Supernova, loops, stitch, amoeba and doodles.
You can follow Smashing Magazine on Twitter now. Ideas, suggestions, remarks? Feel free to share, discuss and spread the word.
Take the survey and help to sketch a true picture of the way web design and web development is practiced worldwide.
Donuts Icons Set is free and comes in 25 flavors: chocolate, glazed, powdered etc. Leopard ready, 512×512px. Formats: PNGs, Icns, Folder Icons, Ico and iContainer. Tasty!
Got It Icons Set is a free set of 115 icons based upon the well-known Tango icon set. SVGs-sources are available as well. Clean and useful.
Jeff Finley shares 15 Common Designers' Mistakes in the Music Industry. Among them are not charging enough, ignoring typography, unprofessional behavior and over promising.
Henry Jones presents 400 High Quality Patterns — a collection of patterns of all shapes, sizes, and color. Some are images, and some are pattern files for Photoshop and Illustrator.
Michael (July 7th, 2008, 1:52 am)
First to comment - yowza’r!
iBLO (July 7th, 2008, 2:01 am)
good typography and unique.
hard to implement in web page
Elena (July 7th, 2008, 2:13 am)
inspiration is everywhere
thank you
Barney (July 7th, 2008, 2:14 am)
The grammatical mistakes directory is the best. Absolutely fantastic. I’ll have to rip that off myself somewhere, somehow.
Maneesh Prabhalayam (July 7th, 2008, 2:16 am)
Awesome creativity
zenith (July 7th, 2008, 2:47 am)
many weith poor usability though :(
Paul (July 7th, 2008, 2:51 am)
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)
designaddict (July 7th, 2008, 3:03 am)
very creative
mayur (July 7th, 2008, 3:09 am)
gr8 work with Excellent designs ……. Thanks
Arturo Filasto (July 7th, 2008, 3:18 am)
Awesome, great design, very inspiring.
Laloj (July 7th, 2008, 3:53 am)
I really like the Table of Contents. What’s wrong with it?
johnson (July 7th, 2008, 4:10 am)
great selection guys!
Cameron (July 7th, 2008, 4:26 am)
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.
Bonny (July 7th, 2008, 4:33 am)
Loving the field guide to birds - truly inspirational!
Cosmi (July 7th, 2008, 4:47 am)
Excelent, Thanks.
Lucbach (July 7th, 2008, 5:24 am)
The last one (Shaz Madani’s poster) - lovely!
vFragoso (July 7th, 2008, 5:59 am)
Loved the symmetry in The Pocket Manual of Chinese Medicine.
Gene (July 7th, 2008, 6:07 am)
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.
Nathski (July 7th, 2008, 6:29 am)
Lots of inspiration here, I would love to see an article dedicated to website maps, they are very often dull and uninspiring.
Christine (July 7th, 2008, 6:42 am)
Great selection, thanks!
Quakeulf (July 7th, 2008, 8:08 am)
Many good or creative examples, just too bad we can’t ever have a perfect combination of good and creative when it comes to usability, though. x3~
Josh (July 7th, 2008, 8:21 am)
That M25 one is spiffy-excellent. Yeah!
Malcolm (July 7th, 2008, 8:33 am)
What happened to the monthly “Best of” entries????????
Andy Gongea (July 7th, 2008, 8:54 am)
Some are interesting. Anyway I think this subject is more than niche.
Andrewrew (July 7th, 2008, 9:01 am)
Some of these are very annoying to read and not usable at all
BORABORA (July 7th, 2008, 9:31 am)
Some really nice ones there!
I also got some on my website:
Regards
Julian L. (July 7th, 2008, 12:17 pm)
@ Andrewrew
Agree with you, but what about the Sonic Travel Guide?
So adorable!
Selene (July 7th, 2008, 12:49 pm)
The last one certanly made me chuckle!
Great article!
aurel (July 7th, 2008, 1:04 pm)
hi smashing, these are great collection, that could easly provide inspiration.
furley (July 7th, 2008, 1:05 pm)
Very interesting. When you think of toc’s you usually think of the same boring layout from every text book ever. Great to see some innovative designs.
Louis (July 7th, 2008, 1:18 pm)
I love that last one, so clever.
Chris D (July 7th, 2008, 7:51 pm)
Great article, guys! Consistently amazed by your fantastic writeups.
DoktorThomas (July 7th, 2008, 8:46 pm)
While curious, this article is not as superlative as the others read, consumed and re-devoured here. Usually every link is an excursion; only the London speedway wiper blade coaxed me to click the link and follow. Perhaps very good wanes when all the rest is exceptional….
rajaraman (July 8th, 2008, 1:42 am)
Its good, I ill try in my website …………
thank you
tuttu (July 8th, 2008, 2:58 am)
Its all very good picks i like it very much u just give me a member shep in ur sight
Alex (July 8th, 2008, 8:20 am)
I love it, make me want to design a magazine.
Eric (July 8th, 2008, 12:04 pm)
you should have used one of these to present the list
Michael (July 8th, 2008, 12:30 pm)
Most of these designs are of the form first, function last, school of design, except the one with the large words “Literature, Money, Power” as the first three items.
To my mind a table of content’s first (and pretty much only) function is to give the most accurate impression possible of the content at each level of examination. A glance should give you the most important theme, and subsequently closer examinations should give you correspondingly more specific and specialized information.
Graphic design that does not illuminate the content, but just calls attention to itself is not doing its job.
Making art out of typography is pretty (and valid), but I don’t think it belongs in the realm of design, in which functionality is the primary focus and pretty is the secondary. A good designer can do the second without compromising the first. Very often creating exceptional functionality creates beauty without even trying.
There are few ugly tools.
Sometimes a seemingly indulgent design can help create an atmosphere that enhances the functionality, or content, but that is very rare, in my opinion.
sunny beach (July 9th, 2008, 1:09 pm)
I think favicon is like a symbol. the creativity shown in this.
Hinduismnet.com (July 9th, 2008, 11:51 pm)
You just need to look around for inspiration… it is all around you.
Sébastien (July 10th, 2008, 3:05 am)
Great article.
Here’s another example of content table from the SCAM (Civilian Society for Multimedia Artists in France) : Link [88.191.55.88]
Don Ranly (July 11th, 2008, 8:15 am)
Michael (above) said it all — and so beautifully.
TOCs are not just to look at. They are to be the menu for what’s inside. They should serve as a home page that make readers “click” for more.
They surely are no place for self-indulgent designers to design for design sake.
They should be creative to enhance the content. Grabbing titles should be followed by summary/benefit/confents blurbs.
The blurbs should say to the reader, “There’s something here for you!” They must be organized clearly so that in-a-hurry readers can catch what they want at a glance.
Don Ranly (July 11th, 2008, 8:29 am)
Michael (above) said it all — and so beautifully.
The TOC should be the home page where readers can find what they want and “click” to find more. It should have titles that grab followed by summary/benefit/contents blurbs organized for the in-a-hurry reader to catch at a glance.
The TOC should not be a page where designers design for design sake. It is not a page just to be looked at. It should be designed creatively to enhance the messages on it, to get readers into the book.
lassandbonnie (July 12th, 2008, 5:12 am)
mmmmm - I Like it. Alot.
Bird (July 12th, 2008, 11:32 am)
The Peterson Field Guide front piece is not a TOC, it does not take point you to the section of the book where you could read more about the species represented. That would be a good idea though.
siongchinchan (July 15th, 2008, 1:12 pm)
The ToC is meant as a reference point from which one can see the structure of the book. It summarises the contents yet provide ‘bookmarks’ that one can use to ‘explore’ the book. As such, usability is key. However, this is not saying that ToCs must follow a rigid rule. You can certainly experiment, but it CANNOT be designed at the expense of usability. Doing so defeats the purpose.
Most of these designs, unfortunately, fail miserably at that.
Rakesh.S. (July 31st, 2008, 12:36 am)
Outstading collection. It really amazes me.. the color combination, variety in design, typogrqphy… just supreb !!!! kudos :-D
Dave C. (August 5th, 2008, 1:51 pm)
Some good, so not so good.
The main purpose of a table of contents (and design in general) is to communicate. Some of these are form WAY over function, making them more art than design.