Cookie

Living Styleguide

Zentraler Dreh- und Angelpunkt des digitalen Markendesign-Managements

Vom Projektstyleguide für den einfachen Web-Relaunch bis hin zum Mehrmarkenportal für große Brands –

Der Living Styleguide bietet eine zentrale Anlaufstelle für high level Brand Essentials, nutzerzentriertes Design und Usability und fasst barrierefreie Projektergebnisse mit hoher User Experience effizient und nachnutzbar zusammen. Schluss mit redundanten Entwicklungen, fehleranfälligen und unterschiedlichen Interpretationen des Corporate Designs oder mangelnder User Experience und Usability. Professioneller Relaunch auf Knopfdruck? Wir zeigen Ihnen wie:

> Flexible Servicemodelle: Ihr schneller Weg zum ersten Styleguide


Konsistenz

Konsequente Gestaltung der Customer Journey und deren digitalen Touchpoints.

Effizienz

Verbreitung einheitlicher Corporate Design-Elemente durch Markeninventarisierung im Living Styleguide.

Kollaboration

Zentrale Anlaufstelle für alle Stakeholder rund um Konzeption und Ausgestaltung einzelner Touchpoints.

Living Styleguide - Praxisnah & Kompakt

Erfahren Sie alles rund um die Möglichkeiten der Design Factory inklusive Living Styleguide und erleben Sie verschiedene Anwendungsbereiche des Living Styleguide praxisnah in unseren Online-Seminaren.


Die Design Factory in 3 Minuten

 

Corporate Design Management

DESIGN FACTORY METHODEN & LIVING STYLEGUIDE

Mit der Design Factory verankern wir den konsequenten Ausbau der User Experience zentral für Applikationen Ihres Unternehmens. Bilden Sie alle Vorlagen und Guidelines rund um Ihr Markendesign strukturiert im Living Styleguide ab und verschaffen Sie sich durch neue Methoden und Tools Vorteile in der Digitalisierung.

Online-Seminar: Barrierefreie User Experience mit Living Styleguide

 

Online-Seminar: Barrierefreiheit & CoreMedia

GRENZENLOS BEGEISTERN

Woran erkenne ich eine barrierefreie Website? Und hat barrierefreies Design nicht auch für alle Nutzer Vorteile? Wie lassen sich Aspekte der User Experience und Barrierefreiheit vereinen und verändern Ihren nächsten Relaunchprozess?

In diesem Online-Seminar zeigt die UX-Expertin der T-Systems Multimedia Solutions wie Sie mit dem Zusammenspiel aus UX, UI und Frontend sowohl Design-Anspruch als auch Barrierefreiheitsanforderungen gerecht werden und wie Ihr Unternehmen davon profitiert.

Online-Seminar: One World Ansatz im Mittelstand

 

Online-Seminar: One World Ansatz im Mittelstand

DIGITALISIERUNG ENTLANG DER CUSTOMER JOURNEY

Am Beispiel eines Projektes eines mittelständischen Unternehmens zeigen wir Ihnen, wie ein B2B Shop mit stark heterogenem Sortiment aufgebaut, Silos aufgelöst und die Webseite kundenzentriert überarbeitet wurde. Die Bündelung des Markenauftritts im Living Styleguide sorgt letztlich für ein nathloses Kundenerlebnis.

Die preisgekrönte, international skalierbare Marketing-Plattform überzeugt mit zugehörigem Brand Portal, leadgenerierenden Modulen, Tracking- und SEO-Optimierung. Alles aus einer Hand.

Zielgruppen

Stakeholder & Benefits

Der Living Styleguide bedient die komplette Gruppe relevanter Stakeholder im Kontext von digitalem Markendesign und Applikationsentwicklung. 

In Ihrem Unternehmen

Angefangen von den Verantwortlichen aus Marketing und Brand Management, über Fachbereiche, welche die Entwicklung von digitalen Produkten initiieren, bis hin zu Ihrer Spezifikations- und IT-Abteilung, welche die Umsetzung von digitalen Lösungen begleitet - für alle ist der Living Styleguide die zentrale Recherche- und Dokumentationsplattform.

In Ihrem Dienstleisternetzwerk

