Skizzen, Beschreibungen und Struktur. Teil 2

In meinem letzten Blogbeitrag ging es darum, eine Bestandsaufnahme zu machen: über die Ziele und Zielgruppen sich Gedanken zu machen und eine Marktanalyse durchzuführen.

Damit ist der erste Schritt gemacht. Nun geht es darum zu klären, welche Funktionen deine Website haben soll, damit sie die Bedürfnisse und Erwartungen deiner Zielgruppe erfüllt.

Schritt 1: Menü – die Navigation definieren

Als erstes legen wir fest, welche Menüpunkte deine Website haben soll. Am einfachsten geht das, indem du auf Post-Its die Menüpunkte draufschreibst. Gerne auch gleich mit den Unter-Menüpunkten und auch auf den Bereichen, die auf jeder Seite immer sichtbar sein sollen. Also auch beispielsweise eine Seitenleiste mit einzelnen Elementen wie der Newsletter-Anmeldung, dem aktuellsten Blogbeitrag oder ähnlichem. Am besten klebst du dazu Post-Its auf einen Zettel oder an die Wand. So kannst du einfach Änderungen vornehmen, bis dir das Ergebnis zusagt.

Das Menü sollte weder zu viel noch zu wenig Menüpunkte haben. Untersuchungen haben ergeben, dass etwa 5 bis 7 Menüpunkte ideal wären. Das Menü sollte auch nicht zu viele Unter-Menüpunkte haben, sonst wird es unübersichtlich.

Wähle am besten einfache und verständliche Namen, also LEISTUNGEN, PRODUKTE, ÜBER UNS, KONTAKT etc. Dann weiß der Besucher deiner Website gleich, was damit gemeint ist und er findet sich gut auf der Website zurecht.

Diese Seiten benötigt jede Website:

• Startseite
• Leistungen / Angebot
• Über mich
• Kontakt
• Impressum
• Datenschutz

Die LEISTUNGEN können sich über mehrere Unterseiten verteilen (Leistung 1, Leistung 2, Leistung 3, ect.)

Impressum und Datenschutzerklärung sind rechtlich verpflichtend und gehören zu jeder Website

Optional: Blog, AGB, Suchfunktion, Kontaktformular, Bestellmöglichkeit, Mitgliederbereich, Newsletteranmeldung, Gästebuch, Bildergalerie, usw.

Schritt 2: Beschreibung Deiner Inhaltsseiten

Wenn Du bis jetzt alle Punkte abgearbeitet hast, wirst Du schon eine ungefähre Vorstellung davon haben, welche Inhaltselemente benötigt werden und wo und wie Du diese platzieren möchtest. Hilfreich ist es, wenn Du Dir für jede Seite eine Seitenbeschreibung anlegst, um die Inhalte zu strukturieren und zu definieren. Was soll der Nutzer auf welcher Seite vorfinden? Eine Seitenbeschreibung sieht in etwa so aus:

• Titel der Seite
• Kurzbeschreibung, was auf der Seite stehen soll (z.B. Detailansicht der Leistung, Möglichkeit um mit mir in Kontakt treten zu können, Informationen über mich, etc.)
• Benötigst du Formularfelder, Dropdown Menüs, Buttons wie lauten die einzelnen Punkte davon…
• Soll es eine Verlinkung zu der eigenen oder einer anderen Website geben?
• Soll es eine Seitenleiste geben, was soll darin enthalten sein, …

Noch ein paar Tipps zur Startseite:

Der erste Eindruck entscheidet über den Erfolg deiner Website. Die Startseite muss das Interesse des Besuchers wecken, noch weitere Seiten unserer Website ansehen zu wollen. D.h. die Zielgruppe soll sich möglichst gut angesprochen fühlen. Der Besucher einer Website entscheidet innerhalb von 7 Sekunden, ob eine Website interessant ist oder nicht

• Die Startseite verschafft einen Überblick, worum es geht und was der Besucher bei dir findet.
• Die Startseite muss das Interesse wecken – verwende möglichst aussagekräftige Bilder
• Alle Themen werden nur kurz vorgestellt, weitere Infos findet der Besucher mit Verlinkungen zu den entsprechenden Unterseiten
• Beschreibe den Nutzen für den Besucher deiner Website.
• Baue Handlungsaufforderungen ein (zB. Kontaktiere mich …, Erfahre mehr …, Melde dich zum Newsletter an …., sieh dir die Seite an ….)
• Es ist vertrauensbildend, wenn du bereits auf der Startseite ein paar Kundenrezensionen oder Referenzen anführst.

Schritt 3: Skizzen anfertigen

Die Vorarbeiten sind erledigt. Ziel, Zielgruppen, die Struktur und die groben Inhalte sind bereits festgelegt.

Der nächste Schritt ist eine grobe Skizze. Nimm am besten einen Stift und ein großes Blatt Papier, um den Aufbau der wichtigsten Unterseiten zu skizzieren.

Zur Ideenfindung kannst du auf der Website deiner Wettbewerber schauen, oder dich bei anderen Websites inspirieren lassen. Meine Kund*innen bitte ich immer, 2-3 Beispiele sogenannter Best-Practices zu nennen. Die gewonnenen Ideen kannst Du bearbeiten oder weiterentwickeln. Male eine einfache grobe Skizze, wo im Kopfbereich das Menü, Slider, etc. stehen sollen. Und darunter die sonstigen Elemente, wie Kästen, Bilder, Button, etc. Dazu kommen bei Bedarf Effekte wie Slider, Videos und div. Elemente.

Schritt 4: Gestaltung festlegen

Ganz zum Schluss bestimmen wir die Gestaltung

• Welche Farben sollen im Design vorherrschen?
• Gibt es bereits Farben, die in Werbemitteln, beim Logo, in den Geschäftsräumen definiert sind?
• Welche Farbe sollen die Links haben, welche Farbe besondere Hervorhebungen?
• Die Schriftfarbe des Haupttextes sollte gut lesbar, also kontrastreich sein (bei einer hellen Website schwarz oder dunkelgrau, bei einer dunklen Website gerne auch weiß). Lass dich inspirieren von anderen Websites. Wichtig ist, dass die Schrift gut lesbar ist.
• Außer der Textfarbe kannst du auch noch Farben für Hervorhebungen, Links und anderen Hervorhebungen wählen. Eventuell auch Hintergrundfarben.
• Tipp: in allen gängigen Browsern (Chrome, Safari, Firefox) gibt es sogenannte Farbpicker, mit denen du Farben anderer Websites bestimmen kannst. Lass dich inspirieren.
• Das gleiche kannst du bei den Schriftarten machen: Probiere mehrere Schriftarten aus. Hier kannst du verschiedene Typografien ausprobieren, indem du direkt Text einsetzt: https://fonts.google.com. Wähle maximal 2 verschiedene Schriftarten, wenn Du für die Überschriften eine andere Schrift als im Text verwenden möchtest. Allerdings nicht mehr, sonst wird der Eindruck zu unruhig. Diese sollten gut miteinander harmonieren.