C3 Brand OSIconsBrand OS 2.4.0

Icons.

Dreißig Piktogramme für Präsentationen, Angebote, Websites und unsere Werkzeuge. Eine dünne schwarze Linie und ein Farbfleck in der Form, um die es geht. Mehr braucht ein Wegweiser nicht.

30Motive
4Farben
2Gründe

Bauplan.

  1. Raster 24 × 24, Schutzzone 2. Alles Wichtige liegt zwischen 3 und 21. Skaliert wird nur im Ganzen: 16, 24, 32, 48 oder größer.
  2. Linie 1 in Schwarz. Runde Enden, runde Ecken an Knicken, keine zweite Strichstärke. Auf Schwarz wird die Linie Offwhite.
  3. Ein Farbfleck pro Icon. Er liegt deckungsgleich hinter der Linie und füllt die Form, um die es geht. Nie zwei Farben in einem Icon.
  4. Jedes Icon in jeder Farbe. Die Farbe trägt keine Bedeutung, sie richtet sich nach der Unterlage. Wie sie gewählt wird, steht unter Einsatz.
    Gelbsparsam, als Anstecker
    Türkisruhig, viel Fläche
    Korallewarm, für Menschen
  5. Unter 20 px nur Mono. Der Farbfleck wird bei 16 px zum Krümel. In Fließtext, Tabellen und Buttons darum die Mono-Variante nehmen.
So nicht

Einsatz.

Ein Icon hilft, wenn jemand schneller findet, was er sucht. Es hilft nicht, wenn eine Seite nur voller aussehen soll. Diese Regeln gelten für alle Unterlagen, die C3 in eigener Sache oder für Kunden im C3-Auftritt baut.

Wann ein Icon, wann etwas anderes

IconOrientierung

Leistungen, Agenda, Kontaktdaten, Positionen im Angebot, Navigation, Tabellenköpfe. Überall, wo Dinge gleicher Art nebeneinander stehen.

IllustrationGedanke

Kapiteltrenner, Erklärungen, Workshop-Karten. Dafür gibt es die graphic- und illustration-Motive aus dem Brand OS.

FotoBeweis

Echte Projekte und echte Menschen. Ein Icon ersetzt nie ein Projektfoto und nie das Foto im Kreis neben einem Namen.

NichtsDas Wort reicht

Ein-Wort-Headlines, Zitate, Leitideen und der Claim stehen ohne Icon. Ein Punkt hinter „klar.“ sagt mehr als ein Häkchen davor.

Größe und Fassung je Medium

MediumGrößeFassungHöchstens
Präsentation 16:93 bis 5 % der Folienbreite, bei 1920 px also 56 bis 96 pxFarbe6 pro Folie
Angebot, Konzept, A48 bis 12 mmFarbe, im Fließtext Mono1 pro Position
Website24 bis 32 px, Leistungsübersicht 48 bis 64 pxFarbe, Navigation Mono1 pro Kachel
Social Media15 bis 25 % der KachelbreiteFarbe1 pro Kachel
Werkzeuge (C3 Play u. a.)16 bis 20 pxMono1 pro Knopf
Fließtext, TabelleSchriftgröße × 1,25Mono1 pro Zeile

Abstand und Ausrichtung

  1. Abstand zum Text ist die halbe Icon-Größe. Bei 48 px also 24 px, links daneben oder darüber.
  2. Neben dem Text oben bündig. Die Oberkante des Icons steht auf der Höhe der ersten Zeile, nicht mittig zum ganzen Absatz.
  3. In einer Reihe ist alles gleich. Gleiche Größe, gleiche Farbe, gleicher Abstand, gleiche Position zum Text. Nie ein Icon größer, weil es „wichtiger“ ist.
  4. Spalten auf gleicher Höhe. Stehen Icons über Spalten, beginnen alle Icons und alle Headlines auf derselben Linie.

Beispiele

Copy.

Texte, die man versteht, bevor man sie bewundert. Von der Headline bis zum Impressum.

Code.

Websites und Werkzeuge, die laufen. Gebaut im eigenen Haus, nicht irgendwo vergeben.

Design.

Gestaltung, die die Marke trägt. Mit Absicht und mit Gelb in kleinen Dosen.

Leistungsreihe, Farbe, 56 px · eine Farbe für die ganze Reihe

Meet and BriefWorkshop
3 StundenDauer
4 bis 12 PersonenRunde
RegensburgCreative Strategy Studio

Eckdaten im Fließtext, Mono, 20 px · Icon oben bündig zur ersten Zeile

Farbe

  1. Eine Farbe pro Fläche. Eine Folie, eine Seite, eine Kachel: eine Icon-Farbe. Über ein Dokument darf sie wechseln, etwa pro Kapitel.
  2. Nie Ton in Ton. Auf gelber, türkiser oder koralliger Fläche immer Mono. Ein türkises Icon auf Türkis verschwindet.
  3. Gelb nur, wenn sonst nichts gelb ist. Steht auf der Folie schon das Lockup oder ein gelber Anstecker, Türkis oder Koralle nehmen.
  4. Ausnahme Prinzip C3. Bei curious, clever und creative gelten die Phasenfarben: Türkis, Koralle, Gelb. Nur dort trägt die Farbe eine Bedeutung.
  5. Werkzeuge bleiben Mono. Dort zeigt die Ampel den Status: Haken in Türkis, Ausrufezeichen in Gelb, Kreuz in Koralle. Ein farbiges Icon daneben würde wie ein Status gelesen.

Bedeutung und Menge

  1. Ein Icon pro Aussage. Und eine Aussage pro Icon: Was im Dokument einmal „Termin“ ist, bleibt der Kalender bis zur letzten Seite.
  2. Nie ohne Wort. Jedes Icon steht neben einem Begriff. Allein dürfen nur Download, Weiter und Neu stehen, und auch die nur in Werkzeugen und auf Websites.
  3. Ab sieben wird es eine Liste. Mehr als sechs Icons auf einer Fläche lenken ab. Dann lieber eine saubere Liste ohne Icons.
  4. Das Glas gehört der Party. Es steht für die Partymetapher und den uneingeladenen Gast, also immer für die Marke, um die es geht. Für Veranstaltungen den Kalender nehmen.

Wo Icons nicht hingehören

  • aufs Cover und neben das Logo
  • in Headlines, Leitideen und den Claim
  • als Aufzählungszeichen in Fließtext-Listen
  • auf Fotos, auch nicht mit Kasten dahinter
  • als Ersatz für Logo, „echte“-Lockup oder Illustration
  • in Kundenauftritten mit eigenem Iconset

Technik

  1. Datei nicht verändern. Nicht umfärben, nicht nachzeichnen, nicht aus zwei Icons eins bauen. Fehlt ein Motiv, beim Creative Strategy Studio anfragen.
  2. Immer SVG. In Keynote, PowerPoint und InDesign die SVG platzieren, nicht als PNG exportieren. Skaliert wird nur proportional.
  3. Web und Werkzeuge über das Sprite. assets/icons/icon_sprite.svg, Symbol #icon_idee_mono. Steht Text daneben, bekommt das Icon aria-hidden="true", steht es allein, ein aria-label.
  4. Richtiger Ordner. assets/icons/hell/ für Offwhite und Weiß, assets/icons/dunkel/ für Schwarz.

Vor dem Einsetzen kurz fragen

  1. Findet jemand mit dem Icon schneller, was er sucht?
  2. Steht ein Wort daneben?
  3. Haben alle Icons auf dieser Fläche dieselbe Größe und dieselbe Farbe?
  4. Ist die Icon-Farbe eine andere als die Fläche dahinter?
  5. Würde der uneingeladene Gast damit sympathisch wirken oder aufdringlich?