bundesweit.digital GmbH Design Styleguide v 1.7.3

Der bundesweit.digital Styleguide bietet Komponenten und Tools, um Außenkommunikation
und das Design der Anwendungen einheitlich zu gestalten.

Was ist neu?

Die aktuellsten Anpassungen im Styleguide

Farben aktualisiert

JAN 24, 2025

Die bundesweit.digital Farbpalette wurde aktualisiert

Präsentationsvorlage als Download verfügbar

DEZ 18, 2024

Die Präsentationsvorlage kann nun gedownloaded werden.

Icon

Mache dich vor dem Verwenden des Icons mit den Richtlinine vertraut.

Bildsprache

Die Bildsprache sollte konsistent, authentisch und ansprechend sein, um die Markenwerte klar zu kommunizieren und eine emotionale Verbindung zum Betrachter herzustellen. Global wird ein warmes Colorgrading verwendet, um eine eine einheitliche Grundtonalität in der Bildsprache zu gewährleisten.

Detail
Shots

Detailaufnahmen sollten gezielt eingesetzt werden, um Feinheiten, Materialien oder besondere Merkmale hervorzuheben und so die Wertigkeit und Präzision der Marke zu unterstreichen.

Office
Shots

Officeaufnahmen sollten eine moderne, offene und einladende Arbeitsumgebung zeigen, die Teamarbeit und Professionalität widerspiegelt.

Situations
Shots

Situationsaufnahmen sollten authentische Momente einfangen, die den Einsatz der Produkte oder Dienstleistungen in realen Kontexten zeigen und eine emotionale Verbindung schaffen.

Dateinformate und Benennung

Grundsätzlich liegen Fotos die wir als Agentur aufgenommen haben jeweils als RAW und JPG-Formate vor. Für den Einsatz im Web müssen die Fotos jedoch als webP Datei abgespeichert werden, um eine optimierte Kompression und Dateiengröße zu gewährleisten. Die Dateien werden für Web in den jeweiligen Formaten des Einsatzzweckes abgespeichert Beispiel (1920x760px). Bitte informiert euch hier bei dem jeweiligen Abteilungsleiter oder Auftraggeber.

Um eine einheitliche Dateienbenennung zu gewährleisten nutzen wir folgende Namensstruktur. Bei mehreren Personen werden die Personen mit Nachnamen von links nach rechts im Dateiennamen integriert:

Beispiel:

Struktur:
Firma_Event_Originalnummer_Name1.jpg/.webP

Beispiel:
Budi_Officeshooting_96_Peil.jpg/webP

Colorgrading für Fotos

Ein einheitlicher Look der Bilder auf der Website ist essenziell, um ein harmonisches und professionelles Erscheinungsbild zu schaffen. Das Color Grading hilft dir dabei, den visuellen Stil der Marke zu unterstreichen und ein konsistentes Ergebnis zu erzielen.

Stelle sicher, dass alle Bilder im gleichen Stil bearbeitet werden, egal ob sie von dir oder anderen Fotograf:innen stammen. Falls Bilder stark abweichende Lichtverhältnisse haben, kannst du sie anpassen – achte aber darauf, dass der übergreifende Look konsistent bleibt.

LUTs für Lightroom

Damit du den gewünschten Look schnell und einfach umsetzen kannst, stehen dir hinterlegte LUTs (Lookup Tables) zur Verfügung. Diese LUTs sind speziell für den Markenstil entwickelt und erleichtern dir die Nachbearbeitung in Adobe Lightroom oder anderen Programmen.

So nutzt du die LUTs:

  • Lade dir die LUTs über den Link herunter.
  • Importiere die LUTs in Lightroom unter „Bearbeiten“ → „Profileinstellungen“.
  • Wähle das passende Profil aus, während du dein Bild bearbeitest, um den Look anzuwenden.
  • Du kannst anschließend kleine Anpassungen vornehmen, solange die Grundstimmung erhalten bleibt.

LUTs downloaden:

Farben

Die Farben sind der Grundstein des Designs. Sie definiert unsere Marke und hilfen uns, konsistente Erlebnisse über Marketing und Produkte hinweg zu schaffen. Wir setzen Farbe auf sinnvolle Weise in allen Ausdrucksformen unserer Marke ein.

Füllfarben

Die Primärfarben verkörpern die Kernwerte der Marke und schaffen einen markanten, wiedererkennbaren visuellen Eindruck, der sowohl Stärke als auch Dynamik vermittelt.

Bu.di-Blue

#0e3855
R15 G56 B85
C99 M73 Y41 K36
PMS 648C
RAL: 85.15.07
Primärfarbe

Light-Blue

#A2AEBA
R162 G174 B186
C42 M24 Y20 K3
Sekundärfarbe

Light Gray

#F5F5F5
R249 G249 B248
C3 M2 Y3 K0
Pantone 193
Tertiärfarbe

Hot Pink

#e0163c
R224 G22 B60
C2 M99 Y73 K0
Highlight-Farbe

Typografie

Typografie ist der Grundstein unserer Außenkommunikation. Sie definiert die Stimme unserer Marke und hilft uns, konsistente Erlebnisse über Marketing und Produkte hinweg zu schaffen. Wir setzen Typografie auf sinnvolle Weise in allen Ausdrucksformen unserer Marke ein, um Klarheit und Wirkung zu gewährleisten.

Schrift downloaden:

Typografie im Web

Kategorie
Font
Schriftschnitt
Größe
Spacing

H1

Barlow
Semi Bold / 600
64pt
Auto

H2

Barlow
Semi Bold / 600
50pt
Auto

