Web Styleguide

SimpleThings versteht sich als moderne Internetagentur, das Design soll Modernität, Seriosität und Kompetenz vermitteln dabei jedoch frisch und abwechslungsreich wirken.

Dieser Styleguide richtet sich gleichermaßen an Redakteure, die Inhalte in der bestehenden Seite ergänzen, und an Designer, die neue (Unter-)seiten bzw. Landingpages erstellen möchten.

Das SimpleThings-Logo wird im Gegensatz zum Gebrauch in Printmedien ausschließlich ohne das blaue Rechteck gebraucht. Ferner darf es nicht in Farbe oder Form verändert werden. Außerdem soll es aus Performance-Gründen im SVG-Format und als Fallback im PNG-Format eingebunden werden.

logo.svg

logo.png

Schriftarten

Die verwendeten Schriften sind die „Roboto Condensed“ für Überschriften sowie „Segoe UI“ für Fließtext, Bildunterschriften und Listen.

Die „Segoe UI“ kann in folgenden Schriftschnitten verwendet werden:

Die „Roboto Condensed“ als Überschrift ist immer gemäß der jeweiligen Hierarchieebene zu gebrauchen (siehe CSS-Angaben).

Unverlinkter Text auf hellem Hintergrund hat immer die Farbe Dunkelgrau ($darkgrey = #4a4a4a).

Auf farbigen und dunklen Hintergründen ist der Text weiß ($white = #ffffff) oder grau ($lightdarkgrey = #818181).

Überschriften sollen semantisch sinnvoll vergeben werden. Ist lediglich die Gestaltung der Überschrift jedoch nicht deren logische Auszeichnung mit einem h-Tag gewünscht, können die Klassen .h1-.h6 verwendet werden.

• Display 1 und Display 2 kommen ausschließlich im Slider oder im Headbereich auf der Startseite vor.
• Auf jeder Seite kommt die Überschrift h1 nur einmal vor. h2-Überschriften sollen nur dann verwenden werden, wenn es sich im Folgenden um eine Art Unterkategorie der Hauptüberschrift handelt, zum Beispiel:

• Die h3-Überschrift soll verwendet werden, wenn es sich um Unterüberschriften des Textes zum selben Thema handelt, zum Beispiel:

• Alle Überschriften sollen nicht nach Aussehen gewählt werden, sondern immer nach der Logik der entsprechenden Hierarchieebene. Oft reichen die Ebenen h1 bis h3 um Textseiten sinnvoll zu strukturieren. Eine zu tiefe Hierarchie ist dem Überblick oftmals nicht förderlich.

Listen und Aufzählungen

Der Text jeder Liste und jeder Aufzählung entspricht der normalen Fließtextformatierung.

Die Zahlen bei Aufzählungen werden im SimpleThings-Blau dargestellt. Als Listenpunkte werden „Größer-als-Zeichen“ verwendet.

Alle Formularfelder wie Text-, Select- oder Nachrichtenfelder sollten einheitlich mit einem grauen Rahmen von 2 Pixeln Breite gestaltet sein. 

Headerbilder

Die Headerbilder sind Vektorgrafiken. Auf Effekte wie Schatten oder Oberflächenstrukturen sowie auf die 3D-Darstellung wird weitgehend verzichtet (flat-Design). Die Farben sind kräftig und die Formen überwiegend geometrisch.

Es gibt drei Seitentypen und drei Inhaltsschemata (Aufteilung des Inhalts in Spalten). Ein Seitentyp kann jeweils mit einem Inhaltsschema kombiniert werden.

Seitentypen

Inhaltsschemata

Beim Anlegen eines Inhaltselementes muss der Typ desselben festgelegt werden. Normale Inhaltselemente findet man unter dem Tag "Typical Page Content", Zwei- und Dreispaltigkeit erreicht man durch die entsprechende Auswahl unter dem Tag "Grid Elements".

Seitentyp und Inhaltsschema werden miteinander kombiniert. Beispiel:

Auf einer typischen Unterseite wird die der Seitentyp mit der rechten Randspalte verwendet. Dabei enthält die linke Spalte den Haupttext und die rechte Randspalte Zusatzinformationen und weiterführende Links. „Ihr Kontakt zu uns“ sollte möglichst immer an erster Stelle stehen.