Icons

Aufbau der illustrativen Icons

Diese Seite enthält Gestaltungsrichtlinien für die Erstellung einzelner illustrativer Icons sowie für Kompositionen – inklusive Vorgaben zu Raster, Strichstärke, Linienführung, Anschrägung und Anordnung.

Visuelle Charakteristik

Unsere Icons basieren auf den geometrischen Grundformen, abgeleitet aus unserer Schrift BaWue Sans.

Sechs geometrisch gestaltete Icons (Bus, Wolke, Menschen, Justiz, Spaziergänger, Baum) neben dem Schriftzug Baden-Württemberg in BaWü Sans Typografie mit Hilfslinien.

Vereinzelte Unterbrechungen der Linie sowie ein abgeschrägtes Ende der Linie ist charakteristisch für unsere Icons. Das Größenverhältnis der Icons zueinander ist nicht realitätsgetreu.

Erstellung eines illustrativen Icons

Sollten Sie ein Icon benötigen, das es für Ihre Zwecke noch nicht gibt, sollten Ihnen die folgenden drei Schritte helfen, ein Icon zu erstellen. Bitte stimmen Sie dies mit den Corporate-Design-Verantwortlichen über design@stm.bwl.de ab, damit das Icon gegebenenfalls in die offizielle Icon-Sammlung aufgenommen werden.

Schritt 1: Raster

Das Grundraster für (fast alle) illustrativen Icons beträgt 24 x 24 Pixel.

Darstellung eines Sparschwein-Icons in einem 24x24-Pixel-Raster.

Beispiel-Icon “Sparschwein” aus dem Set des Ministeriums für Finanzen.

Innerhalb des Rasters müssen die Icons nicht den ganzen Raum einnehmen.

Zwei Icons: ein Apfel, der das Raster nicht ganz ausfüllt, und ein Gebäude, das das Raster ausfüllt.

Ebenso gibt es vereinzelt Ausnahmen, die das Raster durchbrechen. Diese Icons sind für die Erstellung einer Komposition aus mehreren Icons von Vorteil, um ein lebendiges Gesamtbild zu erstellen.



Bitte stimmen Sie mit den Corporate-Design-Verantwortlichen unter design@stm.bwl.de vorher ab, ob die Notwendigkeit besteht, das Raster zu durchbrechen.

Zwei Bus-Icons; links innerhalb eines 24-px-Rasters, rechts außerhalb eines Rasters.

Schritt 2: Strichstärke

Die Strichstärke bei der Erstellung eines Icons ist, innerhalb des Rasters, immer 2 px breit.

Auto-Icon im 24x24-Raster mit festgelegter Strichstärke von 2 px.

Unsere Kompositions-Elemente für die Icons bestehen aus geraden Strichen und Kreisbögen im rechten Winkel.

Darstellung verschiedener Linien- und Bogenelemente.

Die Strichstärke der Linien muss eingehalten werden. Linien dürfen stellenweise abstrakt innerhalb des Rasters eingesetzt werden. Sie dürfen auch wie im gezeigten Beispiel um 1 px versetzt sein, wenn es dem Motiv hilft.

Kuh-Icon innerhalb eines 24x24-Rasters.
Do
Korrekt: Icon eines Radfahrenden mit nach vorn geneigtem Oberkörper.

Linien dürfen auch schräg im Raster angelegt werden (wie hier im Beispiel: Torso der Person).

Don't
Fahrradfahrer-Icon in Schwarz mit ausgefüllten Flächen auf weißem Hintergrund.

Es dürfen keine Flächen entstehen.

Do
Auto-Icon in einem 24x24-Raster mit klarer Linienführung.

Der Abstand zwischen einzelnen Linienelementen muss ebenfalls das Raster einhalten, muss aber nicht 2 px breit sein.

Don't
Gebäude-Icon mit variierender Strichstärke.

Linien sollten immer mit einem Abstand voneinander gesetzt werden.

Schritt 3: Abschrägung

Die meisten unserer Icons haben stellenweise ein angeschrägtes Linienende von 12°. Dieses ist eine Ableitung aus unserer Hausschrift BaWue Sans.



Nicht jedes Linienende muss abgeschrägt werden. Die Abschrägung soll nur eingesetzt werden, wo sie einen Mehrwert bringt und das Icon zu etwas Besonderem macht.

Darstellung typographischer Elemente wie Buchstaben und Satzzeichen.
Drei Haus-Icons mit variierenden Linienführungen.
Do
""

Anschrägungen am Linienende müssen nicht an beiden Enden gesetzt werden. Ist das aber der Fall, müssen sie parallel sein.

Don't
So nicht: Linie mit Enden, die nicht parallel angeschrägt sind.

Anschrägungen sollen nicht gespiegelt zueinander gesetzt werden.

Do
Haus-Icon mit einfacher Linienstruktur.

Linien innerhalb eines Icons sollten wenn möglich einige Unterbrechungen oder Öffnungen haben.

Don't
So nicht: Icon eines Hauses, das in 3D-Perspektive gezeichnet ist.

Icons sollten wenn möglich nicht perspektivisch dargestellt werden.

Do
Stilisierter Baum mit rundlichen Blättern und geradem Stamm als Symbol.

Unsere Icons haben eine gewisse Leichtigkeit.

Don't
Baum-Icon mit verspieltem, unklarem Design.

Icons sollten nicht zu kompliziert sein.

Do
Symbol zweier stilisierter Personen, eine im Rollstuhl, die andere steht und hebt eine Hand, angeschrägte Darstellung.

Auch Linienenden von Kreisbögen dürfen abgeschrägt werden.

Don't
Symbol zweier stilisierter Personen, eine im Rollstuhl, die andere steht und hebt eine Hand, abgerundete Ecken.

Linienenden und Ecken dürfen nicht abgerundet werden.

Erstellung einer Komposition

Einzelne illustrative Icons können zu Kompositionen zusammengesetzt werden. In der Kombination mehrerer Icons entstehen kleine Geschichten und es können Zusammenhänge besser erklärt werden. Mehrere Icons dürfen nach Belieben in einem Arrangement angeordnet werden. Dabei gelten dieselben Anwendungsregeln wie für ein einzelnes illustratives Icon.

Für die Erstellung einer Komposition mit mehreren Icons dürfen auch zusätzliche Elemente eingebaut werden, um zum Beispiel Berge oder Wasser anzudeuten.

Bei mehreren Icons in einem Arrangement dürfen Icons stellenweise angeschnitten werden, solange das beschnittene Icon erkenntlich bleibt.

Do

Unsere Icons dürfen gespiegelt werden.

Don't
Verschiedene Fahrzeuge eng aneinander, sodass sie sich überschneiden.

Bei der Erstellung einer Komposition aus mehreren Icons ist darauf zu achten, dass durch nebeneinander liegende Linien keine Flächen entstehen.

Do
Zwei Icons: eine Sonne und ein Windrad mit derselben Strichstärke.

Mehrere Icons innerhalb einer Komposition sollen immer dieselbe Strichstärke haben.

Don't

Unterschiedliche Strichstärken innerhalb einer Komposition sind nicht erlaubt.