Computer-Masters.de > Artikel > Webseiten > Ratgeber: Design eines Webauftritts

Ratgeber: 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

Beispiel für einen Banner
Beispiel für einen Banner

Als erstes sollten Sie sich ein Banner für Ihre Website überlegen.
Ein Banner sollte sowohl in seiner Form als auch in seiner Farbgebung bereits Hinweise auf den Inhalt der Webseite geben, also möglichst eng mit dem Inhalt verknüpft sein.

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 und somit einprägsamer werden.
Auch Helligkeit und Kontrast sollten etwas verändert werden, kräftigere Farben erregen mehr Aufsehen und geben bei der richtigen Farbwahl einen individuellen Wiedererkennungswert.

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:

Beispielsfarbschema für Gärtnerei Test
Beispielsfarbschema für Gärtnerei Test

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ür 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 entwerfen

Designentwurf mit Farbschema
Designentwurf mit Farbschema

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!

Wenn Sie Hilfe zu den HTML/CSS Farbcodes benötigen lesen Sie hier weiter: HTML Farbcodes 

Tipp

GIMP HTML Notation der Farbe
GIMP HTML Notation der Farbe

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 Dialog, der auf der linken Seite zu sehen ist.

 

Für weitere Informationen über Gestaltung von Websiten, sehen Sie sich einfach folgende Tutorials an:

Ratgeber: Die eigene Webseite bzw. Homepage

Ratgeber: Website bekannter machen

 

Sie haben noch Fragen?

Nutzen Sie einfach die Kommentarfunktion, die Ihnen auch als unregistrierter Leser zur Verfügung steht!

Gerne wird Ihnen bei Fragen zum Artikel weiter geholfen! Wenn Sie vom Artikel abweichende Fragen haben, können Sie gerne das Forum verwenden!

 

Kommentare

Computer-Masters.de > Artikel > Webseiten > Ratgeber: Design eines Webauftritts

Anzeige: