Anmelden / Registrieren Konto
Jump to section

Symbole stehen für abstrakte und buchstäbliche Konzepte. Mit ihnen können wir verschiedene Ideen und Technologien darstellen. Jedes Symbol in unserem Set hat eine ganz bestimmte Bedeutung und ein konsistentes Design. So wird eine konsistente und effektive Kommunikation in unserem Unternehmen sichergestellt.

Je nach Umfang ist möglicherweise ein anderes Symbol oder eine andere Illustration erforderlich.

UI-Symbole

UI-Symbole (Benutzeroberfläche) sind sehr klein und werden in den Oberflächen von Websites oder Produkten verwendet.

Standardsymbole

Symbole repräsentieren ein einzelnes Konzept oder eine Beziehung zwischen zwei Dingen.

Mini-Spots

Mini-Spots sind kleine Illustrationen, die ein einfaches Konzept repräsentieren.

Illustrationen

Illustrationen haben eine Erzählstruktur oder präsentieren ein komplexes Konzept.

Es gibt zwei Arten von Symbolen: Standard- und UX-Symbole. Standardsymbole werden in Marketingmaterialien, Folien, Infografiken und Diagrammen verwendet, UX-Symbole in Benutzeroberflächen.

Standardsymbole

Unser Symbolsystem ist einfach, klar und offen. Alle Symbole verwenden dieselben Strichstärken und Eckenradien. Sie zeigen Objekte von vorn, verwenden die abgeflachte Perspektive und bestehen ausschließlich aus geometrischen Figuren. Unsere Standardsymbole sind standardmäßig in zwei Versionen verfügbar: gefüllt und nicht gefüllt. Darüber hinaus gibt es die drei Farben Rot, Schwarz und Weiß. Sie können allerdings durch alle Farben auf unserer Markenpalette ersetzt werden.

Verwenden Sie Standardsymbole in Marketingmaterialien, Präsentationen, Webinhalten, Infografiken und Diagrammen. Sie sind für Größen zwischen 32 und 100 Pixeln am besten geeignet.

Standardsymbole erstellen

Unsere Symbol-Library wird im Lauf der Zeit kollaborativ erstellt. Teilen Sie Symbole mit uns, die Sie neu erstellt haben. Damit von Ihnen erstellte Symbole mit dem vorhandenen Set kompatibel sind, sollten Sie die Vorlage verwenden und die folgenden Richtlinien beachten.

1. Zeichnen Sie Symbole auf einem 36-Pixel-Artboard. Nutzen Sie bei Bedarf auch den inneren Rahmen, damit bei jedem Symbol Proportionen und Größe ähnlich sind. Der äußere Rand muss allerdings frei bleiben.

2. Alle Winkel sollten 0°, 45° oder 90° oder einen dieser Winkel plus/minus 12° betragen. Wir verwenden 12-Grad-Winkel, weil sie zu den steigenden und fallenden Linien in unserer Schriftart passen.

3. Erstellen Sie zunächst nicht gefüllte Symbole. Verwenden Sie eine 1,5er-Strichstärke und achten Sie darauf, dass die Enden und Ecken gerundet sind.

4. Verwenden Sie ausschließlich geometrische Figuren, um die grundsätzliche Form des Symbols festzulegen.

5. Verwenden Sie Punkte und gerade Linien, um Details hinzuzufügen. Verwenden Sie im Strich eine Lücke mit 1,5 Punkten, um Offenheit zu erzeugen oder Tiefe zu zeigen. Verwenden Sie für gepunktete Linien einen Bindestrich mit 0 Punkten und eine Lücke mit 2,5 Punkten.

6. Kleine Pfeile sollten 90-Grad-Winkel haben und an beiden Enden 2 Pixel lang sein. Größere Pfeile sollten dieselben Proportionen wie kleinere haben.

Gefüllte Symbole erstellen

