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, 2025Die bundesweit.digital Farbpalette wurde aktualisiert
Präsentationsvorlage als Download verfügbar
DEZ 18, 2024Die Präsentationsvorlage kann nun gedownloaded werden.
Logo
Mache dich vor dem Verwenden des Logos mit den Richtlinine vertraut.
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
Light-Blue
Light Gray
Hot Pink
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
H1
H2
H3
H4
Fließtexte
Fließtexte Highlights
Formular *-Texte
Typografie Keynote / Print
HEADLINE
Sekundär Headline
Header für Fließtext
Fließtexte
Highlights im Fließtext
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
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
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
Bilderpool
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.