Das Strukturkonzept einer Webseite

Zuerst bespricht man den Zweck der Webseite mit dem späteren Webseitenbesitzer. Dabei wird festgelegt, welche Seiten alles vorkommen sollen:
Pflicht sind immer:

• Datenschutzerklärung
• Impressum
• Kontaktformular
• Startseite

Das Impressum und die Datenschutzerklärung sind in Deutschland Pflicht und müssen sichtbar und erreichbar sein. Deshalb setze ich diese beiden Seiten immer in den Footer Bereich.

Auf der Startseite wird immer das Unternehmen beschrieben. Diese Seite ist Quasi die Eingangstür zu einer Webseite und sollte entsprechend gestaltet sein, und alle weiteren Möglichkeiten klar aufzeigen.
Für Firmen, Vereine oder auch Private Homepages hat sich eingebürgert, das ein Kontaktformular oder eine Über mich Seite mit entsprechender Kontaktmöglichkeit existiert.

Darüber hinaus kann man beliebige weitere Strukturen aufziehen. Wichtig dabei ist, das man von Anfang an auch eine Navigationsmöglichkeit vorsieht, mit der jede Seite mit ein paar Klicks vom Nutzer intuitiv erreichbar ist. Bei Bedarf kann man auch eine Sekundärnavigation einbauen.

Bereits hier muss man sich Gedanken über die spätere URL Struktur machen. Der Nutzer wird zwangsläufig mit Links zu/auf Eurer Seite in Berührung kommen.
Fragen dabei sind:

