Kundenprojekt im Rampenlicht

Wie Bloom Web Agency Greyd.Suite für ein anspruchsvolles Kundenprojekt eingesetzt hat. Ein Interview.

Screenshot der Website von B&S Engineering GmbH mit dem Slogan ‘Ihr Wegbegleiter in eine energieeffiziente Zukunft.’ Die Website wurde mit der Greyd.Suite erstellt. Im Hintergrund ist eine moderne Architektur mit geschwungenen Linien zu sehen.

Portrait von Sandra Kurze

Sandra Kurze /

29.01.2025


Wie Bloom Web Agency die Greyd.Suite für ein anspruchsvolles Kundenprojekt eingesetzt hat.

Wir interviewen Bloom Web Agency

Vor Kurzem durften wir die Bloom Web Agency zu einem ihrer neuesten Projekte interviewen. Sie sind auf Logo- und Website-Relaunches für kleine und mittlere Dienstleister sowie Industrieunternehmen spezialisiert.

Kürzlich haben sie eine dynamische und designintensive Unternehmenswebsite für eine Engineering-Firma erstellt. Ziel war es, mit der Greyd.Suite die technischen und kreativen Herausforderungen zu bewältigen und ein innovatives Ergebnis zu liefern.

In diesem Interview haben wir nicht nur die kreativen und strategischen Aspekte des Projekts beleuchtet, sondern auch einige der innovativen technischen Möglichkeiten hervorgehoben, die die Greyd.Suite bietet. Besonders interessant für andere Agenturen ist, wie Bloom anspruchsvolle Designideen ohne Einschränkungen umsetzen konnte – von komplexen Hover-Animationen über individuell gestaltete Buttons bis hin zu maßgeschneiderten Global Styles. Diese Einblicke zeigen, wie Agenturen mit der Greyd.Suite auch technisch herausfordernde Projekte effizient und ohne zusätzliche Plugins realisieren können. Dadurch wird deutlich, welches Potenzial unsere Suite bietet, um selbst komplexe Anforderungen mit Leichtigkeit zu bewältigen.

Wer ist der Kunde und was waren seine Anforderungen?

Der Kunde B&S Engineering ist ein aufstrebendes Ingenieurbüro aus Heidelberg/Dresden. Das Unternehmen verfügte bislang nur über ein einfaches Logo sowie eine Onepager-Website, mit der sich das Unternehmen nicht mehr gerecht repräsentiert fühlte. Der Kunde hatte leider zuvor bei einem anderen Dienstleister schlechte Erfahrungen gemacht und ist daher für den Logo- und Website-Relaunch auf uns zugekommen. Ziel des Projektes war es, eine Marke sowie Website zu schaffen, die B&S Engineering eine starke Markenpersönlichkeit verleiht und klar vom Wettbewerb abhebt. Das Projekt stand ganz unter dem Motto „Ingenieurleistungen sexy machen“.

Welche Herausforderungen gab es?

Zu den Herausforderungen zählte einerseits das unkonventionelle Design mit komplexen Layouts, dynamischem Post-Content mit dynamisch gefüllten Pop-ups, (Testimonials auf der Startseite), vier Custom Post Types und Query Loops an einigen Stellen der Website. Außerdem galt es, Stellenanzeigen dynamisch in Akkordeon-Form mit verschiedenen Parametern darzustellen sowie darin auch eine dynamische Anzeige von “weiteren Stellenanzeigen”.

Wie seid ihr an das Projekt herangegangen? Was waren die ersten Schritte?

Vor Beginn des Projekts haben wir in einem detaillierten Briefing-Dokument alle relevanten Informationen gesammelt. Normalerweise starten wir mit einem Strategie-Workshop, um eine solide Grundlage für das Projekt zu schaffen und die Anzahl der Abstimmungsrunden während der Umsetzung zu minimieren. Da der Kunde jedoch bereits einen Workshop mit einer vorherigen Agentur durchgeführt hatte, konnten wir den Prozess mithilfe des Projektbriefings verkürzt gestalten.

