Design: Logo, Farben, Schriften und Menü

Modul 4: Seiten, Aussehen und Funktionen · Lesezeit: 8 Minuten

Lernziel: Nach dieser Lektion können Sie im Panel Design Ihren Namen und Ihr Logo, das Favicon, den Stil, das Menüdesign, die Farben, die Schriften, den Dunkelmodus und die Bewegung einstellen, und Sie prüfen, ob der Text auf Ihrer Website gut lesbar ist.

Kernbegriffe: Corporate Design, Stil (Look), Logo, Bildmarke, Wortmarke, Favicon, Menüleiste, Hauptfarbe, Kontrast, Kontrastverhältnis, WCAG, Weblizenz, Dunkelmodus, Bewegung

Warum ein Corporate Design mehr ist als schön

Ein Corporate Design ist die feste Kombination aus Logo, Farben und Schriften, an der Menschen Sie erkennen. Auf einer Website sorgt es für Wiedererkennung (dieselben Farben auf dem Firmenwagen, im Angebot und auf der Website) und muss dabei lesbar bleiben: Hellgrauer Text auf Weiß wirkt ruhig, aber viele Besucher können ihn schlecht lesen, besonders auf einem Smartphone in der Sonne.

Alles im Panel Design ist kostenlos und sofort in der Vorschau sichtbar. Erst wenn Sie auf Speichern klicken, entsteht eine neue Version (Lektion 3.5). Möchten Sie zurück, klicken Sie auf Zurücksetzen oder stellen eine ältere Version wieder her.

Das Panel hat diese Bereiche: Stil, Farben, Schriften, Menüleiste, Name und Logo, Bilder, Form und Abstände, Schrift und Maße, Dunkelmodus und Bewegung.

Name, Logo und Favicon

Unter Name und Logo steht der Name Ihrer Website, so wie er in der Kopfzeile und der Fußzeile erscheint. Darunter folgt das Logo:

• Eigenes Logo hochladen: PNG mit transparentem Hintergrund, SVG, JPG oder WebP, bis 2 MB. Ein Logo im Querformat wirkt in einer Menüleiste am besten.
• Haben Sie kein Logo, hat der Builder eine Wortmarke erstellt: Ihren Namen in Ihrer eigenen Schrift und Ihren Farben. Sie passt sich automatisch an, wenn Sie diese ändern.
• Logo von der KI entwerfen lassen: Sie beschreiben kurz Ihr Unternehmen und die Stimmung („Malerbetrieb in einem Dorf, handwerklich und zuverlässig“) und klicken auf Drei Logos entwerfen. Sie erhalten drei Bildmarken (ein Zeichen ohne Text) in Ihren Farben, mit Ihrem Namen daneben in Ihrer Schrift. Zusammen kostet das 1 Bearbeitung. Wählen Sie eines mit Verwenden aus, oder schreiben Sie, was besser sein könnte („das erste, aber runder“), und klicken Sie auf Drei neue Logos entwerfen; das ist wieder eine Runde von 1 Bearbeitung.
• Anzeige in Menü und Fußzeile: Logo und Name, Nur Logo oder Nur Name, sowie die Größe (Klein, Normal, Groß).

Der Builder warnt, wenn ein Logo dünne Linien hat oder wenig Kontrast zu Ihrer Menüleiste: Klein in der Leiste kann es dann untergehen.

Prüfen Sie ein KI-Logo selbst: Ähnelt es zu sehr dem Logo eines anderen Unternehmens?

Das Favicon ist das kleine Symbol im Browser-Tab und bei Lesezeichen. Wählen Sie Automatisch: Anfangsbuchstabe in Ihren Farben, Ihr Logo oder Eigene Datei (quadratisch, PNG, SVG oder ICO, bis 512 KB).

Stil und Menüleiste

Ein Stil (im Builder auch Look) legt mit einem Klick Schriften, Formen, Buttons, Karten, Menü und Dekoration fest. Es gibt zwölf, zum Beispiel Frisch, Warm, Business, Natur, Atelier und Nacht. Ihre eigenen Farben bleiben erhalten, wenn Sie den Stil wechseln; möchten Sie auch die Farben des Stils übernehmen, klicken Sie auf Auch die Farben dieses Stils. Der Stil Nacht ist immer dunkel.

Unter Menüleiste wählen Sie die Form der Leiste oben auf jeder Seite, aus fünfzehn Designs: volle Breite, zentriert, geteilt, zweizeilig, Farbbalken, umrandet, Pille, mit Kopfleiste, transparent, minimal, schwebend, Rubriken, Segment, Vollbild und Seitenmenü. Der Inhalt des Menüs (Lektion 4.1) bleibt gleich. Einige Hinweise aus den Erklärungen im Builder selbst:

• Transparent sieht nur gut aus, wenn jede Seite einen dunklen Hero oder einen Foto-Hero hat.
• Minimal zeigt nur Ihren Namen und einen Button; die Seitenlinks stehen dann in der Fußzeile.
• Mit Kopfleiste zeigt Telefonnummer und Öffnungszeiten in einer schmalen Leiste darüber. Stimmt diese Telefonnummer?

Unter Farbe der Menüleiste wählen Sie Automatisch (folgt dem Stil), Weiß, Hellgrau, Dunkel oder Akzentfarbe. Eine andere Farbe wünschen Sie sich im Chat.

Farben und Kontrast

Unter Farben stellen Sie die Hauptfarbe ein (Buttons, Akzente), eine zweite Farbe für Farbverläufe und den Hintergrund (Weiß, Creme, Kühl, Grau oder eine Tönung Ihrer Farbe, oder selbst wählen). Mit Buttons mit Farbverlauf erhalten alle Haupt-Buttons einen Verlauf von der einen zur anderen Farbe.

Hier kommt der Kontrast ins Spiel: der Unterschied in der Helligkeit zwischen Text und Hintergrund. Man drückt ihn als Kontrastverhältnis aus, von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß). Die internationale Richtlinie für barrierefreie Websites, die WCAG des W3C, verlangt auf Stufe AA mindestens 4,5:1 für normalen Text und 3:1 für großen Text (etwa 18 Punkt oder 14 Punkt fett). Buttons und andere Bedienelemente müssen gegenüber ihrer Umgebung mindestens 3:1 erreichen.

Der Builder überwacht das für Sie. Wählen Sie eine Farbe, auf der Text schlecht lesbar ist, passt er sie an und meldet, was sich geändert hat, zum Beispiel: „Die Textfarbe ... wurde zu ..., weil Text darauf sonst nicht gut lesbar ist.“ Möchten Sie genau Ihre eigenen Farben behalten, schalten Sie Genau diese Farben behalten ein: Ihre Farben bleiben, und der Text darauf erhält automatisch eine lesbare Farbe. Auch in Abschnitten, die die KI mit eigener Gestaltung erstellt, korrigiert der Builder Textfarben, die unter 4,5:1 (großer Text 3:1) liegen.

Was der Builder nicht beurteilt: Text in einem Foto oder in Ihrem Logo und eine Überschrift über einem unruhigen Foto. Prüfen Sie das selbst, auf einem Smartphone. Sind Sie bei einem Farbpaar unsicher, geben Sie die beiden Farbcodes in einen Kontrastprüfer ein (siehe Weiterführende Links).

Stolperfalle: Eine Hausfarbe aus der Druckerei oder vom Firmenwagen (zum Beispiel ein knalliges Gelb) eignet sich selten als Textfarbe. Verwenden Sie sie als Akzent oder Fläche und halten Sie den Text dunkel.

Schriften und eigene Schriftart

Unter Schriften wählen Sie eine Schrift für die Überschriften und eine für den Fließtext. Die Schriften liegen als Dateien auf Ihrer eigenen Website; es wird keine Verbindung zu einem Schriftendienst eines Dritten aufgebaut. Unter Schrift und Maße stellen Sie mit Schiebereglern für die ganze Website ein: Zeilenabstand und Zeichenabstand von Text und Überschriften, Zeichen pro Zeile, Breite des Inhalts und die Stärke der Überschriften. Wie der Stil setzt einen Regler zurück. Unter Textgröße wählen Sie Normal, Groß oder Extra groß; das geht auch im Chat („Machen Sie die Schrift größer“).

Eine eigene Schriftart ist ebenfalls möglich: Laden Sie sie unter Schriften oder mit der Büroklammer im Chat hoch, als .woff2, .woff, .ttf oder .otf, bis 2 MB pro Datei (mehrere Schriftschnitte sind erlaubt). Danach wählen Sie, wofür: Überschriften, Text oder beides. Das kostet nichts. Eine Schrift von einem Dienst wie Adobe Fonts geht nicht.

Wichtig: Laden Sie nur eine Schrift hoch, für die Sie eine Weblizenz haben. Eine Schriftart ist Software mit einer Lizenz. Eine Lizenz für die Nutzung auf Ihrem Computer (um Drucksachen zu erstellen) erlaubt längst nicht immer, die Datei auf eine Website zu stellen, wo jeder Besucher sie herunterlädt. Prüfen Sie in den Lizenzbedingungen, ob die Nutzung im Web erlaubt ist. Schriften unter der SIL Open Font License dürfen eingebettet und verbreitet werden.

Dunkelmodus und Bewegung

