Wie wird Ihre Website aussehen?
Wie wird Ihre Website aussehen? behandelt die Planungs- und Designarbeit, die Sie für Ihre Website erledigen müssen, bevor Sie mit dem Schreiben von Code beginnen. Dazu gehören Fragen wie „Welche Informationen bietet meine Website?“, „Welche Schriftarten und Farben möchte ich haben?“ und „Was macht meine Seite?“
| Voraussetzungen: | Grundlegende Vertrautheit mit Ihrem Computerbetriebssystem, der grundlegenden Software, die Sie zur Erstellung einer Website verwenden werden, und Dateisystemen. |
|---|---|
| Lernziele: |
|
Zuerst: Planung
Bevor Sie irgendetwas tun, benötigen Sie einige Ideen. Was soll Ihre Website eigentlich machen? Eine Website kann grundsätzlich alles tun, aber für den Anfang sollten Sie die Dinge einfach halten. Wir beginnen damit, eine einfache Webseite mit einer Überschrift, einem Bild und einigen Absätzen zu erstellen.
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 zu diesem 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 übergeordneten Begriffen? Wie ist die Hintergrundfarbe? Welche Art von Schriftart ist angemessen: formell, cartoonartig, 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 usw. abdecken. Dies wird manchmal als Design-Leitfaden, Design-System oder Markenbuch bezeichnet. Ein Beispiel hierfür finden Sie im Firefox Acorn Design System.
Entwerfen 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 es ist wichtig, sich jetzt daran zu gewöhnen. Es hilft wirklich – Sie müssen kein Van Gogh sein!
Hinweis: Selbst bei echten, komplexen Websites beginnt das Designteam normalerweise mit groben Skizzen auf Papier und erstellt später digitale Mockups mit einem Grafikeditor oder Webtechnologien.
Web-Teams bestehen oft sowohl aus einem Grafikdesigner als auch einem Benutzererlebnis (UX) Designer. Grafikdesigner erstellen die visuellen Elemente der Website. UX-Designer haben eine etwas abstraktere Rolle, indem sie sich damit befassen, wie Nutzer die Website erleben und mit ihr interagieren werden.
An diesem Punkt ist es gut, damit zu beginnen, den Inhalt zusammenzustellen, der schließlich auf Ihrer Webseite erscheinen wird. Sie sollten Ihre Absätze und den Titel von früher noch zur Hand haben. Halten Sie diese in der Nähe.
Wählen Sie eine Themenfarbe
Lassen Sie uns eine Hintergrundfarbe für Ihre Seite auswählen.
- Gehen Sie zum Color Picker und suchen Sie sich eine Farbe aus, die Ihnen gefällt.
- Wenn Sie eine Farbe gewählt haben, sehen Sie einen seltsamen sechsstelligen Code wie
#660066. Das nennt man einen Hex-Code (kurz für hexadezimal) und er repräsentiert Ihre Farbe. Notieren Sie sich den Code vorerst an einem sicheren Ort.
Wählen Sie ein Bild
Jetzt ist es an der Zeit, ein Bild für Ihre Seite zu finden.
-
Gehen Sie zu Google Bilder.
-
Beachten Sie, dass die meisten Bilder im Web, einschließlich der in Google Bilder, urheberrechtlich geschützt sind. Um die Wahrscheinlichkeit zu verringern, dass Sie Urheberrechte verletzen, können Sie den Lizenzfilter von Google verwenden. Klicken Sie auf die Tools-Schaltfläche und dann auf die erscheinende Option Nutzungsrechte. Sie sollten die Option Creative Commons-Lizenzen wählen.
-
Suchen Sie ein geeignetes Bild.
-
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 (Ctrl + Klick auf einem Mac), wählen Sie Bild speichern unter..., und wählen Sie einen sicheren Ort, um Ihr Bild zu speichern.
Wählen Sie eine Schriftart
Es gibt eine Reihe von Schriftarten, die als websichere Schriftarten bekannt sind – wie Arial, Times New Roman oder Courier New –, die auf den meisten Computersystemen allgemein verfügbar sind. Wenn Sie eine dieser Schriftarten auf Ihrer Website verwenden, lädt der Browser die Schriftdatei, die auf dem Computer des Benutzers verfügbar ist.
Wenn Sie jedoch andere Schriftarten verwenden möchten, die auf den Geräten nicht allgemein verfügbar sind, müssen Sie diese entweder zusammen mit Ihren Website-Dateien einbinden oder die Schriftdateien von einem Drittanbieter-Schriftservice referenzieren, damit der Browser sie bei Bedarf herunterladen kann. Google Fonts ist ein solcher Dienst, der Zugang zu vielen Schriftarten bietet.
Lassen Sie uns Google Fonts verwenden, um eine Schriftart für Ihre Website auszuwählen:
- Gehen Sie zu Google Fonts.
- Scrollen Sie durch die Liste der Schriftarten, bis Sie eine finden, die Ihnen gefällt. Falls Sie Schwierigkeiten haben, eine zu finden, können Sie die verfügbaren Filter im anderen Bereich verwenden, um Ihre Suche einzugrenzen.
- Klicken Sie Ihre Schriftart an, und klicken Sie dann auf der nächsten Seite auf die Schaltfläche „Schriftart abrufen“.
- Auf der nächsten Seite klicken Sie auf „Einbettungscode abrufen“.
- Kopieren Sie beide bereitgestellten Codeblöcke und speichern Sie diese an einem sicheren Ort zur späteren Verwendung.
Hinweis: Wie bei Bildern sind viele Schriftarten durch Lizenzen geschützt, was bedeutet, dass Sie sie nicht unbedingt frei auf kommerziellen Websites verwenden können. Im Moment sind Sie beim Lernen von Beispielen sicher, aber behalten Sie dies im Hinterkopf, wenn Sie Schriftarten für echte Websites auswählen.