Skip to content
Creative Nomad DesignCREATIVE NOMAD
← All work
08Amazon Lab126, Kindle

Kindle Visual Design

The visual side of the Kindle, in four parts. The font fix the experts missed, the screensaver art, the app icon, and the 1-bit UI that made the device feel instant.

⤢ enlarge
Kindle wake screen, the word and its definition▤ Image
Client
Amazon Lab126
Role
Lead Visual Designer
Year
2009–2013
Devices
Kindle v2–v6
Scope
Type, screensavers, icon, 1-bit UI
Series
12 authors, 20 photos
01Kindle Fonts

On the Kindle, the fonts seemed to shift typeface as you stepped the size up and down. A subtle thing, and a hard one to pin down. Typography experts and type foundries had looked at the code and kept saying it was the correct file, the same font. Nobody dug deeper. My new VP of Design handed me the puzzle, with an executive review two weeks out and a plan expected.

A colleague modded a Kindle so I could set type sizes at will instead of the shipping presets. I took Helvetica, set it to size 6, took a screenshot, set it to 7, took a screenshot, and repeated. Then I mapped each form in Photoshop. Moving from odd to even sizes, a letter grew in height or in width, but never both at once. The software was ramping the type by number, not by form.

The fix was a ramp sized by letterform, so each step reads as the same face getting bigger. At the review the room turned to me, I walked through the maps, and they approved a ramp on the spot. A handshake on the way out I have never forgotten.

Approved at the executive review, on the spot.

⤢ enlarge
The font pattern, mapped. Odd sizes grew wide and even sizes grew tall, the same letter ramped by number instead of by form.▤ Image
02Screen Savers

The device needed a face at rest. The screensavers had to read as art on a low-contrast 1-bit E-Ink screen, where most photography turns to mud. That meant a visual treatment that survived the display instead of fighting it.

I directed two series. Twelve author portraits on the Wacom, mixing photography with pixelation and brush strokes to pop contrast. And a Reading and Writing series of twenty images shot with photographer Bruce Ashley, art-directed from concept and shot setup through cropping.

⤢ enlarge
Author series, John Steinbeck. Photo to pixelation to brush stroke for E-Ink contrast.▤ Image
⤢ enlarge
Author series, Agatha Christie▤ Image
⤢ enlarge
Author series, James Joyce▤ Image
⤢ enlarge
Color pencils. Art-directed with photographer Bruce Ashley.▤ Image
⤢ enlarge
Pen nibs▤ Image
⤢ enlarge
Letterpress blocks▤ Image
⤢ enlarge
Pencil ends▤ Image
⤢ enlarge
Pastels▤ Image
⤢ enlarge
Pencils, the grayscale version that rendered on E-Ink▤ Image
⤢ enlarge
Typewriter type bars▤ Image
⤢ enlarge
Metal type▤ Image
⤢ enlarge
Wood type▤ Image
03Icon

The Kindle mark started as a low-fidelity barcode. I rebuilt it in Illustrator into the app icon used across startup screens and collateral, the Boy Under the Tree reading by E-Ink light.

⤢ enlarge
The Kindle app icon I made at Amazon. Boy Under the Tree, built up from a barcode in Illustrator and used across the ecosystem.▤ Image
041-Bit UI

Leadership was unhappy with touch performance on a new Kindle. A tap sometimes lagged so long that people tapped again and again, stacking the device into a frozen spinner until it was inoperable. Engineering was on the hook and was not sure what to do.

I had been pushing 1-bit UI, solid black pixels only, to the point that my lab nickname was 1-bit. With three junior software engineers we built the first 1-bit interface in a few days. The feedback flash on a tap went from 2.5 seconds to .25 milliseconds, and the 1-bit graphics cleaned up E-Ink ghosting on the way.

It became an eight-week sprint, every dialog, menu, button, and checkbox redrawn to 1-bit, with the Human Interface Guidelines written alongside it. Product, Development, QA, and UX each owned their part.

Tap feedback went from 2.5s to .25ms on E-Ink.

⤢ enlarge
The 4-bit navigation, before▤ Image
⤢ enlarge
The 1-bit navigation, faster feedback and less ghosting on E-Ink▤ Image
What I owned

The font ramp fix end to end. The 1-bit UI direction and the team that built it. The Kindle icon. Art direction on the author and Reading and Writing screensaver series.

Next case — 09

Palo Family Video Device

Want something like this?

Start a conversation