Leitfaden zur Umsetzung von Digitalmedien

Egal ob für die Gestaltung von Web- oder Microsites, internen Applikationen oder mobilen Apps: Im Kapitel Digitalmedien der CD-Toolbox finden Sie hilfreiche Informationen, um einen konsistenten digitalen Markenauftritt von Union Investment zu gewährleisten.

Die Gestaltung aller Digitalmedien basiert auf unseren Designprinzipien für Basis- und Grafikelemente. Um möglichst effizient zu arbeiten, wird Bestehendes verwendet – und auch bei notwendigen Neuentwicklungen auf Bestehendem aufgebaut.

Grundlagen

Im Kapitel User Interface finden Sie Layoutprinzipien für den grafischen Aufbau von Digitalmedien und im Kapitel User Experience Prinzipien allgemeine Hinweise für eine gute Nutzerführung. Zur Visualisierung von Webseiten-Komponenten steht Ihnen eine Komponentenbibliothek zur Verfügung. Diese umfasst auch HTML-Codes. Mit Hilfe einer dort ebenfalls hinterlegten Sketch-Library können Sie die Webseiten-Komponenten als konzeptionelle Gestaltungsgrundlage auch für andere Digitalmedien nutzen.

Die Iconbibliothek beinhaltet alle aktuellen Vorlagen für Content- und System-Icons. Im Kapitel App-Icons finden Sie Vorlagen für deren Gestaltung. Im Kapitel Digitale Einladungen, Newsletter und Online-Banner werden hilfreiche Gestaltungsbeispiele gezeigt.

Beachten Sie die übergreifenden Prinzipien zum Einsatz der Basiselemente. Darüber hinaus sollten Seiten eines Digitalmediums stets stringent aufgebaut sein, um ein einheitliches Gesamtbild zu erzielen.

Konzeption

Unser Sketch-basiertes Design System ist die ideale Grundlage für die Konzeption und Gestaltung digitaler Medien: Es enthält bereits ein umfängliches Set an Bausteinen und Komponenten, die Sie für den Aufbau Ihres Kommunikationsmittels nutzen können.

Der Fokus der hinterlegten Komponenten liegt aktuell auf Webanwendungen. Diese lassen sich in ihrer Darstellung und Funktionalität jedoch auch auf andere Digitalmedien, wie zum Beispiel Apps, übertragen. Einzelelemente wie beispielsweise Buttons werden in jedem Digitalmedium von Union Investment einheitlich verwendet.

Neuentwicklungen und Abwandlungen

Wir achten auf einen einheitlichen Markenauftritt in digitalen Medien – und darauf, möglichst effizient zu arbeiten. Verwenden Sie daher stets bereits vorhandene Komponenten; Eigenkreationen oder unnötige Abwandlungen sind nicht zulässig. Nur so lässt sich eine einheitliche Nutzerführung in allen digitalen Medien von Union Investment sicherstellen.

Sofern keine passende Komponente für einen bestimmten Inhalt oder Funktion existiert, kann diese nach Absprache mit dem Brand Marketing Team von Union Investment entwickelt werden. Sie sollte sich visuell und funktional möglichst an bereits bestehenden Komponenten orientieren: Aus diesen können Teile übernommen und durch neue Bestandteile angereichert werden. Übergreifend einheitlich bleibt jedoch der Umgang mit Schrift, Farbe und den Hervorhebungs- und Hierarchie-Ebenen.

Bei jeder Neuentwicklung müssen die Gestaltungsprinzipien der Basis- und Grafikelemente berücksichtigt werden.


Zu den Basiselementen
Zu den Grafikelementen

Übernahme aus Bestehendem in Kombination mit einer neu entwickelten Funktion unter Berücksichtigung der Designprinzipien ergibt eine neue Komponente.

Einführung in den Umgang mit Webanwendungen

Bei der Konzeption eines Digitalmediums ist es nicht nur wichtig, sich einen Überblick über gestalterische Grundlagen zu verschaffen. Es gilt auch, sich insbesondere bei Webanwendungen zwischen zwei unterschiedlichen technischen Umsetzungswegen zu entscheiden: Webseiten können unter Verwendung eines Content Management Systems (CMS) aufgebaut werden oder aber ein HTML Framework nutzen.

Die Verwendung eines CMS ist eine geläufige Lösung, wenn unterschiedliche Redakteure unabhängig vom Design Inhalte einpflegen und aktualisieren sollen. Ein HTML Framework hingegen richtet sich eher an technisch versierte Nutzer.

Vergleich zwischen Content Managment Systemen (CMS) und HTML Framework

Ganz gleich, ob CMS oder HTML Framework: In beiden Fällen muss sich das Ergebnis in den einheitlichen Markenauftritt von Union Investment einfügen. Daher stehen für beide fest definierte, einheitliche Elemente zur Verfügung – sogenannte Komponenten.

Komponenten

Als Komponenten versteht man einzelne Bausteine, aus denen sich eine Website aufbauen lässt. So gibt es beispielsweise Komponenten für Überschriften, Bilder oder Videos – aber auch komplexere Komponenten, die mehrere dieser Elemente vereinen.

Komponentenbibliothek

Um zu wissen, wie eine Webseite aufgebaut werden kann, bedarf es des Überblicks aller verfügbaren Komponenten. Diese sind daher in unserer Komponentenbibliothek zentral abgelegt.

Einbindung von Komponenten

Wie Komponenten eingebunden werden, hängt davon ab, ob ein CMS oder HTML Framework die Grundlage der Website bildet: Bei einem CMS können Komponenten ausgewählt werden – beispielsweise aus einer Listenansicht. Bei einem HTML Framework benötigen Sie hingegen den in der Komponentenbibliothek für die entsprechende Komponente hinterlegten Code: Diesen kopieren Sie und fügen ihn an der gewünschte Stelle ein.

Digitalmedien lassen sich so einfach zusammensetzen. Das Beispiel des schematischen Aufbaus einer Webseite verdeutlicht dies: Sie beginnen mit einer passenden Bühnen-Komponente und wählen anschließend weitere Komponenten, um Inhalte platzieren zu können. Den Abschluss bildet eine Footer-Komponente. Ist dieser Rahmen definiert, können Sie – oder ein Redakteur – mit dem Befüllen der Inhalte beginnen.