Designsystem

Formen

Durch eine definierte Formensprache wollen wir die Aufmerksamkeit des Nutzers lenken. Komponenten werden für gleiche Bedürfnisse und Funktionen wiederverwendet und sind als solche mit und ohne Interaktionen wieder erkennbar. Eine differenzierte Formensprache und deren konsequente Anwendung dient der visuellen Kommunikation und stärkt die Marke Suva nachhaltig.

Inhalt

Unsere Formen

Um eine klare Formensprache auf unseren digitalen Kanälen zu sprechen, unterscheiden wir auf Komponentenebene grundsätzlich zwischen zwei Formen:

Eckig

Rund

UI Prinzipien_Formen_eckig-rund.ai

Einsatz von eckigen Formen

Eckige Formen kommen zum Einsatz um Inhalte zu ordnen, zu strukturieren und den Nutzer klar zu führen. Sollen eckige Formen und Flächen auch eine Interaktion ermöglichen (z.B. Teaserkomponente) wird dazu die Fläche mit einem Schatten ergänzt und signalisiert somit eine Interaktion, einen CTA

Komponentenbeispiele mit rechteckiger Form

Accordion
UI Prinzipien_Accordion.svg
Teaser
UI Prinzipien_Teaser.svg
Tile
UI Prinzipien_Tile.svg
Shortcut
Markenportal_UI Prinzipien_Shortcut.svg

Einsatz von runden Formen

Runde Formen werden zur Vermittlung von Interaktionen und für Call-to-Actions Elemente eingesetzt, da sie klare visuelle Orientierungspunkte bieten und sich gleichzeitig einladend auf die Klickbereitschaft auswirken.

Komponentenbeispiele mit runder Form

Button
Markenportal_UI Prinzipien_Button.svg
Tag
runde formenai.ai
Swiperpfeile
runde formenai.ai
Toggle
Markenportal_UI Prinzipien_Toggle.svg