Design-Tipps zur Gestaltung von Webseiten mit CM4all Business

Transkript

1 Design-Tipps zur Gestaltung von Webseiten mit CM4all Business Content Management AG 1

2 Inhalt 1. Typografie & Textformatierung Schriftarten Schriftgrößen und -schnitte Ausrichtung von Texten Schriftfarbe / Hintergrundfarbe Tabellen Bilder, Grafiken und Logos Bilder und Grafiken Bilderwahl - Keyvisual & Co Logo Farben Webdesign Navigation Allgemeines / Sonstiges Interessante Links Checkliste...8 Content Management AG 2

3 1. Typografie & Textformatierung 1.1 Schriftarten Verwendet keine außergewöhnlichen, sondern leicht lesbare serifenlose Schriften. Das ist sinnvoll, da die Vermittlung von Informationen einen hohen Stellenwert hat und eine Schriftart wie Arial oder Verdana für das Lesen am Monitor besser geeignet ist. Verwendet für den Standardtext/Fließtext nur eine Schriftart und -farbe. Variiert diese nicht auf den einzelnen Seiten oder innerhalb einer Seite, da dies sehr unprofessionell wirkt. Ihr könnt im Bearbeitungsmodus Schrift, Farben & Design zentral das Farbset und die Schriftart wählen. Diese werden einheitlich für die gesamte Webseite übernommen und sollten nur hier bestimmt werden. 1.2 Schriftgrößen und -schnitte Überschriften sollten eine Schriftgröße zwischen 14 und 20 Pixel (entspricht der CM4all Business Vorgabe: normal, groß, sehr groß ) nicht überschreiten. Für den (Fließ-)Text eignen sich Buchstabengrößen von 9 oder 12 Pixel (entspricht der CM4all Business Vorgabe: klein ). Dies kann ebenfalls im Bearbeitungsmodus Schriften, Farben und Design zentral angelegt werden. Achtet darauf, dass man Titel und Fließtext gut voneinander unterscheiden kann. Überschriften, wichtige Schlagwörter und Zusammenfassungen können fett dargestellt werden, Links müssen gekennzeichnet (unterstrichen o. farbig) sein und klar, aber nicht übermäßig, herausstechen. Hervorhebungen durch Unterstreichen sollten dementsprechend bei normalen Text vermieden werden, da der Nutzer davon ausgehen wird, dass es sich um einen Link handelt. Vermeidet wilde Variationen von Schriftgrößen und verwendet Fett und Kursiv nur sehr sparsam (!), da die Webseite ansonsten schnell unruhig wirkt, der Lesefluss unterbrochen wird, sowie das Wesentliche vom Unwesentlichen schwer zu unterscheiden ist. 1.3 Ausrichtung von Texten Texte sollten in der Regel im Blocksatz gesetzt werden, da sie in den meisten Fällen zu einem stimmigen und geradlinigen Erscheinungsbild führen. Dies gilt vor allem für längere Artikel. Hierbei wirken linksbündige und vor allem rechtsbündige Ausrichtungen sehr unruhig. In einigen Fällen hat ein Blocksatz aber durchaus seine Nachteile. Bei zu schlanken Texten besteht die Gefahr, dass die Wortabstände zu große Lücken aufweisen. Hierbei sollten Vor- und Nachteile Content Management AG 3

4 abgewogen werden und ggf. muss zu einer linksbündigen Ausrichtung gegriffen werden. Des Weiteren sollten Texte in logische Absätze eingeteilt werden. Haltet diese kurz und arbeitet, falls es für die Übersichtlichkeit förderlich ist, mit Überschriften der zweiten und dritten Ordnung. Für nicht zusammenhängende Texte können Trennlinien eine gute Strukturierungsmöglichkeit sein. Arbeitet in den einzelnen Absätzen nur sehr vorsichtig mit manuellen Zeilenumbrüchen. Jeder Browser stellt die Seite etwas anders dar, auch kann der Anwender die Schriftgröße manuell anpassen. So können Zeilenumbruch den Text schnell unruhig erscheinen lassen und den Lesefluss stören. Ebenfalls sollten Auflistungen mit Aufzählungszeichen versehen werden. Bedenkt, dass Texte optisch immer im Zusammenhang zu anderen (grafischen) Elementen stehen. Bringt diese in Einklang mit eingefügten Bildern und setzt die Bilder so, dass sie eine gedachte Linie mit dem Text bilden (siehe auch Bilder, Grafiken & Logos). 1.4 Schriftfarbe / Hintergrundfarbe Begrenzt die Anzahl der Schriftfarben. Seriosität ist im professionellen Umfeld von großer Bedeutung und dementsprechend sollten auch die Farben der Texte ausfallen. Manche Farbkombinationen schließen sich beim Webdesign von vornherein aus. Gelbe Schrift auf blauem Grund kann man genauso schlecht lesen, wie grüne Schrift auf rotem Grund. Die meisten Seiten nutzen deswegen einen einfachen, aber dennoch starken Kontrast - schwarze Schrift auf weißem Grund - diese Kombination empfiehlt sich und sollte/muss bevorzugt benutzt werden. 1.5 Tabellen Tabellen können über den Texteditor eingefügt werden: Mit diesem Feature lassen sich nicht nur klassische Tabellen darstellen sondern es eigent sich auch zur Formatierung von Text und Bildern, z.b. zur Darstellung von Textbereichen nebeneinander (Spalten). 2. Bilder, Grafiken und Logos 2.1 Bilder und Grafiken Bilder helfen die Webseite attraktiv zu gestalten. Achtet darauf, dass aktuelle, ansprechende und qualitativ hochwertige Bilder verwendet werden. Content Management AG 4

