Share
8 Faces ist ein 88-seitiges, halbjährlich erscheinendes, unabhängiges Magazin, das sich mit Interviews mit acht führenden Designern aus den Bereichen Druck, Web, Illustration und Schriftdesign befasst. Jedes Interview basiert lose auf der Frage "Wenn Sie nur acht Schriften verwenden könnten, welche würden Sie wählen?"
Die ursprüngliche 8 Faces-Homepage von Kyle Meyer 8 Faces wurde 2010 von Elliot Jay Stocks ins Leben gerufen - einem in Großbritannien ansässigen Webdesigner und selbstbekannten Art-Nerd. Seitdem ist es stetig gewachsen und hat sich zu einem eigenen Unternehmen mit einer wachsenden Liste von Mitwirkenden und einer sehr aktiven Tumblr-Community entwickelt.
Die erste Ausgabe war in weniger als einer Stunde ausverkauft und die nachfolgenden Veröffentlichungen sind genauso gut verlaufen. Die Produktpalette von 8 Faces ist ebenfalls gewachsen und umfasst jetzt eine limitierte Auflage von Typenplakaten und eine bald online zu startende Funktion "Online lesen".
Mitte 2012 beauftragte Elliot Paravel, Inc. mit der Neugestaltung der Online-Erfahrung von 8 Faces. Paravel, bestehend aus Trent Walton, Dave Rupert und Reagan Ray, hat sich einen guten Ruf für kreative, typengetriebene und responsive Websites wie die DO-Vorträge und eine der meistbesuchten Websites im Internet, microsoft.com, erworben.
Elliot erklärte, warum er sich für Paravel entschieden hat:
Ich hätte die Website gerne selbst entworfen, aber ich wusste, dass die Zeit es einfach nicht zulässt. Deshalb entschied ich mich für Paravel wegen ihrer scharfen typografischen Augen und der umfangreichen Erfahrung mit responsivem Webdesign. Sie erlaubten mir auch sehr freundlich zu arbeiten mit Ich konnte immer noch einige meiner eigenen Designempfindungen in die Mischung einbringen.
Während Elliot den Redesign-Prozess startete, entschied er sich auch, von einem maßgeschneiderten E-Commerce-System zu Shopify zu wechseln - einer gehosteten Plattform, die auf einem einfach zu bedienenden und designerfreundlichen Vorlagensystem basiert.
Shopify war eine logische Wahl, da die Online-Shop-Front von Viewport Industries (das kleine Projekt, das wir gemeinsam betreiben) die Plattform seit über einem Jahr nutzt und physische und digitale Produkte wie Insites: The Book verkauft.
Die Arbeiten an dem Projekt begannen Ende 2012 und die erste Basecamp-Nachricht wurde am 12. Oktober veröffentlicht. Die ersten Ideen waren buchstäblich von Hand gezeichnet und sehr locker, wie Sie dem Bild unten entnehmen können.
Eine frühe Skizze, um Ideen auszutauschen, viele davon wurden im Basecamp-Projekt geteilt Diese "schnelle und schmutzige" Herangehensweise erlaubte es, eine Reihe wichtiger anfänglicher Entscheidungen zu treffen, bevor irgendwelche Pixel gedrückt wurden. Dazu gehörten die Auswahl von Schriftarten und die Wahl einer Navigation ohne Tabs für kleine Bildschirme. Wie Trent erklärt:
Weil es Elliot war, mussten Reagan und ich keine pixelgenauen PSDs präsentieren. Er vertraute uns also, als wir an groben Konzepten und Layouterforschungen vorbeikamen, brachten wir alles in den Browser. Während Dave und ich codierten, entdeckten wir regelmäßig unbequeme Punkte im Design über Breiten / Haltepunkte. Wir würden die Dinge im Browser und in Photoshop durchlaufen - was auch immer zu diesem Zeitpunkt am besten funktionierte. Es gibt keinen klaren Weg oder Weg zum Wahnsinn, aber ich mag es so. Sie müssen einfach nur zappeln, stupsen und quetschen, bis die Knicke aus sind.
Als die Entwurfsphase vom Skizzieren zum Code überging, begann Paravel, Layoutideen und Seitendesigns über eine einfache, auf PHP basierende Staging-Site auf Heroku zu teilen.
Da Paravel Git als Teil des täglichen Workflows nutzt und angesichts der Integration von Git und Heroku absolut sinnvoll ist. Iterationen können auf GitHub übertragen und sofort auf die Staging-Site angewendet werden. Da alle Parteien geografisch voneinander getrennt waren, war dies sehr einfach. Wie Trent erklärt, passt dieser Ansatz gut zu Paravel:
Wir versuchen, bei unserer Spezialität zu bleiben, die von der Planung über das Design bis hin zum Front-End-Code reicht. Wir tun alles, um die Implementierung für die Kunden so einfach wie möglich zu gestalten. Deshalb geben wir Seiten so ab, dass die Übergabe reibungslos verläuft.
Dieser Prozess ermöglichte auch das Testen über mehrere Geräte hinweg. Im Gegensatz zu der ursprünglichen Website von 8 Faces, die 2010 mit einer festen Breite erstellt wurde, musste die neue Version vollständig reagieren. Iterationen wurden auf Basecamp besprochen, Änderungen vorgenommen und dann zum Testen an den Staging-Standort zurückgeschoben. Das Projekt hatte jedoch immer einen lockeren Prozess, wie Trient kommentiert:
Mit Elliot haben wir keine formalen Iterationsrunden aufgezeichnet. Wir haben wahrscheinlich einige Github-Commits, die die Entwicklung zeigen könnten, aber dieser Teil des Prozesses war wunderbar schlampig und hatte wenig Rücksicht auf die Archivierung.
Beim Rückblick auf die Basecamp-Nachrichten gibt es nur acht Threads und 84 Kommentare für den gesamten Prozess, einschließlich der Integration mit Shopify und Post Launch Tweaks.
Frühe Gestaltung und Layout des Seitenarchivs 
Die Homepage nimmt Gestalt an. Ein Großteil dieses Layouts ist auf der gestarteten Site sichtbar. In Anbetracht des Themas waren Typografie und Raster natürlich im Vordergrund des Designprozesses. Durch das Erstellen einfacher Seiten auf der Staging-Site konnte Paravel Raster, Zwischenstege, Haltepunkte und Typografieoptionen problemlos gemeinsam nutzen.
Ein gutes Beispiel für die verschiedenen Layout-Optionen finden Sie auf der About-Seite.
Die Info-Seite zeigt viele der Spaltenaufteilungen bei der Arbeit Mögliche Layouts im endgültigen Raster sind wie folgt:
FF Unit Slab wird in der Zeitschrift verwendet und wurde auch als Schriftart für die neue Website ausgewählt, mehr von Trent:
Das Magazin nutzt FF Unit Slab von Christian Schwartz, Kris Sowersby und Erik Spiekermann, und wir haben das auch mit der Site gemacht. Ich liebe die gesamte Superfamilie der Einheit. In Kürze wird ein Online-Abschnitt zum Lesen bereitgestellt, in dem Unit wirklich glänzt. Ich kann es kaum erwarten, dass die Leute es sehen.
Schriftarten werden über TypeKit bereitgestellt und Fallbacks sind relativ einfach:
body font: 100% / 1,5 "ff-unit-slab-web", "Georgia", "Times New Roman", Serife; Schriftgewicht: 300; Farbe: # 666666;
Wie Trent bereits erklärt hat, gibt es in der CSS-Datei eine Reihe von Haltepunkten, von denen jede verschiedene Szenarien berücksichtigt. Einige sind kleinere Änderungen am Typ, während andere große Layoutänderungen betreffen. Unter Verwendung eines "Mobile first" -Ansatzes sind die Haltepunkte wie folgt aufgebaut:
@media (min-Breite: 700px) @media (min-Breite: 850px) @media (min-Breite: 1100px) @media (min-Breite: 1400px) @media (min-Breite: 1680px)
Ein kluger Trick ist die Verwendung von Medienabfragen zur Größenänderung der Schriftgröße. Da die anfängliche Schriftgröße der Schrift auf 100% mit einer Zeilenhöhe von 1,5 festgelegt wird, werden bei allen nachfolgenden Zurücksetzungen sowohl die Schriftart als auch die Zeilenhöhe vergrößert, was zu einem glatten Übergang zwischen den Bildschirmgrößen führt.
Während JavaScript auf der neuen 8 Faces-Site nicht sehr häufig verwendet wird, wird es auf der Homepage mit großem Effekt verwendet. Da das Hauptaugenmerk der Website auf der Anzeige des gedruckten Magazins liegt, muss es eine Möglichkeit geben, Deckblätter und Innenseiten effektiv hervorzuheben. Dies wurde mit dem jQuery-Plugin "Kinetic" erreicht..
Das Plugin ermöglicht es dem Besucher, das große Heldenbild von einer Seite zur anderen zu ziehen und die Fotos der neuesten Ausgabe in seiner eigenen Zeit anzuzeigen. Letztendlich wird dieses Bild über die Seite mit den Shopify-Designeinstellungen gesteuert und ermöglicht Elliot eine einfache Aktualisierung, ohne dass die Shopify-Vorlagen manuell geändert werden müssen.
Paravel hat ihre Arbeit gegen Ende Februar 2013 abgeschlossen. Zu dieser Zeit übernahmen Elliot und ich den Prozess und begannen, das Projekt von der PHP-Staging-Site nach Shopify zu verlagern. Shopify verwendet die Flüssigkeitsvorlagen-Engine, um Daten aus dem Geschäft in Designvorlagen zu ziehen. Durch die Verwendung einfacher Ausgabe- und Logikkonstrukte ist es möglich, den Datenfluss zu steuern, während das von Paravel erstellte Design beibehalten wird.
8 Faces ist in guter Gesellschaft, mittlerweile nutzen über 60.000 Geschäfte Shopify, darunter eine Reihe prominenter Webmarken, darunter United Pixel Workers, A Book Apart und Tattly. Nebenbei bemerkt, erzielen viele Webdesigner mittlerweile beträchtliche Einnahmen aus der Zusammenarbeit mit Shopify.
Wenn Sie noch keine Gelegenheit hatten, mehr über das kostenlose Shopify Experts-Programm zu erfahren, ist dies einen Blick wert. In den letzten 18 Monaten wurden über das Programm Aufträge im Wert von 18 Millionen US-Dollar generiert - Denkanstöße!
Der Shopify-Admin-Bildschirm ermöglicht den Zugriff auf alle Vorlagen Dank der übersichtlich gestalteten und kommentierten Staging-Site waren die ersten Schritte zur Übertragung von HTML, CSS und JavaScript auf das Shopify-Design nur wenige Arbeitsstunden. Das header.php und footer.php bildete die Basis der Haupt-Shopify-Layoutdatei Theme.liquid und verschiedene andere PHP-Seiten, die anderen wichtigen Shopify-Vorlagen, wie z Seite.Liquid und Sammlung.Liquid.
Der Fortschritt wurde über einen Entwicklungsshop geteilt - eine voll funktionsfähige Shopify-Testseite, die durch ein Passwort geschützt wurde. Dies machte es einfach, den Fortschritt mitzuteilen, da Produktfotografien, Beschreibungen und Preisangaben hinzugefügt wurden.
Die meisten Geschäfte haben einen ausgeprägten Fluss. Zum Beispiel:
Shopify bietet diesen Fluss sehr gut, indem er Konzepte wie Kollektionen und Produkte verwendet. In der Tat wird jede dieser Dateien direkt auf zwei Core-Vorlagen abgebildet, Sammlung.Liquid und Produkt.Liquid. Eine Referenz ist eine Kollektion, bei der Shopify eine logische Gruppierung von Produkten darstellt - in diesem Fall alle sechs Ausgaben des 8 Faces-Magazins.
Angesichts der Tatsache, dass es derzeit nur sechs Ausgaben gibt, hat Elliot die Entscheidung getroffen, dass eine separate Detailseite für jede Ausgabe über die Anforderungen hinausging. Um diesen Fluss zu erreichen, war ein subtiles Umdenken erforderlich, und es wurden Änderungen am System vorgenommen Sammlung.Liquid Vorlage.
% if collection.handle == 'magazine'% % include 'collection-magazine'% % elsif collection.handle == 'posters'% % include 'collection-posters'% % elsif-Vorlage == 'list-collection'% % include 'collection-list'% % else% % include 'collection-default'% % endif%
Durch die Verwendung der wichtigsten Sammlung.Liquid Als Logik-Controller können wir ein bestimmtes Snippet einfügen, ein kleines Stück wiederverwendbaren Codes, abhängig von der aktuell angezeigten Sammlung. Wenn wir also die Sammlung "Magazine" aufrufen, fügt Shopify automatisch die Collection-Magazine.Liquid Schnipsel.
% für Produkt in collection.products% % endfor%
Produktname
product.description % für Variante in Produkt.Varianten% % wenn Variante.available == true% % endif% % endfor%
Es ist üblich, jedes Produkt in einer Sammlung mit Liquid-Code zu durchlaufen und einen Link auf die Produktdetailseite auszugeben, auf der der Benutzer das Produkt in den Warenkorb legen kann.
Um das Produkt von der Sammlungsseite aus hinzufügen zu können, a bilden wurde anstelle eines Links zu der Produktdetailseite verwendet. Wie Sie dem obigen Code entnehmen können, wird das Formular durch das versteckte Eingabefeld "id", das den Wert des Produkts erhält, eindeutig variant.id.
Da viele Produkte über Optionen verfügen, z. B. Farbe und Größe, ist jede Kombination einzigartig variant.id - auch wenn es nur eine version gibt. Es ist erwähnenswert, dass die Produktdetailseiten für das Magazin entworfen wurden und vorhanden sind. Wenn sie versehentlich mit jemandem verbunden sind, auf den die URL richtig ausgerechnet wurde, oder von jemandem darauf zugegriffen wird, erscheint nichts als fehlerhaft.
Angesichts der Tatsache, dass die neuen 8 Faces für Geräte aller Größen entwickelt wurden, musste das "responsive image problem" gelöst werden. Am Ende empfahl Paravel die Verwendung der Füllung picturefill.js von Scott Jehl. Trent erklärt:
Wir mussten unbedingt die Dateigröße für Bilder minimieren, insbesondere bei der Startseite. Wir haben picturefill.js in der Vergangenheit mehrfach verwendet, einschließlich einer angepassten Version für die Microsoft-Homepage.
Wenn Sie mit picturefill.js nicht vertraut sind, beschreibt es sich selbst als "ein Ansatz für responsive Bilder, den Sie heute verwenden können, der das vorgeschlagene Bildelement unter Verwendung von Spannweiten aus Sicherheitsgründen nachahmt." Es funktioniert sehr gut und wiegt im komprimierten Zustand weniger als 0,5 kb. Damit picturefill.js funktioniert, müssen Sie für jeden "Haltepunkt" eine Anzahl unterschiedlicher Bildpfade definieren. Hier ist das gerenderte Markup von der 8 Faces-Startseite:
Durch das Erstellen von drei "Designeinstellungen" im 8 Faces Shopify-Design kann ein Administrator für jedes der drei unterschiedlichen Haltepunkte unterschiedliche Bilder hochladen. Einmal hochgeladen index.liquid Vorlage verwendet Liquid Code, um auf die relevanten Bilder zuzugreifen:
Zusätzlich wird in der Vorlage eine einfache Wahr / Falsch-Prüfung durchgeführt, um sicherzustellen, dass die Designeinstellung "Heldenbild anzeigen" festgelegt ist. Wenn nicht, wird das Markup einfach übersprungen.
Die Theme-Einstellungen wurden auch verwendet, um die Schaltfläche "Aktuelle Ausgabe kaufen" zu steuern, die das Heldenbild auf der Startseite überlagert. Um das harte Kodieren der Varianten-ID der letzten Ausgabe in die Vorlage zu vermeiden, werden drei Textzeichenfolgen auf der Design-Einstellungsseite eingegeben:
Durch die Verwendung eines Warenkorb-Permalink stellen wir sicher, dass der Benutzer das Magazin auch über den URL-Link erwerben kann, wenn keine JavaScript-Unterstützung vorhanden ist. Wenn Sie direkt zur Checkout-Seite gehen, ist dies nicht der ideale Ablauf. Es ist vorzuziehen, dass der Benutzer auf eine Schaltfläche klickt und zur Warenkorb-Seite wechselt, auf der er die Mengen anpassen und der Bestellung weitere Artikel hinzufügen kann. Zum Glück war das nicht schwer zu erreichen.
Mit der jQuery-Funktion wickeln Das Heldenbild ist in ein Formularelement eingebettet. Ein ausgeblendetes Feld wird dann an das Formular angehängt, das das enthält settings.home_hero_variant_id aus unseren Theme-Einstellungen gezogen. Da der JavaScript-Dateiname das enthält .Flüssigkeit Erweiterung Shopify kann Daten aus den Designeinstellungen einfügen, bevor die Datei bereitgestellt wird. Dies ermöglicht uns das Einfügen der settings.home_hero_variant_id in unseren JavaScript-Code.
Außerdem muss der Code nicht geändert werden, wenn diese ID geändert wird - was praktisch ist. Es gibt viele Verwendungen für diesen Ansatz und dies ist nur ein einfaches Beispiel:
Accentsconagua
/ * Hijack buy-Button auf der Startseite, um das Formular * / $ ('. Hero-unit') zu übermitteln. Wrap (' '); $ ('') .attr (Typ:' hidden ', id:' id ', name:' id ', Wert:' settings.home_hero_variant_id '.) appendTo (' # hero-form '); $ ('a.blackflag'). click (Funktion (e) $ ("# hero-form"). submit (); e.preventDefault ();; Zum Schluss übernehmen wir die Standardfunktionalität unseres Ankers und senden das Formular statt, wenn es angeklickt wird.
Die Site wurde am 1. Mai 2013 mit der Veröffentlichung der sechsten Ausgabe des Magazins erfolgreich gestartet.
Das neu gestartete Homepage-Design Nach Abschluss der ersten Phase wird die Entwicklung fortgesetzt. Später im Jahr 2012 wird der Bereich "Online lesen" der Website hinzugefügt. Dies hat zur Folge, dass jedes Problem zum Lesen über den Browser verfügbar ist.
Insgesamt waren alle am Projekt Beteiligten sehr zufrieden mit den Ergebnissen, wie Elliot bemerkt:
Die Paravel-Jungs sind professionell und machen trotzdem viel Spaß mit ihnen. Das fertige Produkt ist außergewöhnlich. Ich hatte keine Ahnung, was sie produzieren würden, als ich sie in Auftrag gab, aber ich wusste, dass es etwas Großartiges sein würde, was es ist.
Vielen Dank an Trent Walton und Elliot Jay Stocks für ihre Hilfe bei diesem Artikel.
