Share
Sind Sie bereit für die Dosis typografischer Großartigkeit von Webdesign? Ich wette, du bist es! Max nimmt den Monat frei, aber er hat uns eine Liste von 15 Websites gegeben, auf denen einige der besten Typografie für Sie und Ihre Jungs zu sehen sind. Lass uns reinschauen!
Es ist großartig, über die technischen Regeln der richtigen Typografie zu sprechen. Aber wo der Gummi wirklich auf die Straße kommt, können wir uns Beispiele der Typografie in Aktion ansehen und analysieren, 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.
Jeden Monat werden wir zwischen 10 und 20 Beispiele für exzellente Typografie im Webdesign betrachten ... aber noch wichtiger, Wir analysieren auch, warum die Typografie funktioniert. Lassen Sie uns in das Angebot dieses Monats eintauchen:
Es ist viel zu selten, dass ich auf Websites wie diese stoße… ehrlich. Es ist ein Ansatz, den Sie häufig im Druckdesign sehen, aber selten ins Web gebracht werden. Was sind die Komponenten??
Sehen Sie sich an, wie einfach das Design ist… Es gibt kein Element, das ein Designstudent im ersten Jahr nicht schaffen kann…, aber wie elegant und anspruchsvoll es ist Gefühl auf dem Bildschirm? Darüber reden wir, wenn wir über inspirierende Typografie sprechen. Durch die Verwendung eines einfachen, gut strukturierten Layouts kann der Designer Vertrauen und Professionalität ausdrücken, bevor der Besucher den Text überhaupt liest.
Manchmal erfordert ein Design etwas Außergewöhnliches, um die Aufmerksamkeit des Besuchers zu erregen. Das macht die Amazee Labs-Website so gut. Amazee verzichtet nicht nur auf die Verwendung von Standard-Webfonts, sondern kombiniert auch den HTML-Settyp mit dem bildbasierten Typ, um ein hohes Maß an Kreativität und Spannung zu bieten. In vieler Hinsicht bricht Amazee die Regeln… aber es ist, wie sie es tun, was es zum Leuchten bringt:
All dies trägt dazu bei, das Ordnungsgefühl zu bewahren, selbst wenn sich die Typauswahl auf der Karte befindet.
Die Finch-Site ist erstaunlich wenig in der Typausnutzung. Lassen Sie sich nicht von dem riesigen Logo auf der Titelseite täuschen. Alles in diesem Design ist (auf eine gute Art und Weise) unauffällig..
Bei der Verwendung von type auf einer leeren Seite hat die Seite das Gefühl, dass sie, wenn sie richtig ausgeführt wird, mehr tut als nur Text.
Wir haben Image Mechanics in unserem Beitrag über jährliche Webdesign-Trends erwähnt. Das Design weicht vom Standard-UI-Navigationsparadigma ab, indem die eigentlichen Textblöcke (im Gegensatz zu einzelnen Wörtern oder Schaltflächen) zur Navigation verwendet werden. Dies zieht den Besucher an und erinnert ihn daran, dass hinter jedem Link konkrete Ideen stehen. Der tatsächliche Körperinhalt des Designs ist bemerkenswert gut gestaltet - es fühlt sich fast wie eine Zeitschrift an, mit großem, fetten Headertext, gut gepaarten Illustrationen und subtilen Farbwechseln (wie Schmuckfarben in einem Print-Zine). Ich liebe auch das riesige Logo auf ihrer "Meet the Makers" -Seite!
Okay, ich gebe zu, ich bin sofort begeistert von der riesigen, reizvollen, farbradradiösen Illustration… so sehr, dass die Typografie ohne sie sogar schrecklich sein könnte (ist es nicht) und ich würde es wahrscheinlich nicht bemerken. Der Punkt, den ich mit diesem Punkt zu versuchen versuche, ist, dass das richtige Verbinden des Bildes mit dem Typ (durch Größe, Stil, Farbe usw.) Wunder bewirken kann, um ein einprägsames Site-Design zu erstellen. Möchten Sie einen bleibenden Eindruck hinterlassen? Machen Sie sich einige Notizen zu Kaleidoskops mutiger Herangehensweise.
Die Fe.rocious-Site ist ein Beispiel, bei dem sich jeder Teil der Site "entworfen" fühlt. Was bedeutet, dass den Standard-Browsereinstellungen nichts zu ändern übrig geblieben ist… Dies kann oftmals eine schlechte Sache sein, wenn es nicht richtig gemacht wird, aber in den Händen der Designer von Fe.rocious fühlt es sich schick und stylisch an.
Ich werde nicht zu viel über dieses Design sagen, weil ich denke, dass es ziemlich gut für sich selbst spricht. Das Layout und die Verwendung des Typs ist ziemlich normal, aber wo es interessant wird, sind die großen Bilder, die im Schieberegler verwendet werden. Denken Sie daran, dass Web-Typografie auch in Bildern vorhanden sein kann. Die Erstellung eines eigenen visuellen Stils für bildbasierte Typografie kann zu einem ansonsten gewöhnlichen Layout viel beitragen.
Ich gebe als erster zu, dass ich Condensed Sans-Serif-Schriften liebe… aber sie können schief gehen, wenn sie nicht richtig verwendet werden. Hier stehen sie als Kreuzung zwischen Überschrift und Akzentschrift im Mittelpunkt. Das Ergebnis: genau die richtige Menge an Geschrei. Durch die Integration der fantastischen Skriptschrift können Sie auch den steifen Formen des League Gothic-Gesichts ein wenig Stil verleihen. Beachten Sie, wie sich die beiden Schriftarten gegenseitig ausgleichen. Gut? Ja es ist toll.
Die Infinvision-Site-Struktur ist einfach und zurückhaltend. Dies hilft, die fantastischen kleinen typografischen Illustrationen hervorzuheben, mit denen sie ihr Unternehmen vorstellen. Weißraum funktioniert hier überraschend gut - sagt Nuff.
King Size ist die einzige Vorlage auf dieser Liste. Typografisch gefällt mir, dass es sich überhaupt nicht wie ein WordPress-Theme anfühlt. Das große Band, kombiniert mit dem Lorbeer-Design, lässt dieses Gefühl der Ästhetik stark und römisch erscheinen - etwas, das Sie (wenn überhaupt) nur selten in Schablonendesigns sehen, die sich normalerweise starr und vorhersehbar anfühlen.
Das Logo für Devin's Heaven ist großartig, aber an der Website gefällt mir wirklich, wie der Typ für die Blogbeiträge gestaltet ist. Der Intro-Absatz hat die volle Breite und der Rest der Beiträge wird auf den standardmäßigen 2-Spalten-Inhalts- / Seitenleistenansatz zurückgesetzt. Es ist so einfach… aber der Intro-Absatz mit voller Breite gibt Ihnen das Gefühl, dass die gesamte Seite diesem einzelnen Artikel gewidmet ist. Wo sich andere Blog-Layouts wie Vorlagen anfühlen, in die Artikel einfach passen, fühlt sich dieses Thema in erster Linie an.
Der Standort der Greater Dunnellon Historical Society macht einfach Spaß. Betrachten Sie zunächst den Zweck der Site: Bewahren Sie die Geschichte von Dennelon für die Community. Als solches ahmt die Typografie innerhalb der Website einen Großteil der Merkmale der Gesellschaft nach, die sie bewahren. Es gibt nichts wildes und verrücktes… aber alles von der mehrspaltigen, von Newpaper inspirierten Körperkopie bis zu den Tasten wirkt authentisch (mit ein paar modernen Updates). Das Kronenprofil, wunderliche Illustrationen und Regale verleihen der Seite die richtige Tiefe, damit sich diese Site wirklich wie eine Mini-Time-Kapsel für diese Community anfühlt.
Das Layout der Website von Stuart Hobday ist ein Hauch frischer Luft, nachdem Sie einige dieser sehr illustrativen Websites betrachtet haben. Sein stark minimalistischer Ansatz fühlt sich einfach und unprätentiös an. Alles ist logisch und ohne Verzierung platziert ... manchmal kann ein Designer damit umgehen Weniger sagt viel mehr darüber, wie viel Reife und Disziplin er hat. In einer Welt von extravaganten Portfolios und hartem Wettbewerb braucht es ein gewisses Selbstvertrauen und eine Vision, um ein derart untertriebenes Design zu kreieren.
Wir haben Ryans neue Website in unserem Web Trends-Artikel 2011 behandelt, aber es ist ehrlich genug, um es noch einmal zu erwähnen. Ryan mischt Art und Illustration nahtlos in einer schönen vertikalen Bildlaufseite. Der kombinierte Effekt erzeugt einen Eindruck von Abenteuer und kreativer Erkundung…, der perfekt dazu geeignet ist, sich bei potenziellen Kunden zu bewerben.
Die Seite von Pat Dryburgh steht im Gegensatz zu Ryan Scherfs… aber nicht in einem schlechten Zustand. Pat verwendet ein starres, gut strukturiertes Layout, eine anspruchsvolle Schriftauswahl und eine interessante Mischung aus positivem und negativem Raum, um eine Ästhetik zu erzeugen, die sich sicher und professionell anfühlt. Ich mag besonders die großen Spalten mit Leerräumen links von den großen Schriftbereichen (unter dem Hauptbild). Könnte er diesen Raum mit etwas gefüllt haben? Sicher… aber was er beschlossen hat, das Design wegzulassen, spricht für seinen Zwang als Designer.
Nun, es ist wieder die Zeit der Post. Wir hatten einige Lacher, einige Schreie, aber zusammen haben wir es bis zum Schluss geschafft, und hier muss ich dich verlassen. Wie ich oben erwähnt habe, Wenn ich diesen Monat nicht Ihren eigenen Favoriten getroffen habe, teilen Sie ihn bitte unten in den Kommentaren mit! Ich werde es auf jeden Fall im nächsten Monat nachschauen!
Weitere Informationen zu Web-Typografie finden Sie in meinem Beitrag zur Auswahl der richtigen Schriftart: Ein praktischer Leitfaden zur Typografie im Web!
Wir haben auch eine großartige Liste von Artikeln in der Kategorie Web Typography erstellt ... also sieh dir auch diese an!
Accentsconagua