Der Living Styleguide ist der zentrale Ort, an dem Designer, Konzepter und Frontend-Entwickler Arbeitsergebnisse dokumentieren und von einem Department ins andere übergeben. Für Backend-Entwickler findet sich im Living Styleguide das gesamte UI-Framework dokumentiert und mit ready to use Code-Beispielen hinterlegt.

  • IT Abteilung

    Die nachnutzbaren Code Components ermöglichen uns, das UI Konzept modular in die Zielanwendung zu implementieren ohne selbst Frontend-Entwicklung bedienen zu müssen.

    Wir wünschen uns die Bereitstellung unterschiedlicher Output-Formate, z.B. als Bootstrap, JSF oder Angular-Komponenten, um die unterschiedlichen Bedarfe unserer Systeme abzudecken.

  • Fachbereich & Marketing

    Durch die Design Factory ist das Management unseres Marken Designs deutlich vereinfacht worden.

    Wir können budgetfreundlich unsere Applikations- Landschaft mit mehreren Dienstleistern managen, ohne Budget für redundante Design-Leistungen ausgeben zu müssen.

    Wenn wir eine neue Applikation gestalten bedienen wir uns einfach dem bestehenden Inventar der Design Factory und müssen im Projekt relativ selten nur noch einzelne Module neu entwickeln lassen.

    Der Fachbereich kann so bereits zeitnah Dialoge und Prototypen im echten Markendesign zeigen, was uns die Abstimmung deutlich erleichert.

  • Spezifikateure

    Im Living Styleguide finden wir unser Inventar, welches wir zur fachlichen Konzeption von Templates und User Flows nutzen können.

    Komponenten sind erlebbar und verständlich. Best Practices erleichtern es uns, uns an vorgegebenen Usability-Standards zu orientieren. So können auch wir einfach Masken und Prozesse erstellen, welche die Grundlagen der Software-Ergonomie erfüllen.

    Durch das angeschlossene Prototyping können wir unsere Fachkonzepte einfach kommunizieren und mit Kollegen und anderen Dienstleistern abstimmen.

  • Designer

    Mehrere hundert Seiten lange Styleguides in Print oder PDF Form haben den Kreationsprozess behindert und wurden selten aktualisiert.

    Durch den Living Styleguide haben wir eine zentrale, stets aktuelle Anlaufstelle zur Dokumentation und Weiterentwicklung unseres Designs, auch über mehrere Abteilungen oder Dienstleister hinweg.

    Der Living Styleguide integriert sich perfekt in unseren agilen Entwicklungsprozess und fördert den frühzeitigen und intensiven Austausch mit der Entwicklungsabteilung.

    Arbeitsergebnisse sind frühzeitig einsehbar, Feedbackschleifen konstruktiv und direkt.

  • Developer

    Der Living Styleguide unterstützt uns in der Dokumentation von Quellcode und
    dem modularen Aufbau von Komponenten.

    Zudem ist er die zentrale Anlaufstelle für Spezifikation, Test und Abnahme der Frontend-Umsetzung: unsere Übersetzung der Kreativ-Leistung in HTML und CSS steht stets in direktem Zusammenhang mit der Dokumentation und den Nutzungshinweisen. So ist schnell klar, ob es sich bei Tickets um einen Bug oder ein neues Feature handelt.

Living Styleguide Features

Dokumentation: Erlebbar & Effizient

Das Erscheinungsbild des Styleguides passen wir an Ihr Unternehmen an: Farben, Fonts und Logo rücken Ihr Brand Design, Vorgaben zur Markenkommunikation sowie Konzept und Ausgestaltung der einzelnen Touchpoints ins richtige Licht. Der Living Styleguide folgt Ihrem Styleguide.


Mit dem Living Styleguide wird der Markenauftritt Ihres Unternehmens bis auf das kleinste Interface Element durch dekliniert und zentral hinterlegt: Angefangen von Ihrem Logo zu Schriften und Farben, über den Umgang mit Bildern bis hin zu Formularelementen, Buttons, Tabellen, Listen und vielem mehr.

Bei der Erstellung Ihrer UI-Bibliothek leben wir den nutzerzentrierten Ansatz, garantieren hohe Usability, denken mobile first und haben stets die Konsistenz aller Elemente im Blick.


Im Kontext eines Relaunchs, Rebrushs oder der grundlegend neuen Erarbeitung von UI-Designs erstellen wir auf Wunsch bereits von den Design-Basics ausgehend bis hin zu den konkreten CMS- und Shop-Modulen stets Designs und Spezifikationen, welche die konkreten Anforderungen an die Barrierefreiheit berücksichtigen.
Farbkontraste, Skalierbarkeit und Lesbarkeit von Text, Tastaturbedienung von Modulen als auch die korrekte Auszeichnung für Screenreader gehören zu unseren Prüfkriterien für barrierefreie Design Systeme.

Erfahren Sie in unserem Online-Seminar, wie Sie mit dem Zusammenspiel aus UX, UI und Frontend sowohl Design-Anspruch als auch Barrierefreiheits-Anforderungen gerecht werden und wie der Living Styleguide hilft, diesen Ansatz auch für Ihren nächsten Relaunch bezahlbar abzubilden.


