Since the book will soon be delivered to about half the people who ordered it, with many to follow in the next weeks, I thought I’ll start sharing a few of the “making of” posts I had been thinking of.

These will go deeper than before. Please, please let me know if this is interesting since they take a while to prepare.

If you are looking for cool keyboards instead, I shared photos and a video of a fascinating “typewriter” in this November Kickstarter update and strange Australian navy keyboards just seconds ago.

The Merriam-Webster Dictionary defines pro·to·type as, I guess, something kinda real, but not quite.

This was a prototype of a dictionary entry for prototype.

You could also argue this was a prototype of a joke.

⌘

Why prototype? I think there are a few obvious reasons, and some less common ones.

The most typical reason is to experience something that feels almost real, and then react to that experience. Car makers make 1:1 exteriors out of clay with a bad-ass name, everybody knows the story of the Palm Pilot made out of a block of wood, and people who design smartphone apps mirror work to their phones even though their computer screens look pretty much the same. And a book is even more complicated. It’s not just a collection of words and photos, but also a physical object. I didn’t want to go for too long without checking in on that aspect.

A prototype can help answer a specific question in a tangible way. For my book, for example: Does this color feel good in practice? How about this form factor? This paper? This weight? This typesetting as you hold the book at the comfortable reading distance? Using a prototype and validating (or invalidating) my choices helped me narrow what sometimes felt like an endless playground feeding on overthinking. Even just preparing a given prototype helped me focus and make decisions I’ve procrastinated on.

Prototypes I made were good at generating momentum, too. Pixels on screen can feel unreal, and day-to-day book work monotonous. Receiving a prototype in the mail, taking it to a coffee shop, showing it to others – it was a great reminder of the ultimate goal, and a way to look at the project anew. Prototype, for a moment, can make you feel like a tourist in a city that you weren’t just born in, but in a city you made. 

Lastly, and relatedly, a prototype can be a celebration. I ordered prototypes after big milestones (second draft, securing all the photos, etc.) to bring closure: I wanted to capture the book in progress in its best moments, and let it pose for the cameras a little bit.

⌘

Mostly best moments.

This is a walkthrough of all the prototypes I made for Shift Happens. These were possible thanks to print on demand – the burgeoning no-more-cottage industry of online services where you can get small runs (sometimes as small as one copy!) rather than going on press at a printer where a typical unit is hundreds if not thousands. It’s not cheap, and the quality varies, but it’s miraculous to me that you can order one copy of your book, and get it delivered to your home within weeks. (If that’s helpful, the early prototypes below were about $30, and late prototypes cost me about $60 per volume.)

I also don’t have as much experience with paper. Seeing designs on my screen – even on sharp retina displays, even with the trick of making it sized exactly 1:1 – is not the same at all. I imagine at some point you build up a translation layer in your head, similarly to how musicians can compose by writing notes directly on the staff without hearing them, but I’m not there yet.

I wrote about the covers already, so I’m not going to repeat much of it here; this is mostly how the prototypes helped me figure out what to do inside the book.

Prototype 1

I always like taking something that exists and tweaking it, rather than starting from scratch. Here, I previously made a small book for a strange project, and repurposed a lot of it.

I also had an idea of sending a book proposal to agents… as a small book instead. (At that point I was still considering publishing the book the traditional way.) I thought it would be interesting, and showcase some of my skills. I wrote a few chapters at this point, so I picked three best ones and added some more pages about myself. 

Ultimately, the idea didn’t really amount to anything. I gathered that the publishing industry has very specific rules about how things work, and my creativity was making things unusual and complicated. (It reminded me of UX design portfolios: nine out of ten, being “creative” can actually backfire. Just show your work and let it speak for itself.)

It’s funny now, knowing how it all ended, to look back and see all the things that aren’t here. No Gorton typeface, no custom section dividers, no key font, line spacing and margins so vast you could feel a breeze.

But you have to start somewhere, and pacing yourself is important, too. This was momentum. At the very least, the main font – Mercury Text – is here and I never got tired of it. I would also never quite find a better place for page numbers.

Okay, okay, the beginnings of the “key font” are here – just a Shift symbol outlined, typeset from Output Sans, made by hand as a test.

