Ein starker Auftritt für die digitale Zukunft von pep.digital
Wenn ein Unternehmen wie pep.digital sich entscheidet, seine Website neu zu gestalten, dann geht es nicht einfach nur um ein schönes Layout. Es geht um Strategie, Nutzererlebnis und ein Design, das mit dem Unternehmen wächst. Für dieses Projekt durfte ich das komplette Webdesign entwickeln – vom Kick-off bis zum finalen Designsystem.
pep.digital steht für individuelle Softwarelösungen, Beratung und maßgeschneiderte digitale Produkte. Dieses Selbstverständnis sollte sich auch in der neuen Website widerspiegeln: klar strukturiert, prägnant in der Darstellung der Lösungen und gleichzeitig so flexibel, dass künftige Inhalte einfach ergänzt werden können.
„Debby hat unsere Website mit viel Kreativität, fachlichem Know-how und einem feinen Gespür für unsere Marke und Bedürfnisse konzipiert und gestaltet. Das Ergebnis passt perfekt zu uns – sowohl visuell als auch inhaltlich. Die Zusammenarbeit war jederzeit angenehm, professionell und auf Augenhöhe. Wir können Debby uneingeschränkt weiterempfehlen."
Der Kick-off Workshop als gemeinsame Grundlage
Unsere wichtigsten Überlegungen:
- Wie schaffen wir ein Designsystem, das sich langfristig nutzen und erweitern lässt?
- Wie gestalten wir eine modulare Struktur, die optimal mit dem geplanten Headless CMS (Payload) zusammenspielt?
- Wie können wir die sechs Lösungsbereiche von pep.digital klar und ansprechend kommunizieren?
- Und wie bringen wir Persönlichkeit auf die Seite, damit Besucher direkt einen Draht zu den Ansprechpartnern finden?
Das Designsystem
Das System umfasst:
- Grid-Layouts für alle Bildschirmgrößen: So bleibt das Layout auf Mobilgeräten genauso stabil wie auf großen Screens.
- Farbsystem mit klar definierten Akzenten: Die Farben transportieren die Markenidentität von pep.digital und sorgen für Wiedererkennung.
- Typografische Hierarchien für bessere Lesbarkeit: Klare Strukturen helfen den Nutzerinnen und Nutzern, sich schnell zu orientieren.
- Spacing und Rhythmus: Einheitliche Abstände geben der Seite Luft zum Atmen und schaffen visuelle Ruhe.
- Bewegung und Mikro-Animationen: Dezente Animationen machen die Seite lebendig, ohne abzulenken.
- Hintergrundgrafiken und Designelemente: Feine Details, die der Seite Charakter verleihen.
Modulare Sektionen als Grundlage zur Implementierung mit dem Headless CMS Payload
Zu den modularen Sektionen gehören beispielsweise:
- Hero-Bereiche mit individueller Ansprache und Bildwelt
- Lösungen-Teaser, die die sechs Kernbereiche präzise auf den Punkt bringen
- Strukturierte FAQ-Module, die später mit Google Schema ausgezeichnet werden können
- Karriere-Module mit integriertem Formular zur Terminvereinbarung
- Call-to-Action-Elemente, die die Ansprechpartner direkt zeigen
Individuell gezeichnete Icons und Grafiken
Die sechs Lösungen von pep.digital sollten visuell klar voneinander abgegrenzt werden und dennoch zur Markenidentität passen. Deshalb haben wir uns entschieden, individuelle Icons für jede Lösung zu gestalten.
Ich habe die Icons zunächst von Hand skizziert, um sicherzustellen, dass jedes Symbol eine eigene Geschichte erzählt. Anschließend wurden sie digitalisiert und finalisiert, sodass sie vielseitig einsetzbar sind – nicht nur auf der Website, sondern auch in Präsentationen, Social Media oder digitalen Kampagnen.
Die Icons helfen den Nutzerinnen und Nutzern, sich schnell zu orientieren, und geben jeder Lösung ein unverwechselbares Gesicht.
Ein persönliches Fotokonzept für mehr Authentizität
Gute Bilder sind ein wesentlicher Bestandteil einer authentischen Website. Gemeinsam mit pep.digital haben wir ein Fotokonzept entwickelt, das die Persönlichkeit des Teams und die Unternehmenskultur sichtbar macht.
Wir haben das Shooting sorgfältig vorbereitet und ich habe es vor Ort begleitet, um sicherzustellen, dass wir genau die Bildwelt einfangen, die wir für die Website brauchen:
- Situative Aufnahmen, die die Arbeitsweise und Atmosphäre bei pep.digital zeigen
- Flexibles Bildmaterial, das auf allen Seiten und Modulen eingesetzt werden kann
- Portraits der Geschäftsführer und des Teams für eine persönliche Ansprache
Das Ergebnis ist ein authentischer Look, der die Seite lebendig macht und potenziellen Kunden wie Bewerbern einen echten Einblick ins Unternehmen gibt.
Übersichtlicher Karrierebereich für eine starke Arbeitgebermarke
Besonders wichtig war uns auch die Gestaltung des Karrierebereichs. pep.digital wächst und braucht eine Plattform, die Bewerberinnen und Bewerbern den Einstieg leicht macht.
Ich habe dafür eine Karriereseite mit klarer Struktur entworfen:
- Übersicht über alle offenen Stellen
- Einzelseiten für jede Position mit allen relevanten Details
- Direkte Kontaktmöglichkeiten und ein eingebundenes Formular zur Terminauswahl
Technische Details für bessere Sichtbarkeit bei Google
SEO war von Beginn an ein fester Bestandteil der Designplanung. Neben einer klaren Content-Struktur haben wir auch an die technischen Feinheiten gedacht:
- Strukturierte Daten für Jobs, FAQs, Blogposts und mehr
- Saubere Hierarchien in den Überschriften für optimiertes Crawling
- Technisches SEO wie Performance und Barrierefreiheit wurde in der Umsetzung von pep mit dem Payload CMS hervorragend realisiert, sodass die Seite auch in Core Web Vitals überzeugt
Mein Fazit zu diesem Projekt
Die Zusammenarbeit mit pep.digital war von Anfang an geprägt von klaren gemeinsamen Zielen. Besonders stolz bin ich auf das umfassende Designsystem und die individuell entwickelten Icons, die dem Projekt einen ganz eigenen Charakter verleihen.
Mit dem neuen Webdesign haben wir nicht nur eine moderne und skalierbare Plattform geschaffen, sondern auch ein digitales Zuhause, das die Persönlichkeit von pep.digital authentisch transportiert. Die modulare Struktur und die durchdachten Details machen die Seite zukunftssicher und bereit für weiteres Wachstum.
Ich freue mich sehr, dieses Projekt als Referenz zeigen zu können – es ist ein wunderbares Beispiel dafür, wie Design und Strategie Hand in Hand gehen.
