Colours

Farben transportieren Markenwerte, sie strukturieren aber auch Inhalte und leiten den Nutzer. Ein gutes Farbsystem unterscheidet zwischen Primary Colours (Markenfarben), Secondary Colours (ergänzende Akzente) sowie Farben für Interaktionen und Validierungen, etwa für Buttons, Fehler- oder Erfolgsmeldungen. Ein konsistenter Einsatz sorgt für Klarheit in der Nutzerfürhung und eine starke visuelle Identität.

Primary Colours/Primärfarben

Durch das gezielte Zusammenspiel der Grundfarben entsteht ein prägnantes Farbklima, das unsere visuelle Kommunikation klar definiert. Je nach Kombination erzeugen sie bereits auf Farbebene eine eindeutige Zuordnung zur Marke. In Verbindung mit weiteren Gestaltungselementen tragen sie entscheidend zur charakteristischen Anmutung unseres Markenauftritts bei.

Secondary Colours/Sekundärfarben

Die Sekundärfarben kommen gezielt bei der Gestaltung von Infografiken, Diagrammen und Illustrationen zum Einsatz. In anderen Bereichen der Markenkommunikation wird bewusst auf ihre Verwendung verzichtet.

Neutral Colours/Neutrale Farben

Die neutralen Farben bilden den ruhigen Rahmen des Designs. Sie kommen für Text, Hintergründe und Flächen zum Einsatz.

Interaction & Validation Colours/Interaktions- und Vaidationsfarben

Farben für Interaktionen wie Hover, Klick oder Fokus sowie für Validierungszustände (z. B. Erfolg, Fehler, Warnung) unterstützen Nutzer:innen bei der Orientierung und Rückmeldung. Sie sorgen für intuitive Bedienung und erhöhen die Barrierefreiheit. Ihre Anwendung folgt festen Regeln, um Konsistenz und Wiedererkennbarkeit im digitalen Raum zu gewährleisten.

Typography

Die Hauptschrift bildet das typografische Rückgrat des Markenauftritts – sie sorgt für Konsistenz, Lesbarkeit und Wiedererkennung in allen Medien. Ergänzt wird sie durch eine Akzentschrift, die gezielt für besondere Inhalte wie z. B. Zitate eingesetzt wird. Die Font-Hierarchie strukturiert Inhalte klar und visuell nachvollziehbar: Sie differenziert zwischen Überschriften, Fließtext, Zwischenüberschriften etc. – und führt Nutzer:innen intuitiv durch Inhalte.

4Topline H4 – Roboto Condensed Demi Bold 13 px/2 em 1,2 px

Headline H1 – Roboto Condensed Medium
63 px/1.0 em

Headline H2 – Roboto Condensed Medium
39 px/1.4 em

Headline H3 – Roboto Condensed Medium
24 px/1.4 em

Cross-heading H5 – Roboto Condensed Bold
16 px/ 1.6 em

Caption H6 – Roboto Condensed Regular 14 px/2 em

Copy – Roboto Condensed Regular 16 px/1.8 em Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Hyperlink. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Quote – Georgia 24 px/1.4 em Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Imagery

Bilder, Produktfotos, Illustrationen und auch Videos werden gezielt eingesetzt, um Inhalte visuell zu unterstützen. In Bildergalerien oder Video-Slidern dienen sie zur emotionalen Aktivierung und Informationsvermittlung. Produktfotos können z. B. visuell hervorgehoben werden durch Schattenwürfe. Allgemeine Bildmotive hingegen bleiben schattenlos, können aber durch dekorative Elemente wie Rahmen akzentuiert werden – ein Prinzip, das auch bei Illustrationen Anwendung findet.

Icons & Pictograms

Icons unterstützen die Navigation, vereinfachen die Bedienung und sorgen für klare Orientierung – z. B. im Menü oder bei Social Media. Piktogramme visualisieren Informationen auf prägnante Weise und machen Inhalte leichter erfassbar. Ein konsistenter Stil stärkt den Wiedererkennungswert und unterstützt die Markenwirkung.

Buttons & Links

Primary Buttons stehen für zentrale Handlungen, Secondary Buttons für unterstützende Aktionen. Ihre Farbgebung folgt einer klaren Hierarchie und sorgt für Orientierung und Konsistenz im Interface. Einfache Textlinks (Reference Links) fügen sich in den Fließtext ein, sind aber dennoch klar erkennbar. Navigationslinks, die nicht als Buttons gestaltet sind, nutzen Farbe, Position und Typografie, um als klickbare Elemente wahrgenommen zu werden, ohne die visuelle Gewichtung eines Buttons zu übernehmen.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et Hyperlink et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Accordions/Toogles/Tabs

Tabs teilen Inhalte in übersichtliche Reiter, ideal wenn Nutzer schnell zwischen Themen wechseln sollen. Toggles sind einfache Schalter, mit denen einzelne Infos nach Bedarf ein- oder ausgeblendet werden. Accordions bündeln mehrere ausklappbare Bereiche, perfekt für lange Listen oder FAQs. Kurz gesagt: Tabs helfen bei parallelen Inhalten, Toggles und Accordions schaffen Platz und Übersicht bei vielen Details.

Forms

Formulare sind der direkte Draht zum Nutzer, um Daten zu erfassen oder Aktionen auszulösen. Eine klare, intuitive Gestaltung sorgt für eine hohe Conversion und vermeidet Abbrüche. Zu den Formularen gehört auch die Suche – je präziser und übersichtlicher sie aufgebaut ist, desto besser das Nutzererlebnis. Wichtig ist, dass Forms und Suchfunktionen konsequent einheitlich gestaltet sind, um Verwirrung zu vermeiden und die Bedienbarkeit zu erhöhen.

Diagrams & Tables

Diagramme visualisieren Zahlen und Trends auf einen Blick und machen komplexe Informationen schnell erfassbar. Sie eignen sich besonders, um Vergleiche oder Entwicklungen anschaulich zu zeigen. Tabellen strukturieren Daten klar und detailliert, ideal für präzise Informationen, die Nutzer gezielt durchsuchen oder vergleichen möchten. Beide Elemente sollten übersichtlich und einheitlich gestaltet sein, um die Lesbarkeit und Nutzerfreundlichkeit zu gewährleisten.

Testimonials & Persons

Personen-Module stellen Teammitglieder, Autoren oder Ansprechpartner vor. Sie machen Marken greifbar und stärken die persönliche Bindung. Ein klares, konsistentes Design sorgt für Seriosität und Wiedererkennung. Testimonials präsentieren echte Stimmen zufriedener Kunden. Sie sind ein starkes Vertrauenselement im Webdesign und helfen, Glaubwürdigkeit und soziale Beweise sichtbar zu machen.

Sliders

Slider sind ideal, um mehrere visuelle Inhalte platzsparend und ansprechend darzustellen. Slider eignen sich für aufmerksamkeitsstarke Highlights – z. B. auf Startseiten oder für Kampagnen. Sie schaffen Dynamik, müssen aber gut bedienbar und nicht überladen sein.