Vom Atom zur fertigen Webseite – das VdS Interface Design

Das Interface Design folgt den formalen Richt­linien des VdS Corporate Designs. Auf Basis des definierten Anforderungsprofils ist ein modularer Baukasten entwickelt worden. Alle Inhalte werden über die definierten Or­ga­nismen abgebildet und in die jeweiligen Seiten portiert.

Luftiger Header und be­nut­zer­freundliches Megamenü

Der reduzierte und helle Einstieg schafft einen schnellen Informationsüberblick. Das be­nutzer­­freund­liche Megamenü bildet alle Level-1-Menü­punkte ab. Erst ab Level 2 wird eine zusätzliche Navigation in einer Marginal­spalte für alle wei­teren Unterpunkte bereit­gestellt.

#003e90

 

#007ec3

#51aee2

#76beea

Ikonografie

Ein umfangreiches Iconset, bestehend aus Kategorisierungs- und Funktionsicons, schafft zusätzliche Orientierung und erhöht das Nutzererlebnis.

VdS Interface Design – Corporate Website – VdS Schadenvehütung – Megamenü – Ikonografie – Iconset
VdS Interface Design – Corporate Website – VdS Schadenvehütung – Sekundäres gestaltungselement

Die abgerundeten Ecken schaffen ein eigenständiges Erscheinungsbild und erhöhen den Wiedererkennungswert des Unternehmensauftritts.

Formsprache

Die Formsprache ist aus dem Logo abgeleitet und zieht sich durch den gesamten digitalen Unternehmensauftritt. 

VdS Interface Design – Corporate Website – VdS Schadenvehütung – Lineare Illustrationen – Icons

Das modulare Baukastensystem

Die Abbildung und Einbettung aller In­for­ma­­tionen basiert auf einem fest de­fi­nier­ten Mo­dul­baukasten. Dies ermöglicht eine effek­tive und schnelle Umsetzung in der Realisierungs­phase.

VdS Interface Design – Corporate Website – VdS Schadenvehütung – Lineare Illustrationen – Icons – Slider

Formular- und Eingabefelder | Radio- und Checkbutton

VdS Interface Design – Corporate Website – VdS Schadenvehütung – Formularfelder – Eingabefelder – Radiobutton – Checkbutton

Dropdown-Liste | Absende-Button

VdS Interface Design – Corporate Website – VdS Schadenvehütung – Dropdown – Liste
VdS Interface Design – Corporate Website – VdS Schadenvehütung – Buttons – Absendebutton

Atomic Design

Nach Fixierung des Webseitenanforderungs­profils wurden alle Interface Design Ele­men­te nach dem Atomic Design Prinzip ent­wickelt.

#003e90

 

#007ec3

#76beea