Share
8 Faces è una rivista bi-annuale di 88 pagine, pubblicata in modo indipendente, incentrata su interviste con otto importanti designer dei settori stampa, web, illustrazione e tipo design. Ogni intervista si basa liberamente sulla domanda "se potessi usare solo otto caratteri tipografici, quale sceglieresti?"
La home page originale di 8 volti disegnata da Kyle Meyer 8 Faces è stato lanciato nel 2010 da Elliot Jay Stocks - un web designer con sede nel Regno Unito e nerd di tipo confessato. Da allora è cresciuto costantemente ed è diventato un business in sé con una lista in espansione di contributori e una community di Tumblr molto attiva.
Ne esce uno esaurito in meno di un'ora e le versioni successive sono andate altrettanto bene. Anche la gamma di 8 prodotti Faces è cresciuta e ora include una gamma in edizione limitata di poster di tipo e una funzione "leggi online" che verrà presto lanciata.
A metà del 2012, Elliot ha commissionato a Paravel, Inc di ridisegnare l'esperienza online di 8 facce. Composto da Trent Walton, Dave Rupert e Reagan Ray, Paravel ha forgiato una solida reputazione per siti web creativi, guidati dai tipi e reattivi tra cui le conferenze DO e uno dei siti più visitati su internet, microsoft.com.
Elliot ha spiegato perché ha scelto Paravel:
Mi sarebbe piaciuto progettare il sito da solo, ma sapevo che il tempo non lo avrebbe permesso, così ho scelto Paravel per i loro acuti occhi tipografici e una vasta esperienza con il responsive web design. Mi hanno anche gentilmente permesso di lavorare con loro, quindi ero ancora in grado di inserire alcune delle mie sensibilità progettuali nel mix.
Parallelamente all'avvio del processo di riprogettazione, Elliot ha anche preso la decisione di passare da un sistema di e-commerce su misura a Shopify, una piattaforma ospitata basata su un sistema di template semplice da usare e di design amichevole.
Shopify è stata una scelta logica in quanto il fronte del negozio online di Viewport Industries (la piccola azienda basata sul progetto che gestiamo insieme) utilizza da oltre un anno la piattaforma per la vendita di prodotti fisici e digitali come Insites: The Book.
I lavori sono iniziati sul progetto verso la fine del 2012 e il primo messaggio di Basecamp è stato pubblicato il 12 ottobre. Le idee iniziali sono state letteralmente disegnate a mano e molto sciolte, come potete vedere dall'immagine qui sotto.
Uno schizzo iniziale per condividere idee, molte di queste sono state condivise nel progetto Basecamp Questo approccio "veloce e sporco" ha permesso di prendere una serie di decisioni iniziali chiave prima di spingere i pixel. Questi includevano le scelte dei caratteri e la scelta di una navigazione non a schede per schermi piccoli. Come spiega Trent:
Perché era Elliot, non c'era bisogno che Reagan e io presentassimo PSD perfetti per i pixel. Si è fidato di noi quindi, una volta superati i concetti approssimativi e le esplorazioni di layout, abbiamo portato le cose al browser. Mentre Dave e io stavamo codificando, avremmo regolarmente individuato punti imbarazzanti nella progettazione attraverso larghezze / punti di interruzione. Scatteremmo avanti e indietro le cose nel browser e in Photoshop, qualsiasi strumento funzionasse al meglio in quel momento. Non c'è un percorso o un metodo chiaro per la follia, ma mi piace così. Semplicemente agitatevi e spingete e schiacciate fino a che i nodi non sono usciti.
Mentre la fase di progettazione passava dallo sketch al codice, Paravel iniziò a condividere idee di layout e design di pagine tramite un semplice sito di gestione temporanea gestito da PHP impostato su Heroku.
Dato che Paravel usa Git come parte del loro flusso di lavoro quotidiano, e data l'integrazione tra Git e Heroku, questo ha perfettamente senso. Le iterazioni possono essere inviate a GitHub e applicate istantaneamente al sito di staging. Dato che tutte le parti erano geograficamente separate, ciò rendeva le cose molto facili. Come Trent spiega questo approccio si adatta bene a Paravel:
Cerchiamo di attenerci alla nostra specialità, che sta prendendo le cose dalla pianificazione alla progettazione e al codice di front-end. Ci piace fare tutto il possibile per rendere l'implementazione il più semplice possibile per i clienti, quindi elimineremo le pagine in modo che i trasferimenti avvengano senza intoppi.
Questo processo ha consentito anche test su più dispositivi. A differenza del sito originale di 8 volti, costruito nel 2010 a larghezza fissa, la nuova versione doveva essere pienamente reattiva. Le iterazioni sono state discusse su Basecamp, le modifiche apportate e poi sono state rimandate al sito di staging per essere testate. Detto questo, il progetto ha sempre avuto un processo lento come Trent commenta:
Con Elliot, non abbiamo davvero registrato i cicli formali di iterazione. Probabilmente abbiamo qualche commit Github che potrebbe mostrare l'evoluzione, ma quella parte del processo è stata deliziosamente sciatta con scarso riguardo per l'archiviazione.
Infatti guardando indietro ai messaggi di Basecamp ci sono solo otto thread e 84 commenti per l'intero processo, che include l'integrazione con Shopify e le modifiche post-lancio.
Design e layout della prima pagina di un archivio di riviste 
La home page prende forma. Gran parte di questo layout è visibile nel sito lanciato. Naturalmente, data la tipografia della materia e le griglie erano in prima linea nel processo di progettazione. Ancora una volta creando pagine semplici sul sito di staging Paravel è stato in grado di condividere facilmente griglie, grondaie, punti di interruzione e scelte tipografiche.
Un ottimo esempio delle varie opzioni di layout è sulla pagina about.
La pagina about mostra molte delle divisioni di colonna al lavoro I potenziali layout nella griglia finale sono i seguenti:
FF Unit Slab è utilizzato nella rivista ed è stato scelto come font anche per il nuovo sito, più trent:
La rivista mette a frutto FF Unit Slab di Christian Schwartz, Kris Sowersby ed Erik Spiekermann, e abbiamo fatto lo stesso con il sito. Adoro l'intera super famiglia Unit. Una sezione online in lettura è in arrivo, e Unit brilla davvero lì. Non vedo l'ora che la gente lo veda.
I caratteri sono serviti tramite TypeKit e i fallback sono relativamente semplici:
body font: 100% / 1.5 "ff-unit-slab-web", "Georgia", "Times New Roman", serif; font-weight: 300; colore: # 666666;
Come spiegato in precedenza da Trent, esistono diversi punti di interruzione nel file CSS, ognuno dei quali si occupa di scenari diversi. Alcuni sono piccoli aggiustamenti per tipo mentre altri si occupano di modifiche al layout su larga scala. Costruito utilizzando un approccio "mobile first" i breakpoint sono i seguenti:
@media (larghezza minima: 700 px) @media (larghezza minima: 850 px) @media (larghezza minima: 1100 px) @media (larghezza minima: 1400 px) @media (larghezza minima: 1680 px)
Un trucco intelligente impiegato è l'uso di media query per ridimensionare la dimensione del carattere del corpo. Poiché la dimensione del carattere del corpo iniziale è impostata al 100% con un'altezza di 1,5 linee, tutte le reimpostazioni successive ingrandiranno sia il carattere che le altezze delle linee, determinando una transizione uniforme tra le dimensioni dello schermo.
Sebbene JavaScript non venga utilizzato pesantemente sul nuovo sito di 8 volti, viene utilizzato con grande effetto sulla home page. Dato che l'obiettivo principale del sito è quello di visualizzare la rivista stampata, c'era bisogno di un modo per evidenziare efficacemente le copertine e le pagine interne. Questo è stato ottenuto con il plugin jQuery "Kinetic".
Il plugin consente al visitatore di trascinare l'immagine dell'eroe di grandi dimensioni da un lato all'altro e visualizzare le foto dell'ultimo problema nel loro tempo. In definitiva questa immagine è controllata dalla pagina delle impostazioni del tema di Shopify e consente ad Elliot di aggiornarlo facilmente senza la necessità di modificare manualmente i modelli Shopify.
Paravel ha completato il lavoro verso la fine di febbraio 2013. In questo momento, Elliot ed io abbiamo rilevato il processo e iniziato a spostare il progetto dal sito di staging di PHP a Shopify. Shopify utilizza il motore Templating liquido per estrarre i dati dal negozio in modelli tematici. Utilizzando semplici costrutti di output e logici è possibile controllare il flusso di dati mantenendo il design creato da Paravel.
8 Faces è in buona compagnia, oltre 60.000 negozi ora utilizzano Shopify, compresi numerosi marchi Web tra cui United Pixel Workers, A Book Apart e Tattly. Come nota a margine, molti web designer stanno guadagnando notevoli entrate lavorando con Shopify.
Se non hai avuto l'opportunità di conoscere il programma gratuito di Shopify Experts, vale la pena dare un'occhiata. Negli ultimi 18 mesi, tramite il programma, sono stati generati contratti per un valore di 18 milioni di dollari - spunti di riflessione!
La schermata di amministrazione di Shopify consente l'accesso a tutti i modelli Grazie al sito di staging ben strutturato e commentato, il processo iniziale di trasferimento di HTML, CSS e JavaScript sul tema Shopify non ha richiesto più di qualche ora di lavoro. Il header.php e footer.php costituito la base del file di layout principale di Shopify theme.liquid e varie altre pagine PHP mappate su altri modelli di Shopify come page.liquid e collection.liquid.
I progressi sono stati condivisi tramite un negozio di sviluppo: un sito di test di Shopify con funzionalità complete protetto da password. Ciò ha reso facile condividere i progressi con l'aggiunta di fotografie del prodotto, descrizioni e dettagli sui prezzi.
La maggior parte dei negozi ha un flusso distinto. Per esempio:
Shopify soddisfa molto bene questo flusso utilizzando concetti come collezioni e prodotti. In realtà ognuno di questi è mappato direttamente su due modelli principali, collection.liquid e product.liquid. Per riferimento una collezione è Shopify è un raggruppamento logico di prodotti - in questo caso tutti e sei i numeri della rivista 8 Faces.
Tuttavia, dato che al momento ci sono solo sei numeri, Elliot ha preso la decisione che una pagina di dettaglio separata per ogni numero era in eccesso rispetto ai requisiti. Per raggiungere questo flusso è stato necessario un sottile ripensamento e sono state apportate modifiche a collection.liquid modello.
% if collection.handle == 'magazines'% % include 'collection-magazines'% % elsif collection.handle == 'poster'% % include 'collection-poster'% % elsif template == 'list-collections'% % include 'collection-listing'% % else% % include 'collection-default'% % endif%
Usando il principale collection.liquid come controllore logico possiamo inserire uno specifico snippet, una piccola porzione di codice riusabile, a seconda della collezione attualmente visualizzata. Pertanto quando chiediamo di visualizzare la collezione "riviste" Shopify inserisce automaticamente il file raccolta-magazines.liquid frammento.
% per prodotto in collection.products% % endfor%
product.title
product.description % per la variante in product.variants% % se variant.available == true% % endif% % endfor%
È prassi comune ripetere il ciclo su ciascun prodotto in una raccolta, utilizzando il codice del liquido, e generare un collegamento alla pagina dei dettagli del prodotto in cui l'utente può quindi aggiungere il prodotto al proprio carrello.
Per rendere possibile l'aggiunta del prodotto dalla pagina di raccolta a modulo è stato utilizzato al posto di un collegamento alla pagina dei dettagli del prodotto. Come vedrai dal codice qui sopra, il modulo diventa unico a causa del campo di input nascosto "id" a cui viene assegnato il valore del prodotto variant.id.
Poiché molti prodotti hanno opzioni, ad esempio colore e dimensioni, ogni combinazione ha un unico variant.id - anche se c'è solo una versione. Vale la pena notare che le pagine dei dettagli del prodotto per la rivista sono state progettate e sono presenti. Se vengono mai accidentalmente collegati a, o vi si accede da qualcuno che stia funzionando correttamente l'URL, non apparirà nulla di rotto.
Dato che i nuovi 8 volti sono costruiti per dispositivi di tutte le dimensioni, è necessario affrontare il "problema di immagine reattivo". Alla fine Paravel ha raccomandato l'uso del polyfill picturefill.js di Scott Jehl. Trent spiega:
Abbiamo assolutamente dovuto ridurre le dimensioni del file per le immagini, specialmente con la home page. Abbiamo utilizzato picturefill.js più volte in passato, inclusa una versione adattata per la home page di Microsoft.
Se non hai familiarità con picturefill.js, si descrive come "un approccio di immagini reattive che puoi utilizzare oggi che imita l'elemento dell'immagine proposto utilizzando span, per ragioni di sicurezza." Funziona molto bene e, quando compresso, pesa meno di 0,5kb. Per far funzionare picturefill.js è necessario definire un numero di percorsi di immagine diversi per ciascun "punto di interruzione". Ecco il markup reso dalla home page di 8 Faces:
Creando tre "impostazioni tema" nel tema 8 Faces Shopify, un amministratore è in grado di caricare immagini diverse per ciascuno dei tre diversi punti di interruzione. Una volta caricato il index.liquid template usa il codice Liquid per accedere alle immagini rilevanti:
Inoltre, nel modello viene effettuato un semplice controllo vero / falso per garantire che l'impostazione del tema "Mostra immagine eroe" sia impostata. Se non lo è, il markup viene semplicemente saltato.
Le impostazioni del tema sono state anche utilizzate per controllare il pulsante "acquista ultimo problema" che si sovrappone all'immagine dell'eroe sulla home page. Per evitare di codificare con difficoltà l'ID variante dell'ultimo problema nel modello, vengono inserite tre stringhe di testo nella pagina delle impostazioni del tema:
Usando un permalink cart ci assicuriamo che se il supporto JavaScript non è presente, l'utente sarà comunque in grado di acquistare la rivista tramite il link URL. Tuttavia, andare direttamente alla pagina di pagamento non è il flusso ideale, è preferibile che l'utente faccia clic su un pulsante e venga indirizzato alla pagina del carrello dove può regolare le quantità e aggiungere altri articoli al suo ordine. Per fortuna non è stato difficile da raggiungere.
Usando la funzione jQuery avvolgere l'immagine dell'eroe è avvolta in un elemento del modulo. Un campo nascosto viene quindi aggiunto al modulo che contiene il settings.home_hero_variant_id tirato dalle nostre impostazioni del tema. Come il nome file JavaScript contiene il .liquido estensione Shopify è in grado di inserire dati dalle impostazioni del tema prima di servire il file. Questo ci permette di inserire il settings.home_hero_variant_id nel nostro codice JavaScript.
Inoltre, se e quando questo ID viene modificato, non è necessario modificare il codice, il che è utile. Ci sono molti usi per questo approccio e questo è solo un semplice esempio:
Accentsconagua
/ * Hijack buy button sulla home page per inviare il modulo * / $ ('. Hero-unit'). Wrap (' '); $ ('') .attr (tipo:' hidden ', id:' id ', nome:' id ', valore:' settings.home_hero_variant_id '). appendTo (' # hero-form '); $ ('a.blackflag'). click (function (e) $ ("# hero-form"). submit (); e.preventDefault ();); Alla fine rubiamo la funzionalità di default del nostro ancoraggio e invece inviamo il modulo quando viene cliccato.
Il sito è stato lanciato con successo il 1 ° maggio 2013 con l'uscita del numero sei della rivista.
Il design della home page rilanciato Con la fase uno completa, lo sviluppo continua e più tardi nel 2012 la sezione "leggi online" verrà aggiunta al sito, il che comporterà la disponibilità di ogni numero a leggere il browser.
Nel complesso, tutte le persone coinvolte nel progetto sono state molto soddisfatte dei risultati, come sottolinea Elliot:
I ragazzi di Paravel sono professionisti e sono comunque molto divertenti da lavorare, e il prodotto finito è eccezionale. Non avevo idea di cosa avrebbero prodotto quando li avevo commissionati, ma sapevo che sarebbe stato qualcosa di grande, che è.
Grazie a Trent Walton e Elliot Jay Stocks per il loro aiuto con questo articolo.