Das Herzstück des Living Styleguide sind erlebbare Komponenten, die als sogenannte Living Examples und Code Components dargestellt werden. Dazu werden HTML-Artefakte, CSS und JS aus dem zu dokumentierenden Framework und dessen angebundenen Repositories ausgelesen. Wird der Produktiv-Code aktualisiert, sind damit auch die Beispiele im Styleguide stets aktuell.


Single Source of Truth

Der Living Styleguide ist online verfügbar und der zentrale Ort, an dem Designer, Konzepter und Frontend-Entwickler ihre Arbeitsergebnisse dokumentieren und von einem Department ins andere übergeben. Für Backend-Entwickler findet sich im Living Styleguide der Zugriff auf das UI Framework dokumentiert und mit Code-Beispielen belegt.


Das Erscheinungsbild Ihres Unternehmens wird konsequent dekliniert: es ist nicht nur visuell in den Brand Essentials vorgegeben, sondern durch konkrete Produktionsvorlagen auch direkt in HTML und CSS hinterlegt, sodass dieses einfach, deutungsfrei und konsistent in alle Applikationen übernommen werden kann. Schluss mit der redundanten Entwicklung für verschiedene digitale Produkte Ihres Unternehmens.


Einfache Zusammenarbeit über mehrere Disziplinen hinweg:
Angefangen von den Verantwortlichen aus Marketing und Brand Management, über Fachbereiche welche die Entwicklung von digitalen Produkten initiieren bis hin zu Ihrer Spezifikations- und IT-Abteilung, welche die Umsetzung von digitalen Lösungen begleitet.


Gerne unterstützen wir Sie auch rund um Brand Design Governance Prozesse: wir beraten zum Aufsetzen eines Modells innerhalb der Organisation, wie mehrere Abteilungen im Community-Ansatz die Design Factory und den Living Styleguide zum Leben erwecken können:

Zu typischen Handlungsfeldern zählt die Berechnung des ROI für verschiedene Abteilungen, Prozess-Organisation zur Erstbefüllung und Weiterentwicklung von Design Systemen, Demand-Management für verschiedene Plattformen und Produkte, Release-Management für die effiziente Aktualisierung von Design Vorlagen sowie die Rollout-Kommunikation bei Veröffentlichung eines neuen Styleguide.


Modulares Baukasten-System

Der Living Styleguide beinhaltet alle User Interface Elemente Ihres Unternehmens im stets untereinander kombinierbaren Baukastensystem. Damit können Sie die komplette Bandbreite von sehr einfachen und plakativen Microsites bis hin zu komplexen, prozesslastigen Business-Applikationen realisieren.

Gleichzeitig können wir auch den Living Styleguide selbst ausgehend von der Standard-Lösung an die individuellen Bedarfe Ihrer Projektdokumentation bis hin zum Brand Portal erweitern: egal ob Sie zusätzliche CMS-Module zur Aufbereitung der Design-Richtlinien, Funktionen zur Darstellung von Code Beispielen oder Berechtigungskonzepte oder Schnittstellen z.B. zum Digitalen Assest Management System benötigen.


Managen Sie die User Experience einer ganzen Applikationslandschaft mit dem Living Styleguide. Alle User Interface Elemente einer Anwendung (z.B. Buttons, Formular Elemente, Teaser uvm.) werden einmalig und zentral entwickelt und stehen allen Applikationen zur Verfügung.


Wir entwickeln die neuen Funktionen einmalig im Living Styleguide und alle Applikationen Ihres Unternehmens können ohne Mehrkosten darauf zugreifen. Damit wächst von Projekt zu Projekt der Komponenten-Pool und alle Applikationen profitieren. Für jede Ihrer Marken, Sparten oder Produktwelten kann dann der individuelle Stil bezüglich Logo, Farbgebung und weiterer Design-Attribute wie Icons, Formsprache oder Haptik angelegt werden.


Best Practices & Page Templates

Unser System bietet mehrere Seitentypen (sogenannte Blueprints) als Vorlagen, z.B. für Startseite, Verteilerseiten, Inhaltsseiten. Auch verschiedene Rasterzuweisungen sind möglich: einspaltig, zweispaltig oder dreispaltig? Mit oder ohne Bereich für einen Bühne? Sie entscheiden.


Design Richtlinien sind stringent aufbereitet und Interface-Komponenten zentral entwickelt, umfangreich dokumentiert und ab dann auch konsequent durchgängig aktualisiert.
Damit ist für Ihr Produktteams und Dienstleister aller Gewerke der perfekte Baukasten vorhanden, um effiziente und durchgängige User Experience umzusetzen.


