Color Before the Lines. Caso studio: design di prodotto per un'app da dipingere su iPad e iPhone

Quasi tutte le app da colorare ti danno linee da riempire. Color Before the Lines fa il contrario: ogni pagina è un acquerello finito, e tu disegni le linee che ci vedi. Ecco come l'abbiamo progettata, dalla prima decisione alla versione sull'App Store.

In breve

Il nostro ruolo
Concept, UX/UI, codice, pubblicazione sull'App Store
Piattaforme
iPad e iPhone, sull'App Store; versione Android in sviluppo
Fatto con
SwiftUI, PencilKit, SwiftData, StoreKit 2
Tempi
Primo commit il 22 agosto 2026, versione 1.3.3 a novembre 2026
Stato
Sull'App Store, gratis con dieci acquerelli
Color Before the Lines su iPad: l'acquerello Organic Cool in blu e verdi, con pesci e foglie disegnati sopra in inchiostro grigio, e la barra degli strumenti sotto
Una pagina su iPad dopo il disegno. L'acquerello resta intatto sotto le linee.

Contesto

Libri e app da colorare per adulti ti chiedono di restare dentro le linee di qualcun altro. Chi vorrebbe disegnare spesso si ferma davanti alla pagina bianca: da dove si parte, cosa si disegna.

L'app è per chi ha un iPad e una Apple Pencil, o solo un iPhone e un dito, e vuole venti minuti tranquilli di disegno senza decidere da dove cominciare. Non serve saper disegnare.

Il problema

Se si parte dal colore la pagina bianca sparisce: le forme di un acquerello suggeriscono già pesci, foglie, volti. Il problema di design era proteggere quel momento. Ogni strumento, impostazione o scelta messa tra l'apertura dell'app e la prima linea lavora contro.

Vincoli

Niente deve rovinare il dipinto

Qualunque cosa disegni o cancelli, l'acquerello sotto resta com'era.

Il dito è uno strumento completo

Su iPhone disegnare col dito è il modo principale, non una modalità ridotta.

Niente da gestire

Niente account, punteggi, serie di giorni o pulsante Salva.

Un'app, due misure

Un'unica app universale per iPad e iPhone, con l'impaginazione scelta in base alla classe di dimensione.

Il nostro ruolo

Il concept, il design dell'interazione e visivo, il codice iOS, la scheda e le versioni sull'App Store, il sito di prodotto e ora la versione nativa per Android.

Cosa abbiamo progettato

L'acquerello Organic Cool su iPad prima del disegno: macchie blu, verdi e viola su un foglio quadratoLo stesso acquerello dopo il disegno: pesci, steli e foglie in inchiostro grigio sopra le macchie
Prima e dopo: il colore c'era già, le linee nascono da quello che ci vedi.

Niente livelli, per scelta

L'acquerello sta dietro il disegno e la gomma non lo tocca mai. Non c'è un pannello dei livelli da imparare, e non c'è modo di rovinare la pagina.

Sei inchiostri, tutti grigi

Gli inchiostri sono una scala fissa di sei grigi dal bianco al nero. Il colore viene dalla pagina, quindi l'unica scelta che resta è quanto chiara o scura debba essere una linea.

Pagine incluse nell'app

Produrre gli sfondi via codice è stato provato due volte, prima con Core Image e poi con uno shader Metal, e abbandonato per immagini finite da 2048 pixel incluse nell'app.

Salvataggio automatico e timelapse

Non c'è un pulsante Salva. Ogni tratto resta, e una pagina finita si rivede come timelapse di dieci secondi da condividere come video o immagine.

iPad e iPhone sono mani diverse

Su iPhone il foglio è fissato in alto perché la mano non copra il disegno, gli inchiostri restano sullo schermo e Annulla e Ripristina stanno sotto il pollice. L'orizzontale su iPhone è stata provata e lasciata fuori.

L'app su iPhone: l'acquerello in alto, il suggerimento One finger to draw, two to move e la barra con penna, matita, gomma e inchiostroIl foglio Choose your ink su iPhone: sei inchiostri grigi dal bianco al nero, con Graphite selezionatoLa scheda del timelapse su iPhone: Every mark, in its own time, con le velocità Relaxed, Normal e Quick e il pulsante Share
Su iPhone: il foglio in alto, gli inchiostri in un pannello dal basso, il timelapse pronto da condividere. L'app è in inglese.

Annulla ovunque

Annulla senza limiti, doppio tocco sulla Apple Pencil, tocchi a due e tre dita per annullare e ripristinare, e un menu col tasto destro quando l'app gira su Mac.

Un'accoglienza che si vede una volta

Il benvenuto è passato da un giro a pagine con un tutorial in tre passi, a un cursore prima e dopo, a una sola schermata mostrata solo al primo avvio.

Pacchetti una tantum, niente abbonamento

Dieci acquerelli sono gratis. Dalla versione 1.2.0 tre pacchetti in più si comprano una volta sola; le immagini sono già nell'app e l'acquisto le sblocca.

Rivedere il nostro lavoro

Un audit UX dell'app pubblicata, a ottobre 2026, ha trovato testi con poco contrasto e nessuna risposta tattile; la versione 1.3.1 ha corretto diversi punti. L'app ha impostazioni per leggibilità, riduzione del movimento, disegno col dito e visione dei colori.

Cosa è uscito

22 ago 2026
Primo commit
Set 2026
Dopo una prima versione solo per iPad, arriva l'iPhone con un'unica app universale, versione 1.1.5
Ott 2026
Pacchetti una tantum (1.2.0), impaginazione da tavolo per iPhone Duo (1.3.0)
Nov 2026
Versione 1.3.3 sull'App Store
Inoltre
Gira sui Mac con Apple silicon come app per iPad
Test
21 file di test con Swift Testing; build dai tag di versione su Xcode Cloud
Prossimo passo
Una versione nativa per Android con Kotlin e Jetpack Compose, in sviluppo

Ti serve qualcosa così?

Progettiamo e costruiamo per i clienti nello stesso modo in cui costruiamo i nostri prodotti.