Wie wird Ihre Website aussehen?
Wie wird Ihre Website aussehen? behandelt die Planungs- und Designarbeit, die Sie für Ihre Website vor dem Schreiben von Code leisten müssen, einschließlich "Welche Informationen bietet meine Website?", "Welche Schriftarten und Farben möchte ich?" und "Was soll meine Seite machen?"
| Voraussetzungen: | Grundlegende Vertrautheit mit Ihrem Computer-Betriebssystem, der Basissoftware, die Sie zum Erstellen einer Website verwenden werden, und Dateisystemen. |
|---|---|
| Lernziele: |
|
Zuerst: Planung
Bevor Sie irgendetwas tun, brauchen Sie einige Ideen. Was soll Ihre Website eigentlich machen? Eine Website kann im Grunde alles tun, aber für den ersten Versuch sollten Sie es einfach halten. Wir beginnen mit der Erstellung einer einfachen Webseite mit einer Überschrift, einem Bild und ein paar Absätzen.
Um zu beginnen, müssen Sie diese Fragen beantworten:
- Worum geht es auf Ihrer Website? Mögen Sie Hunde, New York oder Pac-Man?
- Welche Informationen präsentieren Sie zum Thema? Schreiben Sie einen Titel und einige Absätze und denken Sie an ein Bild, das Sie auf Ihrer Seite zeigen möchten.
- Wie sieht Ihre Website aus, in einfachen, groben Zügen? Was ist die Hintergrundfarbe? Welche Art von Schriftart ist angemessen: formell, comicartig, fett und laut, subtil?
Hinweis: Komplexe Projekte benötigen detaillierte Richtlinien, die alle Details zu Farben, Schriftarten, Abständen zwischen Elementen auf einer Seite, angemessenen Schreibstilen und so weiter enthalten. Dies wird manchmal als Designleitfaden, Designsprache oder Markenbuch bezeichnet, und Sie können ein Beispiel im Firefox Acorn Design System sehen.
Skizzieren Ihres Designs
Nehmen Sie als nächstes Stift und Papier und skizzieren Sie grob, wie Ihre Seite aussehen soll. Für Ihre erste einfache Webseite gibt es nicht viel zu skizzieren, aber Sie sollten sich jetzt daran gewöhnen, dies zu tun. Es hilft wirklich — Sie müssen kein Van Gogh sein!
Hinweis: Auch bei realen, komplexen Websites beginnen die Designteams normalerweise mit groben Skizzen auf Papier und erstellen später digitale Mockups mit einem Grafikeditor oder Webtechnologien.
Webteams bestehen oft sowohl aus einem Grafikdesigner als auch einem Benutzererfahrungsdesigner (UX). Grafikdesigner erstellen die visuellen Elemente der Website. UX-Designer haben eine etwas abstraktere Rolle bei der Gestaltung, wie Benutzer die Website erleben und mit ihr interagieren werden.
An diesem Punkt ist es gut, den Inhalt zusammenzustellen, der schließlich auf Ihrer Webseite erscheinen wird. Sie sollten noch Ihre Absätze und den Titel von früher haben. Halten Sie diese in der Nähe.
Auswahl einer Themenfarbe
Um eine Farbe auszuwählen, gehen Sie zum Color Picker und finden Sie eine Farbe, die Ihnen gefällt. Wenn Sie auf eine Farbe klicken, sehen Sie einen seltsamen sechsstelligen Code wie #660066. Das wird ein Hex-Code genannt (kurz für Hexadezimal) und stellt Ihre Farbe dar. Kopieren Sie den Code an einen sicheren Ort.
Auswahl eines Bildes
Um ein Bild auszuwählen, gehen Sie zu Google Images und suchen Sie etwas Passendes.
- Wenn Sie das gewünschte Bild gefunden haben, klicken Sie auf das Bild, um eine vergrößerte Ansicht zu erhalten.
- Klicken Sie mit der rechten Maustaste auf das Bild (Strg + Klick auf einem Mac), wählen Sie Bild speichern unter… und wählen Sie einen sicheren Ort zum Speichern Ihres Bildes.
Beachten Sie, dass die meisten Bilder im Web, einschließlich Google Images, urheberrechtlich geschützt sind. Um die Wahrscheinlichkeit einer Urheberrechtsverletzung zu verringern, können Sie den Lizenzfilter von Google verwenden. Klicken Sie auf die Schaltfläche Tools und dann auf die erscheinende Option Nutzungsrechte. Sie sollten die Option Creative Commons-Lizenzen wählen.
Auswahl einer Schriftart
Wie bei Bildern sind viele Schriftarten durch Lizenzen geschützt, was bedeutet, dass Sie sie nicht frei auf Ihrer Website verwenden können. Google Fonts ist ein von Google betriebener Webdienst, der den Zugang zu vielen Schriftarten bietet.
Sobald Sie eine Schriftart gefunden haben, gibt es zwei Hauptmethoden, sie zu verwenden:
- Fügen Sie eine Referenz in Ihren Code ein, um die Schriftart von den Google-Servern zu laden.
- Laden Sie die Schriftart-Datei auf Ihr eigenes System herunter, hosten Sie die Schriftart selbst und verwenden Sie Ihre gehostete Kopie im Code Ihrer Website.
Hinweis: Das Bereitstellen von Schriftarten, die auf Google Fonts gehostet werden, kann mit der Datenschutzverordnung der Europäischen Union GDPR unvereinbar sein, da der Schriftartdienst die IP-Adresse des Nutzers offenlegt. Falls dies ein potenzielles Problem für Sie ist, wählen Sie entweder die zweite Option oder einen Schriftartenanbieter, der mit der GDPR konform ist, wie zum Beispiel Bunny Fonts.
Alternativ können Sie sichere Webschriftarten wie Arial, Times New Roman oder Courier New verwenden.