Prototypes

How it came to look like this

A screenshot marked Kept went into the app. One marked Dropped did not.

Eight kinds of ink
The pen roll
The first two seconds

Part01

Taking stock

A review pass. Nine screens went onto one sheet, in light and dark, and whatever looked wrong got a before and an after.

2 screenshots · Nos. 1 to 2

A sheet of nine iPad screenshots: the library, the editor toolbar, Find in Notebook, New Notebook, Add a Link and Settings by day, then the library, Select Ink and Handwriting as Text at night. — No. 01Nine screens on one sheet. The status bar still carries the app’s working title; the owl came later.

The page navigator four times: before, after, after with a page number typed in, and after at night. — No. 02The page navigator, before and after: a field that looks like one, and a Done you can find.

Part02

Eight kinds of ink

Each pen needed a sample of how it writes. PencilKit draws the line and the app keeps only its shape, so one drawing takes any colour.

3 screenshots · Nos. 3 to 5

A grid of wavy strokes in white on cream: eight kinds of ink, each at six widths from a hairline to very broad, shown twice. — No. 03Each ink at six widths, saved as a bare shape. Not much to look at until it is given a colour.

A pen’s options: the pencil in green, eight stroke samples in a grid with one outlined, a palette of sixteen colours with a colour well, and a width strip. — No. 05Their first home: a grid in the pen’s options. The pen roll replaced it.

Eight wavy strokes in each of four colours: navy, cobalt, yellow and tomato. — No. 04Given four. Pen, fineliner, fountain pen and calligraphy pen; then pencil, highlighter, crayon and brush.

Part03

Where the pens go

The app keeps its own pens, each with its ink and its width, and they need somewhere to stand. Three places were tried.

7 screenshots · Nos. 6 to 12

A whiteboard page with four pens in a column down its left edge and the system’s tool picker along the bottom. — No. 06First place: the app’s own pens down the side of a whiteboard, with the system’s tool picker still along the foot.

The same whiteboard with the four pens moved into the top bar, beside undo and redo. — No. 07Second place: up in the top bar, beside undo and redo.

A close crop of the system’s tool picker: undo, redo, six drawing tools, a ruler and six colours. — No. 08The system’s picker, close up. Nothing of it is left in the app but the colour well.

No. 09The whiteboard’s own bar, cropped out to be looked at by itself.

A tray at the foot of a dotted page holding four pens, an eraser, a lasso, a picture, a text box and settings. A pen’s options are open above it, and the system’s colour picker is open over those. — No. 10Third place: the foot of the page, on one board. Here the system’s colour picker has opened on top of the pen’s own options.

Four screenshots of a ruled page with the tray at its foot. In the fourth, a menu titled Shortcuts in the Tray is set so large that its words break across lines. — No. 11Four frames of the tray at the foot of a page. In the last, the shortcuts menu has outgrown its popover.

The Shortcuts in the Tray menu at night: Picture and Text Box ticked in mustard, then Sticker, Link, Study Tape, Ruler and Zoom Window. — No. 12The same menu once it fitted. What stands in the tray is ticked in mustard.

Part04

The pen roll

The kinds of pen are drawn, not named: eight tools standing in a cloth pocket, the one in use pulled up. Names would not have fitted under them at large text sizes, or in German.

6 screenshots · Nos. 13 to 18

Six drawings of the pen roll: eight tools standing in a blue pocket with dashed stitching, in black, blue, yellow, red and green, and once on a dark ground. — No. 13First drawings: a stitched pocket, and the chosen tool standing taller than the rest. The stitching went.

Six more drawings of the pen roll with deeper pockets. The last three have a mustard line along the pocket’s top edge. — No. 14Second round: pockets that swell between their seams, then mustard piping along the top. The last three are how it stayed.

A close view of the pen roll at night, the fountain pen standing out of its pocket over a check mark. — No. 15Close enough to check the nibs.

A pen’s options at night: the fountain pen’s own line, the pen roll, sixteen colours and a colour well, a width strip, and buttons to move the pen along or take it off. — No. 16In place: the pen’s own line at the top, the roll, the colours, and a width strip that swells as the stroke does.

Three screenshots of two notebooks open side by side, with a pen’s options opened from the left notebook and then from the right. — No. 17Two notebooks side by side, and the options opened from each half.

A pen’s options over a dark green chalkboard page, for a black fountain pen and for a blue pen. The black ink is drawn pale. — No. 18On a chalkboard page, black ink is shown as pale as it writes there.

Part05

A dish for the Pencil

A squeeze of the Pencil brings the tools to its tip.

