Wie wird Ihre Website aussehen?
Wie wird Ihre Website aussehen? behandelt die Planungs- und Gestaltungsarbeit, die Sie für Ihre Website erledigen müssen, bevor Sie mit dem Programmieren beginnen. Dazu gehören Fragen wie "Welche Informationen bietet meine Website?", "Welche Schriftarten und Farben möchte ich verwenden?" und "Welche Funktionen soll meine Website haben?"
| Voraussetzungen: | Grundlegende Vertrautheit mit Ihrem Computerbetriebssystem, der grundlegenden Software, die Sie für den Bau einer Website verwenden werden, und Dateisystemen. |
|---|---|
| Lernziele: |
|
Zuerst die Planung
Bevor Sie irgendetwas tun, brauchen Sie einige Ideen. Was soll Ihre Website tatsächlich tun? Eine Website kann grundsätzlich alles tun, aber für den ersten Versuch sollten Sie die Dinge einfach halten. Wir beginnen mit der Erstellung einer einfachen Webseite mit einer Überschrift, einem Bild und einigen 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 zu diesem Thema? Schreiben Sie einen Titel und ein paar Absätze und überlegen Sie, welches Bild Sie auf Ihrer Seite zeigen möchten.
- Wie sieht Ihre Website aus, in einfachen, übergeordneten Begriffen? Wie sieht die Hintergrundfarbe aus? Welche Art von Schriftart ist geeignet: formell, cartoonartig, fett und laut, dezent?
Hinweis: Komplexe Projekte benötigen detaillierte Richtlinien, die alle Details zu Farben, Schriftarten, Abständen zwischen Elementen auf einer Seite, geeigneten Schreibstilen usw. umfassen. Dies wird manchmal als Design-Leitfaden, Design-System oder Markenbuch bezeichnet, und ein Beispiel dafür finden Sie im Firefox Acorn Design System.
Entwurf Ihres Designs
Nehmen Sie nun Stift und Papier und zeichnen Sie grob, wie Ihre Website aussehen soll. Für Ihre erste einfache Webseite gibt es nicht viel zu skizzieren, aber Sie sollten sich jetzt angewöhnen, dies zu tun. Es hilft wirklich — Sie müssen kein Van Gogh sein!
Hinweis: Selbst bei echten, komplexen Websites beginnen die Designteams normalerweise mit groben Skizzen auf Papier und erstellen später digitale Mockups mit einem Grafikeditor oder Webtechnologien.
Webteams umfassen oft sowohl einen Grafikdesigner als auch einen User Experience (UX) Designer. Grafikdesigner erstellen die visuellen Elemente der Website. UX-Designer haben eine eher abstrakte Rolle und beschäftigen sich damit, 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 immer noch Ihre Absätze und den Titel von früher haben. Halten Sie diese griffbereit.
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 nennt man einen Hex-Code (kurz für hexadezimal) und er repräsentiert Ihre Farbe. Kopieren Sie den Code und bewahren Sie ihn vorerst sicher auf.
Auswahl eines Bildes
Um ein Bild auszuwählen, gehen Sie zu Google Images und suchen Sie nach etwas Passendem.
- Wenn Sie das gewünschte Bild gefunden haben, klicken Sie auf das Bild, um eine vergrößerte Ansicht davon 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 des Bildes.
Beachten Sie, dass die meisten Bilder im Web, einschließlich derer bei 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 Option Nutzungsrechte, die darunter erscheint. 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 Webdienst von Google, der Zugriff auf viele Schriftarten bietet.
Sobald Sie eine Schriftart gefunden haben, gibt es zwei Hauptmethoden, sie zu verwenden:
- Fügen Sie eine Referenz in Ihren Code hinzu, um die Schriftart von den Servern von Google zu laden.
- Laden Sie die Schriftartdatei auf Ihr eigenes System herunter, hosten Sie die Schriftart selbst und verwenden Sie Ihre gehostete Kopie im Code Ihrer Website.
Hinweis: Das Hosten von Schriftarten auf Google Fonts kann mit der Datenschutzverordnung der Europäischen Union GDPR unvereinbar sein, da der Schriftdienst die IP-Adresse des Nutzers offenlegt. Wenn dies ein potenzielles Problem darstellt, wählen Sie entweder die zweite Option oder einen Schriftartenanbieter, der GDPR-konform ist, wie z.B. Bunny Fonts.
Alternativ können Sie sichere Webschriftarten wie Arial, Times New Roman oder Courier New verwenden.