»Wie soll Ihre Webseite aussehen?« behandelt die Planungs- und Designarbeit die Sie machen, bevor Sie anfangen Code zu schreiben. Dazu gehören Fragestellungen, wie "Welche Informationen soll meine Webseite bereitstellen?", "Welche Schriftarten und Farben will ich nutzen?" und "Was soll meine Seite tun?"

Das wichtigste zuerst: Planen

Bevor Sie irgendwas machen, brauchen Sie eine Idee. Was soll Ihre Webseite eigentlich machen? Eine Webseite die Sie schreiben, könnte alles machen, was Sie aus dem Internet kennen, aber für den Anfang sollten Sie es einfach halten. Wir werden eine einfache Webseite erstellen mit einem Bild, einer Überschrift und ein paar Absätzen.

Am Anfang sollten Sie sich folgende Fragen beantworten:

  1. Worum geht es auf Ihrer Webseite? Mögen Sie Hunde, Berlin oder Pacman?
  2. Welche Informationen zeigen Sie zu Ihrem Thema? Schreiben Sie einen Titel und ein paar Absätdazu ze und überlegen Sie sich, wie Sie das Thema visualisieren möchten, z.B. mit einer Grafik oder einem Bild.
  3. Wie soll Ihre Webseite aussehen? (Schlagworte genügen)  Welche Farben und Farbkombinationen möchten Sie nutzen? Welche Schriftart ist geeignet: formal, comicartig, plakativ oder subtil?

Hinweis: Komplexe Projekte benötigen detailierte Richtlinien die alle Einzelheiten zu Farbe, Schrift, Abständen, Schreibstil etc. behandeln. Diese Richtlinien werden manchmal »Design Guide« oder »Brand Guide« genannt. Die Firefox OS Guidelines sind beispielsweise ein solches Dokument.

Skizzieren Sie Ihr Design

Benutzen Sie Stift und Papier, um grob aufzuzeichnen wie Ihre Seite aussehen soll. Wo soll das Bild hin und wo die Textinhalte? Wie groß soll die Überschrift sein?

Bei deiner ersten Webseite, gibt es nicht allzu viel zu zeichnen, aber Sie sollten es sich zur Gewohnheit machen, das Design der Webseite auszuarbeiten, bevor Sie anfangen diese zu entwickeln. Das hilft bei der Planung und Ideenentwicklung – ein Künstler müssen Sie dafür nicht sein!

Hinweis: Sogar bei echten, komplexen Webseiten beginnt das Designteam meist mit groben Skizzen auf Papier. Später werden dann digitale Mockups in einem Grafikprogramm oder mit Webtechnologien umgesetzt.

Web Teams umfassen oft sowohl einen Grafikdesigner, als auch einen User Experience (UX) Designer. Grafikdesigner gestalten das Aussehen der Webseite. UX-Designer haben eine abstraktere Aufgabe: Sie gestalten die Erfahrung und Interaktion der Nutzer.

Inhalte und Aussehen bestimmten

Jetzt können Sie die Inhalte der Webseite zusammenstellen, also die Dinge welche letztendlich auf Ihrer Webseite zu sehen sein werden.

Text

Sie haben vermutlich immer noch die Überschriften und Absätze, die Sie zuvor geschreiben haben – die benutzen Sie als erste Textinhalte.

Hauptfarbe

Um eine Farbe auszuwählen, nutzen Sie den Farbwähler und suchen sich eine Farbe aus. Wenn Sie auf eine Farbe klicken bekommen Sie einen seltsamen Sechs-Zeichen-Code (z.B. #660066). Das ist ein Hex(adezimal)-Code und er repräsentiert eine bestimmte Farbe. Speichern Sie diesen Farbcode ab oder schreiben Sie ihn irgendwo auf. 

Bilder

Um ein Bild auszuwählen, gehen Sie auf Google Images oder Flickr und suche nach einem passenden Bild.

Achtung: Die meisten Bilder im Internet sind urheberrechtlich geschützt. Das heißt, man darf sie nicht einfach nutzen – auch wenn die Bilder im Internet ohne Probleme anzuschauen sind und man die Bilder speichern kann.

So findet man Bilder, die man nutzen darf:
- Wähle bei Google Images "Nutzungsrechte"/"Zur Wiederverwendung gekennzeichnet"
- Wähle bei Flickr "" aus.
In beiden Fällen muss man den Namen des Urhebers zitieren.
Mehr zum Urheberrecht auf irights.com

Haben Sie ein Bild gefunden, das Sie nutzen möchten machen Sie folgendes bei Google Images

  1. Klicken Sie auf das Bild
  2. Wählen Sie "Bild ansehen"
  3. Klicken Sie mit der rechten Maustaste auf das Bild und wähle "Grafik speichern unter…" oder kopieren Sie die Internetaddresse des Bildes und speichern diese ab.

Bei Flickr

  1. Klicken Sie auf ein Bild
  2. Klicken Sie "Download this Photo" und wähle eine passende Größe aus.

 

 

Schriftart

Eine Schrift auswählen:

  1. Gehen Sie auf Google Fonts und scrollen Sie durch die Liste bis Sie eine Schriftart entdecken, welche Sie mögen. Sie können auch die Filter auf der rechten Seiten nutzen, um die Auswahl zu filtern.
  2. Klicken Sie den "+" Button bei der gewünschten Schriftart.
  3. Es erscheint eine Popup-Box. Klicken Sie auf den "* Family Selected" Button im unteren Bereich der Seite. ("*" abhängig davon wieviele Fonts man ausgewählt hat).
  4. In der Popup-Box stehen jetzt zwei Codes. Diese können Sie kopieren und in einem beliebigen Texteditor für später speichern.

new version

 

picture with 2 codes of google fonts

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Shidigital, Bissmarc, AndreasL, d_jan
 Zuletzt aktualisiert von: Shidigital,