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?"

Das wichtigste zuerst: 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 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.

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, komplexen 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 Sechs-Zeichen-Code (z.B. #AA0063). Das ist ein Hex(adezimal) code und er 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 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 scroll durch die Liste bis du eine Schriftart entdeckst, die du magst. Du kannst auch die Filter auf der linken 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 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: Bissmarc, AndreasL, d_jan
 Zuletzt aktualisiert von: Bissmarc,