Fonts bzw. Schriftarten sind tägliche Werkzeuge für jeden Webdesigner, die unverzichtbar sind. Das war Grund genug für mich, eine Fontssammlung mit derzeit 9348 Schriftarten ins Internet zu stellen. Zumindest im deutschsprachigen Internet dürfte diese Fontsammlung zu der größten gehören.

Im Vergleich zu anderen Fontsseiten bietet Fontssammlung allerdings auch ein paar nette Zusatzfeatures, etwa Schriftarten in der Detailsansicht zu previewen:

(Dieses Font ist übrigens GoodDogCool)

Natürlich könnt ihr die Fonts und Schriftarten völlig kostenlos downloaden (was ja der Sinn der Sache ist). Über Feedbacks freue ich mich.

Wie Sie jetzt also wissen sind farben das eines der Ausdrucksstärksten mitteln neben den Formen.Zusammengefasst können Sie den Benutzer entweder auf das Design oder auf den Inhalt der Homepage lenken. Ein gleichgewicht zwischen beiden ist natürlich viel besser. Oder Sie wenden sich an das “Classic”-Design wenn Sie den Inhat Ihrer Seite zu 100% interessanter machen wollen. Zumindest in einer bestimmten Zielgruppe. Im Teil 3 geht es um Wirkung und Aussage.

Größe und Position
Die Größe eines Objekts verbinden wir automatisch mit seiner Wichtigkeit. Aber auch die Position zu den andeen Onjekten sagt uns etwas über seine Bedeutung. Achten Sie auch auf Symmentrie: Fällt ein Objekt aus dem Rahmen, zieht es Automatisch die Aufmerksamkeit auf sich

Leserichtung
Die Leserichtung spielt eine Rolle für Bilder, die eine Situation darstellen oder eine Geschichte erzählen. Das einfachste Beispiel dafür sind Comics. Sie erzählen Bild für Bild eine Geschichte – von links nach rechts. Auch einzelne Bilder wirken anders, wenn sie gespiegelt werden. Die Veränderung ist nicht immer klar zu beschreiben, aber es macht deutlich einen Unterschied – probieren Sie es mit einem Foto eines gesichtes aus, und spiegeln Sie das Bild aus der Mitte heraus um das Gesicht symmetrisch zu machen. Sie werden die Person kaum wiedererkennen.

Positionierung
Das menschliche Großhirn besteht aus zwei Hälften (Hemisühären), die miteinander über den so genannten Balken verbunden sind. Die beiden Hemisphären arbeiten eng zusammen, und grundsätzlich können beide Hälfte dieselben Funktionen durchführen. Dennoch herscht Arbeitsteilung im Gehirn. Jede Seite hat einen bestimmten Schwerunkt.

Die Linke Gehirnhälfte ist für die Logik zuständig. Durch diese ist auch das Rechnen möglich. Auch für die Sprache, für die Verarbeitung von abstrakten Informationen und auch für die verknüpfung mit dem rechten (!) Auge.

Die Rechte Gehirnhälfte ist für die Emotion und für das Gefühl zuständig. Es unterstützt das räumliche Sehen & Denken. Zur Verarbeitung bestimmter eindrücke und Bildliche Informationen ist es einer der wichtigsten Aufgaben. Und die verknüpfung mit dem linken (!) Auge.

