Kategorien
Webdesign

Typografie: Typetoken und andere Inspirationsquellen

In den letzten Jahren hat sich die Webtypographie sehr schnell entwickelt. Sie macht heute einen bedeutenden Teil der Webgestaltung aus. Die Wahl der Schriftart, der Abstände, der Ausrichtungen des Textes beeinflussen die Lesbarkeit der gegebenen Informationen und auch die Lust des Nutzers, auf der Webseite zu verweilen. Aber nicht nur die elementare Lesbarkeit ist für eine Webseite wichtig. Ein guter Webentwickler will stets etwas möglichst Einzigartiges produzieren, was die von ihm gemachte Webseite von allen anderen unterscheidet, ohne natürlich dabei unbenutzbar zu werden ;-) Daher ist es sehr hilfreich, Inspirationsquellen zu kennen und regelmäßig zu besuchen.

Im folgenden Beitrag stellen wir ein Online-Magazin für Typographie vor, welches genau diesem Zweck dienen soll: Typetoken. Zusätzlich listen wir am Ende des Beitrags ein paar weitere Inspirationsquellen.

Was ist Typetoken?

Typetoken ist ein Online-Magazin, welches von dem Designer-/Developertrio Mike Sullivan, Mark Milic und David Cole betrieben wird. Das Magazin bietet eine grosse Auswahl an typographischen Arbeiten aus aller Welt. So war es nicht einfach, zu entscheiden, welche Werke wir als Beispiele zeigen wollen. Die folgenden Designs aus verschiedenen Kategorien repräsentieren das Angebot unseres Erachtens ganz gut:

Visuelle Sprache

Eine kleine Sammlung von Chris Rushing, einem Designer und Graphiker aus Brooklyn.


Visuelle Sprache 1


Visuelle Sprache 2


Visuelle Sprache 3

Icondesign

Beispiele aus der Rubrik Icondesign liefern einige Werke der Gruppe Always With Honor.


Icondesign: Facebook Table


Icondesign: Wired Dogs


Icondesign: World Flags

Schriftarten

In dieser Rubrik haben wir uns für die Werke von Karen To entschieden. Im vorgestellten Projekt „Dead Words“ verwendet sie ungewöhnliche Schriftarten, um nicht mehr verwendete englische Wörter darzustellen.


Schriftarten: „Yex“


Schriftarten: „Pamphagous“


Schriftarten: „Famelicose“

Weitere Inspirationsquellen zum Thema „Typographie“

Typetoken ist nicht die einzige gute Inspirationsquelle. Einige weitere finden sich in der folgenden kleinen Liste:

(dpe)

Kategorien
Webdesign

Modern und kostenlos: SweetiePlus, Freshy Icons, Foundation

Icons erfreuten sich schon immer großer Beliebtheit. In den letzten Jahren jedoch hat die Verbreitung der Symbolzeichen siegeszugartige Ausmaße angenommen. Originelle, kreative Icons sind Details, ohne die man nicht auskommt. Völlig unentbehrlich sind die kleinen Bildzeichen im mobilen Webdesign. So können lange Funktionsbezeichnungen kleinen, aussagekräftigen Symbolen weichen, was den zur Verfügung stehenden Bildschirmplatz erweitert. Deshalb und weil es so schön ist, setzen wir bei Dr. Web immer wieder einen Fokus auf die Suche nach herausragenden Iconsets.

SweetiePlus Icon-Set von Joseph North

Als Erstes möchten wir mit SweetiePlus ein Iconset von Joseph North präsentieren. Joseph North ist Designer bei Sublink Interactive. Er entwickelte das SweetiePlus-Icon-Set mit einem Symbolumfang von 120 Icons. Die Bildzeichen eignen sich hervorragend sowohl zur Webseiten-, wie auch zur App-Entwicklung. Alle Icons stehen in Auflösungen von 24×24px und 16×16px zur Verfügung. Sie lassen sich kostenlos im PNG-Format (mit Transparenz) herunterladen und sowohl in privaten als auch in kommerziellen Projekten verwenden. SweetiePlus ist unter der Creative Commons Lizenz CC By-SA 3.0 veröffentlicht. Damit dürfen auch Veränderungen vorgenommen werden, diese müssen dann aber unter gleicher Lizenz verfügbar gemacht werden.


SweetiePlus: Ein Ausschnitt

Freshy Icon-Set von Martin Karasek

