Share
8 Faces este o revistă de 8 pagini, publicată în două rânduri, publicată în mod independent, în jurul unor interviuri cu opt lideri de proiectare din domeniile print, web, ilustrații și design de tip. Fiecare interviu se bazează pe întrebarea "dacă ați putea folosi doar opt fonturi, pe care le-ați alege?"
Pagina inițială de 8 fețe a fost creată de Kyle Meyer 8 Faces a fost lansat în 2010 de către Elliot Jay Stocks - un web designer din Marea Britanie și un tip de auto-mărturisit. De atunci, a crescut constant și a devenit o afacere în sine, cu o listă extinsă de contribuabili și o comunitate foarte activă Tumblr.
Numărul 1, vândut în mai puțin de o oră, și lansările ulterioare, s-au descurcat la fel de bine. Gama de produse cu 8 fețe a crescut și include acum o gamă limitată de postere de tip și o caracteristică "read online" lansată în curând.
La jumătatea anului 2012, Elliot a solicitat companiei Paravel, Inc. să reproiecteze experiența online 8 Faces. Conținut de Trent Walton, Dave Rupert și Reagan Ray, Paravel au creat o reputație puternică pentru site-urile web creatoare, bazate pe tip și receptive, inclusiv prelegerile de DO și unul dintre cele mai vizitate site-uri de pe internet, microsoft.com.
Elliot a explicat de ce a ales Paravel:
Mi-ar plăcea să construiesc singur site-ul, dar știam că timpul nu ar permite acest lucru, așa că am ales Paravel pentru ochii lor tipografici dornici și o vastă experiență cu designul web receptiv. De asemenea, mi-au permis foarte mult să lucrez cu astfel încât am reușit să arunc în amestec câteva din propriile mele sensibilități de proiectare.
În același timp cu începerea procesului de reproiectare, Elliot a luat de asemenea decizia de a se îndepărta de la un sistem de comerț electronic specializat la Shopify - o platformă găzduită, bazată pe un sistem de șabloane ușor de utilizat și ușor de utilizat.
Shopify a fost o alegere logică, deoarece frontul magazinului online pentru Viewport Industries (compania mică pe bază de proiect pe care o conducem împreună) a folosit platforma de peste un an pentru a vinde atât produse fizice cât și digitale, cum ar fi Insites: The Book.
Au început lucrările la proiect la sfârșitul anului 2012, iar primul mesaj Basecamp a fost postat pe 12 octombrie. Ideile inițiale au fost literalmente schițate manual și foarte libere, după cum puteți vedea din imaginea de mai jos.
O schiță timpurie pentru a împărtăși idei, multe dintre acestea fiind împărtășite în proiectul Basecamp Această abordare "rapidă și murdară" a permis ca mai multe decizii inițiale cheie să fie luate înainte ca orice pixel să fie împins. Acestea au inclus opțiunile pentru fonturi și alegerea unei navigări fără tab-uri pentru ecrane mici. După cum explică Trent:
Pentru că era Elliot, nu era nevoie ca Reagan și eu să prezentăm PSD-urile perfect pixel. El a avut încredere în noi așa că, odată ce am trecut de conceptele și explorările layout-ului, am dus lucrurile la browser. În timp ce cu Dave eram codificați, am observat în mod regulat puncte incoerente în proiectare pe lățimi / puncte de intersecție. Ne-am lăsa lucrurile înainte și înapoi în iertare în browser și în Photoshop - indiferent ce instrument a lucrat cel mai bine la acea vreme. Nu există o cale sau o metodă clară pentru nebunie, dar îmi place așa. Voi doar sorta fidget și a lovi cu piciorul și scuipa până când zgarieturile sunt afară.
Pe măsură ce faza de proiectare sa mutat de la schițarea în cod, Paravel a început să împărtășească ideile de layout și desenele de pagină printr-un simplu site de staționare bazat pe PHP, creat pe Heroku.
Cum Paravel utilizează Git ca parte a fluxului de lucru zilnic și având în vedere integrarea dintre Git și Heroku, acest lucru a făcut un sens perfect. Iterațiile ar putea fi împinse la GitHub și aplicate instantaneu pe site-ul de așteptare. Întrucât toate partidele au fost separate separat din punct de vedere geografic, acest lucru a făcut lucrurile foarte ușor. După cum explică Trent, această abordare îi convine pe Paravel:
Încercăm să rămânem la specialitatea noastră, care ia lucruri de la planificare la proiectare și cod de front-end. Ne place să facem tot ce ne stă în putință pentru a face ca punerea în aplicare să fie cât mai ușoară posibil pentru clienți, așa că vom elimina paginile în moduri care fac ca transferul să se facă fără probleme.
Acest proces a permis, de asemenea, testarea pe mai multe dispozitive. Spre deosebire de site-ul original 8 Faces, construit în 2010 la o lățime fixă, noua versiune trebuie să fie pe deplin receptivă. Iterațiile au fost discutate pe Basecamp, modificările făcute și apoi împinse înapoi la locul de așteptare pentru testare. Asta a spus că proiectul a avut întotdeauna un proces în vrac, după cum scrie Trent:
Cu Elliot, nu am înregistrat cu adevărat runde de iterație. Probabil că avem niște angajamente Github care ar putea arăta evoluția, dar acea parte a procesului a fost încântătoare, cu puțină atenție pentru arhivare.
De fapt, privirea înapoi peste mesajele Basecamp există doar opt fire și 84 de comentarii pentru întregul proces, care includ integrarea cu tweet-urile Shopify și post-launch.
Arhiva revistă a revistei timpurii și aspectul paginii 
Pagina de start se formează. O mare parte din acest aspect este vizibil în site-ul lansat. Firește, având în vedere tipografia obiectului și grilele au fost în prim-planul procesului de proiectare. Din nou, prin crearea de pagini simple pe site-ul de asteptare, Paravel a reusit sa partajeze usor grile, jgheaburi, puncte de oprire si optiuni tipografice.
Un exemplu excelent al diferitelor opțiuni de aspect este în pagina aproximativă.
Pagina aproximativă arată multe dintre rupturile coloanelor la serviciu Formatele potențiale în grila finală sunt după cum urmează:
FF Unitatea Slab este utilizată în revista și a fost aleasă ca și font pentru noul site, mai mult de la Trent:
Revista pune FF Unitatea Slab de către Christian Schwartz, Kris Sowersby și Erik Spiekermann pentru o bună utilizare, și am făcut același lucru și cu site-ul. Îmi place întreaga super-familie a Unității. În curând va fi lansată o secțiune online, iar Unitatea strălucește acolo. Nu pot să aștept ca oamenii să o vadă.
Fonturile sunt difuzate prin intermediul TypeKit, iar backback-urile sunt relativ simple:
corp font: 100% / 1.5 "ff-unit-slab-web", "Georgia", "Times New Roman", serif; font-weight: 300; culoare: # 666666;
Așa cum a explicat Trent mai devreme, există un număr de puncte de întrerupere în fișierul CSS, fiecare catering pentru diferite scenarii. Unele sunt trucuri minore pentru tip, în timp ce altele se confruntă cu modificări la scară largă. Construite folosind o abordare "mobilă în primul rând" punctele de întrerupere sunt următoarele:
@media (min-width: 700px) @media (min-width: 1400px) @media (min-width: 1680px)
Un truc inteligent folosit este utilizarea interogărilor media pentru a redimensiona dimensiunea fontului corpului. Pe măsură ce dimensiunea inițială a fontului este setată la 100%, cu o înălțime de 1,5 linii, toate restabilele ulterioare vor mări atât înălțimea fontului, cât și înălțimea liniei, rezultând o tranziție lină între dimensiunile ecranului.
În timp ce JavaScript nu este folosit foarte mult pe noul site 8 Faces, acesta este folosit cu mare efect pe pagina de pornire. Având în vedere că obiectivul principal al site-ului este afișarea revistei tipărite, trebuie să existe o modalitate de a evidenția efectiv capacele și paginile interioare. Acest lucru a fost realizat cu pluginul jQuery "Kinetic".
Pluginul permite vizitatorului să tragă imaginea de erou mare dintr-o parte în alta și să vadă fotografiile celei mai recente emisiuni în timpul lor. În cele din urmă, această imagine este controlată prin intermediul paginii Setări tematice Shopify și permite Elliot să o actualizeze cu ușurință fără a fi nevoie să modificați șabloanele Shopify manual.
Paravel și-a finalizat activitatea în jurul sfârșitului lunii februarie 2013. În acest moment Elliot și cu mine am preluat procesul și am început să mutăm proiectul de la site-ul de staționare PHP la Shopify. Shopify utilizează motorul care templatează lichide pentru a extrage date din magazin în șabloane tematice. Prin utilizarea construcțiilor simple și logice, este posibil să controlați fluxul de date, păstrând în același timp designul creat de Paravel.
8 fețe este în bună companie, peste 60.000 de magazine folosesc acum Shopify, inclusiv un număr de branduri web proeminente, inclusiv lucrătorii Pixel United, A Book Apart și Tattly. Ca o notă laterală, mulți designeri web realizează acum venituri considerabile din colaborarea cu Shopify.
Dacă nu ați avut ocazia să aflați despre programul gratuit de experți Shopify, merită o privire. În ultimele 18 luni, contractele de 18 milioane de dolari pe care le-a generat prin program - mâncare pentru gândire!
Ecranul Shopify admin permite accesul la toate șabloanele Datorită site-ului bine pus la punct și comentat, procesul inițial de transferare a codurilor HTML, CSS și JavaScript în tema Shopify nu a avut mai mult de câteva ore de lucru. header.php și footer.php a format baza fisierului layout principal Shopify theme.liquid și diverse alte pagini PHP mapate pe alte șabloane de bază Shopify cum ar fi page.liquid și collection.liquid.
Progresul a fost împărțit prin intermediul unui magazin de dezvoltare - un site de testare Shopify complet protejat, care a fost protejat prin parolă. Acest lucru a facilitat împărtășirea progresului, deoarece au fost adăugate fotografii de produs, descrieri și detalii privind prețurile.
Cele mai multe magazine au un flux distinct. De exemplu:
Shopify satisface foarte bine acest flux prin utilizarea unor concepte precum colecțiile și produsele. De fapt, fiecare dintre acestea este mapată direct la două șabloane principale, collection.liquid și product.liquid. Pentru referință o colecție este Shopify este o grupare logică de produse - în acest caz toate cele șase emisiuni ale revistei 8 Faces.
Cu toate acestea, având în vedere că în prezent există doar șase subiecte, Elliot a luat decizia ca o pagină detaliată separată pentru fiecare problemă să fie excedent de cerințe. Pentru a realiza acest flux, a fost necesară o regândire subtilă și au fost aduse modificări la collection.liquid șablon.
% if collection.handle == 'revistele'% % includ 'colecții-reviste'% % elsif collection.handle == 'postere'% % includ 'colecții-postere'% % elsif template == 'lista-colecții'% % includ 'lista colecțiilor'% % else% % include 'collection-default'% % endif%
Prin utilizarea principalului collection.liquid ca controler logic putem introduce un fragment specific, o bucată mică de cod reutilizabil, în funcție de colecția vizualizată în prezent. Prin urmare, când solicităm vizualizarea colecției "reviste", Shopify introduce automat colectare-magazines.liquid fragment.
% pentru produs în colecția.producte% % endfor%
product.title
product.description % pentru varianta în product.variants% % if variant.available == true% % endif% % endfor%
Este o practică obișnuită de a introduce bucla peste fiecare produs într-o colecție folosind codul lichid și de a trimite un link către pagina cu detaliile produsului, unde utilizatorul poate adăuga produsul în coș.
Pentru a permite adăugarea produsului din pagina de colectare a formă a fost folosit în locul unui link către pagina cu detaliile produsului. După cum veți vedea din codul de mai sus, formularul devine unic datorită câmpului de intrare ascuns "id", care are valoarea produsului variant.id.
Deoarece multe produse au opțiuni, de exemplu culoarea și mărimea, fiecare combinație are un caracter unic variant.id - chiar dacă există o singură versiune. Merită menționat faptul că paginile cu detalii ale produsului pentru revista au fost proiectate și prezente. Dacă acestea sunt asociate vreodată accidental sau accesate de cineva care lucrează în mod corect adresa URL, nimic nu va apărea rupt.
Având în vedere faptul că noile 8 fețe sunt construite pentru dispozitive de toate dimensiunile, este necesară abordarea problemei de imagine receptivă. În cele din urmă, Paravel a recomandat folosirea de polyfill-ul picturefill.js de Scott Jehl. Trent explică:
A trebuit să minimizăm dimensiunea fișierului pentru imagini, mai ales cu pagina de pornire. Am folosit picturefill.js de mai multe ori în trecut, inclusiv o versiune adaptată pentru pagina de pornire Microsoft.
Dacă nu sunteți familiarizat cu picturefill.js, el se descrie ca fiind "o abordare a imaginilor receptive pe care o puteți folosi astăzi, care imită elementul de imagine propus folosind spanuri, din motive de siguranță". Funcționează foarte bine și, când este comprimat, cântărește sub 0,5kb. Pentru ca funcția picturefill.js să funcționeze, trebuie să definiți un număr de căi de imagine diferite pentru fiecare "punct de întrerupere". Iată marcajul redat de pe pagina de pornire a celor 8 figuri:
Prin crearea a trei "setări tematice" în tema 8 Faces Shopify, un administrator poate încărca imagini diferite pentru fiecare dintre cele trei puncte de interferență diferite. Odată încărcat index.liquid șablon utilizează codul lichid pentru a accesa imaginile relevante:
În plus, în șablon se face o simplă verificare adevărată / falsă pentru a se asigura că setarea temei "Afișați imaginea eroului" este setată. Dacă nu este marcajul este pur și simplu sărit peste.
Setările temei au fost de asemenea utilizate pentru a controla butonul "cumpărați ultimul număr" care suprapune imaginea eroului pe pagina de pornire. Pentru a evita codarea greu a variantei id a celei mai recente probleme în șablon, trei pagini de text sunt introduse în pagina cu setările temelor:
Folosind un permalink de cărucior, ne asigurăm că dacă suportul JavaScript nu este prezent, utilizatorul va putea în continuare să cumpere revista prin linkul URL. Cu toate acestea mergând direct la pagina de plată nu este fluxul ideal, este preferabil ca utilizatorul să facă clic pe un buton și să fie dus la pagina de coș de unde pot regla cantitățile și pot adăuga alte elemente la comanda lor. Din fericire, acest lucru nu a fost prea greu pentru a fi realizat.
Prin utilizarea funcției jQuery împacheta imaginea eroului este înfășurată într-un element de formă. Un câmp ascuns este apoi atașat la formularul care conține settings.home_hero_variant_id trase din setările noastre tematice. Fișierul JavaScript conține .lichid extensia Shopify este capabil să introducă date din setările temei înainte de a fi deservit. Acest lucru ne permite să inserăm settings.home_hero_variant_id în codul nostru JavaScript.
În plus, dacă și când acest id este schimbat, codul nu va trebui schimbat - ceea ce este util. Există multe utilizări pentru această abordare și acesta este doar un exemplu simplu:
Accentsconagua
/ * Hijack cumpărați butonul de pe pagina de pornire pentru a trimite formularul * / $ ('.hero-unit') wrap (' „); $ (“') .attr (tip:' ascuns ', id:' id ', nume:' id ', valoare:' settings.home_hero_variant_id '). appendTo (' hero-form '); $ ('a.blackflag') faceți clic pe (funcția (e) $ ("# hero-form"). În cele din urmă, vom deturna funcționalitatea prestabilită a ancorei noastre și vom trimite formularul atunci când se face clic.
Site-ul a fost lansat cu succes în 1 mai 2013, cu lansarea celei de-a șasea reviste.
Re-lansat designul paginii de start Odată cu finalizarea primei etape, dezvoltarea continuă, iar ulterior în 2012, secțiunea "citiți online" va fi adăugată site-ului, ceea ce va duce la fiecare problemă disponibilă pentru citirea browserului.
În ansamblu, toți cei implicați în proiect au fost foarte mulțumiți de rezultate, după cum Elliot remarcă:
Paravel baietii sunt profesionisti in timp ce inca se distreaza foarte mult pentru a lucra cu, iar produsul finit este exceptional. Nu aveam nici o idee ce ar produce atunci când le-am comandat, dar am știut că ar fi ceva grozav, care este.
Mulțumită lui Trent Walton și lui Elliot Jay Stocks pentru ajutorul acordat acestui articol.
