Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Webdesign » Die Entwicklung eines Styleguides

Die Entwicklung eines Styleguides

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Sven Lennartz
  • 21. Oktober 2015

Inhaltsverzeichnis

Der Styleguide ist ein mehr oder weniger umfassendes Regelwerk, das die Erscheinung sämtlicher Online-Publikationen einer Firma oder Institution in klaren Grundsätzen festlegt und regelt. Was für weitweit tätige Konzerne zwingend ist, macht auch im Kleinen Sinn.

Online-Aktivitäten beschränken sich nicht unbedingt nur auf eine Website, deren Gestaltung einmal festgelegt wurde und die nun fortlaufend gepflegt und erweitert wird. Verschiedene Projekt- und Aktionsseiten, Kampagnen, Weblog, Email, Newsletter mögen dazukommen. Der Styleguide stellt sicher, dass all das dem Erscheinungsbild des Unternehmens entspricht, die jeweiligen Seiten vom Besucher wiedererkannt werden und in gleicher Art und Weise benutzt werden können.

Was gehört in den Styleguide?

Fast alles kann festgelegt werden. Wie weit das sinnvoll ist, bleibt den Erfordernissen des jeweiligen Projekts überlassen. Struktur, Layout, Navigation, Farben, Dateiformate (etwa Flash, PDF, ZIP), Schrift und Typographie, Logoposition, Textkomponenten wie Überschriften und Anreißer, Platzierung und Abmessung von Bildern und Illustrationen, verwendete Icons, das Aussehen von Tabellen und Listen, die Gestaltung von Suchboxen und Formularen, einheitliche Textgestaltung (etwa Sonderzeichen, Zitate, Abkürzungen), verwendete Techniken. Eine bestimmte Reihenfolge ist nicht erforderlich.

Augen geradeaus! Welches Icon wann zum Einsatz zu kommen hat regelt der Styleguide der Bundeswehr

Dass sich die Bundesregierung bei einer Vielzahl von Seiten und Projekten über ein einheitliches Erscheinungsbild Gedanken macht, überrascht nicht. Der dazugehörige Styleguide bringt es auf satte 68 Seiten und regelt so ziemlich alles bis ins Detail.

Screenshot
Exakte Vorschriften für die Position des Logos

Der Styleguide ist kein Lastenheft oder Pflichtenheft. Er wird nicht nur für ein Einzelprojekt verwendet. Er richtet sich stattdessen an verschiedene Designer, Agenturen und Mitarbeiter, sollte also mögliche Fragen bereits im Vorfeld beantworten können.

Grundlagen für die Entwicklung eines Styleguide sind eventuell vorhandene Vorgaben für das Corporate Design (CD). Diese gilt es ins Web zu übertragen, beziehungsweise zu ergänzen. Es ist klar, das eine Hausschrift oder eine Schriftenvorgabe nicht ins WWW übernommen werden kann. Ebenso wenig macht es Sinn mit definierten Pixelwerten zu arbeiten, das Web verlangt relative Werte.

Screenshot
Verwendete Farben bei ABB

Es macht Sinn einen Styleguide in Form von HTML zu publizieren. Er muss damit nicht öffentlich zugänglich sein, kann aber Live-Beispiele zeigen, außerdem Templates oder Photoshop-Vorlagen bereithalten. Zudem ist zu bedenken, dass wir es mit einem höchst dynamischen Medium zu tun haben. Ergänzungen und Anpassungen in der Zukunft sind wahrscheinlich.

Ein einfacher Styleguide macht auch Sinn, wenn es um das eigene Projekt geht. Mitarbeiter oder Dienstleister müssen nicht jedesmal von neuem instruiert werden, die Stringenz bleibt ohne Aufwand gewahrt. Das spart Zeit, Kosten und Ärger. Auch für Texte lässt sich ein entsprechendes Regelwerk aufstellen.

spiegel personas Die Entwicklung eines StyleguidesDesign-Entwicklung mit Enteicklung von Marketing-Personas. Bildquelle: DevSpiegel

Weitere Informationen

  • Markenidentität: warum eine starke Marke so wichtig für Dein Unternehmen ist

Erstveröffentlichung 21.10.2005

Sven Lennartz

Sven Lennartz

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

iPower, trigger your leads. Logo der SEO Agentur für Berlin.

iPower AG

Berlin

Logo mit dem Schriftzug agenturwitt.

agenturwitt

Freiburg im Breisgau

Minddraft Agentur Logo.

minddraft AG

Allenwinden

SEO-Sicht Agentur Berlin Logo.

SEO-Sicht

Berlin

marketer UX

Düsseldorf

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