Fortsetzung von “Navigationsdesign – Die passende Architektur finden.”

Optisch werden bei der Erstellung von Navigationssystemen sehr oft Metaphern herangezogen. Die wohl bekannteste Metapher ist die Büro-Metapher bei Betriebssystemen. Im Gegensatz zu Betriebssystemen hat kein einheitlicher Standard für Websites durchgesetzt. Sehr oft werden stark abstrahierte Navigationsmodelleverwendet.

Je nach Zielgruppe und Zweck der Website können hier aber auch durchaus kreative Konzepte verfolgt werden. So könnten Karteikarten, Pinwände, Gebäudepläne, Landkarten, etc. verwendet werden. Wichtig hierbei ist allerdings, dass vor allem bei besonders kreativen und unüblichen Varianten berücksichtigt wird, dass darunter vor allem Usability und Seriosität einer Website leiden können.

Beispiele
Am weitesten verbreitet ist die Karteikartenmetapher, wie sie hier beispielsweise vom Reiseportal Tiscover verwendet wird. Zusätzlich wird hier auch noch mit geographischen Karten gearbeitet - einer Anderen Metapher.

Tiscover Navigation

Clear Left
Hier werden Papierblätter als Navigation genutzt, einfach aber effektiv.

Clearleft Navigation

Sensi Soft
In diesem Portfolio wird eine Litfaßsäule zum Navigationselement umfunktioniert. Ist zwar etwas ungewöhnlich aber optisch extrem gut umgesetzt.

Darüber hinaus gibt es natürlich noch viele weitere Möglichkeiten, meist werden diese aber sehr stark abstrahiert verwendet. Denn je kreativer die Navigation gestaltet wird, desto größer ist die Gefahr, dass Benutzer dadurch überfordert werden. Daher sollte immer die Zielgruppe und der Zweck der Website beachtet werden, denn es macht einen großen Unterschied ob es sich um einen Online Shop oder eine Selbstpräsentation eines Grafikers handelt.

© Markus Kapferer für grafixx.at, 2009. | Permalink
Post tags: Konzeption, Metapher, Navigation

Regelmäßig stören mich Die recht hässlichen und Typografisch gar nicht tollen Unterstreichungen die normalerweise im Web zu finden sind.  Konkret stört  mich daran, dass die Unterlängen der Zeichen durchgestrichen sind und das Ganze dadurch sehr gedrängt wirkt. Aus diesem Grund bin ich dazu über gegangen das eigentlich dafür vorgesehene und übliche CSS Tag text-decoration:underline; zu boykottieren. Viel schöner finde ich das Unterstreichungen über den Befehl border-bottom zu realisieren.

Aus Typografischer Sicht ist das zwar immer noch nicht die optimale Lösung, da sich die Unterlängen und die Unterstreichung nicht treffen. Daher könnte man den Rahmen noch ein Pixel weiter nach unten setzen. Je nach verwendeter Schriftart, Schriftgröße und Zeilenabstand kann das aber zu viel Platz verschlingen. Daher verwende ich auf dieser Siete keinen Abstand.

Die 3 Varianten im Vergleich:

text-decoration:underline;
border-bottom: 1px solid;
border-bottom: 1px solid; padding-bottom:1px;

Typografie

… nicht so schön

Typografie

… in dieser Darstellung perfekt, bei kleineren Schriftgrößen berühren sich aber auch hier Unterlängen und Unterstreichung.

Typografie

… für kleine Schriftgröen meißt die Beste Wahl

Das ist diesesmal zwar nur ein kleiner aber dafür aus meiner Sicht kleiner Hinweis und damit starte ich gleich den Aufruf für “schönere Unterstreichungen”. Abgesehen davon gibt es allerdings noch viele weitere Typografische Sünden im Web, dazu aber ein anderes mal.

Keine änlichen Beiträge.

