Share
Sind Sie bereit für die Dosis typografischer Großartigkeit von Webdesign? Ich wette, du bist es! Connor übernimmt in diesem Monat die Führung, während Brandon ein paar Schritte zur Datensicherung durchführt - und wir haben eine Liste von 17 Websites, auf denen einige der besten Typografien für Sie und Ihre Jungs präsentiert werden. In diesem Monat haben wir sogar einen speziellen Bereich für einige (ish) webbasierte Typografie- und Layout-Tools, die Ihnen das Leben etwas erleichtern. Lass uns reinschauen!
Sprechen über die technischen Regeln der richtigen Typografie ist großartig? Aber wo der Gummi wirklich auf die Straße kommt, ist, wenn wir Beispiele typografischer Art in Aktion betrachten und analysieren können, warum es funktioniert. Eine der schönsten Eigenschaften der Typografie ist, dass ähnlich wie bei den Sprachen, in denen wir miteinander kommunizieren, die Art und Weise, in der Sie ein Design verwenden, diesem eine Stimme verleiht. Sie können schreien und schreien oder Sie können leise flüstern? Es liegt an Ihnen und wie Sie möchten, dass Ihre Nachricht gehört wird.
Wir werden jeden Monat zwischen 10 und 20 Beispiele für exzellente Typografie im Webdesign betrachten. Aber noch wichtiger ist, wir analysieren auch, warum die Typografie funktioniert. Lassen Sie uns in das Angebot dieses Monats eintauchen:
SquareSpace hat in der Vergangenheit eine gut durchdachte Typografie auf ihren Websites, die jedoch alle Stationen des diesjährigen SXSW-Events ausgemacht haben. Beim Inhalt der Website geht es nur darum, dass Leute verrückte Fotos von der Veranstaltung veröffentlichen, aber werfen Sie einen Blick darauf, wie gut sie angeordnet sind. Schön Schlagzeilen setzen? Viel Abwechslung im Layout? und subtile Hintergrundbilder / Texturen, die sich auf die Typografie alter beziehen. Die angesagte, ultramoderne Schädelillustration schadet auch nicht.
Die Site ist nicht riesig, einige SS hat es gut gemacht, die Dinge frisch und interessant zu halten, wenn Sie die Seite nach unten scrollen. Wenn Sie aufpassen, gibt es wirklich keinen Standard für die Typografie (über die gleichen Schriftfamilien hinaus) - die Größe ist überall vorhanden und die Platzierung? Das ist in diesem Fall durchaus akzeptabel, da jeder einzelne Abschnitt (dh das, was an einem Punkt auf einem Bildschirm sichtbar ist) in Harmonie mit sich selbst arbeitet. Die Farben stammen alle von derselben allgemeinen Palette, und alles fühlt sich an, als wäre es an einem Raster befestigt, auch wenn Sie es nicht ganz festnageln können.
Grip Limited ist eine der Sites, auf die Sie hin und wieder stoßen und die so unglaublich unkonventionell ist, dass Sie einfach nur ein paar Minuten sitzen müssen. Ich habe das seltsame Gefühl, dass ich schon beim Anschauen zu einem besseren Typographen werde. Die Typenvielfalt ist so vielfältig, dass die Site ohne die einheitliche Monochrom-Palette wahrscheinlich schwer zu sehen wäre. Die meisten Usability-Experten mögen sagen, dass dies selbst in seinem jetzigen Zustand völliger Quatsch ist, aber ich behaupte, dass diese Art von Spaß, die "Schrotflinte", der Typ ist, genau das ist, was Webdesigner von Zeit zu Zeit nachgeben müssen.
Werden Sie dieses Layout immer wieder für Geschäfts- oder Unternehmensprojekte wiederverwenden? Natürlich nicht, aber wenn Sie nur einen kleinen Bissen von dieser Site nehmen, können Sie ein ansonsten gewöhnliches Projekt aufpeppen, an dem Sie gerade arbeiten. Zum Beispiel?
Burton ist ein bisschen anders im Vergleich zu Grip Limited. Es ist sehr gut organisiert, in einem starren Blocklayout untergebracht und einfach zu bedienen. Werfen Sie jedoch einen genaueren Blick darauf, und Sie können wahrscheinlich sehen, was ich diese beiden Websites in dieser Liste zusammengestellt habe. Das Layout selbst ist zwar recht gut strukturiert, die eigentliche Typografie der Website ist jedoch weit von dem entfernt, was Sie normalerweise im Internet sehen - und ähnelt viel mehr dem, was Sie vielleicht in einem Snowboard-Magazin oder -Katalog sehen. Der Typ wird in Kreisen und anderen ungewöhnlichen Web-Shapes festgelegt, um jeder Seite das richtige visuelle Interesse zu geben. Sie haben sich auch in der Info-Grafik und anderen vereinfachten Abbildungen in einigen gewöhnlichen Rasterblöcken verstreut, um die Monotonie und den Rhythmus jeder Seite aufzubrechen.
Diese Version der Burton-Site gibt es schon eine Weile? und doch fühlt es sich immer neu und frisch an, wenn ich es auschecke. Durch einfaches Austauschen der Fotos und der Schlüsselfarben können sie für jede neue Saison eine viel höhere Kilometerleistung erzielen.
Impact Media verwendet im Hauptschieberegler und auf der gesamten Website verschiedene Schriftarten, Farben und Größen. Wie bei der Schriftart - Impact - ist die Auswahl der Typografie auf dieser Website mutig, große Schriftarten, die sich stark von ihren Hintergründen abheben.
Ich liebe den aktuellen Stil der fetten Skript-Schriftarten im Web und Impact Media verwendet sie in der zweiten Zeile, um einen schönen, einladenden Effekt zu erzeugen.
Gaz Battersby ist ein Grafikdesigner aus Leeds, UK, dessen minimalistische Website als sein Portfolio fungiert. Die Site verwendet in ihrem gesamten Design eine Serifenschriftart. Die Elemente werden jedoch nur kontrastiert, indem der Schriftstil (kursiv) anstelle einer neuen Schriftart geändert wird. Dies führt zu einem einfacheren, saubereren Typografieschema.
Die Website von Battersby verwendet auch Farbe, um eine Erbe aufzubauen, wobei seine Überschriften in türkisfarbenen Kreisen eingeschlossen sind, um die Aufmerksamkeit des Benutzers zu erregen.
Ich werde nicht zu viel über SURROUND sagen, denn es gibt nicht viel zu sagen. Es ist eine Erinnerung daran, dass manchmal ein einfacher Ansatz für Layout und Typografie einwandfrei funktioniert. Kein unnötiger Schnickschnack, nichts zwischen Besucher und Inhalt. Einfach nur funktionierende Techniken, die eine Nachricht übermitteln.
Invisible Creature ist eigentlich eines meiner Lieblingsstudios der Welt? zurück bis zu der Zeit, als sie als Asterik Studio zusammengearbeitet wurden. Lange Geschichte kurz: Sie erstellen Kickass-Poster, Albumcover und andere lustige Dinge. Was ich an dieser Site mag, ist ihre Kontrolle und Disziplin. Als führendes "Rock / Metal" -Studio könnten sie genauso einfach eine Website entwerfen, die sich auf diese Seite ihrer Arbeit richtet: wild, abreibend, chaotisch. Stattdessen haben sie sich für klare Linien, einfache Farben und serifenlose Schriftarten entschieden - was letztendlich ihre Arbeit für sich selbst sprechen lässt.
Feed Me ist ein einseitiges Webdesign, das mithilfe von Typografie ein sauberes Farbschema auf der gesamten Seite erstellt. Der Kontrast zwischen der Standardschriftart und einer kräftigeren Pinselart erzeugt eine einfache Erbenfolge, die den Schwerpunkt auf Schlüsselbegriffe legt.
Feed Me hat als ganzes Webdesign seine eigenen Vorzüge und die Typografie ist ein Schlüsselelement für seinen Erfolg. Die geschwungenen grünen Schriftarten stimmen mit dem Naturthema des Webdesigns überein, das ich liebe.
Es ist schwierig, den genauen Grund für den Effekt anzugeben, der von der Website dieses Grafikdesigners erzeugt wird, aber ich weiß, dass es ein großartiger ist!
Bring meinen Boss zum Nordkap ist eine interessante Website. Ein belgisches Web-Design-Unternehmen - Inventis - versucht, einen 545-Kilometer-Zyklus zu nutzen, um Facebook-Likes zu erhalten. Die Website selbst verwendet eine interessante Auswahl an Typografien und betont Farbe, um die wichtigsten Teile jeder Aussage hervorzuheben (zum Beispiel "5000 Likes" und "Bike 545km")..
Die Farbe des Textes auf dieser Seite stimmt mit dem Hintergrund überein, auf dem er sich befindet, wie im braunen Text der Titelbeschilderung zu sehen ist. Inventis verwendet auch innere Schattierungen, um den Text von seinem Hintergrund zu unterscheiden, wenn dies erforderlich ist, jedoch nicht, wo dies nicht der Fall ist (z. B. Meilensteine auf dem Radweg)..
Wie die Website von Gaz Battersby verwendet Wes Wes Bos wenige verschiedene Schriftarten in seinem Design und wählt stattdessen einen Ribbon-Hintergrund für seine Editoren, um seine Hierarchie zu erstellen. Ganz einfach, ich liebe den Kontrast zwischen der Skriptschriftart und der Serifenschrift und die absolute Betonung auf seinen Jobtiteln.
Obwohl die W3C-Website keine neue Website ist, ist die HTML5-Logo-Website von W3C aus vielen Gründen ein hervorragendes Beispiel für eine gute Typografie. Dazu gehört die Verwendung einer schönen, fetten, komprimierten Schriftart in Titeln, die der des Namensgebers der Seite entspricht.
Die Pargraphen auf der Seite sind auch so angeordnet, dass sie für den Endbenutzer leichter lesbar sind.
Wie Sie wahrscheinlich aus dem Screenshot entnehmen können, handelt es sich nicht um eine neue Website. Bei anderen Typografie-Zusammenfassungen erschien es jedoch immer wieder in so großer Häufigkeit. Ich würde es als eklatante Unterlassung betrachten, sollte ich mich dazu entschließen, es nicht einzubeziehen. Chrip war die offizielle Entwicklerkonferenz von Twitter, die letztes Jahr um diese Zeit stattfand.
Ich habe einmal eine Daumenregel über die Typografie gelernt: Verwenden Sie nicht mehr als drei Schriftarten. Während Chrip den Eindruck einer Menge Aktivität vermittelt (etwas, das Sie wirklich für ein Confernece erstellen möchten), kann ich nur drei verschiedene Schriftarten zählen, die verwendet werden, wenn das Logo ignoriert wird.
Ich liebe besonders den Titel in Jeremy Churchs Portfolio. Die Betonung des "the" sieht fantastisch aus, lenkt jedoch mehr Aufmerksamkeit auf das Hauptziel "Lärm reduzieren". Abgesehen von seinen kühnen, schattierten Titeln verwendet der Rest des Designs eine sehr einfache, serifenlose Schrift, die den Hauptkontrast stärker hervorhebt.
Black Ant Media verwendet eine Reihe von sehr glatten Gesichtern, die erstaunlich aussehen, aber schwer zu sagen, warum. Black Ant Media entscheidet sich dafür, dieselbe Schriftart anstelle von vielen zu verwenden und variiert nur Größe, Farbe und Gewicht, um die Hervorhebungen verschiedener Elemente zu unterscheiden.
Wie einige der anderen Beispiele dazu verwendet Black Ant Media auch farbige Hintergründe anstelle von Skalen, um Titel in der visuellen Hierarchie anzuheben.
Premium Pixels ist ein WordPress-Theme, das die Liste aufgrund ihrer Relevanz für einige der aktuellen Typografiestandards erstellt, die in Brandons neuem Artikel über Typografie diskutiert werden. Der laute Hintergrund wird durch einen weißen Textschatten, der Tiefe vermittelt, mit dem Text auf der Seite kontrastiert. Jeder Beitrag auf der Seite wird auch mit einer kompakten, fetten Schriftart überschrieben.
Jeder der Beiträge in diesem WordPress-Design hat große Zeilenabstände, so dass es für das Auge viel einfacher zu lesen ist und die Ethik der großen Auffüllung für jedes Element auf der Seite offensichtlich ist.
Es gibt auch ein Serifengesicht zwischen den Metadaten jedes Beitrags.
Als Randbemerkung ist die neueste Neugestaltung der Website von Orman Clark in dieser Liste ebenfalls erwähnenswert, da sie einige großartige typografische Layoutprinzipien veranschaulicht. Sauber, einfach und gut organisiert. Hier sind ein paar Screenshots:
Webdesigner sprechen viel über die Wiederherstellung von "Print-Ästhetik" im Web. Aber normalerweise meinen Designer, dass sie einfach reiche Texturen, verrückte unstrukturierte Layouts und viele Eckenschatten verwenden Trompe l'oeil Auswirkungen. Selten erinnern sich die Designer wirklich daran, dass Print-Typografie oft genauso strukturiert ist wie der Text im Web. Pelicanfly vereint das Beste aus beiden Welten (meiner Meinung nach), indem es einfache Spaltenstrukturen, typografische Symbole und zeitgenössische CSS-Effekte verwendet, um eine denkwürdige Site zu erstellen. Ich vermute, dass es auch für Tablets gedacht ist, denn es gibt einige Fälle, in denen Sie den Bildschirm zum Lesen drehen müssen.
Kostenloses Tool: Dies ist ein ziemlich neues Werkzeug, das ich neulich überquerte. Damit können Sie im Wesentlichen an der Basistypographie für ein Projekt basteln, bis alles perfekt ist. Dann spuckt es das CSS (3) aus, das den von Ihnen erstellten Stil generiert. Ich bin mir sicher, dass es eine Handvoll ähnlicher Web-Apps gibt, aber diese erschien mir als eine der wertvollsten, einfach wegen der großen Menge an Basteleien, die Sie tun können, und die Benutzerfreundlichkeit.
Accentsconagua