Noris Cocci

Sito e negozio
Progetto grafico · WordPress · WooCommerce
Mock-up: la sezione Prints & Fine Art di noriscocci.com su un monitor appoggiato a una scrivania di legno chiaro, con il titolo grande a sinistra e sotto tre fotografie in bianco e nero a quote diverse; a lato una stampa incorniciata appoggiata al muro.

Noris Cocci è un fotografo, e noriscocci.com è il posto dove tiene insieme quello che pubblica: le stampe fine art in vendita, i libri, il blog e la sua biografia. Ho fatto il progetto grafico, l'ho costruito su WordPress e ho messo in piedi il negozio con WooCommerce. È il quarto lavoro che facciamo insieme dopo tre libri.

La pagina d'ingresso del sito: una fotografia in bianco e nero a tutto schermo, presa dall'alto su una fila di carrelli della spesa accatastati, con il marchio NORIS COCCI PHOTO in alto a sinistra e il menu su fondo nero in alto a destra.

L'ingresso

La prima pagina non è un elenco di sezioni: è una sola fotografia a tutto schermo, con sopra due sole cose, il marchio e il menu. In basso resta la frase con cui l'autore si presenta. Chi arriva vede una fotografia grande quanto lo schermo prima di vedere un'interfaccia, che su un sito di fotografia mi sembrava il modo giusto di cominciare.

La griglia sfalsata

Nelle sezioni interne le immagini non stanno incolonnate: ogni riga ne porta due o tre di formati diversi, sfalsate in verticale, e fra una e l'altra resta molto bianco. Le proporzioni le decide la fotografia, non la gabbia: le verticali restano verticali e nessuna viene ritagliata per far quadrare la riga.

La sezione Prints & Fine Art vista dall'alto della pagina: il titolo in grande e sotto tre fotografie in bianco e nero di formati diversi, appoggiate a quote diverse, con le didascalie in maiuscolo spaziato.
Mock-up: la stessa sezione sul telefono, appoggiato in verticale contro una parete di travertino: il menu resta in alto a destra, le fotografie si incolonnano una sotto l'altra e le didascalie vanno a capo.

Un carattere solo, Space Grotesk, in tre misure: i titoli di sezione a 112 pixel, il testo corrente a 16, le didascalie a 16 in maiuscolo con quasi un terzo di quadratone di spaziatura. È l'unico posto dove il disegno alza la voce, e serve a tenere insieme fotografie in bianco e nero su una pagina bianca, senza cornici e senza righe di separazione.

La scheda di una stampa: a sinistra due fotografie dell'opera appesa, in una sala espositiva e su un muro di cemento; a destra il testo dell'autore, il menu a tendina STAMPA per scegliere il formato e il pulsante nero Aggiungi al carrello.

Il negozio vende stampe firmate. Ogni scheda tiene insieme due cose che di solito stanno in pagine diverse: il racconto dello scatto, scritto dall'autore, e la parte da e-commerce — il formato da scegliere fra 24×30, 30×42, 42×59 e 50×70 centimetri, la quantità, il carrello. Le fotografie della scheda mostrano l'opera appesa a una parete, così il formato si legge come una misura nello spazio e non come due numeri.

Mock-up: la sezione Books sullo schermo di un portatile aperto su un piano di calce chiara, con il titolo a sinistra e due copertine di libri fotografate in scena; accanto al portatile una pila di libri di fotografia.

Books raccoglie i libri dell'autore, uno per scheda, con la copertina, i dati e le fotografie dentro. Tre di quelle schede sono libri che ho impaginato io — Sicilian Element, Snowsnap e Ventuno — e qui tornano visti da fuori, come oggetti e non come pagine da sfogliare. Ogni scheda ripete le stesse quattro voci: autore, titolo, collaborazione, categoria.

L'indice dei libri: il titolo BOOKS in grande e sotto due copertine fotografate in scena, New York State of Mind su un piano di marmo e Sicilian Element in piedi contro una parete calda.
La scheda del libro Snowsnap: in alto la copertina fotografata davanti a una stufa accesa e la colonnina dei dati — autore, titolo, collaborazione, categoria — sotto il titolo spezzato su due righe e tre fotografie della montagna.
L'indice del blog: il titolo BLOG in grande e sotto quattro fotografie a colori di New York in fila, ciascuna con il proprio titolo in maiuscolo spaziato.

Il blog è l'unico posto del sito dove entra il colore: sono racconti di viaggio, e le fotografie restano come sono state scattate. Sta nello stesso impaginato di tutto il resto, quindi la differenza si vede da sola.

La pagina About: a sinistra un ritratto sfocato in bianco e nero, a destra la biografia in corpo piccolo, e sotto due colonne — a sinistra la dichiarazione dell'autore in corpo grande, a destra una nota introduttiva di Ferdinando Scianna.

La pagina About monta il testo su due colonne di corpo diverso: a sinistra le frasi dell'autore, grandi quanto un titolo, a destra la nota di Ferdinando Scianna in corpo da lettura. Sono due voci, e si distinguono dalla misura prima che dal contenuto.

Altri progetti

— altri progetti