Imago Design

Produktdesign-Agentur sucht UX-affine Digitalagentur
Kunde

Imago Design


Branche

Entwicklung und Gestaltung von elektronischen Produkten im Konsum- und Investitionsgüterbereich

Leistung

Projektkoordination, Frontendentwicklung, technische Umsetzung der Animationen, Optimierung für Barrierefreiheit, Texterstellung & Übersetzungen

Hintergrund

Imago Design gestaltet und entwickelt elektronische Produkte im Konsum- und Investitionsgüterbereich. Das reicht vom Produkt- und Oberflächen-Design über die Materialauswahl bis zur Konzeption digitaler Benutzeroberflächen. Mit gutem Design und optimaler User Experience kennt sich Imago Design also bestens aus. Dass die eigene Unternehmens-Website deutlich hinter den aktuellen digitalen Benchmarks hinterherhinkte, passte so gar nicht zum Anspruch von Imago Design.

Die Seite war optisch und technisch veraltet, die Nutzerführung suboptimal. Und responsive war sie auch nicht. Es war also an der Zeit für eine komplett neue Website. Für die technische Umsetzung hat sich Imago Design ganz bewusst für uns entschieden, um eine Digitalagentur mit ausgewiesener UX- und Design-Expertise mit im Boot zu haben.

Svenja Dittrich | UI/UX Designer bei Imago Design

„Vielen, vielen Dank nochmals an unsere Premium-Entwicklerin, für das 1a Management, das schnelle Hosting und die unermüdliche Unterstützung mit den Texten! Schön, dass wir zusammen die Webseite zum Laufen gebracht haben. Hat sehr viel Spaß gemacht!“

Aufgabe

Mit dem Relaunch der Unternehmensseite soll eine innovative und kreative Website als digitale Visitenkarte für Imago Design realisiert werden. Eine Seite, die in puncto Webtechnologie und UX-Design den aktuellen State of the Art widerspiegelt. Unsere Aufgabe umfasste folgende Einzelleistungen:

  • Frontend-Entwicklung
  • Responsives Webdesign
  • Technische Integration der Animationen
  • Basis-Optimierung für Barrierefreiheit
  • Texterstellung & Übersetzung der Texte ins Englische

Reibungsloser Projektablauf

Da UX-Konzept und Design komplett von Imago Design selbst entwickelt wurden, war eine möglichst enge Abstimmung zwischen den internen und externen Projektbeteiligten erforderlich. Für einen optimalen Informationsfluss haben wir in unserem Kommunikationstool Slack einen eigenen Projekt-Channel eingerichtet, über den wir uns direkt mit den Grafik-Designern und UX-Experten von Imago Design austauschen konnten. In täglichen Stand-ups wurden aktuelle Problem- und Fragestellungen besprochen und geklärt. So war eine zielorientierte Zusammenarbeit ohne kommunikationsbedingte Zeitverzögerungen möglich, die auch noch Spaß gemacht hat.

Lösungen

Überzeugende Performance & pflegeleicht

Wir haben die Website statisch angelegt. Sie kommt also ohne herkömmliches Content-Management-System aus. Dadurch erzielt sie eine grandiose Performance und die Seiten sind im Handumdrehen geladen. Denn es gibt schlicht und einfach nichts Schnelleres als eine statische Seite.

Entwicklungsseitig haben wir aber durchaus mit einer Art CMS gearbeitet. Die Basis dazu war das Konzept von Static Site Generator. Dafür haben wir zunächst einzelne Bausteine und Templates entwickelt und aufgebaut, die beliebig wiederverwendet werden können. Am Ende wurden aus den Bausteinen komplette HTML-Seiten gerendert, die der User dann zu sehen bekommt. Um die Pflege zu vereinfachen, haben wir die Texte in Textdateien ausgelagert. Dadurch können wir den Content bequem und schnell ändern oder ergänzen.

TailwindCSS & barba.js – eine smarte Kombination

Für die Entwicklung des Frontends haben wir TailwindCSS eingesetzt. Das dynamische Nachladen des Contents erfolgt über barba.js. Das ist eine extrem smarte Kombination. Denn trotz des recht umfangreichen und abwechslungsreichen Frontends benötigen wir nur 10 KB für CSS und ca. 16 KB für Javascript.

Für die maximale Performance haben wir uns an Best Practices, etwa für Markup, CSS und Javascript, orientiert und entsprechende Audits durchgeführt.

Animationen & visuelle Effekte sorgen für eine optimale UX

Für die Einbindung von Animationen haben wir Lottie enutzt. Dadurch konnte Imago Design die Animationen in Adobe After Effects erstellen und mit einem speziellen Plugin für den Einsatz auf der Website bequem exportieren. Bei Bedarf werden die Animationen auf der Seite einfach dynamisch nachgeladen.

Zahlreiche kleine Micro-Animations und Design-Effekte machen die Seiten nicht nur ausgesprochen lebendig, sondern sie unterstützen die User Experience und sorgen für ein optimales Nutzererlebnis.

Bei den Bildern haben wir mit dem innovativen Format webp" als Standard gearbeitet. In Browsern, die dieses Format nicht unterstützen, werden png-Dateien als Fallback angezeigt.

Ergebnis

Mit der neuen Website hat Imago Design nun eine Internetpräsenz, die sich sehen lassen kann und die den hohen Ansprüchen an Kreativität und technischer Performance vollauf gerecht wird.