Share
Typekit hat kürzlich seine Homepage mit einigen neuen Dienstleistungen überarbeitet. Als Typekit zu Adobe stieß, machten sie sich daran, eine neue Art der Handhabung von Zeichensätzen im Web zu finden. Sie haben nicht nur eine relativ einfache Möglichkeit zum Einbetten von Schriftarten im Web geschaffen, sondern sie haben jetzt offiziell eine Desktop-Synchronisierungsoption eingeführt, mit der Creative Cloud-Abonnenten Zeichensätze direkt über Typekit mit ihrem Computer synchronisieren können. Dies ist seit einiger Zeit in einer Beta-Form und bietet eine viel einfachere Route zu lokalen Zeichensätzen, als sie anderswo zu finden!
Haftungsausschluss: Dieser Artikel wurde in keiner Weise von Adobe oder den Mitgliedern des Typekit-Teams gebilligt (wir hoffen trotzdem, dass sie es trotzdem mögen).
In diesem Artikel wird ausschließlich auf die neue Typekit-Homepage eingegangen, und Sie erhalten einige Details zur Implementierung der Marketingelemente.
Wie in diesem Kurs in unserer Reihe How They Did It üblich, werden wir auch einige Kommentare zu den künstlerischen und technologischen Entscheidungen geben und die Konversation für konstruktive kritische Konversation eröffnen.
Wir werden auch versuchen, Alliterationen zu vermeiden.
Typekit gibt es schon eine Weile und war für eine Aktualisierung ziemlich überfällig. So sah es vorher aus:
Dies ist zwar eine sehr schöne Homepage, aber etwas veraltet. Mit dem neuen Design verwendet Typekit einen grafisch zentrierten Kontext, um Schriften neben den Personen und Unternehmen anzuzeigen, die den Dienst verwenden. Bei der Verwendung von Medienabfragen behält die Landing Page den Großteil ihrer primären Design- und Inhaltselemente bis hin zum mobilen Gerät bei. So sieht es jetzt aus.
Einige wichtige Designentscheidungen kennzeichnen die Desktopversion dieses Designs. Der resultierende Effekt vermittelt den Besuchern das Gefühl, dass das Design buchstäblich "out of the box" ist. Wir sehen Beweise dafür auf der gesamten Site.
Zuerst sehen wir die Screenshots der App in der Kopfzeile der Seite unter der Überschrift "Jede Schriftart, die Sie brauchen. Überall, wo Sie sie brauchen." (Übrigens werden wir später über diese Überschrift sprechen.) Die Kreis-Pngs geben uns drei Marketingpunkte, die in direktem Zusammenhang mit dem Dienst stehen: "Tausende von Schriftarten", "Von der Creative Cloud geliefert", "Wählen Sie Ihr Medium". Diese drei Ideen sind für die meisten Designer sofort zugänglich, da die meisten Designer mit der Creative Cloud vertraut sind und sicherlich alle Designer mit Schriften und Geräten vertraut sind.
Durch die Wahl der Kreise wird sofort eine kastenförmige Schnittstelle vermieden. Die Kreise nehmen von links nach rechts zu und geben ein Gefühl von Bewegung und Fortschritt. Keiner der Kreise ist umsetzbar. Es ist auch zu beachten, dass dies auch die einzige Präsenz von Kreisen als grafische Form auf der Seite ist.
Es gibt viele Trends, die in diesem Jahr überwacht werden müssen, und der Einsatz von Paneelen ist einer davon. Wir haben den Aufstieg dieser Schnittstelle gesehen, als Plugins wie jQuery Masonry auf den Markt kamen und als Pinterest sie als primäres interaktives Element populär machte. Typekit verwendet Panels in sechs verschiedenen "Clustern" auf der Seite, wobei jeder Cluster seinen eigenen Inhaltszweck hat.
Der erste Cluster zeigt die Schriftarten selbst und der zweite Cluster zeigt Kunden, die Typekit verwenden:
Der dritte Cluster zeigt, welche Arten von Arbeit Sie mit Typekit jetzt verwenden können, wenn Sie mit Ihrem lokalen Desktop synchronisieren können.
Der vierte Cluster erläutert die Preisgestaltung von Typekit.
Der fünfte Cluster enthält tatsächlich eine FAQ-Auswahl von Panels, die keine Hintergrundfarbe verwenden, sondern nur Typografie und Ikonografie.
Schließlich fungiert der sechste Cluster als "Fußzeile" der Website mit Copyright-Informationen und Links zu allgemeinen Zielen, die sich auf Typekit beziehen.
Diese Cluster bilden die wichtigsten Elemente des Layout-Interesses und verfügen über eine einzigartig gestaffelte Ausrichtung, die Klarheit und Trennung zwischen ihnen bietet und gleichzeitig den Abbruch von einem allgemeineren Layout, das aus Elementen besteht, die natürlich vertikal ausgerichtet sind, fördert. Alle Panels, die einen Hintergrund haben, sind um die Hälfte der Panelhöhe versetzt und verwenden eine vorhersagbare Symmetrie. (Die einzige Ausnahme von dieser Staffelung ist der Preis-Cluster, der eine + Form bildet.) Diese Vorhersagbarkeit ermöglicht, dass diese Blöcke eine Form bilden. Zum Beispiel bildet der erste Satz von Blöcken eine Raute, während der dritte Satz eine diagonale Linie von links oben nach rechts unten bildet.
Schauen wir uns an, wie dieser Effekt erzielt wird.
Hier ist das Markup für den ersten Cluster:
DAS BESTE SIND AUF TYPEKIT
Umwerfende Schriften von Qualitätsgießereien. Inspirierend zum Stöbern und einfach zu bedienen.
Durchsuchen Sie alle Schriftarten
AW-Eroberer geschnitzt
Typofonderie
AW Conqueror ist in mehreren Stilen erhältlich, darunter Inline und Carved. Es ist ein multitalentiertes Titelbild, dessen chromatische Komponenten kraftvoll auf das Layering reagieren.
Siehe: Layer für chromatische Webfonts
Proxima Nova
Mark Simonson Studio
Proxima Nova kombiniert geometrische Merkmale mit humanistischen Proportionen und arbeitet dank ihrer unterschiedlichen Gewichte und Breiten in vielen verschiedenen Kontexten.
Nachrichten Gothic Std
Adobe
Die originale News Gothic, ein Klassiker für Schlagzeilen, Werbung und Verpackungen in Zeitungen, wurde 1908 entworfen - und kleidet sich heute ordentlich im Internet.
Siehe: Schattierung mit CSS
DAS BESTE SIND AUF TYPEKIT
Machen Sie sich keine Sorgen über die Qualität der Schriftarten, der Quellen und Lizenzen. Die Schriftart, die Sie möchten, überall und jederzeit.
Durchsuchen Sie alle Schriftarten
Futura PT
ParaType
Futura, die Quintessenz der geometrischen Sans, hat Generationen von Designern mit ihren mutigen Eigenschaften inspiriert und wurde nun von ParaType fachkundig für das Web vorbereitet.
Brandon Grotesque
HVD-Schriftarten
Brandon Grotesque ist elegant und warm, mit langen Abseilen und abgerundeten Strichenden - ein großartiger Darsteller in Displaygrößen oder für auffällige Kopien.
Kulturista Web
Koffergießerei
Kulturista Web ist eine robuste Slab-Serife, die für Überschriften, Subheads und Navigation geeignet ist. Sie ist in fünf Gewichten mit Kursivschrift erhältlich.
Minion Pro
Adobe
Minion ist eine Adobe Originals-Schrift, die von klassischen Entwürfen der späten Renaissance inspiriert ist, einer Periode von eleganter, schöner und gut lesbarer Schrift.
Siehe: Liste: Gut für die Langform
FF Meta Serif Web Pro
FontFont
FF Meta Serif ist schlank und leserlich mit ausgezeichneter Balance und charmanten Eigenheiten. Es lässt sich gut alleine einstellen oder mit einer Vielzahl anderer Schriftarten.
Siehe: Schriftarten koppeln
Klavika
Prozessart Gießerei
Klavika ist direkt bei Process Type Foundry erhältlich und bietet unendliche Flexibilität und eine Mischung aus humanistischen und geometrischen Einflüssen.
Siehe: Bringen Sie Ihre eigene Lizenz mit
Abgesehen von den verdeckten URLs der Asset-Bibliothek (generiert durch die Ruby on Rails-Asset-Pipeline) ist der Markup ziemlich unkompliziert. Hier ist ein komprimiertes Beispiel:
Das Header-Element wird nur unter 980px angezeigt. Bei einer Containerbreite von 940px sind die Blöcke 300x300 px Quadrate. Verwenden Elemente für die Blöcke wird der Versatz durch Hinzufügen einer Randspitze zu dem Block erreicht
.Blöcke> ul.offset-half Randspitze: 150px; .blocks> ul.offset-full margin-top: 300px; .blocks> ul.offset-three-halfves margin-top: 450px;
Es gibt auch einige Versatzklassen, die die Spalten vom Rand des Gitters ziehen.
.Blöcke> ul.overflow-left Position: absolut; links: -280px;
Die Ausnahme ist die FAQ, die vier statt drei Spalten hat.
Auf vielen der eigentlichen Paneele selbst sehen wir die Verwendung eines "Vorhangs". Wenn Sie den Mauszeiger auf das Objekt bewegen, wird entweder ein Vorhang verschoben oder angezeigt, und der Inhalt wird für das Panel selbst angezeigt. Daraus ergibt sich eine Schnittstelle, die zur Untersuchung und Untersuchung einlädt. Diese Interaktionen basieren auf CSS-Übergängen, die durch Schwebeflug und absolut positionierte Elemente in relativ positionierten Elementen ausgelöst werden.
Schauen wir uns an, wie wir das erreichen könnten.
Wir haben zwei grundlegende Arten von Vorhängen: den Vorhang mit Überlagerung und den Vorhang mit Vorhang.
Wir sehen das folgende Markup für ein einzelnes Feld jeder Art.
Siehe: Liste: Gut für die Langform
Die Designer von Paravel legen Wert darauf, den Websites ihrer Kunden ein qualitativ hochwertiges, responsives Design mit soliden Codes, großer Aufmerksamkeit für visuelle Details und exzellenten Text zu verleihen.
Wir werden dann unsere verschiedenen Übergänge im Schwebeflug einrichten.
/ * Slide Curtain * / #who li.paravel Hintergrundbild: URL (/assets/newhome/who/paravel-ce782f6791c64eee5bf74b72986bceb9.jpg); #who li div height: 220px; Text ausrichten: links; Hintergrundfarbe: rgba (0,0,0,0,8); filter: progid: DXImageTransform.Microsoft.Alpha (Opacity = 0); Deckkraft: 0; -webkit-Übergang: Deckkraft 0,15s linear; -Moz-Übergang: Deckkraft 0,15s linear; -o-Übergang: Deckkraft 0,15s linear; Übergang: Deckkraft 0,15s linear; Polsterung: 40px; #who li: hover div filter: progid: DXImageTransform.Microsoft.Alpha (Opacity = 100); Deckkraft: 1; / * Fade Curtain * / #best li position: relativ; Hintergrundfarbe: # 323232; Überlauf versteckt; Text ausrichten: links; #best li img left: 0; Position: absolut; z-Index: 1; -webkit-Übergang: links .1s Kubik-Bezier (0,0,0.4,1); -moz-Übergang: links .1s Kubik-Bezier (0,0,0.4,1); -o-Übergang: links .1s Kubik-Bezier (0,0,0.4,1); Übergang: links .1s Kubik-Bezier (0,0,0.4,1); #best li: hover img left: -280px;
Die Schwebeflüge auf den Li-Panel-Elementen lösen die Übergänge auf untergeordneten Elementen des Li selbst aus.
Bei der mobilen Größe ändert sich das Layout erheblich. Wir sehen eine geringfügige Änderung im Navigationsbereich, wodurch das Adobe-Badge hochgefahren wird und die primären Elemente auf den zweiten Balken heruntergefahren werden, damit sie sich unter dem Typekit-Logo bewegen können. Wir verlieren die Kreise in der Kopfzeile und bleiben stattdessen mit den drei Marketingpunkten als Unterheader. Wir sehen unseren Inhalt dann in sechs Abschnitte unterteilt, einschließlich der Fußzeile. An diesen Abschnitten ist jeweils ein grüner Kopfbereich angehängt, gefolgt von den vorherigen Panels. Die Panels wurden nun in eine seitliche Liste verschoben. Dies bedeutet natürlich, dass der gestaffelte Effekt nicht auf dem Handy erscheint.
Als Nächstes betrachten wir, wie das CSS für die seitlichen Bildlauffelder geschrieben wird, im Gegensatz zu den gestaffelten Feldern.
Denken Sie daran, wir zeigen die Kopfzeile auf dem Handy und die Panels selbst sollten horizontal scrollen. Dies erreichen wir mit wenigen CSS-Zeilen:
@media (max-width: 979px) section # best .blocks width: 2700px; Abschnittskopf Anzeige: Block; Abschnitt .container .blocks> ul float: left; Rand oben: 0! wichtig; Breite: Auto; Abschnitt .container .blocks> ul> li float: left;
Dieses Muster richtet im Wesentlichen alle Blockfelder horizontal aus, wobei die Gesamtbreite für diesen Abschnitt 2700 Pixel beträgt.
Wir setzen auch das übergeordnete Element (#Inhalt) Überlauf ausgeblendet.
#content overflow: versteckt;
Dies ermöglicht die .Blöcke Element breiter als der Bildschirm sein, ohne zu bewirken, dass sich der Hauptteil des Dokuments über die normale Bildschirmbreite von 100% hinaus ausdehnt, sodass der horizontale Bildlauf diskret vom Rest der Seite aus erfolgen kann.
Bei mobilen Geräten und Tablettbreiten sehen wir auch eine traditionellere Fußzeile, die die Stelle der Panel-Drive-Fußzeile ersetzt.
Es ist interessant festzustellen, dass auf der Seite kaum JavaScript ausgeführt wird. Der Großteil des ausgeführten JavaScript bezieht sich auf die auf der Seite verwendeten Typekit-Schriftarten.
Typekit löste sich von einer riesigen Anzahl von Marketing-Seiten, die in den letzten Jahren aufgetaucht waren, und entschied sich für Scrollen nicht für Animationsauslöser oder für das Auslösen von Parallaxen. Obwohl wir nicht genau sagen können, warum diese Entscheidung getroffen wurde, könnte dies eine Rückkehr zu weniger ausgelasteten Interaktionen basierend auf direktem Mauszeiger und einen Übergang zu einem neuen Trend signalisieren.
Die Schriftart für die Überschrift. Die Schriftarten für die Überschriften scheinen eine ungerade Wahl zu sein, wenn man die Schriftart auf dem gesamten Rest der Seite auswählt. Die Platten- und Kursivschriftarten sind mit einer beträchtlichen Anzahl von Anzeigeeigenschaften versehen, die man in einer interaktiven Site oder auf einer Filmwerbeseite erwarten könnte.
Sie an der Spitze von Typekit zu haben, ist nur akzeptabel, weil Typekit Produkte bietet. Dennoch scheint dies das fraglichste Gestaltungselement zu sein.
Probleme mit der Netzhaut. Während viele Bilder scharf erscheinen, sind die Kreis-PNGs im Header auf Retina-Bildschirmen sehr deutlich pixeliert. Dadurch fühlt sich das Produkt weniger verfeinert an, als von einem Adobe-Produkt erwartet würde, und erinnert an Adobes spätere Einführung von Retina-Grafiken für Photoshop und andere Desktop-Anwendungen. Die Symbole im FAQ-Bereich sind eine weitere verpasste Gelegenheit für die Verwendung von vector, obwohl dies viel weniger auffällig ist.
Alles in allem ist die neue Typekit-Landingpage eine hoch entwickelte und einzigartige Ausführung einer Aktualisierung der Webpräsenz, die eine Änderung des Produktangebots begleitet. Mit einem überzeugenden Inhaltsfluss und einer gut ausgeführten künstlerischen Ausrichtung erhöhen die Einfachheit der Interaktionen für diese Website die Effektivität des Verkaufsgesprächs.
Was war für Sie besonders interessant auf dieser Seite? Über welche Teile des Projekts möchten Sie mehr wissen? Lass es uns in den Kommentaren besprechen!
Accentsconagua