Als ersten Schritt entwickelten wir eine Leitidee für BS& Engineering, um eine Basis für die Markenkommunikation zu schaffen. Diese Leitidee sollte die zentralen Kernbotschaften, das Markenimage und die Werte des Unternehmens widerspiegeln. Sie umfasste sowohl visuelle als auch textliche Elemente, die darauf abzielen, die Zielgruppe emotional anzusprechen und nachhaltig zu beeindrucken.

Nachdem die Leitidee finalisiert war, starteten wir mit dem Logo-Relaunch. Wir präsentierten dem Kunden vier verschiedene Versionen, aus denen eine ausgewählt wurde. Anschließend erstellten wir alle notwendigen Varianten des neuen Logos.

Im nächsten Schritt entwarfen wir eine zielgruppenorientierte Sitemap für die Website und erstellten auf Basis der Leitidee die Texte für alle geplanten Seiten. Danach präsentierten wir zwei Designansätze für die Startseite. Nach der Entscheidung für einen Ansatz übertrugen wir das Design auf alle weiteren Seiten. Dank der Flexibilität von Greyd konnten wir das Design frei und ohne Einschränkungen umsetzen.

Die Umsetzungsphase der Website begann parallel zu einem Fotoshooting vor Ort, das wir mit dem Kunden organisierten, um authentisches Bildmaterial passend zur Leitidee zu erstellen.

Nach Abschluss des Designs wurde es an die Entwicklung übergeben, mit dem Ziel, das außergewöhnliche Konzept mithilfe von Greyd umzusetzen. Dabei starteten wir mit der Definition der Global Styles und implementierten Custom Buttons sowie individuelle Animationen, wofür wir zusätzlich etwas CSS einsetzten. Nach der Definition von Buttons, Animationen und Global Styles setzten wir die Website Seite für Seite um. Dabei nutzten wir Content-Boxen und negative Margins, um überlagernde Elemente zu gestalten und dem Design eine besondere Dynamik zu verleihen.

Alles Denken und Gestalten, das in die Tiefe geht, ist klar in seiner Botschaft und erfolgreich in der Kommunikation. Wir definieren kreative Kommunikation als strategischen Erfolgsfaktor. – Bloom

Welche Design-Herausforderungen gab es, und wie konnte die Greyd.Suite helfen, diese zu lösen?

Eine Herausforderung war es, die komplexen Hover-Animationen in der Leistungsübersicht auf der Startseite zu implementieren und in der Mobilansicht ebenfalls zu triggern. Für die Animation haben wir den Trigger “OnParentHover” genutzt. Für die Mobil-Animation haben wir ein Duplikat der Section erstellt und mithilfe der Greyd Animationen und dem Trigger “OnScroll” eine ähnliche Animation umgesetzt.

Eine weitere Herausforderung war die unterschiedliche Länge von Testimonials. Innerhalb der Query Loops haben wir mit Hilfe von Dynamic Templates den Inhaltstext begrenzt und einen Trigger hinzugefügt, der ein Pop-up auslöst. In diesem Pop-up sind die gleichen Inhalte wie in der Kurzansicht, nur dass der Text in der Länge nicht limitiert ist.

Screenshot von den Referenzen. Visuell haben alle die gleiche Höhe.

Um die Texte zu synchronisieren haben wir den Textfeldern je dieselbe ID gegeben. Dadurch werden die Texte synchronisiert.

Wie wichtig war Flexibilität im Designprozess?

Super wichtig. Essenziell. Der Kunde wollte ein Design, dass es in der Branche so noch nicht gab.

Welche Funktionen oder Tools der Greyd.Suite habt ihr genutzt?

Warum habt ihr euch für die Greyd.Suite entschieden? Was hat die Greyd.Suite im Vergleich zu anderen Tools oder Methoden ausgezeichnet?

Wir haben uns für die Greyd.Suite entschieden, weil sie uns in vielerlei Hinsicht überzeugt hat. Besonders beeindruckend waren die Global Styles, die uns ein einheitliches Design ermöglichen, sowie der extrem schnelle Pagespeed, der für eine optimale Nutzererfahrung sorgt. Der Gutenberg Editor macht die Erstellung und Anpassung von Inhalten intuitiv und effizient, während der exzellente Kundensupport uns stets mit Rat und Tat zur Seite steht.