1. Wenn Sie ein gefülltes Symbol erstellen, beginnen Sie mit dem Umriss und achten Sie darauf, dass die Füllung dieselbe Farbe hat wie der Strich. Die Größe des Strichs bleibt gleich.

2. Ändern Sie alle Details zu weiß.

3. Ändern Sie die Größe von Details, um eine Lücke mit 1,5 oder 0,5 Punkten zwischen Elementen zu erhalten. Je nach Symbol empfiehlt es sich mitunter, die Linie stattdessen zu verlängern.

UI-Symbole

Bildschirmbasierte Benutzeroberflächen stellen besondere Anforderungen an das Symboldesign. Das gilt insbesondere für Größe und Maßstab. Für Benutzeroberflächen sind Symbole erforderlich, die leicht zu verstehen und auch in sehr kleinen Größen gut erkennbar sind. Bei diesen kleineren Größen sollten Sie bei UI- und Standardsymbolen ähnliche Grundsätze befolgen: 12-Grad-Winkel und rechte Winkel, gerundete Ecken und Enden sowie geometrische Figuren. 

Unsere UI-Symbole sind bei 16 Pixeln flach, einfach und lesbar. Sie werden in der Regel in grau oder weiß verwendet.

1. Beginnen Sie mit einem 16-Pixel-Artboard und einem 1-Punkt-Strich. Legen Sie einen Rand von 1 Pixel um Ihr Design fest.

2. Achten Sie darauf, dass das Symbol in ein Raster mit 14 Pixeln passt.

3. Referenzieren Sie Standardsymbole, und übernehmen Sie Teile von vorhandenen Symbolen. Verwenden Sie nur die notwendigen Elemente, um das Symbol zu identifizieren.

Symbole als Muster

Muster sind eine Möglichkeit, unsere Symbole zur schnellen Erstellung interessanter, optisch ansprechender Grafiken zu verwenden. Verwenden Sie Muster für Hintergründe, oder um Flächen auszufüllen.

Konzepte für Muster

Versuchen Sie beim Erstellen von Mustern ein oder zwei Elemente innerhalb des Musters zu ändern, um es dynamischer zu gestalten. Ein Muster sollte dynamisch und interessant sein, nicht langweilig oder monoton. 

Verwenden Sie ein Symbol und variieren Sie Größe, Farbe oder Füllung. 

Verwenden Sie ein Set aus verwandten Symbolen mit derselben Größe.

Fügen Sie Symbolen in einem Set Verbindungslinien hinzu.

Experimentieren Sie mit Farbe und Maßstab.

Beispiele für Symbole

Erstellen Sie mit minimalen Designelementen zweidimensionale Symbole.

Machen Sie ein Symbol nicht zu kompliziert oder gar dreidimensional.

Verwenden Sie (auch bei mehreren Symbolen) für jedes Symbol dieselbe Linienstärke.

Verwenden Sie keine verschiedenen Linienstärken.

Suchen Sie nach einem konkreten Bild, das die abstrakte Idee darstellen kann.

Achten Sie darauf, dass das Symbol nicht zu abstrakt wird und der Nutzer die Bedeutung nicht mehr versteht.

Verwenden Sie ein Symbol immer nur, um jeweils ein Konzept darzustellen.

Kombinieren Sie nicht zwei Konzepte, um ein noch komplexeres Konzept zu illustrieren.

Variieren Sie ein oder zwei Elemente in einem Muster, um einen Rhythmus zu erzeugen und Interesse zu wecken.

Verwenden Sie nicht dasselbe Muster ohne Variation. Das ist langweilig und repetitiv.

Verwenden Sie ein Muster, das nicht zu komplex ist und nicht den Text beeinträchtigt.

Verwenden Sie kein Muster, das sich mit der Botschaft überschneidet.

Mit Standardsymbolen können Sie etwa Ihre Präsentation ganz unkompliziert visuell interessanter gestalten und wichtige Punkte hervorheben.

In der Benutzeroberfläche von redhat.com wird die Navigation auf unserer Website durch UI-Symbole einfach und intuitiv.