Welches Logo funktioniert auf deiner neuen Website?

Ein Logo erscheint auf einer neuen Website selten groß und allein. Es muss in einem schmalen Header, neben dem mobilen Menü, als kleines Browsersymbol und auf dunklem Hintergrund funktionieren. Deshalb braucht die Gestaltung konkrete Einsatzsituationen und nicht nur eine schöne Präsentation.

Die Anwendungen gleich mitdenken

Beginne mit einer Liste: Header, mobile Navigation, Profilbild, Angebotsdokument und Visitenkarte. Notiere für jede Anwendung den verfügbaren Platz und den typischen Hintergrund. Ein langes horizontales Logo kann auf der Website passen und als quadratisches Profilbild trotzdem schwierig sein.

Das Ziel ist nicht, für jedes Medium eine andere Marke zu gestalten. Benötigt werden einige durchdachte Varianten desselben Zeichens und Namens. Entwickle sie gemeinsam, damit die kleinere Version keine nachträglich zusammengedrückte Lösung wird.

Verkleinern ist ein nützlicher Realitätstest

Prüfe das Symbol als kleines Browsericon und das vollständige Logo in einem echten mobilen Header. Bleiben die wichtigen Formen erhalten? Laufen dünne Linien zusammen? Ist der Name noch lesbar? Ein kompliziertes Detail wird nicht dadurch brauchbar, dass es auf der großen Präsentationsfolie gut aussieht.

Beim fiktiven Holzatelier Fenyő lassen sich Buchstabenzeichen und Name auch getrennt einsetzen. Die Verpackung bietet Platz für die vollständige Version, ein kleines Icon zeigt dagegen nur das Symbol. Dies ist ein Gestaltungsbeispiel, kein reales Kundenprojekt und kein fertiges Logo zum Herunterladen.

Anwendungsbeispiel: Die Aufgabe des Zeichens hängt von Medium und verfügbarem Raum ab.

Erst die Form, dann besondere Effekte

Eine Schwarzweißversion zeigt, ob das Zeichen auch ohne Farbverlauf und zusätzliche Effekte verständlich bleibt. Farbe und Details sind damit nicht ausgeschlossen. Der Test macht sichtbar, worauf die Wiedererkennung beruht. Prüfe helle und dunkle Hintergründe getrennt: Eine Datei funktioniert nicht automatisch auf beiden.

Arbeite bei der Schriftwahl mit dem vollständigen Namen. Die günstigen Proportionen eines kurzen Musterworts sagen wenig darüber aus, ob der echte Firmenname passt. Buchstabenabstände und der Abstand zum Symbol werden bei kleinen Größen besonders deutlich.

Was gehört zur Übergabe?

• Eine bearbeitbare Vektordatei und eine SVG-Version für das Web.
• Benötigte Rasterexporte mit transparentem Hintergrund.
• Varianten für helle und dunkle Flächen.
• Schutzraum, kleinste Einsatzgröße und Farbwerte.
• Informationen zu Schriften und Nutzung.

Kontrolliere die Web-SVG gesondert. Überflüssige Editordaten, externe Ressourcen und unnötiger Code gehören nicht hinein. Auf der fertigen Website sollte das Logo zur Startseite führen und einen verständlichen zugänglichen Namen für Screenreader haben.

Der letzte Test findet im Einsatz statt. Setze das Logo in den geplanten Website-Header, prüfe einen schmalen Bildschirm und entscheide erst danach über weitere Anpassungen.

Weiterführende Lektüre

Ein Beitrag zum Thema: WEBújítás: Milyen a jó logó az új arculatodhoz?. Der vorliegende Text ist eine eigenständige Bearbeitung mit Schwerpunkt auf der Webanwendung.