Konzept & Gestaltung

Intuitive Bedienung, hohe Nutzerorientierung, device-optimierte Performance: Wir gestalten eine digitale Brand Experience, die auf verschiedensten Kanälen überzeugt.

Konzept

Bereits beim Entwurf einer digitalen Anwendung gilt es, bestimmte Grundüberlegungen mit einzubeziehen. Das können technische Rahmenbedingungen sein ebenso wie anwendungsfreundliche Strukturen.

01.

Responsive Design

Grundsätzlich wird jedes neue digitale Serviceprodukt responsive gestaltet. Das bedeutet unabhängig vom Device. Die digitale Anwendung kann so mit verschiedenen Endgeräten genutzt werden – vom PC bis hin zum Smartphone.

01. Responsive Design

Grundsätzlich wird jedes neue digitale Serviceprodukt responsive gestaltet. Das bedeutet unabhängig vom Device. Die digitale Anwendung kann so mit verschiedenen Endgeräten genutzt werden – vom PC bis hin zum Smartphone.

02.

Viewport

Unter dem Viewport versteht man den maximal sichtbaren Bereich einer digitalen Anwendung in Abhängigkeit des verwendeten Endgerätes. Je nach Endgerät führt dies zu unterschiedlichen Seitenverhältnissen und Auflösungen.

Beispiel:
Viewport Desktop vs. Tablet vs. Mobile

02. Viewport

Unter dem Viewport versteht man den maximal sichtbaren Bereich einer digitalen Anwendung in Abhängigkeit des verwendeten Endgerätes. Je nach Endgerät führt dies zu unterschiedlichen Seitenverhältnissen und Auflösungen.

Beispiel:
Viewport Desktop vs. Tablet vs. Mobile

03.

Nutzerorientierung

Für jedes Produkt sind die Nutzer und ihr jeweiliges Verhalten zu berücksichtigen. Das kann konkret bedeuten:

Beispiel 1: Ein Planer arbeitet im Regelfall im Büro, häufig am Desktop-Computer mit großem/zweiten Bildschirm.

Beispiel 2: Ein Installateur arbeitet vor Ort, im Regelfall nur mit einem Smartphone oder maximal einem Tablet.

03. Nutzerorientierung

Für jedes Produkt sind die Nutzer und ihr jeweiliges Verhalten zu berücksichtigen. Das kann konkret bedeuten:

Beispiel 1: Ein Planer arbeitet im Regelfall im Büro, häufig am Desktop-Computer mit großem/zweiten Bildschirm.

Beispiel 2: Ein Installateur arbeitet vor Ort, im Regelfall nur mit einem Smartphone oder maximal einem Tablet.

04.

Informationsarchitektur und Informationshierarchie

Wir möchten Usern möglichst schnell an ihr Ziel bringen: also zu den Informationen, die sie benötigen. Das ermöglichen wir durch einen durchdachten strukturellen Aufbau:

  • Sinnvolle Unterteilung der Inhalte in Abschnitte
  • Navigationswege der User bedenken (Subnavigation, Ankerlinks etc.)
  • Querverweise auf relevante Inhalte

Mit einer zielgruppengerechten Gestaltung erreichen wir am Ende eine hohe Nutzerfreundlichkeit. Diese hinterlässt am Ende einen positiven Eindruck, der bleibt.

04. Informationsarchitektur und Informationshierarchie

Wir möchten Usern möglichst schnell an ihr Ziel bringen: also zu den Informationen, die sie benötigen. Das ermöglichen wir durch einen durchdachten strukturellen Aufbau:

  • Sinnvolle Unterteilung der Inhalte in Abschnitte
  • Navigationswege der User bedenken (Subnavigation, Ankerlinks etc.)
  • Querverweise auf relevante Inhalte

Mit einer zielgruppengerechten Gestaltung erreichen wir am Ende eine hohe Nutzerfreundlichkeit. Diese hinterlässt am Ende einen positiven Eindruck, der bleibt.

05.

Designelemente

Grundlage für digitale Anwendungen bilden die Brand-Basics im Brandportal sowie die grundsätzlichen Layoutregeln für Printmedien:

05. Designelemente

Grundlage für digitale Anwendungen bilden die Brand-Basics im Brandportal sowie die grundsätzlichen Layoutregeln für Printmedien:

Gestaltung

Alle unsere digitalen Anwendungen folgen einheitlichen Prinzipien im Rahmen von Struktur und Gestaltung. Folgende Tipps helfen dabei, einen einheitlichen KESSEL-Look zu erreichen:

Tipp 1

Struktur und Klarheit

Ein sinnvoll gegliedertes Layout schafft Übersichtlichkeit. Die wichtigsten Informationen können so schnell erfasst werden.

Tipp 1 Struktur und Klarheit

Ein sinnvoll gegliedertes Layout schafft Übersichtlichkeit. Die wichtigsten Informationen können so schnell erfasst werden.

Tipp 2

Rhythmus

Eine gleichförmige lässt schnell Langeweile aufkommen. Ein spannendes Wechselspiel aus Text und Bild erzeugt dagegen Abwechslung und erhält die Spannung.

Tipp 2 Rhythmus

Eine gleichförmige lässt schnell Langeweile aufkommen. Ein spannendes Wechselspiel aus Text und Bild erzeugt dagegen Abwechslung und erhält die Spannung.

Tipp 3

Weißraum

Wir nutzen den Weißraum als effektives Gestaltungselement. Die freien Flächen im Layout sorgen für Spannung und helfen darüber hinaus, Inhalte zu gewichten.

Tipp 3 Weißraum

Wir nutzen den Weißraum als effektives Gestaltungselement. Die freien Flächen im Layout sorgen für Spannung und helfen darüber hinaus, Inhalte zu gewichten.

Tipp 4

Asymmetrie

Bilder mal links oder rechts, mal mehrspaltige Raster oder randabfallende Flächen: Durch abwechslungsreiche, asymmetrische Gestaltung bringen wir Lebendigkeit und Dynamik ins Layout.

Tipp 4 Asymmetrie

Bilder mal links oder rechts, mal mehrspaltige Raster oder randabfallende Flächen: Durch abwechslungsreiche, asymmetrische Gestaltung bringen wir Lebendigkeit und Dynamik ins Layout.

Tipp 5

Stringenz

Einheitlichkeit gibt Menschen Orientierung. Deshalb folgen Seiten einer bestimmten Content-Kategorie (z. B. Produktdetailseite, Stellenbeschreibung, Referenz etc.) einem einheitlichen Seitenaufbau.

Tipp 5 Stringenz

Einheitlichkeit gibt Menschen Orientierung. Deshalb folgen Seiten einer bestimmten Content-Kategorie (z. B. Produktdetailseite, Stellenbeschreibung, Referenz etc.) einem einheitlichen Seitenaufbau.

Vorheriges Kapitel

Leitprinzip
Mehr Information

Nächstes Kapitel

UI-Elemente
Mehr Information