La direzione
Un sito di adozioni si guarda per le foto. L'interfaccia deve essere sobria abbastanza da lasciarle parlare, e riconoscibile abbastanza da sembrare vostra e non un modello qualunque.
Il tratto spesso e irregolare, il nero pieno, il salvia. Ritornano negli angoli vivi, nei bordi da 1,5 px, nei pulsanti neri.
Il serif con il corsivo nella frase che conta, il rosa cipria, le parole evidenziate in menta.
Chi guarda deve decidere in fretta, con una mano. Le informazioni che decidono stanno in alto, grandi, sempre con le parole.
Colori: ognuno ha un compito
Il numero accanto a ogni colore è il contrasto con il testo nero (servono almeno 4,5 a 1 per il testo normale). Il testo bianco sui colori chiari non arriva a 2 a 1: per questo il testo è sempre nero, tranne sul nero.
Il grigio del testo secondario (#55534E) arriva a 7,7 a 1 sul bianco e a 4,9 sul salvia; sul salvia profondo scende a 3,9, quindi lì non si usa.
Caratteri
Due famiglie, entrambe ospitate sul vostro spazio web (nessuna richiesta a Google): DM Serif Display per i titoli e i nomi dei gatti, DM Sans per tutto il resto.
Ogni gatto merita una seconda possibilità.
Cercano casa
Com'è Miele
Baffo Lungo detto Napoleone
Il primo giorno si nasconde sotto il letto. Il secondo ti segue fino in bagno.
Siamo volontarie tra Veneto e Sicilia. Questi gatti cercano casa adesso, anche lontano.
In stallo a Trapani da Giulia · aggiornata il 20 ottobre
Pulsanti e collegamenti
Alti 52 px, angoli vivi, testo che dice cosa succede. Un solo pulsante pieno per schermata.
Il pulsante non disponibile resta leggibile e, se lo si tocca, dice cosa manca. Il cipria compare solo su «Dona».
La scheda nell'elenco
Foto 4:5, nome in serif, una riga sola che decide (età, oppure il motivo dell'urgenza), poi la distanza da chi guarda. Nessuna etichetta «disponibile»: se è nell'elenco, cerca casa.
- Foto di OmbraUrgente
Ombra
Lo stallo finisce il 30/11
Favignana · arriva in staffetta
- Foto di BaffoRichieste in corso
Baffo Lungo detto Napoleone
Maschio · 11 anni
Padova · vicino a te
Foto in arrivoNuvola
Femmina · età da stimare
Marsala · solo ritiro in Sicilia
- Foto di Miele
Miele
Femmina · 2 anni
Trapani · arriva in staffetta
Quattro casi in uno sguardo: urgente con il motivo, richieste in corso, foto mancante, scheda normale. Il nome lungo va a capo senza rompere la griglia.
«Può venire a casa tua?»
Il blocco più importante della scheda. Ogni riga ha un'icona e la risposta scritta, così non dipende dal colore.
Può venire a casa tua?
Etichette, avvisi, messaggi
Hai una candidatura per Miele a metà. Le risposte sono salvate su questo dispositivo.
Ci sono già 2 richieste per Baffo. Puoi candidarti comunque: se non è lui, ti proponiamo un altro gatto adatto a te.
La richiesta non è partita. La connessione si è interrotta durante l'invio. Le tue risposte sono tutte qui: riprova quando hai di nuovo campo.
Miele ora è In preaffido: non compare più nell'elenco pubblico.
Per cambiare uno stato niente finestre «Sei sicura?»: si fa subito, e il messaggio offre «Annulla» per otto secondi.
Moduli
Etichetta sempre visibile sopra il campo, aiuto sotto l'etichetta, errore sotto il campo con il motivo. Le scelte sono grandi da toccare.
Ti scriviamo qui per fissare il colloquio.
Scrivi un'email valida, per esempio nome@esempio.it.
Le regole che tengono tutto insieme
Quello che abbiamo deciso di non fare conta quanto quello che c'è.
Come il tratto del logo. Gli angoli arrotondati sono solo quelli dei telefoni disegnati in questa presentazione.
Nel titolo, sulla parola che conta. Se è ovunque, non sottolinea più nulla.
Un colore, un significato: si impara senza spiegarlo.
Niente «disponibile» su ogni gatto, niente righe in maiuscolo sopra i titoli: si segnala solo ciò che cambia la decisione.
Le icone da sole non si capiscono, e i lettori di schermo non le leggono.
Si muove solo ciò che risponde a un tocco, e niente si muove per chi lo ha chiesto al telefono.
La scheda del gatto è identica in home, nell'elenco e sotto «Altri gatti». Chi la impara una volta la riconosce sempre.
Tutte le schermate, dal vivo
Ogni telefono qui sotto contiene il prototipo vero. Si possono toccare, oppure aprire a schermo intero.