© Markus Kapferer für grafixx.at, 2009. | Permalink
Post tags: Design, Formatierung, Typografie, Unterstreichung

Nachdem das leidige Thema der begrenzten Schriftauswahl auf Websites konnte zwar immer noch nicht gänzliche gelöst werden, aber immerhin scheint es jetzt etwas Licht am Ende des Tunnel zu geben. Nachdem Safari 3.1 als erster Browser einem Methode zur Schrifteinbindung auf Websites unterstützt hat wird jetzt Firefox ab Version 3.1 nachziehen. Grund genug die aktuellen und zukünftigen Möglichkeiten der Schrifteinbindung näher zu beleuchten.

Aktuell wurden “Nicht-Standard-Schriften” meist als Bilder (via z.B. PHP generiert) oder als Flashdateien eingebunden. Diese Workarounds funktionieren zwar, sind aber weder für Suchmaschinen noch aus Performancesicht optimal. Um dem entgegenzuwirken gibt es in der CSS 3 Definition den netten Style “@font-face”. Über diesen Befehl ist es möglich Schriftarten direkt auf die Website einzubinden.

Dazu müssen zuerst die Schriften bzw. die gewünschten Schriftschnitte definiert werden. Anschließend können die definierten Schriftschnitte wie gewohnt im Stylesheet verwendet werden.
Das Ganze könnte dann etwa so aussehen:

@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
 
h1 {
font-family:'Fontin-Regular', Georgia, serif;
}

Grundsätzlich werden TrueType-, OpenType PS- und OpenType TT Fonts unterstützt. Allerdings muss neben der noch relativ geringen Browserunterstützung (IE hinkt wiedermal hinterher) auch die Lizenzrechtliche Seite beachtet werden. Es dürfen nämlich bei weiten nicht alle Schriftarten auf dem Webserver abgelegt werden. Daher empfiehlt es sich die Nutzungsrechte für die Schrift die verwendet werden soll genau zu hinterfragen. Daher bieten sich aktuell vorallem Fonts die über die Open-Font Lizenz vertrieben werden an.

Fazit:
Nachdem das ganze Thema zeitweise wenig Beachtung erhalten hatte, scheint wieder etwas Bewegung in das Thema gekommen zu sein. Mit dem Erscheinen von Firefox 3.1 wird Firefox die Nase knapp vor Safari haben, da Firefox im Gegensatz auch Ligaturen unterstützen wird. Auch wenn bei diesen 2 Browsern auch noch einige Details verbesserungswürdig sind, so ist die Unterstützung von @font-face doch ein gutes Zeichen. Ganz nebenbei werden auch andere Browserhersteller unter Druck gesetzt und Früher oder Später wird es hoffentlich auch ein Unterstützung im Internet Explorer geben.

Weiterführende Links:
W3C Definition
Vergleich Safari / Firefox
Typografie.info – Fonteinbettung in Webseiten

Keine änlichen Beiträge.

© Markus Kapferer für grafixx.at, 2009. | Permalink
Post tags: @font-face, Font, Typografie

Kreativ zu sein ist leichter gesagt als getan, denn nicht immer tritt der Optimalfall ein und man hat sofort eine geniale Idee. Des Öfteren muss die eigene Kreativität erst hervorgeholt werden. Doch wie funktioniert das Kreativ sein? Eine 0815 Anleitung zu diesem Thema gibt es sicherlich nicht und jeder wird seine eigenen Methoden entwickeln. Nichts desto trotz gibt es einige Hilfestellungen um Ideen zu entwickeln.

Tagträume und die Umgebung

Ein Hauptproblem von Kreativen ist Stress und der Daily Business. Nichts ist schwieriger als neue Ideen zu entwickeln, während permanent das Telefon läutet und man noch mehrere Mitarbeiter zu betreuen hat. Versuche am Beginn eines Projektes aus Ihrem Alltagstrott heraus zu kommen – Nimm dir Zeit zum Träumen und Schmökern.

