User Interface

Das User Interface Design von Union Investment ist für eine große Bandbreite von inspirierenden Webseiten und Microsites bis hin zu internen Applikationen und mobilen Apps ausgelegt. Grundlage des User Interface sind neben den Basis- und Grafikelementen die User Experience Prinzipien. Als Grundlage für eine konsistente Gestaltung wird ein Grundset von Komponenten und Interaktionssystemen bereitgestellt, welches anhand spezifischer Anforderungen erweitert und verändert werden kann.

Umgang mit der Markenform

Zeigen Sie die Markenform im ersten Viewport

Die Markenform soll in ihrer typischen Stilistik in digitalen Anwendungen im ersten Viewport (sichtbarer Bereich einer Anwendung ohne gescrollt zu haben) gezeigt werden.
Dies kann als Animation oder statisches Element in der Bühne oder Flashscreen, oder sogar als funktionales Element, wie beispielsweise ein Menü, sein.
Mehr als eine Markenform kann verwendet werden. Wird sie als Kontur verwendet, achten Sie darauf 2 px Konturstärke einzusetzen.

Mehr zu Markenform

Nutzen Sie die Markenform als Bildmaske und Container

Auch Bilder und Containerelemente können im Stil der Markenform gestaltet werden. Setzen Sie diese gezielt ein, um Aufmerksamkeit zu erregen und auf wichtige Inhalte hinzuweisen.

Mehr zu Markenform
Mehr zu Container

Layout

Bedenken Sie Responsiveness

Webseiten und Anwendungen werden schon lange nicht mehr nur auf einem Medium konsumiert. Responsives Design beschreibt die Gestaltung von Inhalten auf verschiedenen Medien, wie Laptop, Tablet und Smartphone.
Anhand eines Gestaltungsrasters lassen sich responsive Anwendungen erstellen, die auf einer Vielfalt von Medien Inhalte unterschiedlich und für das Medium optimiert darstellen. Gestalten Sie für das meistgenutze Endgerät, lassen Sie jedoch andere mögliche Medien nicht außer Acht.

Platzieren Sie Inhalte anhand eines Gestaltungsrasters

Durch die Nutzung eines Gestaltungsrasters lassen sich Komponenten einfach und präzise ausrichten. Achten Sie auf eine Balance zwischen Komponenten und ein harmonisches Gesamtbild.

Achten Sie auf Weißraum

Schaffen Sie durch Platzierung und Struktur eine klare Darstellung von Inhalten. Inhalte und Komponenten sollten nie zu dicht aneinander rücken. Die kann zu Unleserlichkeit und falschem Klickverhalten führen.

Gliederung von Inhalten

Schaffen Sie abgetrennte Inhaltsbereiche

Unterteilen Sie Ihre Inhalte in Sektionen. Diese können durch flächige Hintergründe und Linien voneinander getrennt werden. Achten Sie darauf, Weißräume zu bilden, und nur notwendige Inhalte unterzubringen. Durch Reduktion auf das Wesentliche sind Inhalte leichter zu finden und aufzunehmen. Nutzen Sie in der in Ihrer Gestaltung konventionelle Reihenfolgen und Platzierungen.

Färben Sie den Hintergrund ein

Eine starke Unterscheidung zwischen zwei Sektionen kann durch die Einfärbung des Hintergrunds getroffen werden.
Als Farbe steht das gesamte Spektrum von UI-Blau und Grau sowie Weiß zur Verfügung.

Hinweis: Weitere Farben des Sekundärfarbspektrums sind nur dann zulässig, wenn sie eine inhaltliche Bedeutung besitzen. Beispiel: Alerts (Hinweise auf Prozesse).

Mehr zu Farbe
Mehr zu Container
Mehr zu Alert

Verwenden Sie Trennlinien und Outlines

Alternativ zu vollflächigen Hintergründen können Inhalte auch mit Linien voneinander abgegrenzt werden. Verwenden Sie dazu immer eine Strichstärke von 1px, sowie den Grauwert #C3C3C3.

Mehr zu Farbe
Mehr zu Container
Mehr zu Tabellen