3 screenshots · Nos. 19 to 21

A round dish by day and at night: eight wells of ink round its rim, one of them checked, with an eraser, a lasso, undo and redo in the middle. — No. 19The ink dish: a well for each pen round the rim, and the eraser, the lasso, undo and redo in the middle.

A pen’s options by day and at night with a second strip under the width, set to 45%, and the red pen’s line drawn faint. — No. 20Opacity joins width. A pen set faint shows it on its own label.

The tray by day and at night with eight pens, an eraser, a lasso, a picture, a text box and settings. — No. 21Eight pens in the tray, to see how it holds up when it is full.

Part06

A name and an owl

Here the app became OwlLuna and got its owl: brown, in round glasses, on a crescent moon, with a pad under one wing and a pencil in the other.

The owl was designed by Safiya Sulaiman (opens in a new tab).

3 screenshots · Nos. 22 to 24

The owl four times: a hand-painted sketch, then drawn cleanly on violet, on black and on dotted cream. Smaller copies are lined up below. — No. 22From a painted sketch to the icon. The clean ones are drawn in code, so the icon, its alternates and the mark in Settings come from one source.

No. 23The review sheet. Six skies, each in light, dark and tinted, and down to 40 pixels, where the glasses still have to read.

Twelve frames of the app starting at night: the Home Screen, three empty frames, the owl icon alone, then the empty library saying Your shelf is ready. — No. 24A launch, frame by frame: three empty ones before the owl turns up.

Part07

Tabs

Open notebooks sit in a row of tabs over the editor. Two details of how they behave.

2 screenshots · Nos. 25 to 26

A row of three notebook tabs with one, Recipes 4, lifted and being dragged along the row. — No. 25A tab picked up and carried along the row.

A tab’s menu: Open Beside, Move Left, Close Other Tabs and Close Tab. — No. 26A tab’s menu. Open Beside puts two notebooks side by side.

Part08

Square corners

Up to here, bars, buttons and fields were capsules. Then they were redrawn as flat rectangles with small corners, and stayed that way.

3 screenshots · Nos. 27 to 29

A sheet of redrawn controls: the page navigator’s bar, the library toolbar, the editor bar, a New Notebook sheet with fields, tabs, buttons and switches, and a floating find bar. — No. 27Every kind of control on one sheet, each on the ground it sits on: desk, paper, surface, and over a page.

The library at night: the sidebar with its shelves, and a grid of notebook covers in cloth and print. — No. 28The library, its bar still a capsule. It followed.

The editor at night with its More menu open as a flat card under a cobalt band, and a Draw With card beside it offering System Setting, Apple Pencil Only and Pencil and Finger. — No. 29Menus became cards: a cloth band for the name, ruled rows, and a second card for Draw With.

Part09

The first two seconds

Three goes at what the app shows while it starts, each storyboarded with a clock in the corner of every frame.

3 screenshots · Nos. 30 to 32

No. 30First go: a violet curtain and the name, over in 2.2 seconds.

Twelve storyboard frames: plain coloured blocks fly in to fill the screen like a bento box, hold, then leave to show the library. — No. 31Second go, in plain blocks: tiles land from the edges, hold, and peel away to the library.

No. 32The blocks filled in. This is what the app opens with.

Part10

The row you are on

How the sidebar shows which shelf is open: four options, each by day and at night, and then the one that went in. Last in the pile, the app in German.

8 screenshots · Nos. 33 to 40

Three sidebar rows by day and at night. The selected one, Favourites, has a pale fill. — No. 33Option A for the selected row: a wash.

The same rows with the selected one outlined. — No. 34Option B: an outline.

The same rows with a pale fill on the selected one and a blue bar down its leading edge. — No. 35Option C: a wash with a bar down its leading edge.

The same rows with the selected one filled in cobalt. — No. 36Option D: solid cobalt.

A close view of the sidebar with a focus ring round the Favourites row and, under it, a test row reading p=std f=0 plain. — No. 37A test row printing its own state, left in while the system’s focus ring was being dealt with.

The sidebar by day with the Journal shelf selected on a woven cobalt plate. — No. 38What went in: D, with the weave of the cloth covers.

The same sidebar at night. — No. 39And at night.

The library in German, with a notice asking whether to keep a copy of the notebooks in iCloud and two buttons: Jetzt nicht and Mit iCloud synchronisieren. — No. 40In German, one of the app’s four languages. iCloud sync asks before it copies anything.

That is the pile. What the finished app does is on the first page, and every line of it is on GitHub.

What the app does The repository on GitHub