Unter Dunkelmodus wählen Sie Aus (immer hell), Immer dunkel oder Wie das Gerät. Bei der letzten Option sieht ein Besucher, dessen Smartphone oder Computer auf dunkel eingestellt ist, eine dunkle Version Ihrer eigenen Farben. Hintergrund, Text und Hauptfarbe im Dunkelmodus können Sie selbst wählen. Einen Button, mit dem Besucher selbst umschalten, gibt es nicht. Die Vorschau folgt Ihrem Gerät: Stellen Sie Ihr Smartphone oder Ihren Computer auf dunkel, um die dunkle Version zu sehen, und prüfen Sie dann auch Ihr Logo.

Unter Bewegung wählen Sie An, Ruhig oder Aus für die ganze Website und bei Bedarf eine Ausnahme pro Seite. Auch den Mauseffekt am Computer (keiner, Magnet oder Lichtfleck) wählen Sie hier. In der Vorschau steht alles still; mit Animation abspielen sehen Sie sie einmal. Hat ein Besucher auf seinem Gerät weniger Bewegung eingestellt, bleibt alles still. Zu viel Bewegung lenkt ab; auf einer Seite mit viel Text ist Ruhig oder Aus oft besser.

Im Builder: So gehen Sie vor

1. Öffnen Sie Design, Bereich Name und Logo. Klicken Sie auf Eigenes Logo hochladen oder auf Logo von der KI entwerfen lassen.
2. Wählen Sie unter Favicon Ihr Logo oder den automatischen Anfangsbuchstaben.
3. Probieren Sie unter Stil zwei oder drei Stile aus; sehen Sie sich das Ergebnis auch unter Mobil an.
4. Wählen Sie unter Menüleiste ein Design und eine Farbe.
5. Stellen Sie unter Farben Ihre Hauptfarbe ein. Lesen Sie die Meldungen des Builders.
6. Prüfen Sie unter Dunkelmodus und Bewegung, was Sie möchten.
7. Klicken Sie auf Speichern und stellen Sie Ihre Website erneut online.

Zusammenfassung

• Das Panel Design ist kostenlos; Speichern erstellt eine neue Version.
• Ein KI-Logo kostet 1 Bearbeitung für drei Vorschläge; das Favicon erstellt der Builder selbst, oder Sie laden eines hoch.
• Zwölf Stile und fünfzehn Menüdesigns; der Inhalt des Menüs bleibt gleich.
• Die WCAG verlangen mindestens 4,5:1 Kontrast für normalen Text und 3:1 für großen Text; der Builder überwacht das, außer in Fotos und in Ihrem Logo.
• Eine eigene Schriftart nur mit Weblizenz; Dunkelmodus und Bewegung stellen Sie so ein, wie Ihre Besucher es brauchen.

Quiz

Aufgabe

Aufgabe D4.2: Ihr Corporate Design und Kontrast. Stellen Sie Ihr Design ein und messen Sie den Kontrast Ihrer wichtigsten Farbpaare.

Checkliste:

• [ ] Logo hochgeladen oder aus den KI-Vorschlägen gewählt;
• [ ] Favicon eingestellt und im Browser-Tab Ihrer Online-Website gesehen;
• [ ] Stil und Menüdesign gewählt, unter Mobil angesehen;
• [ ] Hauptfarbe eingestellt und die Meldungen des Builders gelesen;
• [ ] Kontrast von Textfarbe auf Hintergrund und von Button-Text auf Button-Farbe mit einem Kontrastprüfer gemessen;
• [ ] Dunkelmodus und Bewegung bewusst gewählt;
• [ ] Design gespeichert und Website erneut online gestellt.

Fragen:

1. Welche Kontrastverhältnisse haben Sie für Text auf Hintergrund und für Button-Text auf Button gemessen, und erreichen sie 4,5:1?
2. An welcher Stelle Ihrer Website steht Text über einem Foto, und ist er auf einem Smartphone gut lesbar?
3. Verwenden Sie eine eigene Schriftart? Wo steht in der Lizenz, dass die Nutzung im Web erlaubt ist?

Nach „erledigt“ sehen Sie eine Beispielantwort: Schildersbedrijf Example hat für Dunkelgrau auf Weiß 14,5:1 gemessen und für weißen Text auf dem grünen Button 5,1:1, beides über 4,5:1; die Überschrift über dem Hero-Foto war schlecht lesbar, deshalb wurde ein dunkleres Foto gewählt; keine eigene Schriftart, also keine Lizenz nötig.

Weiterführende Links

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, Englisch): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, Englisch): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, Englisch): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, offizieller Text (Englisch): https://openfontlicense.org/open-font-license-official-text/