Platzieren Sie Inhalte auf Bildern

Alle verwendeten Bilder sollen dem Bildstil von Union Investment entsprechen. Achten Sie bei der Platzierung Ihrer Inhalte darauf, eine gute Sicht- und Lesbarkeit zu bewahren. Nutzen Sie Bilder, die große, ruhige Flächen besitzen, um Inhalte gezielt zu platzieren. Achten Sie dabei auf responsives Verhalten über alle Medien hinweg.
Bei unruhigen Bildern hilft ein punktuelles Abdunkeln oder Aufhellen, Sicht- und Lesbarkeit zu erhöhen.

Um ein Bild völlig in den Hintergrund zu rücken, kann ein Overlay oder ein Verlauf in Schwarz (#404040) oder Weiß (#FFF) genutzt werden. Diese Bilder sollten, wenn möglich, zuerst unverändert gezeigt werden.

Mehr zu Bildstil

Lesbarkeit von Text wird durch punktuelles Abdunkeln oder Aufhellen erhöht. Achten Sie dabei darauf, keine wichtigen Bildbestandteile zu verfälschen.

Nutzen Sie die Teaser-Vielfalt

Bestehend aus mehreren Elementen, wie Buttons, Links und Metadaten und einer Kurzbeschreibung können Teaser komplexe Inhalte vereinfacht darstellen und einen Absprung zu anderen Inhaltsseiten mit ausführlicher Information schaffen.

Mehr zu Teaser
Mehr zu Flashcards

Lagern Sie Inhalte auf eine zweite Ebene aus

Nicht immer sind alle Inhalte für Nutzer auf den ersten Blick relevant. Durch Komponenten wie Tabs oder Akkordeons können Inhalte auf eine zweite Ebene ausgelagert werden und werden so nur durch Interaktion des Nutzers sichtbar.

Mehr zu Tabs
Mehr zu Akkordeon

Hierarchie und Hervorhebung

Verwenden Sie verschiedene Textstile

Orientieren Sie sich am Basiselement Schrift und nutzen Sie Größe, Farbe und Schriftschnitt, um Überschriften (Headlines) von Mengentexten abzugrenzen.
Wählen Sie als Farbe für Mengentexte und kleine Überschriften im digitalen Bereich Grauschwarz (#404040). Größere Überschriften (im Beispiel H1 und H2) dürfen aufgrund ihrer markenprägenden Wirkung UI-Blau (#00358E) gefärbt werden.
Nutzen Sie für untergeordnete Informationen, wie Bildunterschriften, Quellenangaben und Fußnoten Grau500 (#AEAEAE) als Schriftfarbe.

Mehr zu Schrift

Nutzen Sie die Button-Hierarchie

Buttons geben einen klaren Hinweis auf Interaktion. Oft werden sie deshalb inflationär eingesetzt. Durch die Verwendung von Buttons unterschiedlicher Hierarchieebenen können Sie gezielt auf die Wichtigkeit von Inhalten Einfluss nehmen.
Links sind eine weitere Möglichkeit auf Interaktion hinzuweisen. Nutzen Sie unterstrichene Links immer dann, wenn sie auf eine andere Seite oder ein anderes Programm verlinken.
Jeder Button und Link kann mit einem linksplatzierten Icon versehen werden, um die Interaktion visuell zu unterstützen..

Mehr zu Buttons
Mehr zu Links

Weisen Sie durch Hover auf Interaktion hin

Klickbare Elemente erhalten zusätzlich einen Hoverstatus. Dieser verhält sich der Gestaltung entsprechend, zeigt jedoch klar und deutlich, dass bei einem Klick eine Interaktion stattfindet.

Mehr zu Buttons
Mehr zu Links
Mehr zu Header Navigation

Weisen Sie durch UI-Blau auf Interaktionsmöglichkeit hin

Um klickbare Inhalte zu kennzeichen, nutzen alle interaktiven Komponenten, wie Links, Buttons und Navigationspunkte als Farbe UI-Blau. Ausnahme bilden große Headlines (H1 und H2) aufgrund ihrer markenprägenden Eigenschaft sowie Call-to-Action Buttons, die sich in ihrer Farbigkeit deutlich von Primärbuttons unterscheiden.

Mehr zu Buttons
Mehr zu Formular und Eingabefelder

Nutzen Sie UI-Grün als Hinweis auf aktiven Status

Aktive Inhalte wie Checkboxen und Navigationselemente werden in UI-Grün dargestellt.

Mehr zu Formular und Eingabefelder
Mehr zu Breadcrumb

Machen Sie inaktive Elemente durch Grau kenntlich

Als inaktiv werden Inhalte beschrieben, mit denen Nutzer in der Regel interagieren können, dies jedoch aufgrund einer fehlenden Auswahl oder Einstellung verwehrt wird.
Nutzen Sie Grau (#C3C3C3), um diese Inhalte darzustellen.

Mehr zu Buttons
Mehr zu Links
Mehr zu Formular und Eingabefelder

Nutzen Sie temporäre Überlagerungen

Um sekundäre Inhalte wie Navigationsunterpunkte und Tooltips, aber auch Login-Masken und Formulare darzustellen, empfiehlt sich eine Überlagerung (Flyout/Overlay).
Nutzen Sie in der Gestaltung unser Farbspektrum und einen Schatten.

Schattenspezifikation
Design: #404040, X: 0, Y: 1, Blur: 3, Spread: 0
CSS: box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45)

Um eine Überlagerung über der gesamten Seite hervorzuheben, wird eine vollflächige Abdunklung (#404040, 68% Deckkraft) hinter der Überlagerung verwendet.

Mehr zu Header
Mehr zu Flyouts

Vorlagen & Downloads

Design System in Form einer Sketch-Library

Damit Sie schnell mit der Konzeption beginnen können, haben wir in unserem Sketch-basierten Design System alle Komponenten für Sie in einer Sketch-Library („Bibliothek“) aufbereitet.

Dies hat viele Vorteile: Die Library lässt sich schnell und einfach an jede Sketch-Datei anbinden. Synchronisierungen geschehen automatisch, sodass Sie stets Zugriff auf den aktuellsten Stand der Komponenten haben. Und das über ein einfaches Auswahlmenü. Die Library wird sukzessive weiterentwickelt, was sie zu einem lebenden Dokument macht („Living Library“). Durch die Verknüpfung erreichen Sie Überarbeitungen und Erweiterungen künftig ganz von selbst.

Zur Sketch-Library

Sketch-Library für UX, UI Designer und Screendesigner

Klicken Sie auf den Button. Hierdurch öffnet sich die Browser-Ansicht der Sketch-Library. Bei Klick auf den Button „Add Library to Sketch“ (rechts unten) fügen Sie die Library und all ihre Komponenten des Design Systems Ihrer Sketch-Datei hinzu. In Ihrer Sketch-Datei können Sie von nun an über „Insert > Symbols“ die gewünschten Komponenten verwenden. Sie müssen die „Symbols“ (Masterkomponenten) zudem in der Regel nicht auflösen: Nutzen Sie einfach die „Override“-Funktion von Sketch zur Anpassung von Texten oder Formatierungen.

Sketch-Library für Entwickler

Die Browser-Ansicht der Sketch-Library ermöglicht es Entwicklern, auf schnellem Weg eine erste Asset Inspection vorzunehmen. Klicken Sie einfach im rechten Arbeitsbereich auf „Inspection“. Features wie das Kopieren von CSS-Code sind seitens Sketch bereits in der Planung.

Gestaltung neuer Komponenten

Sollten Sie neue Komponenten benötigen, kommen Sie auf uns zu. Damit Neugestaltungen auch für andere in Zukunft zur Verfügung stehen, werden diese Komponenten geprüft und in unser Design System aufgenommen. Zudem sollten hierbei die Richtlinien zur Benamung von Komponenten und ihrer Varianten beachtet werden („Taxonomie“).

Melden Sie sich dazu bitte bei unseren Ansprechpartnern.

Komponentenbibliothek

Alle Komponenten unserer Segmentseiten finden Sie gelistet in unserer Komponentenbibliothek.

Zur Komponetenbibliothek