Tutorial: Design eines Webauftritts
In diesem Tutorial lernen Sie, wie Sie eine Website selber gestalten können, sodass diese für den Nutzer auch optisch ansprechend ist.
Bei der gestaltung von Websiten gibt es ein paar einfache Tricks, die Sie beachten sollten um das Design objektiv schön wirken zu lassen.
Dazu müssen Sie allerdings mit Grafikprogrammen umgehen können. Geeignet ist zum Beispiel GIMP:
GIMP - The GNU Image Manipulation Program (externer Link)
1. Banner und Farbschema
Als erstes sollten Sie sich ein Banner für Ihre Website überlegen.
Ein Banner sollte sollte zum Thema des Inhalts der Website passen und farblich zum Inhalt passen.
Einfachstes Beispiel: Eine Gärtnerei nimmt als Banner für Ihre Seite (und für die Gärtnerei) eine Blume.
Diese Blume sollte allerdings nicht in ihrer vollen Farbenpracht als Logo verwendet werden, sondern, die Farben sollten reduziert werden.
Auch Helligkeit und Kontrast sollten etwas verändert werden, damit einprägsame Farben entstehen.
Hier das Beispiel für die Gärtnerei:
Hier ist zu beachten, dass der Schriftzug mit den Farben aus der Blüte gemacht wurde. Ein dunkles Grün als Schriftfarbe und zum Kontrast einen Farbverlauf aus helleren Teilen der Blüte als Umrandung.
Dadurch entsteht der Eindruck, das Logo sei ein ganzes Zusammenhängendes. Die Farben passen zusammen.
Weil die Blüte ein Gegenstand ist, der im Alltag vorkommt und Sie mit den Farben vertraut sind, empfinden Sie das Banner auch als "schön".
Achten Sie darauf, dass Sie eine möglichst Hochauflösende Grafikdatei als Bannervorlage nehmen. Das erleichtert die Arbeit später, wenn man verschiedene Bannergrößen braucht.
Jetzt wo das Banner fertig ist, sollten Sie aus diesem ein Farbschema erstellen:
Legen Sie dazu einfach eine Bilddatei an, in der Sie die aussagekräftigsten Farben die im Banner vorkommen übersichtlich speichern. Zusätzlich eignen sich für ein Farbschema auch immer Schwarz und Weiß.
Im Beispiel der Gärtnerei sähe das Farbschema so aus:
Achten Sie darauf, dass sie das Farbschema in einem Verlustfreiem Format (z.B. PNG speichern), sonst könnten sich beim wiederholten Speichern die Farben verfälschen.
Die Grüntöne des Schemas könnten nun z.B. für Designelemente wie Boxen oder das Menü verwendet werden. Die Roten Farbtöne fü Text und Links.
Dabei sollte alles immer möglichst Kontrastreich sein, damit der Text gut Lesbar ist und die Designelemente klar voneinander getrennt sind.
Das Farbschema ist jetzt fertig. Sie können jetzt beginnen die Designelemente zu definieren.
2. Farbschema anwenden und Designelemente entwerfern
Sie haben jetzt sicher schon eine Idee, wie Ihre Seite einmal aussehen soll. Bevor Sie aber das Design im HTML und CSS Code umsetzen, ist es oft hilfreich, erst eine Bilddatei der Seite anzulegen.
Malen Sie mit dem Grafikprogramm Ihrer Wahl einfach eine Skizze, wie die Seite aussehen soll und verwenden nur die Farben aus dem Farbschema! Verwenden Sie auch Farbverläufe.
Arbeiten Sie hier mit Ebenen, damit Sie problemlos die Designelemente verschieben können. Die Skizze muss nicht perfekt sein, sie soll bloß eine grobe Designvorlage sein.
Jetzt können Sie beginnen Ihre Seite in HTML und CSS Code umzusetzen und bei Bedarf immer wieder die Farben anpassen. Verwerfen Sie aber das Farbschema nicht!
Tipp:
Wenn Sie die Farben in HTML-Notation brauchen, so wählen Sie diese in GIMP mit der Pipette aus und doppelklicken auf Ihre Auswahl.
Die HTML-Notation steht im folgenden Dialog:
Für weitere Informationen über Gestaltung von Websiten, sehen Sie sich einfach folgende Tutorials an:
Tutorial: Erstellen einer eigenen Website bzw. HomepageWebsite bekannt machen ohne WerbekostenPHP: Include Sie befinden Sich hier: Tutorials >> Allgemeine Tutorials >> Tutorial: Design eines Webauftritts
