Book Design
Book Binding
Layout Design
UI/UX Design
System Design
Using an excerpt from Kerry James Marshall: Mastry, written by Ian Alteveer (2016), this project explores how to translate a piece of writing through three different mediums: print, mobile, and web.
This project as a whole tackles how to carry the same voice and visual style throughout various mediums. One of my main goals was to articulate the character of the Kerry James Marshall and his work, while still bringing in my own design sensibilities and typography voice. 
Special thanks to James Goggin for the guidance throughout the entire project! 
Beginning with print, the chapter titled "Black Lives, Matter" by Lanka Tattersall from Kerry James Marshall: Mastry was typeset into the form of a 16-page blad. The book was constructed by hand, and utilized the Japanese stitch with French folds. Below are selected images of spreads from the blad. 
Notably, each element of the book had a consistent paragraph style; for example, all footnotes were set a smaller point size, while captions were set vertically. To further showcase the scale and detail in Marshall's work, the images sizes were carefully considered with respect to each spread. Digital spreads of the book may be viewed at the bottom of this page.

The front cover also experiments with printing on different paper types. Below is an animated image of how the ink on the front cover is viewed from different angles.
To showcase the French-fold of the book, below are images of the subtle pattern that is in the interior of each page of the book. The pattern further speaks to Marshall's delicate impactful work. 
Mobile & Web
Taking inspiration from the Print design, the Mobile & Web designs take a similar design approach while still being appropriate to their new medium. 
Seen in the select mobile screens above, the text still has a very similar look & feel to the print version. There is still a sense of asymmetry to how the text is set on the screen, while still having a fresh feel. To adapt, however, to the smaller available space for typesetting, the footnotes are not constantly shown on the screen. Rather, the user must click the footnote button (i.e. 1, 2, 3, etc.) to view the text. The symbol for the footnote has been carried on throughout all three mediums. 
Because of a larger screen size, the web format of the text is more similar to the Print design. The larger amount of space allows for the footnotes to be present right next to the text throughout the text. 
Below are the digital spreads for the print design of the text. 

More Projects

Back to Top