Diese Darstellung ist stark vereinfacht, hat aber beipielsweise dennoch doe praktische Konsequenz, dass es uns schwer Fällt, ein Bild räumlich zu erfassen, das wir nur mit dem rechten Auge sehen. Denn die Information vom rechten Auge landen in der linken Gehirnhälfte, und die ist eher auf abstraktere Dinge spezialisiert. (Um unsere Umgebung dreidimensional wahrzunehmen brauchen wir natürlich beide Augen – aber wie gesagt, es handelt sich um eine Vereinfachung.)
Bei der Gestaltung kann mn darauf achten, dem Hirn entgegenzukommen: Die Navigation soll die Struktur der Site widerspigeln. Sie fordert damit das räumliche Vorstellungsvermögen. Also kommt ie Navigationsleiste nach links. Für Texte ist die linke Gehirnhälfte zuständig. Daher kommen Texte auf die rechte Seite. Machen Sie diese Anregung nicht zum Dogma; unser Gehirn zeichnet sich gerade durch seine Flexibilität aus. Aber als Anhaltspunkt ist sie ganz hilfreich. Es ist durch Tests erwiesen, dass Navigationsleiste links besser funktionieren als solche auf der rechten Seite. Ob das nun mit unseren Gehirnhälften zutun hat odeer einfach nur Gewohnheit ist wei man nicht. Aber es könnte auch mit der Leserichtun zusammenhängen. Aber das sei hingestellt.

Im Teil 4 unseres Tutorials zeige ich euch, wie Farben kommunizieren. Denn Sie können durch Farben einem Benutzer sagen, was Sie denken. Also hoffe ich, Sie bleiben dabei.

Mit freundlichen Grüßen
Markus Mörth (MacReal)

Im Teil 1 haben wir über verschiedene Fromen und Gestalten aus dem Auge des Betrachters gesprochen. Denn das was ein Web-designer sieht, so sieht es nicht ein Benutzer. Ein gutes beispiel sind Effekte die ein Benutzer durch das Betrachten auslöst. Der Webdesigner kennt seine Website und weiß auch wo sich die Effekte befinden und wie diese gestartet werden und wo sich die einzelnen Objekte befinden. Aber ein Benutzer ist unter umständen neu auf der Seite. Wenn Sie nichz nur für sich eine Website erstellen wollen, versuchen Sie sich in einen Benutzer hineinzuversetzen, der die Seite nicht im Geringsten kennt. Am besten wäre es wenn Sie einen Freund oder Kollegen die Seite Testen lassen und beobachten ob sich dieser leicht zurechtfindet und sich wohl fühlt. Und der Tester kann Ihnen auch Ratschläge geben was Ihm Probleme bereitet und verbessert werden sollte. Das größte Problem sind Farbkompositionen.

Wenn ein Benutzer die Farben nicht mag oder diese einfach nur Stur durchgesetzt sind oder fremd wirken, kann sich der Benutzer kaum wohl fühlen. Und wenn er sich nicht wohlfühlt, kann die Seite so übersichtlich sein wie es nur geht. Genau dieser Benutzer wird Ihre Seite nie verstehen. Und der Inhalt wirkt nicht Professionell. Das was so Irre wirkt, ist für viele Internetseiten der größte Alptraum… und Realität. Farben sind das wichtigste. Durch das Richtige Design können Sie den Inhalt spannend oder langweilig machen. Darum beschäftige ich mich im Teil 2 um sogenannte Kompositionselemente.
Kompositionselemente

Jedes Bild besteht aus einigen Grundelementen. Das wichtigste sind die Linien. Das müssen keine Striche sein, sondern können auch gedachte Linien sein wie etwa Fluchtlinien oder Linien, die durch zwei Flächen mit unterschiedlichen Farben gebildet werden. Grafiker arbeiten oft mit Gestaltungsrastern. Dazu bestimmen sie als Erstes die Aufteilung eins Screens, beispielsweise im Navigationsbereich, textbereich und Bildbereich. Diese Bereiche grenzen sie durch Hilfslinien voneinander ab. Bei der Arbeit orientieren sie sich sn diesen Linien und positionieren alle Elemente an einer Linie. Dadurch erreichen sie eine harmonische Komposition, die sich auf allen Screens wiederfindet. Bei der Wahl der Kompositionselemente gibt es eine Goldene Regel für Designer: Weniger ist mehr. Denn besser es sieht überichtlich und komfortabel aus, als komplett “überbunt” und durcheinander.