The arrow key collage was perhaps the oldest visual idea I had for this book; it started as a comparison I made for UX classes I was teaching 20 years ago. You can see a supercharged version of it in the finished book on pages 688–691.

Also, this is a beginning of me trying to figure out how to point to images with arrows. This will be complicated! Images can be on different pages, different spreads, sometimes the caption is on the image and sometimes next to it. It would take a while for me to come up with a consistent system, although I don’t think I anticipated all the challenges ahead at this point.

Prototype 2

This prototype was a celebration, but it was also soul searching. I made it soon after I finished the second draft of the book. (I knew the first draft was basically garbage, so the second draft – the original draft after thorough re-reading and tightening – felt like the first proper instantiation of the book.) 

As above, it was a 6"×9" book (typical trade book size) without photos: all text, endpaper to endpaper. It felt very different than the final book – mainly, a lot denser. At this point I was worrying about this book’s legitimacy; I wanted it to feel like a real book, and density felt like the right answer. In time I would walk away from that. 

The prototype ended up being 1,010 pages split unevenly between two volumes, which at the time was petrifying. No photos yet, and already over a thousand pages!

The handwritten note is from a friend who was kind enough to read early chapters and offer his feedback.

I read them too, of course, many times. I circled and underlined things to fix in pencil, and the sticky flags were for every page I did that, just so I wouldn’t miss anything.

This is the second version of the opening chapter, which you can read fully in the extras volume of the book. (The first version is there, too.)

The title is typeset in Maison Neue, which was very popular at that time (both Kickstarter and Strava used it at the time, for example). I haven’t come up with the idea of resurrecting Gorton yet.

You gotta love the page number just sitting out there, in blissful violation of multiple rules of how to lay out page numbers. Soon, I would follow all the rules. Then, I would start breaking them.

Prototype 3

Conversations with a few people convinced me to move to a slightly larger format. I didn’t want to go all the way toward a super big and heavy coffee table book (since the book meant to be portable). But I thought the 7"×10" size – an in-betweener, if you will – would allow photos to breathe more, and make this book feel a little “extra,” without sacrificing portability, and without pretentiousness.

It initially surprised me how adding just this little space reduced the page count from 1,1010 to 752. But on the other hand, I increased the area by 30% (it just doesn’t feel like it if you say “an inch here and and inch there”), and reduced the word count, too. At this point, my editor Glenn joined me on this adventure, and started working with me to chisel the book into something a lot more cohesive and lean.

The move towards color necessitated a “colder” (not cream) paper. I understood why it was necessary, but I still miss it. I love cream-colored books.

I figured out a way to make the key font programmatically, and made all the keys orange, which as you can see immediately didn’t work at all. But I really wanted to make something orange, and just needed to figure out what. (The eventual answer was: image captions, footnote symbols, chapter keys on the left, and chapter numbers.)

This is one of the first photos I added to the book – I think I just had it lying around. I immediately got lost in the freedom of typesetting here, which might be understandable for someone who so far did most of typesetting on the web. (A few other photos I threw elsewhere felt similarly. Eventually I moved toward a more rigid system, drastically limiting these kinds of “flowing” images.)

The footnote symbols are still traditional typographical daggers with the default treatment. At this point I had no idea how much time I’ll spend on this in the future.

Also, it’s not visible in this photo, but I ordered each volume on a paper of different grammature (thickness) to understand the space better. I would do the same for the next prototype. In time, I’d get extra careful so that each volume is exactly the same page count and thickness, so it’s funny to see those two prototypes being so lopsided on my bookshelf today.

Prototype 4

It’s funny how every prototype requires a negotiation about what matters and what doesn’t this time around. I didn’t want to focus too much on the cover here yet, but the last prototype already had a completely white cover, and you know – you don’t want to waste a prototype. So for this one I went with all orange… and I absolutely loved the de facto orange “bezel” that it created. I kind of miss losing it later in the process, but this helped me understand one of the biggest challenges with this book’s design, which I internally called HMO – How Much Orange?

I haven’t yet figured out how to show combinations of key presses and key shortcuts consistently. Just like Mac OS did, I eventually abandoned the “plus” convention in lieu of something simpler: keys touching each other means they’re pressed together, and keys separated means sequential input.

