Share
8 Faces er et 88-siders bi-årlig, uavhengig utgitt tidsskrift sentrert rundt intervjuer med åtte ledende designere fra feltene print, web, illustrasjon og type design. Hvert intervju er løst basert på spørsmålet "om du bare kunne bruke bare åtte skrifttyper, som ville du velge?"
Den opprinnelige 8 Faces hjemmeside designet av Kyle Meyer 8 Faces ble lansert i 2010 av Elliot Jay Stocks - en britisk basert webdesigner og selvbevisst type nerd. Siden da har den vokst jevnt og har blitt en bedrift i seg selv med en utvoksende liste over bidragsytere og et veldig aktivt Tumblr-fellesskap.
Utgave en utsolgt på under en time og påfølgende utgivelser har gått like bra. Utvalget av 8 Faces-produkter har også vokst og inkluderer nå et begrenset utgave av typen plakater og en snart lansert "les online" -funksjon.
I midten av 2012 ledet Elliot Paravel, Inc til å designe 8 Faces online opplevelse. Bestående av Trent Walton, Dave Rupert og Reagan Ray, har Paravel smittet et sterkt rykte for kreative, typedrevne og lydhørste nettsteder, inkludert DO-forelesningene og en av de mest besøkte nettstedene på internett, microsoft.com.
Elliot forklarte hvorfor han valgte Paravel:
Jeg ville elsket å designe nettstedet selv, men jeg visste at tiden bare ikke ville tillate det, så jeg valgte Paravel for sine ivrige typografiske øyne og omfattende erfaring med responsivt webdesign. De har også veldig vennlig tillatt meg å jobbe med dem, så jeg var fortsatt i stand til å kaste noen av mine egne designfølelser i blandingen.
Samtidig med å starte redesignprosessen, tok Elliot beslutningen om å flytte seg fra et skreddersydd e-handelssystem til Shopify - en vert plattform basert på et brukervennlig og designervennlig malesystem.
Shopify var et logisk valg da nettbutikkfronten til Viewport Industries (det lille prosjektbaserte selskapet vi kjører sammen) har brukt plattformen i over et år å selge både fysiske og digitale produkter som Insites: The Book.
Arbeidet startet på prosjektet i slutten av 2012, og den første Basecamp-meldingen ble lagt ut 12. oktober. Innledende ideer var bokstavelig håndskisset og veldig løs som du kan se fra bildet nedenfor.
En tidlig skisse for å dele ideer, mange av disse ble delt i Basecamp-prosjektet Denne "raske og skitne" tilnærmingen tillot en rekke nøkkelopprinnelige beslutninger som skal gjøres før noen piksler ble presset. Disse inkluderte skriftvalg og valg av en ikke-flatt navigering for små skjermer. Som Trent forklarer:
Fordi det var Elliot, var det ikke nødvendig for Reagan og jeg å presentere pixel-perfekte PSD-er. Han stolte på oss så når vi kom forbi tøffe konsepter og layoututforskninger tok vi ting til nettleseren. Mens Dave og jeg var kodende, ville vi regelmessig oppdage ubehagelige poeng i designet over bredder / bruddpunkter. Vi ville sparke ting frem og tilbake i nettleseren og Photoshop - hvilket verktøy som fungerte best på den tiden. Det er ingen klar vei eller metode til galskapen, men jeg liker det på den måten. Du bare sortere fidget og nudge og klemme til kinks er ute.
Etter hvert som designfasen flyttet fra sketching til kode, begynte Paravel å dele layout ideer og side design via en enkel PHP drevet staging nettsted satt opp på Heroku.
Som Paravel bruker Git som en del av deres daglige arbeidsflyt, og gitt integrasjonen mellom Git og Heroku, gjorde dette perfekt mening. Iterasjoner kan bli presset til GitHub og straks søkt på stagingstedet. Som alle partier var geografisk skilt, gjorde dette det veldig enkelt. Som Trent forklarer, passer denne tilnærmingen til Paravel godt:
Vi prøver å holde fast i vår spesialitet, som tar ting fra planlegging til design og front-end-kode. Vi liker å gjøre alt vi kan for å gjøre implementeringen så enkel som mulig for klienter, så vi vil stubbe ut sider på måter som gjør at hånden går jevnt.
Denne prosessen tillot også testing på tvers av flere enheter. I motsetning til den opprinnelige 8 Faces-siden, bygget i 2010 med en fast bredde, behøvde den nye versjonen å være fullt responsiv. Iterasjoner ble diskutert på Basecamp, endringer gjort og deretter presset tilbake til stagingstedet for testing. Når det er sagt, har prosjektet alltid hatt en løs prosess som Trent kommenterer:
Med Elliot loggte vi ikke egentlig formelle runder av iterasjon. Vi har sannsynligvis noen Github-forpliktelser som kunne vise utviklingen, men den delen av prosessen var herlig slurvet med lite hensyn til arkivering.
Faktisk ser du tilbake på Basecamp-meldingene, er det bare åtte tråder og 84 kommentarer for hele prosessen, som inkluderer integrasjonen med Shopify og post launch tweaks.
Tidlig magasin arkiv side design og layout 
Hjemmesiden tar form. Mye av denne utformingen er synlig på det lanserte nettstedet. Naturligvis, gitt typografi typografi og grids var i forkant av design prosessen. Igjen ved å lage enkle sider på stagingstedet kunne Paravel enkelt dele grids, takrenner, brytepunkter og typografivalg.
Et godt eksempel på de ulike layoutalternativene er på omsiden.
Omsiden viser mange av kolonneklisene på jobben Potensielle layouter i det endelige gridet er som følger:
FF Unit Slab brukes i magasinet og ble valgt som skrift for det nye nettstedet også, mer fra Trent:
Bladet legger FF Unit Slab av Christian Schwartz, Kris Sowersby og Erik Spiekermann til god bruk, og vi gjorde det samme med nettstedet. Jeg elsker hele enheten super familie. En leseseksjon kommer snart, og Unit skinner virkelig der. Jeg kan ikke vente på at folk skal se det.
Fonter blir servert via TypeKit og fallbacks er relativt enkle:
kropp font: 100% / 1,5 "ff-unit-slab-web", "Georgia", "Times New Roman", serif; font-weight: 300; farge: # 666666;
Som Trent forklarte tidligere, er det en rekke bruddpunkter i CSS-filen, hver catering for ulike scenarier. Noen er mindre tweaks for type, mens andre håndterer endringer i stor skala. Bygget ved hjelp av en "mobil først" tilnærming er breakpoints som følger:
@media (min bredde: 700px) @media (min bredde: 850px) @media (min bredde: 1100px) @media (min bredde: 1400px) @media (min bredde: 1680px)
Et smart trick ansatt er bruk av medieforespørsler for å endre størrelsen på kroppens skriftstørrelse. Siden den opprinnelige kroppens skriftstørrelse er satt til 100% med en 1,5-linjehøyde, vil alle etterfølgende tilbakestillinger forstørre både skrift og linjehøyder, noe som resulterer i en jevn overgang mellom skjermstørrelser.
Mens JavaScript ikke brukes tungt på det nye 8-ansiktsområdet, er det brukt til stor effekt på hjemmesiden. Gitt at hovedfokuset på nettstedet er å vise det trykte magasinet, måtte det være en måte å markere dekslene og indre sidene effektivt på. Dette ble oppnådd med jQuery-plugin "Kinetic".
Pluggen gjør det mulig for besøkende å dra den store helten bildet fra side til side og se bildene av det siste problemet i sin egen tid. Til slutt blir dette bildet kontrollert via Shopify-temainnstillingssiden, og lar Elliot oppdatere det enkelt uten å måtte endre Shopify-malene manuelt..
Paravel fullførte sitt arbeid i slutten av februar 2013. På dette tidspunkt tok Elliot og jeg over prosessen og begynte å flytte prosjektet fra PHP-stasjonssiden til Shopify. Shopify bruker den flytende templerende motoren for å trekke data fra butikken til templatmaler. Ved å bruke enkle utdata og logiske konstruksjoner er det mulig å kontrollere datastrømmen mens du beholder design laget av Paravel.
8 ansikter er i godt selskap, over 60 000 butikker bruker nå Shopify, inkludert en rekke fremtredende nettemerker, inkludert United Pixel Workers, A Book Apart og Tattly. Som sidenotat gjør mange webdesignere nå betydelige inntekter fra å jobbe med Shopify.
Hvis du ikke har hatt muligheten til å lære om gratis Shopify Experts-programmet, er det verdt å se. I løpet av de siste 18 månedene har kontrakter på 18 millioner dollar generert via programmet - mat for tanker!
Skjermbildet Shopify admin tillater tilgang til alle maler Takket være det godt lagt ut og kommenterte oppføringsstedet var den første prosessen med å overføre HTML, CSS og JavaScript over til Shopify-temaet ikke mer enn noen få timer arbeid. De header.php og footer.php dannet grunnlaget for den viktigste Shopify-layoutfilen theme.liquid og forskjellige andre PHP-sider som er kartlagt til andre kjernevennlige Shopify-maler som page.liquid og collection.liquid.
Fremdriften ble delt via en utviklingsbutikk - et fullverdig Shopify-testområde som var passordbeskyttet. Dette gjorde det enkelt å dele fremdrift som produktfotografering, beskrivelser og prisdetaljer ble lagt til.
De fleste butikker har en tydelig flyt. For eksempel:
Shopify henvender seg til denne flytningen veldig bra ved å bruke konsepter som samlinger og produkter. Faktisk er hver av disse kartlagt direkte til to kjernemaler, collection.liquid og product.liquid. For referanse er en samling Shopify en logisk gruppering av produkter - i dette tilfellet alle seks utgaver av 8 Faces-magasinet.
Men da det i dag bare er seks saker, tok Elliot beslutningen om at en separat detalj side for hvert problem var overskudd til krav. For å oppnå denne flyt var det behov for en subtil revurdering og endringer ble gjort til collection.liquid mal.
% if collection.handle == 'magazines'% % include 'collection-magazines'% % elsif collection.handle == 'plakater'% % include 'samling-plakater'% % elsif mal == 'listesamlinger'% % inkluderer 'samlingsnotering'% % else% % include 'collection-default'% % endif%
Ved å bruke hovedmenyen collection.liquid Som en logisk kontroller kan vi sette inn en bestemt utdrag, en liten del av gjenbrukbar kode, avhengig av samlingen som er sett. Derfor når vi ber om å se samlingen "magasiner", legger Shopify automatisk inn Samlingen-magazines.liquid tekstutdrag.
% for produktet i collection.products% % endfor%
product.title
product.description % for variant i product.variants% % hvis variant.available == true% % endif% % endfor%
Det er vanlig praksis å sløyfe over hvert produkt i en samling, ved hjelp av flytende kode, og skriv ut en kobling til produktdetaljsiden der brukeren deretter kan legge produktet til sin handlevogn.
For å gjøre det mulig å legge til produktet fra samlingssiden a skjema ble brukt i stedet for en lenke til produktdetaljsiden. Som du vil se fra koden ovenfor, blir skjemaet unikt på grunn av det skjulte inntastingsfeltet "id" som er gitt verdien av produktet variant.id.
Så mange produkter har alternativer, for eksempel farge og størrelse, har hver kombinasjon en unik variant.id - selv om det bare er en versjon. Det er verdt å merke seg at produktdetaljer sidene for bladet har blitt designet og er til stede. Hvis de noen gang ved et uhell er knyttet til, eller åpnes av noen som har riktig utarbeidet nettadressen, vil ingenting vises brutt.
Gitt at de nye 8-fasene er bygget for enheter av alle størrelser, må det "responsive bildeproblemet" tas opp. Til slutt anbefalte Paravel bruken av imagefill.js-polyfillet av Scott Jehl. Trent forklarer:
Vi måtte absolutt filstørrelsen for bilder, spesielt på hjemmesiden. Vi har brukt picturefill.js flere ganger tidligere, inkludert en tilpasset versjon for Microsoft-hjemmesiden.
Hvis du ikke er kjent med picturefill.js, beskriver den seg som "en responsiv bilde tilnærming som du kan bruke i dag som etterligner det foreslåtte bildeelementet ved hjelp av spans, for sikkerhets skyld". Den fungerer veldig bra, og når den er komprimert, veier den under 0,5 kb. For at picturefill.js skal fungere, må du definere et antall forskjellige bildebaner for hvert "breakpoint". Her er den gjengitte oppslaget fra 8 Faces hjemmeside:
Ved å opprette tre "temainnstillinger" i 8 Faces Shopify-temaet, kan en administrator laste opp forskjellige bilder for hver av de tre forskjellige breakpoints. En gang lastet opp index.liquid malen bruker flytende kode for å få tilgang til relevante bilder:
I tillegg gjøres det en enkel sann / falsk sjekk i malen for å sikre at temainnstillingen "Vis hero image" er satt. Hvis det ikke er merket, blir det bare hoppet over.
Temainnstillinger ble også brukt til å kontrollere "buy latest issue" -knappen som overlegger heltenes bilde på hjemmesiden. For å unngå hard koding er variant-IDet til det siste problemet i malen tre tekststrenger angitt på siden for temainnstillinger:
Ved å bruke en kurv permalink sikrer vi at hvis JavaScript-støtte ikke er til stede, vil brukeren fortsatt kunne kjøpe bladet via URL-lenken. Men å gå rett til siden for utskrift er ikke den ideelle strømmen, det er bedre for brukeren å klikke på en knapp og bli tatt til handlekurven hvor de kan justere mengder og legge til andre varer i bestillingen. Heldigvis var dette ikke for vanskelig å oppnå.
Ved å bruke jQuery-funksjonen pakke inn helten bildet er pakket inn i et formelement. Et skjult felt legges deretter til skjemaet som inneholder settings.home_hero_variant_id trukket fra våre temainnstillinger. Som JavaScript filnavnet inneholder .væske utvidelse Shopify kan sette inn data fra temainnstillingene før du serverer filen. Dette tillater oss å sette inn settings.home_hero_variant_id inn i vår JavaScript-kode.
I tillegg, hvis og når dette IDet endres, trenger koden ikke å endres - noe som er praktisk. Det er mange bruksområder for denne tilnærmingen, og dette er bare et enkelt eksempel:
Accentsconagua
/ * Hijack buy button på hjemmesiden for å sende skjemaet * / $ ('hero-unit'). Wrap (' '); $ ('') .attr (type:' skjult ', id:' id ', navn:' id ', verdi:' settings.home_hero_variant_id '). appendTo (' # hero-form '); $ ('a.blackflag'). klikk (funksjon (e) $ ("# hero-form"). send (); e.preventDefault ();); Endelig kaprer vi standardfunksjonen til ankeret vårt og sender i stedet skjemaet når det klikkes.
Nettstedet ble lansert på 1. mai 2013 med utgivelsen av nummer seks i bladet.
Den nyåpnede hjemmesiden design Med fase ett komplett, fortsetter utviklingen, og senere i 2012 vil avsnittet "les online" legges til nettstedet som vil føre til at hvert problem er tilgjengelig for å lese gjennom nettleseren.
Samlet sett var alle involverte i prosjektet veldig fornøyd med resultatene, som Elliot bemerker:
Paravel-karene er profesjonelle mens det fortsatt er morsomt å jobbe med, og ferdigproduktet er eksepsjonelt. Jeg hadde ingen anelse om hva de ville produsere da jeg bestilte dem, men jeg visste at det ville vært noe bra, som det er.
Takket være Trent Walton og Elliot Jay Stocks for deres hjelp med denne artikkelen.