Ein weiterer Vorteil der Greyd.Suite ist, dass die wichtigsten Funktionen bereits integriert sind – ganz ohne zusätzliche Plugins. Darüber hinaus bietet es umfangreichen SEO- und Accessibility-Support, was für uns unverzichtbar ist. Die Möglichkeit, individuelle Designs für Formulare zu erstellen, rundet das Gesamtpaket perfekt ab und macht die Greyd.Suite zur idealen Lösung für unsere Anforderungen.

Außergewöhnliche Designs entstehen nur mit der Freiheit eines Designers. Die Greyd.Suite ermöglicht uns genau das. – Bloom

Wie hat die Greyd.Suite geholfen, Zeit zu sparen oder bestimmte Features einfacher umzusetzen?

Vorher mussten wir für solche komplexen und außergewöhnlichen Designs die Themes selbst coden. Mit Greyd haben wir dadurch eine erhebliche Zeitersparnis und sind um ein Vielfaches schneller.

Wie würdet ihr das Endergebnis zusammenfassen?

Das finale Produkt unseres Projekts ist eine hoch performante, vollständig dynamische Webseite, die sich individuell und einfach anpassen lässt. Mit ihrem einzigartigen Design hebt sie sich deutlich ab und bietet eine maßgeschneiderte Lösung, die es in dieser Form bisher noch nicht gab.

Wie hat der Kunde auf das Ergebnis reagiert?

Das Ergebnis hat ihn vom Hocker gehauen. Sie und das gesamte Mitarbeiterteam des Ingenieurbüros sind mehr als zufrieden.

Auch in der Anpassung der Website haben wir Lob bekommen. Auch dort ist die Marketingverantwortliche mehr als zufrieden und hat sich ohne WordPress Erfahrung mit einer kurzen Einführung von uns direkt zurecht gefunden durch die einfache Pflege und Erweiterungsmöglichkeiten.

Welche Erkenntnisse habt ihr aus diesem Projekt gezogen?

Klipp und klar: Was alles mit Greyd möglich ist, ohne den Designer zu limitieren.

Was würdet ihr anderen Agenturen raten, die mit der Greyd.Suite arbeiten möchten?

Probiert es aus, es lohnt sich. Deutlich besser als Divi, Elementor und alles, was wir vorher getestet haben.

Euer Fazit?

Greyd hat es uns ermöglicht, der Kundenanforderung eines “innovativen, modernen Designs, dass es in der Branche noch nicht gibt” individuell zu designen und anschließend ohne Probleme umzusetzen. Mit anderen Pagebuildern wäre das nicht oder nur mit deutlich größerem Aufwand und Extra-Plugins möglich gewesen.

Das Ausprobieren der Greyd.Suite ist kostenfrei. Wer den Gutenberg Editor kennt, wird sich nicht nur direkt zurechtfinden, sondern alle Features finden, die er bisher bei anderen Pagebuildern vermisst hat. Keine Extra-Plugins mehr. Kein ACF, kein Custom PHP, HTML oder JS. Keine Custom Blocks. Alles bereits enthalten.


Portrait von Sandra Kurze

Von Sandra Kurze

Texten ist eine absolute Leidenschaft von Sandra – am liebsten natürlich zu Themen, die sie auch inhaltlich fesseln. Mit Websites und Online Marketing beschäftigt sie sich seit mehreren Jahren – sowohl aus Dienstleister- als auch aus der Kunden-Perspektive. Perfekte Voraussetzungen also für den Greyd Blog!

Recent in Greyd.Suite

Menschen auf einer technischen Konferenz im Hintergrund, Hotelbuchungsformular im Frontend

So erstellst du dynamische Event-Buchungsformulare


Ein verängstigter Mann, der an seinen Nägeln kaut, steht vor einer heruntergekommenen Tür ohne Griff und veranschaulicht die Frustration, auf ein Popup-Fenster ohne Schließen-Button zu stoßen.

Wann braucht dein Pop-up einen Schließen Button?


A group of three people, two men and one woman, are smiling and looking at a computer screen together. The man on the left is of African descent, the man in the middle has gray hair, and the woman has blonde hair styled in a braid. The lower part of the image features a partially visible computer screen displaying an online shop with various products.

Wie man Argumente gegen die Barrierefreiheit entkräftet