The image on the right ended up being a case study I would talk about a lot. I wrote about it in the newsletter in 2019, and then when I launched the website for the book, I had a section about it, too. Here it is on page 493 (it didn’t occur to me to add the green computer output yet), when the website launched it was on page 688, and in the final book it’s on page 716. 

If you look carefully, you can also spot some missing characters; printing is much less forgiving when it comes to those. (At my other job, I wrote about how fallback fonts work exactly.)

My so-far-very-humble revival of Gorton is making an appearance here for the first time. I am sure I’m the only person to notice it, but it looks off and very different from the end result.

The tradition says to skip the page number on a chapter opener (see the previous prototype), which I always found backwards since it’s the very number that’s listed in the table of contents! I was happy with this idea here – to drop it to the baseline of the first line. But since chapter titles could push the content up and down, this had to be automatic, and was a pain to code.

Footnote symbols are now mine, and they felt great from day one. However, the footnotes themselves still use the inflexible InDesign system of “a footnote must appear on the same page as its symbol.” Writing that code would eventually almost destroy me.

Prototype 5

The orange bezel is gone with a new cover/endpapers treatment. (You can see the orange endpapers sticking out a little bit.) This is still a long way from landing somewhere. 

Traditionally, books repeat their titles and chapter titles on every spread, but I wanted something more minimalistic. At the same time, some signposting is useful, so here I am trying a chapter number below the page number.

Sticky flags make a return, but in a different, more consistent place. You can also see pencil marks: here for awkward repetition of words.

Also to be spotted: Awkward split of quotation in the middle, and awkward semi-widow in the upper left. I didn’t want to bother with them too early since the text would be reflowed over and over again a lot more in the months to come. (Plus, I wasn’t aware 7"×10" would not end up the final size.)

This is the first appearance of a section break symbol, inspired by carriage return and sized so it’s the same size as the indents elsewhere.

You can see the awkward amount of space at the bottom of the right page here. This is a similar issue to the paragraph splitting and widows and orphans; each page except the last page of a chapter has to be filled from the very top to the very bottom, and widows and orphans had to be accounted for. 

In a typical process, the text is locked in, and you typeset it into the finalized layout, with perhaps tiny tactical edits. In my case, both the text and the layout would keep evolving, hand in hand, in smaller and smaller increments until the end. This ended up being a lot of work.

At this point, the book has a fair share of images – here, you can see one that will be replaced by a second “ergonomic keyboard laptop.” In places where the images are not there yet, there are orange rectangles in their place. This allowed me to get a pretty accurate page count: 555 in the first volume, and 628 in the second one, for 1,183 pages in total. The book will end up being pretty close to those numbers.

And this was the big contribution of this prototype: validation of the idea that actually adding photos and blowing up the page count would, counterintuitively, make the book easier to read, the photos carrying you through, engaging a different part of your brain, and making Shift Happens less dense.

Prototype 6

Here, I learned the hard way that centering stuff is not going to work very well – the gutter always swallows things – although it provoked a lot of conversations about the right way to bind the book. The way the book was eventually bound allowed the pages to lay pretty flat, but I had to accept this could never be display-like perfect (or even foldable phone perfect!).

Note a footnote on a different page than its symbol! Glorious. A great victory no readers would not be aware of. Except you.

I was experimenting here with rectangular wrapping, too, but that felt awkward also.

The strange telecommunications device that used two types of numeric keypads was a photo I ended up not using – it started feeling too esoteric. (Of all of the photos I added initially, I got rid of or replaced about 25%.)

This is the end of a chapter, but still an awkward amount of whitespace. The last line of the chapter needed to land somewhere in the third quarter. Ideally, neither the footnote nor the image caption would be here either, but sometimes it was impossible to avoid. 

The image captions was the main addition to this prototype, and starting to feel them out. I wanted to avoid image captions on most photos because I the photos were meant to feel immersive, and that complicated things even more, since image captions had to be colocated with other text, each text box pushing on another and fighting for space.

Prototype 7

Getting the photos to appear right where they were needed was a huge amount of work (I wrote about it before). Sometimes – like here – I decided to print a broken prototype on purpose, instead of fixing every problem.

