coma Kundenprojekt imago Design Hero Produktfoto

Imago Design

Produktdesign-Agentur sucht UX-affine Digitalagentur

Mit dem Relaunch der Unternehmens-Website haben wir für Imago Design eine kreative digitale Visitenkarte realisiert, die in puncto Webtechnologie, User Experience und Design den aktuellen State of the Art widerspiegelt.

  • Corporate Websites
  • UX
  • Konzept & Strategie
Zur Website

„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 Website zum Laufen gebracht haben. Hat sehr viel Spaß gemacht!”

Svenja DittrichUI/UX Designer bei Imago Design
coma Kundenprojekt imago design vorher nachher vergleich Website Relaunch

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.

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.

coma Vorgehensweise Website Relaunch Projektablauf Illustration Website und Stift

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 benutzt. 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.

coma Kundenprojekt imago design Ergebnis des Website Relaunchs Homepage
Ansprechpartner Martin Kirmaier coma AG

Sie wollen auch Erfolge wie diese?

Sprechen Sie mit mir über Ihre Herausforderungen und Ideen – in einem unverbindlichen Erstgespräch. Gemeinsam finden wir Lösungen, die begeistern.

Martin Kirmaier Vorstand der coma AG martin.kirmaier@coma.de

Weitere Projekte

    • Webanwendungen
    • Konzept & Strategie
    Hofbräu München Komplett digital, endlich einfach: Hofbräu managt Tische und Kunden mit dem Festzelt-Reservierungssystem von coma
    • TYPO3
    • Corporate Websites
    • Konzept & Strategie
    • UI-Design
    • UX
    • Barrierefreiheit
    • Branding
    Mikrogen Diagnostik TYPO3-Relaunch für Global Player aus Bayern
    • UX
    • UI-Design
    • Corporate Websites
    • Statamic
    • Branding
    • Brand Voice
    • Konzept & Strategie
    Naturwerke A New Digital Brand is Born: Naturwerke, der neue Energieversorger
    • UX
    • UI-Design
    • Corporate Websites
    • Branding
    • Konzept & Strategie
    • WordPress
    Gesundheitswelt Chiemgau WordPress-Multisite mit 10 Websites für die ganze Unternehmensgruppe
    • Statamic
    • Branding
    • Corporate Websites
    • Konzept & Strategie
    • UI-Design
    OPED Digital Health Solutions Statamic-Website und Branding für innovative Digital Health Solutions von O-DHS
    • Corporate Websites
    • Konzept & Strategie
    • UI-Design
    • Contentmanagement
    • WordPress
    Software4You Neue WordPress Website für World Class HR Controlling aus München