Oft ist es hilfreich das Notebook unter den Arm zu klemmen und das Büro zu verlassen. An einem sonnigen Tag im Park fällt es Vielen leichter Ideen zu entwickeln. Viele haben besondere Lieblingsplätze an denendu besonders kreativ bist. Sei es in einem sonnendurchfluteten Park, während des Autofahrens oder auch auf der Toilette. Jeder sollte für sich selbst entscheiden wie und wo er kreativ sein möchte. Durch das schaffen einer Atmosphäre in der man sich wohlfühlt fällt das „Kreativ sein“ aber um vieles einfacher.

Bewusstes Sehen

Mit offenen Augen durch das Leben gehen und bewusst auf Formen, Farben und Muster achten ist ebenso wichtig um kreativ zu sein. Begnüge dich nicht nur mit der Tatsache, dass Ihnen etwas gefällt oder auch nicht gefällt. Unter bewusstem Sehen verstehe ich zu beurteilen ob etwas gefällt oder nicht. Gleichzeitig sollte aber auch hinterfragt werden was genau gefällt. Zeichnet sich eine Website durch den besonderen Farbeinsatz, durch eine schöne Typografie, durch ein besonders innovatives Konzept oder durch besondere Fotos aus?

Nachdem klar ist wodurch eine Website die eigene Aufmerksamkeit erlangt hat, sollte noch eruiert werden, wodurch diese Wirkung zustande kommt. Bei herausragenden Fotos könnten folgende Faktoren die Wirkung beeinflussen:

• Wurde eine besondere, unübliche Perspektive gewählt?
• Wurden spezielle Effekte (Filter, Verläufe, Farbfilter) verwendet?
• Harmonieren die Bilder besonders gut mit der restlichen Website?
• Wird eine grundsätzliche Idee besonders kreativ vermittelt?

Grundsätzlich geht es hierbei also um eine sehr abstrahierte Art des Sehens. Die Wahrnehmung von einzelnen Elementen einer Website ist hierbei entscheidend. Zerlege Gesehenes in einzelne Bestandteile und versuche aus diesen Bestandteilen etwas Neues entstehen zu lassen. Dabei können Normen und Konventionen außer Acht gelassen werden. In diesem Schritt geht es um das Spielen mit Grafik um seine Kreativität wirken zu lassen.

Was auch immer das Besondere an dem ins Auge gestochenen Objektes ist, es sollte archiviert werden. Eine Form der Archivierung ist das Anlegen einer Ideensammlung. Je nach persönlicher Vorliebe können in dieser Sammlung Post-it mit Skizzen, Screenshots von besonders gelungenen Seiten oder Fotografien gesammelt werden. Solche Sammlungen können sehr hilfreich sein, falls man in einem Projekt feststeckt und nicht mehr weiter kommt. Damit meine ich aber nicht, dass etwas Vorhandenes kopiert werden sollte. Diese Vorlagen sollen nur zur Inspiration dienen – oft reicht ein winziger Ansatz um komplett neue, eigenständige Werke zu entwerfen. So kann dieser Ausgangspunkt eine Farbe oder die Tatsache, dass auch einer Website intensiv mit Linien als Stilmittel gearbeitet wurde sein. Es handelt sich also nur um ein Werkzeug das als „Türöffner“ dienen soll. Sobald diese erste Türe geöffnet wurde und man sich in der aktiven Designphase befindet läuft oft alles wie von selbst.

Nachdem eine Idee geboren wurde geht es jetzt an die Ausarbeitung der entsprechenden Idee. Dazu werden wir in den nächsten Kapiteln einzelne Gestaltungselemente betrachten um am Ende in der Lage zu sein, diese zu einer Layoutvorlage zu verbinden.

Kreativitätstechniken

Es gibt unzählige Techniken und Methoden zur Ideenfindung. Die nachfolgenden Techniken stellen einen exemplarischen Auszug dar. Schlussendlich muss aber jede für sich selbst geeignete Methoden finden.

