The project aims to let the user discover annotations from the personal library of French philosopher Jacques Derrida, and explore how Derrida’s reading and annotating practice inform his own writing. The pilot phase of the project focuses on books, articles, and other reading materials referenced in Derrida's landmark 1967 work "De la grammatologie" (English: Of Grammatology). The project studies books as material objects, and is about reading and writing as material practices.
Work in progress

User experience and Visuals Design

Art Direction

The project intends to invoke a sense curiousness and playfulness, and encourages exploration rather than providing an authoritative answer. In this way, its personality mimics Derrida's own and that of the philosophy of deconstruction. Hero images and four-corner navigations add up to liveliness, and typography and color palette follow clean aesthetics reminiscent academic presses in France such as Editions Galilée. Combination of typography and hand-drawn elements recreates the texture contrast of printed materials and annotation by hand.


Initially we’d like to use Garamond due to its long-lasting influence to French publishing. A 21st-century type family Garamond Premier Pro, released by Adobe Typekit, was my best choice. However, the license maintenance and Javascript requirement could not work well with our project mode*. I turned to Sabon by Jan Tschichold, a contemporary interpretation of Garamond. Coincidentally, Sabon was released in 1967, the same year as the publication year of De la grammatologie. Sabon has narrower alphabets thus more efficient for limited screen real estate. Universe, designed by Adrian Frutiger for French foundry Deberny & Pignut, is paired with Sabon for more delicate UI elements.

Visual Identity

One of the traits of Derrida’s annotation practice was the arrows in the margin. He placed arrows pointing to text in both downward and upward manner, sometimes with vertical lines spamming a few lines. We traced the arrow from page 8 of Martin Heidegger’s Sein und Zeit (Being and Time) and set it with the project tile.

Challenges and Solutions

Because the core of this project is the connection between the references in Derrida’s finished works and how they’ve been read and annotated by Derrida, my immediate thought was to create one to one pages comparisons between the DG paragraph with the book page Derrida marked. However, Princeton University has the rights of Derrida’s annotations, but not the anchor text from books that are under copyright. DG itself is protected under copyright, so the instance by instance comparison is not possible.

For this phase, we display only books referenced in De la grammatologie that are extant in the Library of Jacques Derrida collection, held at the Princeton University Library’s Department of Rare Books and Special Collections. Users can explore books in Derrida’s library, browse all citations in a list view with thumbnails and see on which page of DG it was cited. When clicking on a thumbnail and landing on the single page viewer, users can look for annotator and transcriptions for each marking.

It took some struggling process to settle on the proper unit for annotation. Should it be by page? or by mark? Annotated pages are available through image gallery of a book. It doesn’t make sense to display individual annotation in a view – you might get hundreds of marginal marks with little context – so a list view is only available in the search results for annotations.

We uncovered more challenges along the way. Some sources Derrida referenced have multiple editions. At times he even owns multiple copies of the same book in the same edition. I added copy label to differentiate the books, and designed different link behaviors depending on the situation:
  • When clicking on the book title of a citation card, if the edition of a cited book in Of Grammatology is known, it will lead to the book page of that particular copy in his library.
  • If the cited edition is unknown, the interaction will open a prepopulated library search result page with all the editions of the book he owns.

Similarly, depending on whether an instance of citation has corresponding annotation image, the card will open book page or IIIF viewer of the page respectively.


We started by letting the project team describe use cases, both front-end and back-end, then took the desired functions and mapped the potential content areas to diagrams that overtime emerged as the sitemap. We further developed the sitemap and turned it into site flow with minimal wireframes to describe content, features, and actions between pages. When the overall interaction is stable, I take sample contents to workout full-scale wireframes.

Through many rounds of iterations and co-design sessions with graph paper and sharpies, we made changes to simplify the site structure:
  • Leave out Derrida's own copy of DG, and reveal his copy in the form of an essay.
  • Simplified the hierarchy of individual book page, using tabs to enable users to toggle between bibliographical information, image gallery, and citation view. In image gallery, users can browse page thumbnails section of annotation, overview images, and insertions.
  • Using exploratory visualizations to show preliminary insights of the data, which also serve as entry points and alternative view of the citation list. You can see the most cited books and authors, and also read details of an individual instance of citations.
  • Eliminated a standing along collection featuring Insertions in books. Users still can browser insertions casually by filtering annotation type in the search, and we can include a link leading to a page of pre-configured search results.

We fine-tuned wordings for the different categories: using Reference instead of Citation as a more general term, replacing Annotation with Intervention to reference all the markings on book pages and other leaflets as insertions.

︎ Index  Next ︎

© 2017