Another challenge was situations where an image caption for a photo on the same spread had to coexist with an image caption for a photo on a previous, or next spread. I ended up with a set of specific rules for these kinds of situations. (Image captions now have credits, too, which I wanted to incorporate inline to acknowlege people’s – and institutions’ – help.)

Those who are paying attention will notice that the line spacing and the spaces around images keep getting tigher as I keep revisiting and getting feedback from others. The first prototypes (on the smaller size) had 32 lines per page. Then it got bumped to 39, and then to 42. Here is the final number that you will see in the book: 44 lines per page.

I was still struggling with the cover design, so I tried different covers for both volumes, and even revisited a black spine. (Sometimes it’s interesting to revisit things you feel like you firmly decided on, if it’s not too disruptive.)

Prototype 8

Same story here. Since I was making a prototype anyway, I tried two things that I was pretty sure I didn’t want and I haven’t tried before: endpapers with orange on white, and a shiny/glossy cover. I tried those because who knows? Sometimes I’m stubborn and only seeing something can get me unstuck, although this only confirmed my hunches. Even though matte treatments are counterintuitively trickier to get right! (They can appear dull and can also be fingerprint magnets like you wouldn’t believe.)

Otherwise this is getting very close and – I thought – squarely in the land of diminishing returns. You can see the chapter ending landing exactly where it should, no strange widows, image caption in the right place etc. Most of the orange placeholders are filled with images even if not yet purchased or finalized. The footnote is correctly (or, at least, intentionally) on the left one page before the symbol.

I have not figured out yet that the page numbers in situations like on the left could do the same as with chapter opening pages: drop to the first baseline. I didn’t think this was necessary, but my editor noticed there were sometimes long sections without page numbers at all – and that pushed me to figure it out.

This public domain photo on the left here will be replaced with a nice commissioned photo of a French Amstrad computer via social media. This – Twitter strangers helping out – happened more often than you’d think and that’s wonderful.

The volumes at this point weigh 582 and 614 pages, respectively. That’s still a problem, as they need to match exactly and both need to be divisible by 32, which was really hard to accomplish. 

But what was even harder was a new challenge reported by the printer around this time: the book had to be a little bit smaller, otherwise we would waste a lot of paper and a lot of money. (At the current size, we could only place 16 pages on each sheet, and waste an almost-16-pages that would overflow just ever so slightly.)

Making the book a teensy bit smaller would allow for 32 pages. After some calculations we decided I needed to reflow the entire book from 7"×10" to exactly 6.625"×9.5". I once added an inch to each side. Now I had to remove millimeters, but at this stage of a project – with all the images, and tons of typesetting nuances figured out – such an adjustment was much harder. 

Not only that, but I also had to rejigger the volumes to have them contain precisely 608 (32×19) pages each, and also tighten some of the still too-large spacing. This was a huge undertaking.

This also meant the end of print on demand since there is no POD company I know of that can produce a book in that strange exact size. (By the way, for most of the above prototypes, I used Barnes & Noble Press, née Nook Press.) I had books of a similar size and thickness and weight at home, and could dress them to pretend they’re mine (another tradition of prototyping), but still, this was scary. After this moment, the first time I would hold my volume at the right size would be when it’s too late to change it.

Prototype 9

Before the printer fires up the ol’ (or in our case, new and shiny) press, they send you a bunch of proofs. They all have jargon-y names I don’t fully understand: bluelines, digital proofs, epsons. Here’s one of the few I got. 

The colors and quality are meant to approximate the press, pre-calibrated to look alike, but the main reason to pore through it is to double-check all the typesetting and pre-press. Are the transparent images properly transparent? Does the text flow as expected? Are any of the images accidentally in low resolution, or failing to bleed? And a bunch of more things like that. At this point, you already pay for every mistake – corrections take up the printer’s time – but that’s still better than the readers paying for it.

Prototype 10

Given that I never before printed at that printer, and that the stakes felt pretty high, I wanted to do some sort of a test print. This isn’t cheap – like I mentioned, you basically have to spin up the press and the minimum run is hundreds – but you end up with an extremely realistic result.

We limited the test to one signature (32 pages), and my editor had a brilliant idea. He said: Let’s imagine you are lucky and the test print goes well. Now you have a thousand booklets. What if you used those booklets as a sort of a marketing vehicle and/or a nice gift for people who supported the project early on?