Brainstorming

Eine der verbreitetsten und bekanntesten Techniken ist das Brainstorming. Hierbei handelt es sich um eine Methode zur Ideenfindung in der Gruppe. Ziel ist es in kurzer Zeit viele Ideen aus verschiedenen Gesichtspunkten zu erhalten. Daher macht es Sinn Personen aus verschiedenen Bereichen in die Gruppe zu integrieren. So werden Screendesigner, Programmierer, Projektmanager oder Verkäufer zum teil unterschiedliche Ideen entwickeln.

In der ersten von zwei Phasen werden, nachdem Gruppenleiter die Problemstellung erläutert hat möglichst viele Ideen gesammelt. Hierbei sollte jeder Teilnehmer seine spontanen Ideen verkünden. Im Optimalfall werden Ideen auch von anderen Gruppenmitgliedern aufgenommen und neu interpretiert. Ziel in dieser Phase ist die Ideenfindung, hierbei gibt es aber noch keine Wertung oder Kritik der einzelnen Ideen.

In Phase zwei werden die Ideen genauer hinterfragt und sortiert. Erst in dieser Phase wird entschieden welche Ideen aufgenommen oder verworfen werden.

Mind-Mapping

Bei Mindmaps handelt es sich um eine grafische Darstellung von Ideen. Ausgehend von einem Hauptast wird ein Thema immer weiter abstrahiert. Pro „Ast“ wird jeweils ein Begriff niedergeschrieben. Mindmaps sind z.B. ein hervorragender Ausgangspunkt um eine Sitemap zu erstellen.

Zufallstechnik

Ausgangspunkt bei dieser Technik ist eine möglichst große Datensammlung. Nehmen wir als Beispiel einen großen Bildband mit Bildern zum Thema der geplanten Website. Wahllos wird eine Seite von diesem Bildband aufgeschlagen um zu einem zufällig ausgewählten Bild zu kommen. Anschließend wird versucht aus diesem Bild eine Idee abzuleiten. Beispielsweise könnte aus dem zufällig ausgewählten Bild ein Farbschema abgeleitet werden.

Morphologische Matrix

Die Erstellung einer morphologischen Matrix ist eine sehr analytische Technik. Bei dieser Methode wird versucht möglichst viele Ideen aus sehr vielen theoretischen Lösungsmöglichkeiten zu generieren. Im ersten Schritt wird eine Matrix mit möglichst vielen, für das geplante Produkt relevanten Merkmalen erstellt. Als Beispiel könnten folgende Merkmale für die Definition ein Werbebanners für die neue Produktlinie definiert werden: Animation, Größe, Aggresivität, Sprache

Im nächsten Schritt werden möglichst viele Werte zu den zuvor definierten Merkmalen definiert.

Zum Beispiel:

Daraus könnte dann eine Idee für einen Skyskraper mit dezenter Animation im Flashformat ohne Video und ohne Ton entstehen. Diese Technik eignet sich sehr gut um gemeinsam mit Kunden am Konzept arbeiten zu können. Nachdem die Matrix erstellt hat, kann sich der Kunde sehr schnell ein Bild über alle möglichen Varianten bilden und leicht seine Wünsche und Ideen formulieren.

Keine änlichen Beiträge.

© Markus Kapferer für grafixx.at, 2009. | Permalink
Post tags: Ideenfindung, Kreativität, Morphologische Matrix

Nach dem es in letzter Zeit häufig um Analytics und Marketing gegangen ist, wird es höchste Zeit wieder mal einen Artikel zum Thema Typografie zu verfassen.

