Website (Grafische Elemente)

Fotografie

Bilder erzählen Geschichten – unsere sollten authentisch sein. Bei uns findest du keine starren Vorgaben oder überstylte Stockbilder, die oft künstlich wirken. Stattdessen zeigen wir hier, wie wir unser Unternehmen authentisch nach außen tragen möchten, mit Bildern, die Transparenz und Natürlichkeit vermitteln.

DO

Dieses Bild zeigt eine entspannte Atmosphäre und echtes Miteinander, was perfekt zu unserer Firmenphilosophie passt, da wir auch regelmäßig unsere Arbeitstage mit einem gemeinsamen Spieleabend ausklingen lassen. Ein ideales „Do“, das zeigt, dass echte Momente über gestellte Perfektion hinausgehen.

DON'T

Bilder von Händen, die in der typischen "Teamwork"-Pose übereinandergelegt sind, wirken oft unnatürlich und gestellt, was insbesondere in generischen Stockbildern vorkommt. Dieses Bild zeigt eher ein Klischee von Zusammenhalt und symbolisiert nicht unser Markenimage.

DO

Auch mit diesen Bildern, welche ihr in unserer Broschüre findet wollen wir Authentizität und Individualität vermitteln. Bei uns kann jeder so sein, wie er möchte – genau diese Offenheit für unterschiedliche Persönlichkeiten macht uns aus.

DON'T

Überschwängliche Freude, die oft in gestellten Szenen verwendet wird, um Erfolg oder Begeisterung darzustellen, lehnen wir in unserer Bildsprache ab. Die Männer im Bild wirken nahezu makellos und sehr fotogen. Uns ist jedoch wichtiger, dass unser Team alltäglicher und weniger idealisiert erscheint, um Glaubwürdigkeit zu vermitteln.

DO

Nicht nur den Kleidungsstil, auch den eigenen Arbeitsplatz nach eigenen Wünschen zu gestalten, was sich in persönlichen Setups mit beleuchteten Tastaturen und gemütlicher Beleuchtung widerspiegelt. So schaffen wir eine Arbeitsatmosphäre, in der jede*r sich wohlfühlen und produktiv sein kann, was wir auch visuell nach außen transportieren möchten.

DON'T

Die abgebildeten Personen mit Headset und aufgesetztem Lächeln erinnert eher an eine stereotype Darstellung eines Callcenter-Mitarbeiters und repräsentiert keine realitätsnahe Vorstellung unseres vielseitigen Teams. Unser Unternehmen setzt auf eine authentische Darstellung der Mitarbeiter*innen, die ihre Vielfalt und Individualität zeigt.

Icons

Unsere Icons sorgen für eine klare, intuitive Nutzerführung und prägen das moderne Erscheinungsbild unserer Website sie schaffen Orientierung. Sie sprechen eine klare Designsprache und machen Inhalte greifbar. Die entsprechenden Guidelines zeigen, wie unsere Icons gestaltet und eingesetzt werden für Konsistenz und Benutzerfreundlichkeit. Hier sind einige Beispiele, die unsere Designprinzipien veranschaulichen.

Guidelines

• - Zeichenfläche: Höhe von 300 px, Breite variabel
• - Icon: Höhe von 290 px, Breite variabel
• - Standard Strichstärke von 3 pt
• - Abstand von 5 px zwischen Icon und Zeichenfläche zu allen Seiten
• - Export: "Zeichenfläche verwenden", Auflösung 72 pt, Hintergrund Transparent
• - Nach Export "Zeichenfläche" aus dem Namen löschen
• - PNG-Format

Standard Icons

Icon Typ 2

- Schwarze Konturen, grüne Flächen

- Farben: #000000 (Kontur), #ACD380 (Fläche)

- Verwendung: Icons für Benefits, Funktionen von Produkten etc.

Icon Typ 3

- Nur Konturen, keine Fläche

- Farbe Kontur: #75B726

- Verwendung: Icons für Navigation

Icon Typ 4

- Nur Konturen, keine Flächen

- Farbe Kontur: #7B83EB

- Verwendung: Icons für Microsoft Teams Integration

Icon Typ 4

- Nur Konturen. keine Flächen

- Farbe: #000000

- Verwendung: Funktionen auf Produktdatenblättern

Illustrationen

Unsere Illustrationen verleihen der Website Tiefe und unterstützen die Vermittlung komplexer Inhalte durch visuell ansprechende Darstellungen. Diese Guidelines zeigen, wie unsere detailreichen Illustrationen gestaltet und eingesetzt werden, um Konsistenz, visuelle Klarheit und ein ansprechendes Nutzererlebnis sicherzustellen. Anhand der Beispiele wird verdeutlicht, wie Illustrationen unsere Inhalte gezielt verstärken und das Design harmonisch ergänzen.

Guidelines Standard Illustrationen

- Zeichenfläche: Breite von 1000 px ODER Höhe von 1000 px, je nach Orientierung
- Standard Strichstärke von 4 pt
- Illustrationen gehen bis zum Rand
- Export: “Zeichenfläche verwenden”, Auflösung 72 pt, Hintergrund Transparent
- PNG-Format

Standard Illustrationen

Illustration Typ 2

- Nur Konturen, keine Flächen

- Farben Kontur: #000000, #ACD380

- Verwendung: Illustrationen für Benefits, Vorstellung und Funktionen von Produkten etc. (z.B. für Sicherheit)

Illustration Green-IT

- Nur Konturen, keine Flächen

- Blätter im Vordergrund

- Farben Kontur #000000, #ACD380

- Verwendung: Illustrationen speziell für Green-IT bzw. Umweltbereich

Guidelines Header

- Zeichenfläche: Höhe von 1000 px, Breite variabel
- Standard Strichstärke von 4 pt
- Illustrationen gehen bis zum Rand
- Export: “Zeichenfläche verwenden”, Auflösung 72 pt, Hintergrund Transparent
- PNG-Format

Header Typ 1

- Standard: Schwarze Konturen, grüne Flächen

- ggf. auch hellgraue und schwarze Flächen

- Farben Standard: #000000 (Kontur), #ACD380 (Fläche)

- Verwendung: Header für Produkte

Animationen

Unsere Animationen schaffen durch gezieltes Bewegtbild lebendige Erlebnisse und unterstützen die Benutzerinteraktion auf der Website. Unsere Bewegtbilder (bspw. GIFs) gestalten wir unter anderem mit Videobearbeitungstools wie Adobe After Effects und Adobe Animate.

Guidelines Export

Animation 1

- Schwarze Konturen, farbige Flächen

- Farben: #000000 (Kontur), #11AF81 (Fläche 1), #72C07C (Fläche 2), #ACD380 (Fläche 3)

- Verwendung: Sicherheit bei reventix Webpage – Rechtemanagement 

Animation 2

- Keine Kontur, farbige Flächen

- Farben: #FFFFFF (Schrift), #00525D (Partner Fläche),  #007D8E (Premium Fläche), #00A8BA (Professional Fläche), #00CAD8 (Whitelabel Fläche)

- Verwendung: Partner werden Webpage

Animation 3

- Keine Kontur, farbige Flächen

- Farben : #000000 (Schrift), #75B726 (Fläche), #7B83EB (Fläche), #FFAA00 (Fläche), #E6E6E6 (Fläche), #FFFFFF (Fläche)

- Verwendung: MS-Teams Produktwebpage

Buttons/Links

Für eine konsistente und benutzerfreundliche Navigation innerhalb unserer Website bieten wir zwei Button-Stile. Primary und Secondary – die speziell für verschiedene Anwendungszwecke gestaltet wurden.

Guidelines Secondary Button