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

  • coma Kundenprojekt Sesam Teaser vorschau des Kundenprojektes mit Kundenlogo und Kundenprodukt coma Kundenprojekt Sesam Teaser vorschau des Kundenprojektes mit Kundenlogo und Kundenprodukt
    • UI-Design
    • Corporate Websites
    • TYPO3
    Sesamsec Mehr Usability, mehr Leads mit TYPO3
  • coma Kundenprojekt TriCAT Vorschau Website Relaunch Corporate Websites coma Kundenprojekt TriCAT Vorschau Website Relaunch Corporate Websites
    • WordPress
    • UX
    • UI-Design
    • SEO
    • Corporate Websites
    TriCAT Virtual Reality meets WordPress: Willkommen in der Zukunft
  • coma Kundenprojekt KEM Küppers teaser Ergebnis Website Relaunch coma Kundenprojekt KEM Küppers teaser Ergebnis Website Relaunch
    • UX
    • UI-Design
    • Corporate Websites
    • TYPO3
    KEM Küppers Neue TYPO3-Website glänzt mit Produktfinder für internationalen Vertrieb
  • coma Kundenprojekt Ergebnis Website Relaunch ELATEC coma Kundenprojekt Ergebnis Website Relaunch ELATEC
    • UX
    • SEO
    • Corporate Websites
    • TYPO3
    • Inbound Marketing
    ELATEC Innovative Website macht RFID-Produkte erlebbar und generiert Leads
  • coma Kundenprojekte XING Events teaser Ansicht Ergebnis Website Facelift coma Kundenprojekte XING Events teaser Ansicht Ergebnis Website Facelift
    • UX
    • Corporate Websites
    • TYPO3
    • Inbound Marketing
    XING Events UX, UI-Design, Content: TYPO3-Facelift mit Klick-Effekt
  • coma Kundenprojekt MediaMarkt Saturn Teaser Screenshots beider Markenwebsites nebeneinander coma Kundenprojekt MediaMarkt Saturn Teaser Screenshots beider Markenwebsites nebeneinander
    • Kampagnen
    • Corporate Websites
    • Contentmanagement
    • Online Marketing
    MediaMarkt & Saturn Website-Entwicklung & Betreuung seit 2006