Formen (siehe Teil1) und Farbbereiche sind ein anderes wichtiges Element. Sie bilden oft den Hintergrund, vor den Text oder Bilder gesetzt werden. Die Art und Weise, wie die Elemente zueinander gesetzt sind, ist selbst ein gestaltungselement. Sie erreichen damit Effekte wie Kontrast, Spannung und Dynamik. Falls Sie sich den ersten Teil durchgelesen haben, wird es jetzt Vorteile für Sie haben.
Kontrast entsteht durch Gegensätze. Möglicg sind Kontraste von:

• hell – dunkel
• Farbe – Komplementärfarbe
• groß – klein
• nah -fern
• gerade – gebogen
• eckig – rund

Spannung wird erreicht, wenn Bildteile zu widersprechen scheinen. Auf einem Bild nimmt beispielsweise eine Farbfläche die Hälfte des Platzes ein. Daneben steht eine sehr kleine Fläche in derselben Form und Farbe.
Kontrast ist ein Mittel, um Spannung zu erzeugen, aber nicht jeder Kontrast erzeugt Spannung. Ist eine Hälfte eines Bildes rot, die andere grün, ist das sicher ein starker Kontrast. Spannung aht es aber deshalb noch lang enicht. Dynamik kommt zustande, wenn die Formen im Bild Bewegung suggerieren. Bilder mit einer ungewöhnlichen Perspektive, mit Teilen, die unscharf wie in Bewegung erscheinen, oder Linien, die auf einen Fluchtpunkt zu laufen, wirken dynamisch.
Ausgewogenheit

Für die meisten Anwendungen versucht der Designer, eine ausgewogene Komposition zu erstellen. Ausgewogenheit wird durch Symmetrie erreicht – aber damit sollte man es nicht übertreiben. Designs, die zu symmetrisch sind, wirken schnell langweilig. Feine Kontraste und etwas Spannung beleben und füren zu einem ausgewogenen Design. Es müssen nicht immer nur rechte Winkel und gerade Linien sein. Auch ein Rhytmus von prägnanten und unauffälligen Elementen wirken harmonisch und sind sehr wirkungsvoll.

Aber es gibt auch Fälle, in denen bewusst vom Prinzip der Ausgewogenheit abgewichtet wird. Starke Kontraste, Spannung und Dynamik machen Seiten interessant und heben sie von anderen ab. Nur sollte man das sparsam einsetzen, um den benutzer nicht zu ermüden.

Oder man setzt auf das sogenannte “Classic”-Design. Das noch immer sehr erfolgreiche Design ist recht Stabil und mit wenig Dynamik verbunden. Farblich auch sehr Neutral. Für Designer die den Benutzer wirklich auf das Wesentliche lenken wollen, und den Inhalt am wichtigsten sehen, ist das “Classic”-Design welches ich entwickelt habe ein kleines Aber feines Wunder.

Fragen? Kein Problem. Schreiben Sie Ihre Frage als Kommentar und ich werde Sie so schnell wie möglich beantworten, um Ihre neugier zu stillen. Natürlich Lese ich auch gerne Kritik und Anregungen zu meinem Artikel.

Mit freundlichen Grüßen
Markus Mörth (MacReal)

Das Design einer Site bestimmt den ersten Eindruck. Und genau dieser Eindruck ist der wichtigste. Gefallen dem Benutzer Farben oder Layout nicht, so wird er höchstwarscheinlich sofort wieder “umdrehen”. Denn auch das Design ist nicht nur Dekoration, sondern es unterstützt die Kommunikation. Es vermittelt Stimmung, und Sicherheit. Es verdeutlicht welche Priorität sie besitzen. Wenn ein User nur “gefällt mir nicht” sagt, dann fühlt sich dieser auch nicht wohl. Denn dann kommt er mit dem Aufbau der Seite nicht mehr klar, und es gibt fast keine Chance diesen Benutzer noch zu überzeugen. Darum hier ein kleines Tutorial zu Farben. Also Design für Nicht-Designer. Im ersten Teiljedoch beschäftigen wir uns nur mit allgemeinen Informationen zu den Wahrnehmungen der Menschlichen Psyche. Denn genau an dieser Stelle, beginnt es schon, wie interessant der Benutzer Ihre Internetseite finden kann.