Die Verwendung von falschen Anführungszeichen zählt wohl zu den häufigsten Typografiefehlern. Je nach Sprache des gesetzten Textes sollten die korrekten Varianten verwendet werden. Im Internet werden jedoch sehr oft fälschlicher Weise Zollzeichen (“) als Anführungszeichen verwendet. Das ist nicht korrekt, anstelle dessen sollten folgende Varianten verwendet werden. Unbestätigten Gerüchten nach sollen sich solche falschen Anführungszeichen auch in diesem Blog hier tummeln ;o) – Aber nichts desto trotz will ich darauf hinweisen wie es korrekter Weise sein sollte.

Deutsche Anführungszeichen
In deutschen Texten ähneln die Anführungszeichen den Zahlen 99 und 66. Am Beginn wird ein Anführungszeichen unten „ und am Ende ein Anführungszeichen “ oben gesetzt. Als Alternative Variante bzw. falls Anführungszeichen innerhalb von bestehenden Anführungszeichen verwendet werden stehen die einfachen Varianten dieser und der nachfolgenden Anführungszeichen zur Verfügung ( ‚ ‘ ).

Nachdem diese Zeichen auf der Tastatur nicht zur Verfügung stehen können die entsprechenden Zeichen via Tastenkombinationen erzeugt werden.

Anführungszeichen am Beginn:
- Windows: ALT + 0132
- Mac OS: Wahltaste + ˆ

Ausführungszeichen am Ende:
- Windows: ALT + 0147
- Mac OS: Wahltaste + 2

Auf Websites wird zur korrekten Darstellung folgender Code benötigt:
„Text“ 

Diese Variante der Anführungszeichen wird auch in anderen Sprachen wie z.B. Isländisch, Bulgarisch, Rumänisch, Slowakisch, Slowenisch, etc. verwendet.

Alternative deutsche Anführungszeichen
Als Alternative wird in deutschen Texten des Öfteren folgende Variante verwendet. » «
Diese Variante wird gerne verwendet, da sich dies Zeichen sehr schön in den Text integrieren und dadurch der Textfluss nicht durch Weißräume unterbrochen wird.

Über folgende Tastenkombinationen können diese Zeichen erzeugt werden:

Anführungszeichen am Beginn:
- Windows: ALT + 0187
- Mac OS: Umschalt + Wahltaste + Q

Ausführungszeichen am Ende:
- Windows: ALT + 0171
- Mac OS: Wahltaste + Q

Auf Websites wird zur korrekten Darstellung folgender Code benötigt:
„Text“ 

Englische Anführungszeichen
In englischsprachigen Texten werden andere Anführungszeichen verwendet. Hier lautet der Merksatz 66 – 99, allerdings werden beide Zeichen oben dargestellt. Am Beginn erhält man so dieses Zeichen “ und am Ende Folgendes ”. Die entsprechenden Tastenkombinationen lauten:

Anführungszeichen am Beginn:
- Windows: ALT + 0147
- Mac OS: Wahltaste + 2

Ausführungszeichen am Ende:
- Windows: ALT + 0148
- Mac OS: Wahltaste + Shift + 2

Auf Websites wird zur korrekten Darstellung folgender Code benötigt.
“Text” 

Französische Anführungszeichen (Guillemets)
Guillemets werden die französischen Anführungszeichen genannt. Im Gegensatz zur deutschen Alternativvariante zeigen die Spitzen inder Französischen Variante vom Text weg. Dadurch erhält man folgende Zeichen: « »

Die entsprechenden Tastenkombinationen lauten:

Anführungszeichen am Beginn:
- Windows: ALT + 0171
- Mac OS: Wahltaste + Q

Ausführungszeichen am Ende:
- Windows: ALT + 0187
- Mac OS: Umschalt + Wahltaste + Q

Auf Websites wird zur korrekten Darstellung folgender Code benötigt:
«Text» 

Diese Variante der Anführungszeichen wird auch in anderen Sprachen wie z.B. Griechisch, Portugiesisch, Arabisch, etc. verwendet.

© Markus Kapferer für grafixx.at, 2009. | Permalink
Post tags: Anführungszeichen, Guillements, Typografie