• Mit oder ohne www Subdomain
• SSL (HTTPS://) oder Standard
• Hierarchische Links

Das WWW am Anfang von Internetadressen stellt eine Subdomain dar und ist heutzutage nicht mehr notwendig und kann problemlos entfallen. Vorteil: Auf Schriftstücken ist die Internetadresse viel kürzer.

Wenn viel Kundenkontakt und sensible Daten über die Internetseite ausgetauscht werden sollen dann ist Verschlüsselung Pflicht. Auf bestehenden Webseiten kann man sich überlegen, ob man wirklich auf Verschlüsselung umstellen möchte und beim Neuerstellen von Webseiten empfehle ich gleich auf Verschlüsselung anzufangen, wenn es der Webhoster anbietet.

Bei vielen Unterseiten auf einer Webseite bietet sich eine Hierarchische URL Struktur an. (z.B. https://domain.de/Kategorie1/Unterseite1)

Für kleineren Seiten sollte man eher auf gut lesbare und flache URLs zurückgreifen.

Diese Seite zum Beispiel hat die URL https://webdesign-mittelfranken.de/webseiten-styleguide/.
An diesem Beispiel sieht man auch sehr gut, das ich bereits die wichtigsten Keywords in der URL untergebracht habe. Das hilft den Suchmaschinen und auch Nutzern schon bei der Suche zu erkennen, um was es sich auf dieser Seite drehen wird. Das ist einer der Punkte die man bereits beim Erstellen einer Internetseite für Die Suchmaschinenoptimierung auf der Seite tun kann.

Der Aufbau einzelner Seiten und Beiträge

Die Navigationsmenüs sind je nach Kundenwunsch realisierbar. Üblich ist eine Primärnavigation am oberen Rand und eine Sekundärnavigation am linken Bildrand. Unterstützt wird das ganze meist von einer Sidebar auf der rechten Seite. Mir persönlich reicht eine Navigation am Oberen Bildrand mit feststehendem Header und eine Sekundärnavigation mittels Breadcrumbs.

Eine Seite ist immer in 3 Bereiche unterteilt:

1. Der Kopfbereich - Header beinhaltet immer die Seitenüberschrift, das Logo und die Primäre Navigation.
2. Der Seiteninhalt - Content besteht aus dem eigentlichen Inhalt der Seite und oft auch noch zusätzlich aus einer Spalte am Rand die zusätzliche Bedienelement oder Listen enthält, der sogenaten Sidebar.
3. Der Fußzeile - Footersetzt sich aus den weniger relevanten Links und Informationen zusammen, die trotzdem auf jeder Seite präsent sein sollen. Ein Typisches Beispiel hierfür sind Kontaktdaten und Impressum.

Bei Beitragsseiten eines Blogs gilt diese Dreiteilung ebenfalls. Zusätzlich wird der Contentbereich rechts oder links noch mit einer Zusatzspalte versehen, die sogenannte Sidebar. In dieser Spalte sind weitere Artikel, Kategorien und Verlinkungen untergebracht, um dem Nutzer leicht weitere Artikel anzubieten.

Jetzt kommt der Punkt, an dem man sich über den Seiteninhalt der jeweiligen Seiten Gedanken machen muss.
Ich persönlich versuche immer nach folgendem Schema vorzugehen:

• Einleitung
• Inhalt
• Weiterführende Links auf der Seite

Durch eine knackige Einleitung erzeugt man Interesse weiterzulesen, am besten bevor der Nutzer überhaupt scollen muss.

Der Inhalt sollte gut strukturiert, logisch und informativ sein.

Am Ende der Seite kommt dann meist eine Reihe von Button-Links mit Auswahlmöglichkeiten.

Die Farbpalette

Je nach Firma gibt es eine oder zwei Grundfarben.

• Bei einer Grundfarbe verwende ich dazu immer eine hellere und eine dunklere Variation der Grundfarbe.
• Bei Zwei Grundfarben im Corporate Design werden alle Elemente auf der Seite meist in diesen beiden Farben gehalten.

Dazu gibt es dann noch Drei bis Fünf Schwarz/Weiß Farben.

• Schwarz für harte Abgrenzungen
• Weiß für Abgrenzungen auf farbigem Untergrund
• Ein dunkles Grau, meist für Textfarben
• (Optional) Ein helles Grau
• Ein ganz helles Grau, meist für den Hintergrund

Für die bessere Lesbarkeit bietet es sich oft an, den Hintergrund nicht in ganz Weiß, sondern in unterschiedlichen leichten Grautönen zu verwenden. Das ist angenehmer beim Lesen.

Wie Ihr seht, sollte man sich auf maximal 3 Farben und 5 Grautöne beschränken. Das sieht auf den ersten Blick nicht viel aus, reicht aber völlig. Dadurch ist es möglich die gesamte Webpräsenz einer Firma auf Ihre Corporate Farben abzustimmen.

Weiter unten bei den Elementen zeige ich dann noch auf, wie man mit Farbverläufen oder Transparenz noch viel mehr aus den Farben herausholen kann, ohne das die Webseite zu bunt wird.

Noch ein Tipp von mir: Gebt den Farben Namen! Das macht es um vieles leichter, wenn man mit Kunden diskutiert und sich über Farben unterhält. Egal was für Namen, Ziffern tun es auch.

Die Typografie

Den Begriff Typografie verwende ich für alles was mit der Schrift zu tun hat. Angefangen bei der Schriftart, da sollte es auf der Seite nur eine geben, über die Schriftgrößen bis hin zu Farben aller auf der Seite zu verwendenden Texte.

Dabei muss man an folgende Elemente denken:

• Überschriften - H1 bis H6
• Fließtext - Der normale Text
• Listenelemente - Nummerierte und Unnummerierte
• Tabellen - Rahmen, Überschriften und Body Elemente
• Buttons - Texte und Effekte
• Links - Unterschiedliche Zustände der Links
• Breadcrumbs

Überschriften

Es gibt 6 Überschriften Ebenen. Meist reichen bei den Überschriften die Kategorien H1 bis H3. Bei Überschriften ist darauf zu achten, das die Überschriften sich deutlich voneinander unterscheiden und für Leser eine deutliche Abstufung, H1 ist die größte, H6 die kleinste zu erkennen ist. Dabei sollte darauf geachtet werden, das die kleinste verwendete Überschrift immer noch größer ist als der Text.

Fließtext

Der normale Fließtext sollte gut lesbar sein. Ein kräftiges Grau ist zu empfehlen. Wie bereits im letzten Kapitel geschrieben, empfehle ich auch einen leicht grauen Hintergrund, damit längerer Texte besser gelesen werden können.

Listenelemente

Bei unnummerierten Listenelementen ist der Punkt so geeignet zu wählen, das er nicht zu aufdringlich wird. Für herausragende Listen kann man auch spezielle Listelemente in Vorm von Checkboxen, Pfeilen oder zum Thema passenden Icons einsetzen. Dazu kann ich die Schriftart "Font Awesome" empfehlen. Diese Iconschriftart setze ich auch heufig hier auf meiner Webseite ein.
Bei nummerierten Liste sollte die Zahl in der Schriftart, Farbe und Große des Textes gewählt werden, da sonst die Ziffern überwiegen.

Tabellen

Der Rahmen einer Tabelle sollte nicht zu aufdringlich sein. Ich bevorzuge meist rahmenlose Tabellen um Elemente auf Webseiten ausrichten zu können. Die Überschriftzeile sollte in der gleichen Schriftart und Größe wie der Body-Text gehalten sein. Zusätzlich kann man die Überschrift durch fett Darstellung hervorheben.

Buttons

Buttons sind immerwiederkehrende Elemente einer Webseite. Diesen knöpfen habe ich später noh mal einen Absatz bei den Elementen spendiert, wo es eher um das Layout geht. Die Schriftart der Knöpfe sollte auf farbigem Hintergrund gut lesbar sein. Je nach Button Zustand dürfen sich in meinen Augen nur die Farben ändern. Buttons verwende ich immer in 2 Farbvarianten.

Links

Links im Text sollten deutlich durch eine vom Fließtext abgesetzte Farbe erkennbar sein. Dabei verwende ich meist die Primärfarbe, da auch hier wieder der Bezug zum Corporate Design hergestellt werden kann. Hover-Effekte von Links kann man immer sehr gut mit einer 2. Farbe realisieren. Bereits besuchte Links werden dann meist in einer dunkleren Farbe angezeigt. Die Schriftgröße ist bei mir immer identisch zu den Fließtexten.

Farben der Texte

Breadcrumbs

Das Elemente einer Webseite

Bilder

Buttons

Farbverläufe

Sidebar

Boxes