After some deliberation, I decided to repurpose one of the early chapters (The Shift Wars), and tried to typeset it to fulfill two goals.

The first one was throwing in as many hard situations from the book as I could imagine. A photo with a vivid orange background to test color reproduction. A photo (and text) on black to test if a lot of blank ink doesn’t smother the copy. A photo with a lot of details to see how much of it can be resolved in practice. A few black-and-white photos. And so on and so on.

At the same time, I wanted it to feel like a standalone cohesive story, and not just a random test print. So a lot of the above photos, cherrypicked from other chapters, had to be “compatible” with The Shift Wars story.

In the end, this worked out very well. The story and photos came together, and we were lucky that the test print was mostly okay, so we indeed ended up giving out these as booklets to people. (You can check out the PDF of the end result.)

We also validated the new size, and there was another goal on top of it. We printed the booklet half-half on two different types of paper: lighter and heavier. I was hoping the lighter would feel okay because it would allow me to shave off 20% of the rather considerable weight? 

(It did.)

And yeah, this is actually too many goals and too much pressure on one poor prototype. But c’est la vie!

Prototype 11

Okay, this is not really a prototype, but a strange and fun artifact: After visiting the printer and witnessing/approving all the signatures being printed, I had to fly home before the printed signatures would be trimmed, sewn, and bound. 

But our contact at the printer suggested: what if grab the signatures as they are? I said yes, and they prepared a set and packaged them as these strange almost-scrolls.

This was definitely in the “celebration” category more than anything else. My friend suggested me framing one of these sheets – perhaps the one that ended up the most challenging to get right – and there is something interesting about this idea of seeing the book as a signature, with its strange page arrangement, the cool registration marks, bleeding, and so on.

The final result

And a few months after flying home with the scrolls, I got this in the mail – the final book, now trimmed, bound, and wrapped in a nice cover.

It’s fun to see how long it took me to get the cover right. Even Prototype 10 just above used the slipcase design for its cover, because I still didn’t know what to do with the actual volume covers.

The title treatment was also a fight between embossing (debossing) and varnish and I’m so happy varnish won. We also had a bunch of discussions on how much of the orange from the spine should “invade” the covers. Too much and the covers would look unpleasant. Too little, and some inherent imprecision of manufacturing could make the spine have black sides. This is something we couldn’t easily prototype. That made it pretty unnerving, but sometimes that’s how it is.

I’m skipping a photo of contents here because that’s the book y’all have – or will soon have. 

Prototype 12

But there was yet another, twelfth prototype, that happened elsewhere. 

It was something the printer made for themselves, to test whether the pages and signatures were arranged properly. It might seem like a small deal, but imagine pages out of order, or one of the pages upside down? That would mean instant shredding or mulching or whatever you do to books that misbehave (I don’t really want to know).

But making this prototype full size would have been a waste of paper, hence the printer chose a form factor that reminded me that prototypes do not have to subscribe to reality if that’s not absolutely necessary.

It was only Prototype 1, years ago, where the book could claim to be small and lightweight. Now, we were back where we started, except with additional extra cuteness.

Which brings me to the last reminder: prototypes are disposable, so hold on to them! Unfortunately, I forgot to grab this miniature version of my book when I was at the printer’s, and it’s now gone forever. (Page 1098 in the book is another celebration of prototyping that could only happen because someone kept them.)

This is the only prototype I lost. The rest occupies one bookshelf and I look at it often with appreciation, thinking of the strange existential challenge of being a prototype. You exist in one version to pave the way for thousands – but if you’re lucky, your one throwaway copy will deserve something more than to be thrown away.

Marcin

Was this interesting? Reply to this and let me know if you’d like more! Previously, in posts about book writing process:

• Writing: Editing · Chapter list · First draft: The good & The bad & The stats

• Research: Location visits: 1 & 2 · Interviewing: 1 & 2 · Libraries

• Photography: Finding photos · Taking photos · Cleaning up photos 

• Design: Graphic design · Cover design · Typesetting and automation · Website design · Campaign video

• Process: To-do lists · Prototypes · Recovering from a mistake