H3

Barlow
Semi Bold / 600
32pt
Auto

H4

Barlow
Semi Bold / 600
24pt
Auto

Fließtexte

Barlow
Regular / 400
18pt
Auto

Fließtexte Highlights

Barlow
Bold / 700
18pt
Auto

Formular *-Texte

Barlow
Regular / 400
13pt
Auto

Typografie Keynote / Print

Kategorie
Font
Schriftschnitt
Größe
Spacing

HEADLINE

Barlow
Semi Bold / 600
40pt
1.5

Sekundär Headline

Barlow
Semi Bold / 600
14pt
1.5

Header für Fließtext

Barlow
Semi Bold / 600
13pt
1.2

Fließtexte

Barlow
Regular / 400
11pt
1.1

Highlights im Fließtext

Barlow
Semi Bold / 600
11pt
1.1

Iconography

Icons sind ein zentraler Bestandteil der Identität von bundesweit.digital und verbinden Klarheit mit Konsistenz, wobei minimalistische Outline-Icons verwendet werden, um unsere Markenkommunikation visuell zu unterstützen und zu verstärken.

Beispiel-Icons:

Icons downloaden:

Formen

Abgerundete Formen spielen im Webdesign eine wesentliche Rolle, da sie eine freundliche und einladende Atmosphäre schaffen. Durch den gezielten Einsatz von abgerundeten Ecken und Formen kannst du die Ästhetik deiner Website verbessern und die Benutzererfahrung positiv beeinflussen.

Vorteile der abgerundeten Form

  • Visuelle Harmonie: Abgerundete Ecken vermitteln ein Gefühl von Weichheit und Ausgewogenheit, was das Design harmonischer erscheinen lässt.
  • Benutzerfreundlichkeit: Sie erleichtern die visuelle Führung des Nutzers durch die Seite und können wichtige Elemente hervorheben.
  • Modernität: Der Einsatz von abgerundeten Formen verleiht dem Design einen zeitgemäßen und professionellen Look.
  • Markenkohärenz: Durch die Anlehnung an das Icon-Design wird ein kohärentes und einprägsames Nutzererlebnis gewährleistet.

Hinweis

Grundsätzlich werden Hintergrundformen abgerundet. Je nach Größe variiert der Rundungsfaktor von 10px – 25px. Dies ist individuell zu bewerten und kann nicht als pauschaler Wert festgelgt werden. Hauptsache ist, dass ein optisch ausbalanciertes Ergebnis ausgearbeitet wird. Siehe Beispiel:

10px

15px

20px

Buttons

Button

Beschreibung

Um einen Call to Action hervorzuheben: Primäre Buttons sollten pro Bildschirm nur einmal erscheinen (außer im Header oder in modalen Dialogen). Nicht jeder Bildschirm benötigt einen primären Button. Die Verlinkung führt zum Kontaktformular. Die Rundung beträgt immer 10px.

Dies ist der Varianten-Button, um das Design weniger flach wirken zu lassen. Er kann manchmal anstelle des primären Buttons verwendet werden. Die Verlinkung führt zum Kontaktformular. Die Rundung beträgt immer 10px.

Mit umgekehrten Farben und kontrastierender Umrandung eignet er sich für sekundäre Aktionen und dezente Designs. Die Verlinkung führt zum Kontaktformular. Die Rundung beträgt immer 10px.

Dieser Button wird verwendet um auf eine Landingpage bzw. Sub-Seite zu führen. Hier wird mit einem Pfeil gearbeitet der dies symbolisiert.
Die Rundung beträgt 10px.

Formulare

Formulare dienen dazu, Nutzer effizient durch Prozesse wie Kontaktaufnahme, Datenerfassung oder Anmeldung zu führen und sollten klar, einfach und funktional gestaltet sein.

    Beispiel:

    Jetzt connecten
    & mehr Informationen erhalten

      Leistung auswählen* 5 ausgewählt

      Die Datenschutzinformation habe ich zur Kenntnis genommen.

      Mit (*) markierte Felder sind Pflichtfelder.

      Unsere Beratungstermine sind selbstverständlich unverbindlich und kostenlos.

      Vorlagen & Bilderpool

      Unsere Vorlagen und ein zentraler Bilderpool ermöglichen eine einheitliche Gestaltung, vereinfachen Arbeitsprozesse und sorgen dafür, dass immer auf abgestimmte und markenkonforme Inhalte zurückgegriffen wird.

      Webdesign

      Keynote-Vorlage

      Wording

      bundesweit.digital ist eine zukunftsorientierte Software- und Technologieagentur, die Unternehmen durch markitech in den Bereichen Employer Branding, Recruiting und Prozessautomatisierung wachsen lässt. Mit unserem gezielten Fokus auf die Entwicklung maßgeschneiderter Software, den Einsatz künstlicher Intelligenz (KI) und die Optimierung digitaler Prozesse bieten wir ganzheitliche Konzepte, die sowohl interne Effizienz als auch externe Markenpräsenz nachhaltig stärken.

      Als Wegbereiter für modernes Employer Branding kombinieren wir kreative Ansätze mit technologischem Know-how, um Unternehmen dabei zu helfen, Fachkräfte zu gewinnen, sich als attraktive Arbeitgebermarke zu positionieren und langfristig wettbewerbsfähig zu bleiben.
      Unser interdisziplinäres Team aus Expert*innen entwickelt skalierbare Softwarelösungen und automatisierte Systeme, die individuell auf die Bedürfnisse unserer Kund*innen zugeschnitten sind – von der Konzeption bis zur Implementierung.