5 Bringt eine Struktur in Euren Aufbau und verwendet hochwertige Bilder, die den Inhalt sinnstiftend unterstützen. Bilder (sowie auch das Logo) sollten in einem begründetem Größenverhältnis stehen. Zu große Bilder lenken vom Inhalt ab Pixel Breite erscheint in den meisten Fällen als angemessen. Platziert die Bilder nicht kreuz und quer auf der Seite, sondern bestenfalls immer an die gleiche Position (z.b. rechtsbündig untereinander) und immer in der gleichen Breite. Ebenso wie die Texte sollten sich auch die Bilder an anderen Elementen orientieren und eine gedachte Linie bilden. Auf Seiten, die nur Text beinhalten, sollte möglichst immer ein Bild eingefügt werden. Nicht zwangsläufig davon betroffen sind z.b. Rubriken, wie Kontakt, Routenplaner usw. Achtet darauf, dass die Menge und die Größe von Bildern in einem angemessenen Verhältnis zum Text steht. Überprüft, ob die Datengröße der Bilder webgerecht ist. Bilder, die über eine Datenmenge von über 100kb verfügen, haben zur Folge, dass die Geschwindigkeit der Seite stark nachlassen wird, dementsprechend auch die Motivation des Betrachters. 2.2 Bilderwahl - Keyvisual & Co. Bilder sagen mehr als tausend Worte schaut dementsprechend, ob die Bilder zu diesem Kunden passen. Wählt das Keyvisual bedächtig, denn es wird Euch auf jeder Seite begleiten. Wählt Bilder aus, die den Inhalt unterstützen und zu der Gesamterscheinung des Unternehmens passen. Auch die Farben der Bilder sollten zum Gesamtauftritt passen. Setzt das Logo in einer guten Qualität und einer adäquaten Größe ein. Wählt das Keyvisual, das zu der Seite passt. Content Management AG 5

6 2.3 Logo Das Logo ist das Aushängeschild jedes Unternehmens. Dieses sollte in einer aktuellen und qualitativ hochwertigen Version eingefügt werden. 3. Farben Webdesign Die Farben der Webseite und ihre daraus resultierende Wirkung auf die Besucher, hängt vom behandelten Thema ab. Passt auf, dass Ihr Farben wählt, die zueinander und zum Thema passen. Benutzet zwei Grundfarben für das Design. Umso mehr Farben Ihr einsetzt, desto schwieriger wird es einerseits die passenden Farbkombinationen zu finden und andererseits die Farben in den Griff zu bekommen, da diese immer im Zusammenhang zu jedem eingefügten Bild oder Logo stehen und sich dort schnell beißen können. Vermeidet zu viele bunte Farben (vor allem auch knallige Farben auf großen Flächen). Die Webseite kann dadurch schnell überladen,unruhig und unprofessionell wirken. Denkt daran: Weniger ist oft mehr. 4. Navigation Gestaltet die Navigation übersichtlich und arbeitet mit einer Subnavigation. In der Hauptnavigation sollten nur die Hauptthemen/Kategorien aufgelistet werden und die Unterbereiche sollten diesen logisch folgen (z.b.: Hauptnavigation - Über Uns; Subnavigation - Personen, Firmengeschichte, Rechtsgebiete usw.) Hauptnavigationspunkte müssen von Subnavigationspunkten klar unterscheidbar sein. Eine gute Möglichkeit ist es, für den Hintergrund der Subnavigation einen Farbton zu nehmen, der ein paar Nuancen heller ist als der Hauptnavigationspunkt. Andere Formen der Differenzierung sind im einigen Template standardmäßig integriert - beispielsweise, dass die Subnavigationspunkte eingerückt oder in einem anderen Bereich positioniert sind das reicht natürlich in der Regel völlig aus. Content Management AG 6

7 5. Allgemeines / Sonstiges Habt Ihr noch Anregung, die Euch bei der Erstellung aufgefallen sind und vielleicht ins Dokument gehören. Dann meldet Euch bei Ria oder Tomasz wir freuen uns. 5.1 Interessante Links Gestaltung: Farbhilfen: RGB Werte im Browser identifizieren Passende Farben finden Bilder komprimieren Content Management AG 7