Der Styleguide selbst ist voll responsiv und Sie können Ihre Konzepte mediengerecht aufbereiten und z.B. auch mit farbigen Sections oder Hintergrundbildern inszenieren.

Auch die Inhalte des Design Systems sind voll responsiv erlebbar: dank Living Examples, Viewport Switcher und flexiblen Resizing-Möglichkeiten, um Umbruchverhalten und Skalierungen zu testen.


Machen Sie den ersten Schritt!

CADFEM Brand Portal Referenz

eBusiness Portal Relaunch mit Living Styleguide

Der neue CADFEM Living Styleguide wird zum "Home of the Brand" für die Zentralisierung und Weiterentwicklung des CADFEM Markenauftritts.

Mit der Zentralisierung des Markendesigns in der Design Factory und Bündelung im Living Styleguide sind alle wichtigen Assets rund um das Erscheinungsbild der neuen CADFEM Website für die Zielgruppen Marketing, Design, Grafik, Content-Produktion und Frontend- sowie Backend-Entwicklung immer greifbar an einer Stelle.

Flexible Servicemodelle: Ihr schneller Weg zum ersten Styleguide

EIN STYLEGUIDE FÜR IHR SZENARIO

Markenfamilien, Design-Varianten oder auch nur einzelne Produkt-Styleguides kostengünstig abbilden:
Unsere flexiblen Servicemodelle reichen vom einfachen Projekteinsatz bis hin zum komplexen Brand Portal und lassen sich somit perfekt auf Ihre Bedürfnisse zuschneiden.

Je früher Sie den Living Styleguide einführen oder je mehr Anwendungen Sie damit bedienen, desto mehr Geld können Sie einsparen.
Erfahrungen zeigen Einsparpotentiale von bis zu 80% im Vergleich zu regulären Relaunches auf, wenn der Living Styleguide im ersten Projekt initialisiert worden ist.


Projekteinsatz - lesend

Führen Sie den Living Styleguide als Projektmethode (lesend) im Rahmen eines Kreativ- oder Entwicklungsprojekts mit uns als Partner ein. Als Hauptdienstleister für UX-Konzeptionsleistungen, UI-Design sowie Frontend-Entwicklung dokumentieren wir alle Projektergebnisse für Sie als Living Styleguide. Profitieren Sie vom Effizienzgewinn im Projekt, einer nachnutzbaren Dokumentation und der initialen Vorbereitung Ihres Brand Portals.


Beinhaltet:

  • 1 Projektstyleguide 
  • Theming im Brand Design Ihres Unternehmens
  • Lese- und Schreibrechte für bis zu 20 Projektmitarbeiter
  • Schulung Ihrer Nutzer

> ANGEBOT ANFRAGEN

Unternehmenseinsatz - kollaborativ

Der Living Styleguide wird bereits während der Projektlaufzeit für Ihr gesamtes Unternehmen sowie Landesgesellschaften bereitgestellt z.B. um das Design System auch auf andere Touchpoints zu übertragen oder Inhalte zu teilen. Lassen Sie weitere Projekte von Ihrem neuen Design System profitieren.


Beinhaltet Projekt-Leistungen plus:

  • Kollaborative Zusammenarbeit mit weiteren Abteilungen für Ableitung verschiedener Touchpoints samt Schreibrechten für Ihre Mitarbeiter zur Anlage weiterer Brand Guidelines und Styleguides
  • Umfangreiches Customizing des Styleguide-Designs im Look & Feel Ihrer Marke
  • Nutzung eines eigenen Git-Repositories aus Ihrer IT
  • Dedizierter Servicemanager für Ihr Portal

> ANGEBOT ANFRAGEN

Brand Portal - universell

Erweitern Sie den Living Styleguide zum echten Brand Portal mit unbeschränkten Leserechten intern und für Dritte, eigener Redaktion durch Ihr Unternehmen sowie externe Agenturen und den vollen Möglichkeiten zur Erweiterung des Styleguides um zusätzliche Touchpoints im Print-Bereich, Intranet, Marketing, App uvm.


 

Beinhaltet Unternehmens-Leistungen plus:

  • Optionale Bereitstellung weiterer CMS-Komponenten zur Abbildung Ihrer umfangreichen Inhalte in ansprechender Struktur und Design
  • Vollumfängliche Schreib- und Leserechte für Ihr Unternehmen und externe Dritte
  • Schulung für Redakteure und Frontend-Entwickler
  • Optional: Erweiterung um Digital Asset Management und Download Center 
  • Optional: Single Sign On

> ANGEBOT ANFRAGEN

Ihre Ansprechpartnerin