Freshy Icons wurden von Martin Karasek, einem UI- und Icondesigner aus Prag entwickelt. Das Freshy Icon-Set beinhaltet 99 Icons, welche man im PSD-Format kostenlos herunterladen kann. Die Auflösung aller Icons beträgt 32×32px. Im Set sind Bildzeichen für nahezu jeden Zweck enthalten. Wichtig: In kommerziellen Projekten sollte unbedingt auf die Webseite des Entwicklers verwiesen werden.


Freshy Icon-Set: Ein Ausschnitt

Foundation Icon-Fonts von ZURB

ZURB ist ein Team von Designern, die vor allem durch ihre kleinen Tools bekannt geworden sind. Nun veröffentlichten sie die Foundation Icon-Fonts. Es handelt sich um drei Icon-Sets mit über 100 Icons, welche zum kostenlosen Download auf der Homepage des Teams bereit stehen. Diese Sets unterscheiden sich von SweetiePlus und Freshy dadurch, dass sie nicht als PNG, sondern als Font vorliegen. In den Download-Dateien findet man Sample-Files mit HTML, CSS und den jeweiligen Fonts. Auf die gewünschten Fonts wird mittels des CSS @font-face-Attributs zugegriffen. Mit Hilfe von CSS lassen sich die Farbe und Grösse der Icons anpassen, was den Einsatz sehr flexibel macht. Es lohnt sich in diesem Zusammenhang auch ein Blick auf das jüngst bei uns vorgestellte Tool Fontomas.


Foundation Icon-Fonts: Ein Ausschnitt

(dpe)

Kategorien
Webdesign

Paperfold CSS: HTML5 kreativ eingesetzt

Grundsätzlich kann man schon zufrieden sein, wenn die eigene Website einwandfrei strukturiert ist und gut funktioniert. Aber schöne, kreative Elemente können den Gesamteindruck stark verbessern. An dieser Stelle macht der Berliner Entwickler Felix Niklas einen Vorschlag. Im Mozilla Developer Network stellte er eine Demo namens Paperfold CSS bereit. Paperfold CSS ist eine neue interessante Anwendungsmöglichkeit, die in der Demo eine Kommentarliste zusammenfaltet.


Interessanter optischer Effekt: Kommentare im Harmonika-Look

Paperfold CSS: Wie funktioniert es?

Für seine Demo-Seite verwendete Felix Niklas HTML5, insbesondere Javascript und CSS3. Die Funktionsweise der Paperfold-Demo ist eigentlich ganz einfach. Kommentare werden im Markup als Ansammlung von <section>-Elementen dargestellt. Die Höhe des jeweiligen Kommentars wird anhand seiner Darstellung im DOM mit Javascript ausgelesen. Ebenfalls wird die Anzahl der Kommentare ermittelt. Die Trennlinien zwischen Kommentaren stellen optisch Falten dar. Die durch diese Falten unterteilten Kommentare werden nun mittels CSS und Javascript manipuliert. Es entsteht der optische Eindruck eines gefalzten Flyers durch eine Drehung der <section>-Elemente mit CSS-Transforms und JavaScript-Animation.

Technisch gesehen spaltet Paperfold Tochterelemente von einem DOM-Baum und legt diese im Cache ab. Die Tochterelemente werden dann in vorher festgelegten Raumkoordinaten im 3D-Raum positioniert. Im nächsten Schritt werden die im Cache abgelegten Tochterelementen „zusammengeklebt“ und samt den Falten nun wieder im DOM abgelegt. Das Ein- und Ausklappen wird über Javascript mit Hilfe von CSS-Klassen visible und hidden realisiert.


Paperfold CSS hinter den Kulissen

Um den Effekt im dreidimensionalen Raum sehen und so besser verstehen zu können, sollte das „Show Helper“ benannte Häckchen auf der Demoseite aktiviert werden.

Wird Paperfold CSS von allen Browsern unterstützt?

In den aktuellen Versionen von Chrome und Safari funktioniert Paperfold CSS einwandfrei. Der Internet Explorer kann den Effekt gar nicht darstellen, auch in der aktuellen Version 9 nicht. In älteren Firefox-Versionen wird der Effekt nicht sauber ausgeführt: In den Falten sind Lücken vorhanden. Im Firefox 12 passt die Darstellung nahezu einwandfrei. Im Hinblick auf die Performance bestehen nach eigenen Angaben des Entwicklers noch deutliche Optimierungspotenziale. Dennoch ist die Technik interessant und zeigt, was man mit CSS und Javascript kreativ erreichen kann.

Der Quellcode von Paperfold CSS ist frei verfügbar und lässt sich als .zip-Datei herunterladen. Der eigenen Kreativität in der Abwandlung des Beispiels sind damit keine Grenzen gesetzt.

Links zum Beitrag:

(dpe)