Share
8 Faces is een 88 pagina's tellend, tweejaarlijks, onafhankelijk gepubliceerd magazine met interviews met acht vooraanstaande ontwerpers op het gebied van print, web, illustratie en letterontwerp. Elk interview is losjes gebaseerd op de vraag 'of je maar acht lettertypen zou kunnen gebruiken, welke zou je kiezen?'
De originele 8 Faces-startpagina ontworpen door Kyle Meyer 8 Faces werd in 2010 gelanceerd door Elliot Jay Stocks - een in het Verenigd Koninkrijk gevestigde webontwerper en zichzelf bekende type nerd. Sindsdien is het gestaag gegroeid en is het een bedrijf op zichzelf geworden met een groeiende lijst van bijdragers en een zeer actieve Tumblr-gemeenschap.
Uitgave één uitverkocht in minder dan een uur en volgende releases zijn net zo goed verlopen. Het assortiment van 8 Faces-producten is ook gegroeid en bevat nu een beperkt aantal soorten typeposters en een binnenkort te lanceren "lees online" -functie.
Midden 2012 gaf Elliot Paravel, Inc de opdracht om de online ervaring van 8 Faces opnieuw vorm te geven. Bestaande uit Trent Walton, Dave Rupert en Reagan Ray, heeft Paravel een sterke reputatie opgebouwd voor creatieve, typegerichte en responsieve websites, waaronder de DO-lezingen en een van de meest bezochte sites op internet, microsoft.com.
Elliot legde uit waarom hij voor Paravel koos:
Ik had zelf graag de site ontworpen, maar ik wist dat de tijd het gewoon niet zou toestaan, dus koos ik voor Paravel vanwege hun scherpe typografische ogen en uitgebreide ervaring met responsief webdesign. Ze hebben me ook heel vriendelijk toegestaan om te werken met zodat ik nog steeds enkele van mijn eigen ontwerpgevoeligheden in de mix kon gooien.
Tegelijk met het herontwerpen van het proces, besloot Elliot om van een op maat gemaakt e-commerce systeem over te stappen naar Shopify - een gehost platform gebaseerd op een eenvoudig te gebruiken en ontwerpvriendelijk sjablonensysteem.
Shopify was een logische keuze, aangezien het online winkelfront voor Viewport Industries (het kleine projectgebaseerde bedrijf dat we samen runnen) het platform al meer dan een jaar gebruikt voor de verkoop van zowel fysieke als digitale producten zoals Insites: The Book.
Eind 2012 werd begonnen aan het project en het eerste Basecamp-bericht werd op 12 oktober geplaatst. Aanvankelijke ideeën werden letterlijk met de hand geschetst en erg los, zoals je kunt zien aan de afbeelding hieronder.
Een vroege schets om ideeën te delen, veel daarvan werden gedeeld in het Basecamp-project Deze "snelle en vuile" benadering liet toe dat een aantal belangrijke initiële beslissingen werden genomen voordat er pixels werden gepusht. Deze omvatten lettertype keuzes en de keuze van een niet-tabbladen navigatie voor kleine schermen. Zoals Trent uitlegt:
Omdat het Elliot was, was er geen noodzaak voor Reagan en ik om pixel-perfecte PSD's te presenteren. Hij vertrouwde ons dus zodra we ons voorbij ruwe concepten en lay-outverkenningen hadden begeven, namen we dingen mee naar de browser. Terwijl Dave en ik aan het coderen waren, spotten we regelmatig ongemakkelijke punten in het ontwerp over breedtes / breekpunten. We zouden de dingen heen en weer slepen in de browser en in Photoshop - welk gereedschap het op dat moment het beste werkte. Er is geen duidelijk pad of methode voor de gekte, maar ik vind het op die manier leuk. Je gaat gewoon friemelen en duwt en squisht tot de knikken eruit zijn.
Terwijl de ontwerpfase van schetsen veranderde in code, begon Paravel lay-outideeën en paginaontwerpen te delen via een eenvoudige door PHP aangestuurde staging-site die was opgezet op Heroku.
Aangezien Paravel Git gebruikt als onderdeel van hun dagelijkse workflow, en gezien de integratie tussen Git en Heroku, was dit volkomen logisch. Iteraties kunnen naar GitHub worden gepusht en direct op de staging-site worden toegepast. Omdat alle partijen geografisch gescheiden waren, maakte dit de dingen heel gemakkelijk. Zoals Trent uitlegt, past deze aanpak bij Paravel goed:
We proberen ons te houden aan onze specialiteit, waarbij dingen worden gedaan van planning tot ontwerp en front-end code. We doen er alles aan om de implementatie zo eenvoudig mogelijk te maken voor klanten, dus we zullen pagina's bedekken op manieren die de overdracht soepel laten verlopen.
Met dit proces konden ook testen op meerdere apparaten worden uitgevoerd. In tegenstelling tot de oorspronkelijke 8 Faces-site, gebouwd in 2010 met een vaste breedte, moest de nieuwe versie volledig reageren. Iteraties werden besproken op Basecamp, wijzigingen aangebracht en vervolgens teruggeduwd naar de staging-site voor testen. Dat gezegd hebbende, het project heeft altijd een los proces gehad, zoals Trent opmerkt:
Met Elliot hebben we niet echt formele rondes van iteratie vastgelegd. We hebben waarschijnlijk een aantal Github-commits die de evolutie konden laten zien, maar dat deel van het proces was heerlijk slordig met weinig aandacht voor archivering.
Terugkijkend op de Basecamp-berichten zijn er slechts acht threads en 84 opmerkingen voor het hele proces, inclusief de integratie met Shopify en tweaks voor het starten.
Ontwerp en lay-out van pagina's en tijdschriften in een vroeg tijdschrift 
De startpagina krijgt vorm. Veel van deze lay-out is zichtbaar in de gelanceerde site. Vanzelfsprekend stonden typografie en roosters, gezien het onderwerp, in de voorhoede van het ontwerpproces. Wederom door eenvoudige pagina's te maken op de staging-site, kon Paravel eenvoudig roosters, dakgoten, breekpunten en typografische keuzes delen.
Een goed voorbeeld van de verschillende lay-outopties is op de ongeveer pagina.
De pagina Over toont veel van de kolomscheidingen op het werk Potentiële lay-outs in het definitieve raster zijn als volgt:
FF Unit Slab wordt gebruikt in het tijdschrift en werd ook gekozen als het lettertype voor de nieuwe site, meer van Trent:
Het tijdschrift zet FF Unit Slab van Christian Schwartz, Kris Sowersby en Erik Spiekermann in voor goed gebruik, en we deden hetzelfde met de site. Ik hou van de hele Unit super-familie. Een gedeelte over online lezen komt eraan en Unit schittert daar echt. Ik kan niet wachten tot mensen het zien.
Lettertypen worden geserveerd via TypeKit en fallbacks zijn relatief eenvoudig:
body font: 100% / 1.5 "ff-unit-slab-web", "Georgia", "Times New Roman", schreef; font-gewicht: 300; kleur: # 666666;
Zoals Trent eerder heeft uitgelegd, zijn er een aantal onderbrekingspunten in het CSS-bestand, die elk verschillende scenario's behandelen. Sommige zijn kleine tweaks voor het type terwijl anderen omgaan met grootschalige lay-out wijzigingen. Gebouwd met behulp van een "mobile first" -aanpak zijn de breekpunten als volgt:
@media (minimale breedte: 700 px) @media (minimale breedte: 850 px) @media (minimale breedte: 1100 px) @media (minimale breedte: 1400 px) @media (minimale breedte: 1680 px)
Een slimme truc die wordt gebruikt, is het gebruik van mediaquery's om de lettergrootte van het hoofdletter te wijzigen. Aangezien de oorspronkelijke lettergrootte van het hoofdgedeelte is ingesteld op 100% met een hoogte van 1,5 lijn, zullen alle volgende resets zowel het lettertype als de lijnhoogten vergroten, wat resulteert in een soepele overgang tussen schermafmetingen.
Hoewel JavaScript niet zwaar wordt gebruikt op de nieuwe 8 Faces-site, wordt het gebruikt voor een geweldig effect op de startpagina. Aangezien het hoofddoel van de site is om het gedrukte tijdschrift weer te geven, moet er een manier zijn om de omslagen en binnenpagina's effectief te markeren. Dit werd bereikt met de jQuery plugin "Kinetic".
Met de plug-in kan de bezoeker de grote heldenafbeelding van links naar rechts slepen en de foto's van het laatste nummer in zijn eigen tijd bekijken. Uiteindelijk wordt deze afbeelding beheerd via de pagina Shopify-thema-instellingen en kan Elliot deze gemakkelijk bijwerken zonder dat de Shopify-sjablonen handmatig hoeven te worden aangepast.
Paravel voltooide hun werk rond eind februari 2013. Op dit moment namen Elliot en ik het proces over en begonnen het project van de PHP-staging-site naar Shopify te verplaatsen. Shopify gebruikt de Liquid Templating-engine om gegevens uit de winkel op te halen in themasjablonen. Door eenvoudige uitvoer- en logica-constructies te gebruiken, is het mogelijk om de gegevensstroom te regelen terwijl het ontwerp van Paravel behouden blijft.
8 Faces is in goed gezelschap, meer dan 60.000 winkels gebruiken nu Shopify, inclusief een aantal prominente webmerken waaronder United Pixel Workers, A Book Apart en Tattly. Als een kanttekening maken veel webontwerpers nu aanzienlijke inkomsten uit het werken met Shopify.
Als je nog niet de kans hebt gekregen om meer te weten te komen over het gratis Shopify Experts-programma, is het de moeite van het bekijken waard. In de afgelopen 18 maanden hebben $ 18 miljoen aan contracten via het programma gegenereerd - stof tot nadenken!
Het Shopify-beheerdersscherm geeft toegang tot alle sjablonen Dankzij de goed aangelegde en becommentarieerde staging-site was het eerste proces van het overbrengen van HTML, CSS en JavaScript naar het Shopify-thema niet meer dan een paar uur werk. De header.php en footer.php vormde de basis van het belangrijkste Shopify-lay-outbestand theme.liquid en verschillende andere PHP-pagina's die zijn toegewezen aan andere Shopify-kernsjablonen zoals page.liquid en collection.liquid.
De voortgang werd gedeeld via een ontwikkelwinkel - een volledig uitgeruste Shopify-testsite die met een wachtwoord was beveiligd. Dit maakte het gemakkelijk om de voortgang te delen terwijl productfotografie, beschrijvingen en prijsdetails werden toegevoegd.
De meeste winkels hebben een verschillende stroom. Bijvoorbeeld:
Shopify speelt heel goed in op deze stroom door gebruik te maken van concepten zoals collecties en producten. In feite is elk van deze direct toegewezen aan twee kernsjablonen, collection.liquid en product.liquid. Ter referentie, een verzameling is Shopify is een logische groepering van producten - in dit geval alle zes nummers van het magazine 8 Faces.
Aangezien er momenteel echter maar zes nummers zijn, heeft Elliot de beslissing genomen dat een afzonderlijke detailpagina voor elke uitgave overbodig was. Om deze stroom te bereiken was een subtiele heroverweging nodig en werden veranderingen aangebracht in de collection.liquid sjabloon.
% if collection.handle == 'magazines'% % include 'collection-magazines'% % elsif collection.handle == 'posters'% % include 'collection-posters'% % elsif-sjabloon == 'list-collections'% % include 'collection-listing'% % else% % include 'collection-default'% % endif%
Door de main te gebruiken collection.liquid als logica-controller kunnen we een specifiek fragment invoegen, een kleine brok herbruikbare code, afhankelijk van de momenteel bekeken verzameling. Wanneer we daarom verzoeken om de collectie "tijdschriften" te bekijken, voegt Shopify automatisch de collection-magazines.liquid snipper.
% voor product in collection.products% % endfor%
product.title
product.description % voor variant in product.variants% % if variant.available == true% % endif% % endfor%
Het is gebruikelijk om elk product in een verzameling door te lussen met behulp van de Liquid-code en een link naar de productdetailpagina uit te voeren waar de gebruiker het product vervolgens aan hun winkelwagentje kan toevoegen..
Om het mogelijk te maken om het product toe te voegen vanaf de collectiepagina a het formulier werd gebruikt in plaats van een link naar de productdetailpagina. Zoals je kunt zien in de bovenstaande code, wordt het formulier uniek vanwege het verborgen invoerveld "id" dat de waarde van het product krijgt variant.id.
Omdat veel producten opties hebben, bijvoorbeeld kleur en maat, heeft elke combinatie een uniek karakter variant.id - zelfs als er maar één versie is. Het is vermeldenswaard dat de pagina's met productdetails voor het tijdschrift zijn ontworpen en aanwezig zijn. Als ze per ongeluk worden gelinkt aan of worden gebruikt door iemand die de URL correct heeft uitgevoerd, zal niets er als gebroken uitzien.
Gezien het feit dat de nieuwe 8 Faces is gebouwd voor apparaten van alle groottes, moest het "responsieve beeldprobleem" worden aangepakt. Uiteindelijk heeft Paravel het gebruik van de picturefill.js polyfill door Scott Jehl aanbevolen. Trent legt uit:
We moesten absoluut de bestandsgrootte voor afbeeldingen minimaliseren, vooral met de startpagina. We hebben picturefill.js al meerdere keren in het verleden gebruikt, inclusief een aangepaste versie voor de Microsoft-startpagina.
Als u niet bekend bent met picturefill.js, beschrijft het zichzelf als "een responsieve benadering van afbeeldingen die u vandaag kunt gebruiken en het voorgestelde beeldelement nabootst met behulp van overspanningen, uit veiligheidsoverwegingen." Het werkt erg goed en weegt, wanneer het wordt samengeperst, minder dan 0,5 kb. Om ervoor te zorgen dat picturefill.js werkt, moet u een aantal verschillende afbeeldingspaden definiëren voor elk "onderbrekingspunt". Dit is de gegenereerde markup van de startpagina van 8 Faces:
Door drie 'thema-instellingen' te maken in het thema 8 Faces Shopify, kan een beheerder verschillende afbeeldingen uploaden voor elk van de drie verschillende breekpunten. Na het uploaden van de index.liquid sjabloon gebruikt Liquid code om toegang te krijgen tot de relevante afbeeldingen:
Bovendien wordt in de sjabloon een eenvoudige true / false-controle uitgevoerd om ervoor te zorgen dat de thema-instelling "Show hero image" is ingesteld. Als het niet is, wordt de markup gewoon overgeslagen.
Thema-instellingen werden ook gebruikt om de knop 'nieuwste aankoop kopen' te besturen die de hero-afbeelding op de startpagina overlapt. Om hard coderen van de variant-id van het laatste nummer in de sjabloon te voorkomen, worden drie tekstreeksen ingevoerd op de pagina met thema-instellingen:
Door een permalink te gebruiken, zorgen we ervoor dat als JavaScript-ondersteuning niet aanwezig is, de gebruiker het tijdschrift nog steeds via de URL-link kan kopen. Het is echter niet de ideale stroom om rechtstreeks naar de kassa te gaan. Het is beter als de gebruiker op een knop klikt en naar de winkelwagenpagina wordt gebracht, waar hij de hoeveelheden kan aanpassen en andere items aan zijn bestelling kan toevoegen. Gelukkig was dit niet zo moeilijk om te bereiken.
Door de functie jQuery te gebruiken wikkelen het hero-beeld is verpakt in een formulierelement. Een verborgen veld wordt dan toegevoegd aan het formulier dat de bevat settings.home_hero_variant_id getrokken uit onze thema-instellingen. Omdat de JavaScript-bestandsnaam de bevat .vloeistof uitbreiding Shopify kan gegevens van de thema-instellingen invoegen voordat het bestand wordt weergegeven. Hierdoor kunnen we de invoegen settings.home_hero_variant_id in onze JavaScript-code.
Bovendien, als en wanneer deze id wordt gewijzigd, hoeft de code niet te worden gewijzigd - wat handig is. Er zijn veel toepassingen voor deze aanpak en dit is slechts een eenvoudig voorbeeld:
Accentsconagua
/ * Knop om te kopen op de startpagina om het formulier * / $ ('. Hero-unit'). Wrap (' '); $ ('') .attr (type:' hidden ', id:' id ', name:' id ', value:' settings.home_hero_variant_id '). appendTo (' # hero-form '); $ ('a.blackflag'). klik (functie (e) $ ("# hero-vorm"). submit (); e.preventDefault ();); Ten slotte kapen we de standaardfunctionaliteit van ons anker en sturen we het formulier in wanneer erop wordt geklikt.
De site is met succes gelanceerd op 1 mei 2013 met de uitgave van nummer zes van het magazine.
Het opnieuw gelanceerde ontwerp van de homepage Met de eerste fase wordt de ontwikkeling voortgezet en later in 2012 wordt het gedeelte 'online lezen' toegevoegd aan de site, waardoor elk nummer beschikbaar is om door de browser te lezen..
Over het algemeen was iedereen die bij het project betrokken was zeer tevreden met de resultaten, zoals Elliot opmerkt:
De jongens van Paravel zijn professioneel en toch heel leuk om mee te werken, en het eindproduct is uitzonderlijk. Ik had geen idee wat ze zouden produceren als ik ze opdroeg, maar ik wist dat het iets groots zou zijn, wat het is.
Met dank aan Trent Walton en Elliot Jay Stocks voor hun hulp bij dit artikel.