1. Design für Nicht-Designer
Ich möchte Ihnen nun einige wichtige Grundprinzipien der Gestaltung zeigen. Auch Diplom-Grafikdesigner lernen das (und noch vieles mehr) als Grundbaustein für Ihr Studium. Es geht in wirklichkeit nur um die Prinzipien der menschlichen Wahrnehmung. Das komplexe Zusammenspiel von Augen und Gehirn. Es it auch Ratsam, zu wissen, warum manche Entwürfe funktionieren, und andere dagegen nicht. Um das herauszufinden, können diese kleinen Ratschläge sehr helfen.
2. Menschliche Wahrnehmung

2.1 Figur und Grund
Das Gehirn filtert aus jedem Bild die sogenannte Figur heraus. Das ist der Teil, der momentan für den Betrachter interessant ist. Darauf wird die ganze Konzentration gerichtet. Der übrige Teil des Bildes nennt sich Grund.
Im folgendem Beipiel springen Figur und Grund hin und her: Wir sehen als Figur entweder zwei Gesichter oder eine Vase.

2.2 Geschlossenheit
Das Gehirn will Ordnung. Daher siegt der Grundsatz der Geschlossenheit über den der Nähe. Linien, die eine gschlossene Form bilden, werden eher als Figur wahrgenommen, auch wenn andere Linien in der Nähe sind.

2.3 Ähnlichkeit
Elemente, die sich ähnlich sind, werden als zusammengehörig wahrgenommen. Das Hirn ist imemr auf der Suche nach Objekten, die sich ähnlich sind, weil damit Ordnung in die Wahrnehmung kommt. Sind zwei Objekte auf dem Bildschirm gleich gestaltet, werden diese als gleichwertig empfunden. Elemente, die sich deutlich voneinander abheben, fallen auf – sie sollten demnach auch inhaltlich etwas Besonderes sein.

2.4 Runde Formen
Runde Formen werden leicht als Figur wahrgenommen. Auch wenn nur ein Teil davon gezeigt wird, “ergänzt” das Gehirn den Rest der Figur. Auch wenn es keinen Anhaltspunkt gint. Das gilt im Allgemeinen auch für angeschnittene Bilder. Portais werden sogar interessanter gefunden, wenn der Kopf nicht vollständig im Bild ist, was wir aber nicht bewusst wahrnemen. Achten Sie einmal, wie Personen in einer Zeitung abgebildet sind.

All jenen, die diesen Blog erst neu entdeckt haben, möchte ich erstmal herzlich Begrüßen.
Natürlich auch die User, die regelmäßig in diesem Blog schmöckern.

Da einige vielleicht erkennen werden, bin ich neu hier. Aus diesem Grunde möchte ich mich mal Vorstellen. Ich heiße Markus, komme aus Wien, und bin spezialisiert im Themenbereich Webdesign, Logodesign und Entwicklungsfragen in der allgemeinen Informationstechnik. Falls es also hierbei Fragen gibt könnt Ihr sie gerne stellen. Ich werde jede Frage, die an mich gerichtet ist, mit freude beantworten.

Was habe ich vor? Ich habe aktuell vor euch über Logodesign aufzuklären, was Webdesign bedeutet, wie Ihr HTML und JavaScript so einsetzen könnt, das Ihr keine Besucher verliert usw. Das ist mein Bereich indem ich mich Spezialisiert habe.

Damit Ihr auch etwas über meine Laufbahn etwas erfährt. Ich habe auch ab und zu Vorträge zu Webdesign und Design im allgemeinem Sinne. Also könnt Ihr euch sicher sein, das ich so ziemlich alles was es damit zutun hat, beantworten kann. Ihr dürft euch also auf vieles Freuen.

Euer Markus