Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Wie soll deine Website aussehen?

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

»Wie soll deine Website aussehen?« behandelt die Planungs- und Designarbeit die du machst, bevor du den Code schreibst. Dazu gehört Frage zu beantworten wie "Welche Informationen soll meine Website bereitstellen", "Welche Schriftarten und Farben will ich nutzen" und "was soll meine Seite tun?"

Am Anfang: Planen

Bevor du irgendwas machst, brauchst du eine Idee. Was soll deine Website eigentlich machen? Eine Website die du schreibst, könnte alles machen, was du aus dem Internet kennst, aber für den Anfang solltest du es einfach halten. Wir werden eine einfache Website erstellen mit einem Bild, einer Überschrift und ein paar Absätzen.

Am Anfang solltest du folgende Fragen beantworten:

  1. Worum gehts auf deiner Website? Magst du Hunde, Berlin oder Pacman?
  2. Welche Informationen zeigst du zu deinem Thema? Schreibe einen Titel und ein paar Absätze und überlege, wie ob du das Thema visualisieren möchtest, z.B. mit einer Grafik oder einen Bild.
  3. Wie soll deine Website aussehen – ein einfachen Worten. Welche Farben und Farbkombinationen willst du nutzen? welche Schriftart ist geeignet: Formal, Comichaft, eher krass oder subtil?

Hinweis: Komplexe Projkete 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.

Dein Design Skizzieren

Benutze Stift und Papier um grob aufzuzeichnen wie deine Seite aussehen soll. Das hilft bei der Planung und Ideenentwicklung – ein Künstler muss du dazu nicht sein!

Hinweis: Sogar bei echten, koplexen Websites beginnt das Designteam meist mit groben Skizzen. Später werden dann Digitale Mockups in einem Grafikprogramm oder mit Webtechnologien umgesetzt.

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

Inhalte und Aussehen bestimmten

Jetzt kannst du bestimmen was letztendlich auf deiner Website zu sehen sein wird.

Text

Du hast vermutlich immer noch die Überschriften und Absätze, die du zuvor geschreiben hast – die benutzt du später als Inhalt.

Hauptfarbe

Um eine Farbe auszuwählen, nutzen den Farbwähler und suche dir eine Farbe aus. Wenn du auf eine Farbe klickst bekommst du einen seltsamen sech-Zeichen-Cod ewie #AA0063. Das ist ein Hex(adezimal) code und der repräsentiert deine Farbe. Speichere diesen farbcode ab oder schreibe ihn auf. 

Bilder

Um ein Bild auszuwählen, gehe auf Google Images oder Flickr und suche nach einem guten Bild.

Achtung: Die meisten Bilder im Internet sind urheberrechtlich geschützt. Das heißt, du darfst sie nicht einfach nutzen – auch wenn du die Bilder im Internet ohne Probleme anzuschauen sind und du die Bilder abspeichern kannst.

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

Hast du ein Bild gefunden, das du nutzen möchtest mache folgendes bei Google Images

  1. Klicke auf das Bild
  2. Wähle "Bild ansehen"
  3. Klicke mit der rechten Maustaste auf das Bild und wähle "speicher Bild als…" oder kopiere die Internetaddresse des Bildes und speichere diese ab.

Bei Flickr,

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

 

 

Schriftart

Eine Schrift auswählen:

  1. Gehe auf Google Fonts und scroll durch die Liste bis du eine Schriftart die du magst. Du kannst auch die Filter auf der linken Seiten nutzen, um die Auswahl zu filtern.
  2. Klick den "Add to collection" Button bei der Schriftart die du haben möchtest.
  3. Klicke den Use Button im unteren Bereich der Seite.
  4. Auf der nächste Seite scrolle zu Sektion 3 und 4 und kopiere die ausgegebenen Codezeilen in einen Texteditor um diese zu speichern.

 

Schlagwörter des Dokuments und Mitwirkende

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