MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

»Wie soll deine Webseite aussehen?« behandelt die Planungs- und Designarbeit die du machst, bevor du den Code schreibst. Dazu gehört Fragen zu beantworten, 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 du irgendwas machst, brauchst du eine Idee. Was soll deine Webseite eigentlich machen? Eine Webseite 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 Webseite erstellen mit einem Bild, einer Überschrift und ein paar Absätzen.

Am Anfang solltest du folgende Fragen beantworten:

  1. Worum geht es auf deiner Webseite? 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 du das Thema visualisieren möchtest, z.B. mit einer Grafik oder einem Bild.
  3. Wie soll deine Webseite aussehen? (Schlagworte genügen)  Welche Farben und Farbkombinationen willst du 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.

Skizziere dein Design

Benutze Stift und Papier um grob aufzuzeichnen wie deine 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 du solltest es dir zur Gewohnheit machen, das Design der Webseite auszuarbeiten, bevor du anfängst diese zu entwickeln. Das hilft bei der Planung und Ideenentwicklung – ein Künstler muss du dazu 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 kannst du die Inhalte deiner Webseite zusammenstellen, also die Dinge welche letztendlich auf deiner Webseite zu sehen sein werden.

Text

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

Hauptfarbe

Um eine Farbe auszuwählen, nutze den Farbwähler und suche dir eine Farbe aus. Wenn du auf eine Farbe klickst bekommst du einen seltsamen Sechs-Zeichen-Code (z.B. #660066). Das ist ein Hex(adezimal)-Code und er repräsentiert deine Farbe. Speichere diesen Farbcode ab oder schreibe ihn dir auf. 

Bilder

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

Achtung: Die meisten Bilder im Internet sind urheberrechtlich geschützt. Das heißt, du darfst sie nicht einfach nutzen – auch wenn 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 "Grafik speichern unter…" 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 scrolle durch die Liste bis du eine Schriftart entdeckst, die du magst. Du kannst auch die Filter auf der rechten Seiten nutzen, um die Auswahl zu filtern.
  2. Klick den "+" Button bei der gewünschten Schriftart.
  3. Es erscheint eine Popup-Box. Klicke auf den "* Family Selected" Button im unteren Bereich der Seite. ("*" abhängig davon wieviele Fonts du ausgewählt hast).
  4. In der Popup-Box siehst du jetzt zwei Codes. Diese kannst du 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,