Irgenwie trage ich immer mal wieder was vor oder halte Präsentationen. Dabei vergesse ich immer diese für mich festzuhalten. Vor allem ist es praktisch, wenn du einfach schnell auf ein Backup zurückgreifen kannst. Ich digitalisiere gerade einiges was ich vorliegen habe und es wird immer mehr.
Ich lade es dann hier hoch: (es wird mehr)
Nach einer längeren Zeit habe ich endlich meine CV-Page aktualisiert. Sie funktioniert momentan recht gut mit meinem Namen, daher habe ich beschlossen, ein bisschen mehr Text darauf zu packen. Schließlich fragen immer mal wieder Recruiter nach meiner aktuellen CV, und es macht definitiv Sinn, sie stets aktuell zu halten. Falls Du weitere Details benötigst, habe ich auch eine detaillierte CV-Seite.
Mit über 20 Jahren Berufserfahrung kann ich mich als erfahrener und ergebnisorientierter Director of Experience Engineering bezeichnen. Meine vielseitigen Fähigkeiten umfassen das Leiten und Verwalten interdisziplinärer Teams. Im Laufe meiner Karriere habe ich in verschiedenen Führungspositionen, wie beispielsweise als Practicelead Deutschland, Teamleitung und Projektleitung, geglänzt und somit Projekte erfolgreich von der Konzeption bis zur Fertigstellung vorangetrieben.
Meine Expertise liegt darin, ansprechende und nutzerzentrierte Web-Erlebnisse zu gestalten, indem ich mich an Industriestandards wie Markup nach W3C und Mobile First-Prinzipien halte und Technologien wie HTML/5, CSS, Pre- und Postprocessoren, JavaScript, Node und Mobile-Anwendungen einsetze. Ich habe mich intensiv mit der Modularisierung von Projekten beschäftigt, um effiziente Entwicklungs- und Wartungsprozesse sicherzustellen.
Als überzeugter Verfechter agiler Methoden habe ich sie erfolgreich in Arbeitsabläufe integriert, um Zusammenarbeit, Transparenz und Anpassungsfähigkeit zu fördern. Mein Engagement für Usability und Barrierefreiheit hat stets zu zugänglichen und inklusiven digitalen Lösungen geführt.
Im Verlauf meiner Karriere habe ich aktiv an globalen Projekten teilgenommen und dabei Teams über verschiedene Standorte und Zeitzonen hinweg geleitet. Meine Erfahrung im Outsourcing hat es mir ermöglicht, produktive Partnerschaften aufzubauen und auch hier herausragende Ergebnisse zu liefern.
Ein weiteres Fachgebiet von mir ist Webdesign, Accessibility und SEO, durch das ich den Traffic erhöht und die Sichtbarkeit verschiedener Projekte gesteigert habe. Darüber hinaus bin ich Experte in hoch skalierbaren CMS-Implementierungen, mobilen Anwendungen, Überwachung von Performance mit effektiven Werkzeugen.
Als Leiter für Experience Engineering habe ich breite Fähigkeiten im Teammanagement und in der Mitarbeiterführung unter Beweis gestellt, wodurch ich eine kooperative und motivierende Arbeitsumgebung schaffe. Meine Fähigkeit, Teammitglieder zu betreuen und zu unterstützen, hat stets zu hochperformanten Teams und erfolgreichen Projektabwicklungen geführt.
Ich bin vertraut im Management von Design-Systemen und benutze Werkzeuge wie DSM (Design System Manager) und Figma, um Designprozesse zu optimieren und die Produktivität zu steigern. Zusätzlich ermöglicht mir mein Wissen in Supernova eine nahtlose Gestaltungs- und Entwicklungsabwicklung.
Zusammenfassend lässt meine umfangreiche Erfahrung im Bereich Experience Engineering in Kombination mit meinen vielseitigen Fähigkeiten mich zu einem wertvollen Mitarbeiter werden, wenn es darum geht, wegweisende digitale Applikationen und Transformationen zu schaffen, die Erwartungen übertreffen und Erfolge der Kunden vorantreiben.
Als Mitglied des German Tech Leadership Teams habe ich zudem die deutsche XT-Community in disziplinären und technischen Aspekten geleitet.
Fokus war natürlich auf Performance
https://www.holger-hellinger.de/
Oh, und bevor ich es vergesse: Es ist einfach unglaublich, wie die Welt der Technologie sich weiterentwickelt! Künstliche Intelligenz (AI), insbesondere Large Language Models (LLM) und generative AI, sind der absolute letzte Schrei geworden! Und glaub mir, ich bin vollkommen begeistert davon und habe mich natürlich auch intensiv damit beschäftigt. Mit diesen Technologien können wir nun noch faszinierendere Möglichkeiten erkunden, wie nie zuvor. Es ist wirklich erstaunlich zu sehen, wie AI in immer mehr Bereichen eingesetzt wird und unser Leben nachhaltig verändert. Als Teil dieses spannenden Fortschritts bin ich begeistert, mein Wissen und meine Fähigkeiten in der Welt der generativen AI einzusetzen und weiterzuentwickeln. Die Zukunft ist zweifellos toll, und ich kann es kaum erwarten zu sehen, was uns noch alles bevorsteht!
Bist du auch ein Fan von Figma wie ich? Dann wirst du dich sicherlich über die jüngste Neuerung freuen: den Dev Mode. Lass mich dir zeigen, wie ich den Dev Mode für mein Designsystem nutze und warum er ein großartiges Werkzeug für Entwickler ist.
Der Dev Mode ist eine neue Funktion in Figma, die speziell für Entwickler entwickelt wurde. Er ist wie ein Browser-Inspektor für deine Design-Datei. Mit einem einfachen Klick kannst du Abmessungen, Spezifikationen und Stile abrufen. Außerdem kannst du produktionsbereite CSS-, iOS- oder Android-Code-Snippets aus deinem Design generieren.
Mit Figma und dem Dev Mode kannst du deinen Arbeitsablauf optimieren. Du kannst alles, von deinen Designbibliotheken über deine Codebasis bis hin zu deinen Projektmanagementtools, in Figma zusammenbringen. Darüber hinaus ermöglicht dir der Dev Mode, deine eigene Technik-Stack durch Plugins zu integrieren und dieselbe Sprache in Design-Dateien und Code zu verwenden.
Figma bietet eine Erweiterung für Visual Studio Code an, die es dir ermöglicht, Design-Dateien zu inspizieren, mit Designern zusammenzuarbeiten und Code-Vorschläge zu erhalten.
https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension
Der Dev Mode bietet neue Möglichkeiten zur Organisation von Dateien und zum Aktualisieren von Änderungen, um den Übergang vom Design zur Entwicklung nahtlos zu gestalten. Außerdem kannst du Änderungen leicht verfolgen, indem du einen Frame mit seiner vorherigen Version vergleichst.
Neben dem Inspektions- und Codegenerierungs-Tool bietet der Dev Mode weitere Funktionen wie das Herunterladen von Symbolen und Assets mit nur einem Klick und das Testen von Komponenteneigenschaften. Teams, die Figma nutzen, sollen ihre Entwicklungseffizienz um 30% steigern. Wie nutzt du Figma und den Dev Mode in deinem Entwicklungsprozess? Teile deine Gedanken in den Kommentaren.
Früh habe ich Mastodon geliebt und mich engagiert und war anfangs bei Mastodon.social registriert. Während der großen Migration von Twitter war die Plattform allerdings häufig überlastet und zudem litt die Nachhaltigkeit des Angebots.
Da ich mich zu diesem Zeitpunkt noch nicht völlig festgelegt hatte, war ich auf der Suche nach einem Anbieter, bei dem ich mich gut aufgehoben fühlte. Mastodon.green erschien mir als genau der richtige Ort. Der Anbieter pflanzt Bäume aus den erwirtschafteten Gewinnen für seine Nutzer und auch die Gemeinschaft dort empfand ich als sehr offen und einladend.
Zu Beginn des Jahres 2023 begann dann ein unerwartetes Phänomen: Verschiedene Instanzen rebellierten gegen Mastodon.social, da sie befürchteten, die Plattform könnte zu mächtig werden. Ich empfand diese Bedenken als recht abstrus. Die meisten Menschen möchten nicht ihre Software verwalten, sie möchten einfach, dass sie funktioniert. Nur eine Minderheit – meist technikaffine Enthusiasten, die mit Linux, Web oder Servern vertraut sind – denken anders.
Der letzte Tropfen, der das Fass zum Überlaufen brachte, war die Debatte darüber, ob „Big Tech“ – ohne dass sie gegen irgendwelche Regeln im Fediverse verstoßen hätten – direkt blockiert werden sollte. Das halte ich für völlig inakzeptabel. Vorauseilender Gehorsam in Sachen Zensur ist etwas, das ich strikt ablehne.
Die Nutzer dieser großen Instanzen wissen oft nichts über die zugrunde liegende Technologie, und dennoch werden sie pauschal daran gehindert, mit mir zu kommunizieren. Das halte ich für falsch. Deshalb habe ich beschlossen, eine eigene Instanz zu gründen und dort nur Instanzen zu blockieren, die entweder gegen deutsche Gesetze verstoßen oder gegen meine eigenen, dort einsehbaren Regeln.
Falls ihr Interesse habt, meine neue Instanz zu besichtigen, hier ist der Link:
Der Hostinganbieter ist https:masto.host
Some months back I created for my current employer a blog post on Design System Managers, and this evolved over time. This is the natural continued post.
In the subsequent sections, we present our comprehension of your requirements, outline our recommended strategy for this product, and describe the potential workflow based on our in-depth deliberations.
A brand relaunch at our client prompted the development of an online Brand Style Guide. This guide encompassed all the necessary information for crafting a brand-compliant digital experience across their digital landscape.
A Figma Master served as the definitive source for design elements. In the past, each design team developed its components based on their needs, building on the existing library.
This resulted in design inconsistencies. Developers established code libraries derived from these designs. However, the output varied significantly, leading to inconsistencies across digital touch-points and hindering the achievement of a cohesive look and feel.
Our approach involves employing Publicis Sapient’s best practices to develop a distinct and user-friendly toolkit for both designers and developers.
Initially, we assembled a dedicated team focused on constructing a Continuous Experience Pipeline in both design and code. This pipeline supports the brand design guidelines and functions as a reliable source of truth. All stakeholders involved in developing projects for the brand must adhere to this framework.
Subsequently, we shifted into problem-solving mode to assess the current situation, identify gaps, and address existing issues. We devised the workflow for a reusable product that can be easily implemented in various projects.
Establish a unified comprehension and a definitive source for UI assets and code to ensure a cohesive and streamlined user experience across all digital interactions.
Upon consolidating the insights, we formulated a mission statement to guide our efforts towards our overarching objective.
To achieve this, we went beyond merely developing a library with reusable code.
Through a distinctive toolkit, a specialized workflow, and a structured process, we crafted a supportive solution for both designers and developers. This approach simplifies communication and effortlessly ensures consistency with the brand’s look and feel.
Considering the participants‘ requirements, we have established quality benchmarks and optimized the process and workflow across all actions. Key features include a centralized system that integrates cutting-edge design with efficient code and an easy-to-understand, streamlined process. You will be able to contribute design and code components while utilizing the assets from the Continuous Experience Pipeline.
The procedure involves a collaborative effort from all contributors and disciplines, including designers and technical personnel. In adherence to brand design principles, we examine, enhance, and develop UI (User Interface) components to address the challenge of inconsistent design across touch-points.
We have established ‚workflow fundamentals‘ for our product, supporting the continuous experience pipeline:
Foundation: Initially, we examined various code and design outputs from different teams. The most effective elements from both domains form the basis of our work.
Standards: Our focus is on four key aspects: information should be Perceivable, interfaces should be Operable, content should be Understandable, and the significance of the content should be Robust to accommodate changes in the way it is accessed.
Design Tokens: We define all fundamental components of the design system in a structured and user-friendly manner. Design Tokens enable us to implement and modify these basic rules as needed.
Single Source of Truth: In accordance with brand design, we maintain a master file for all components and apply design tokens to it. Developers can utilize these token definitions to generate code that adheres to user experience and accessibility standards.
Good alignment between Experience and Engineering
Tools in design
Integrated working between Experience and Engineering
We integrate tools to create a robust and efficient Continuous Experience Pipeline.
To ensure the highest quality across all disciplines, we have implemented approval processes overseen by gatekeepers.
If you have an alternate tool-set or environment, adjustments should be made to accommodate your specific requirements.
We collaborate to contribute and utilize design and code elements effectively.
As product owners, we actively engage with consumers, partners, and stakeholders, constantly enhancing the quality of our deliverables. The Continuous Experience Pipeline is accessible to any team interested in adopting the same process.
We provide guidance and support through team chats, issue tracking, and regular feedback sessions conducted by our specialists.
Optimized Component Toolkit / Unified Source of Truth in UX, Design, and Code / Time and Cost Efficiency / Seamless Integration and Contribution / Simplified On-boarding / Rigorous Quality Standards / Regular Updates
Satisfied Customers: Experience a consistent brand design across all touch-points, ensuring a cohesive user experience.
Content Clients: Streamlined on-boarding and workflow reduce time and costs, making project execution more efficient.
Delighted Designers: Rely on a single source and process with ready-to-use components to accelerate your workflow.
Pleased Developers: Comprehensive documentation and efficient code ensure rapid, high-quality results.
Avoid Shortcuts: Often, the quickest solution isn’t the best one. We prioritize thorough approaches over shortcuts to address challenges effectively.
Make Decisions and Commit: Effective solutions are based on clear reasoning. Our decisions are driven by well-founded rationale.
Build Alliances: In large organizations with global business units, communication can be complex. To gain momentum for your project, forge partnerships with supportive allies.
Implement Design Tokens: Streamline your design system’s foundation to improve the handover process between designers and developers, making it more efficient and faster.
Value Feedback: As the Continuous Experience Pipeline is a product, feedback is invaluable. Embrace it and strive for immediate improvements.
Promote Collaboration: A dynamic library requires a collective effort. We continually encourage participation and teamwork among all stakeholders.
Get in touch in case of any question.
We’d love to work with you.
The people behind: A dedicated team of Developers and Designers lead by Holger Hellinger (Director Technology) and Michael Brandt (Design Lead) at Publicis Sapient, Cologne.
Ich zweifele, ob Menschen genügend Geld für AI Produkte in die Hand nehmen werden, selbst wenn die Preise konkurrenzfähig sind, wenn…
…angeboten wird.
Ich glaube der Mensch wird immer im Vordergrund stehen müssen. Bei der Softwareentwicklung wird aber gerade bei Unit Tests, Funktionalen Tests, Basisfunktionen und wiederholenden Tasks die AI siegen.
Wir müssen unbedingt beachten, dass auf Kundenseite immer noch Menschen und nicht Maschinen sitzen.
Nachdem sich bei dem anderen Microbloggingdienst nur noch Faschisten, Klimawandelleugner, Wissenschaftsfeinde und uninteressante andere Sachen zu lesen sind, bin ich dort nun schon ziemlich lange weg.
Zwischenzeitlich hatte ich, wie viele, bei Mastodon.social einen ersten Account für Mastodon eingerichtet. Das war irgendwann zu langsam und ich zu Mastodon.green umgezogen, weil dort versucht wird alles nachhaltig zu organisieren und der Admin auch recht restriktiv ist beim Blocken von Inhalten, die ich auch nicht sehen will.
Für alle die mir gerne wieder folgen wollen, ist hier mein Link zu Mastodon. Green ist nicht kostenlos. (Link editiert, da dort weg)
Macht euch aber auf wirre Diskussionen gefasst. Viele sehen das Fediverse als den Heiligen Gral und verteidigen ihre Meinung wie das zu benutzen ist, und wie du Inhalte zu konsumieren und zu teilen hast, bis auf’s Messer. Das kann am Anfang verstören und abschrecken. Es hilft einfach viel zu blockieren.
Natürlich solltest du dich an bestimmte Regeln halten und auch Inklusion ist höher bewertet als bei Twitter.
Insgesamt bin ich nicht unglücklich, dass ich den Wechsel getan habe. Ich teile aber auch weiterhin YouTube oder andere Links zu „bösen“ Anbietern, wenn ich keine Alternative weiß.
Wagt es, als ich heute wieder einmal kurz auf der Birdseite gelandet bin, waren praktisch alle Beiträge von Nazis, Corona-LeugnerInnen, Windkraft-Infraschall-SchwrubblerInnen oder anderen faschistoiden Menschen. Das braucht niemand mehr. Echt.
Es ist normalerweise meine Gewohnheit, die Erkenntnisse und Erfahrungen, die ich auf Konferenzen gesammelt habe, kurz und knapp zusammenzufassen. Doch dieses Jahr war Marc so effizient, dass er die Videos und Bilder der Konferenz bereits hochgeladen hat, bevor ich dazu gekommen bin, meine eigenen Gedanken zu sammeln. Deshalb verlinke ich direkt auf seine Seite, damit andere von seiner schnellen Arbeit profitieren können. Ich freue mich darauf, auch in Zukunft an solchen Veranstaltungen teilzunehmen und mein Wissen zu erweitern.
Auf den Fotos sind Omar und ich zu sehen wie wir lauschen. Wer findet uns? :-)
Designsysteme sind zu einer wesentlichen Komponente in der Welt des Web- und Produktdesigns geworden. Sie bieten eine gemeinsame Sprache und eine Reihe von wiederverwendbaren Komponenten, die Konsistenz, Effizienz und Skalierbarkeit fördern. In diesem Blog-Beitrag erörtere ich, wie ich Tag für Tag einen Designsystem-Manager entwickle. Dabei werden Schlüsselaspekte wie Design-Token, Responsive Design, atomares Design, Barrierefreiheit, Belastbarkeit, Kostenreduzierung und verschiedene Tools wie Figma, Token Studio, Docusaurus, Webkomponenten und natives CSS angesprochen.
Design-Token sind eine Möglichkeit, Design-Entscheidungen zu speichern und zu verwalten, z. B. für Farben, Typografie und Abstände. Sie bieten eine einzige Quelle der Wahrheit, die leicht aktualisiert und plattformübergreifend genutzt werden kann. Bei der Entwicklung meines Design System Managers verwende ich Tools wie Token Studio, um meine Design-Token zu erstellen, zu organisieren und zu verwalten. Dies trägt dazu bei, die Konsistenz zu wahren und Aktualisierungen zu optimieren.
Responsive Design ist die Praxis der Erstellung von Designs, die sich an verschiedene Geräte und Bildschirmgrößen anpassen. Bei der Arbeit am Design System Manager stelle ich sicher, dass die Komponenten flexibel sind und sich nahtlos an verschiedene Bildschirmauflösungen anpassen. Dazu verwende ich Responsive Design-Techniken wie Media Queries, Fluid Grids und flexible Bilder, um ein konsistentes Nutzererlebnis auf verschiedenen Geräten zu gewährleisten.
Atomic Design ist eine Methode, bei der das Design in kleinere, wiederverwendbare Komponenten, so genannte Atome, Moleküle und Organismen, unterteilt wird. Dieser Ansatz vereinfacht den Designprozess und fördert die Konsistenz des gesamten Systems. Bei der Entwicklung meines Design System Managers nutze ich die Prinzipien des atomaren Designs, um eine modulare und skalierbare Struktur zu schaffen, die es einfach macht, Komponenten nach Bedarf hinzuzufügen, zu entfernen oder zu ändern.
Barrierefreiheit ist von entscheidender Bedeutung, um sicherzustellen, dass alle Benutzer, einschließlich Menschen mit Behinderungen, digitale Produkte effektiv nutzen und mit ihnen interagieren können. Bei der Erstellung des Design System Managers lege ich Wert auf Barrierefreiheit, indem ich bewährte Verfahren wie korrektes semantisches HTML, die angemessene Verwendung von ARIA-Attributen und die Einhaltung der WCAG-Richtlinien einbeziehe. So wird sichergestellt, dass die Komponenten des Designsystems für jeden zugänglich und nutzbar sind.
Resilienz im Design bezieht sich auf die Schaffung eines Systems, das Veränderungen standhalten und sich an verschiedene Szenarien anpassen kann. Im Kontext eines Designsystemmanagers bedeutet Resilienz, Komponenten zu bauen, die flexibel, modular und einfach zu warten sind. Ich erreiche dies, indem ich Webkomponenten und natives CSS verwende, um wiederverwendbare Elemente zu erstellen, die leicht angepasst und auf verschiedene Situationen eingestellt werden können.
Designsysteme bieten zahlreiche Vorteile, darunter schnellere Designprozesse, verbesserte Zusammenarbeit und geringere Wartungskosten. Durch die Entwicklung eines robusten Designsystem-Managers kann ich sicherstellen, dass mein Team Designs effizient erstellen und überarbeiten kann, während gleichzeitig ein konsistentes Benutzererlebnis erhalten bleibt. Dies wiederum führt zu Kosteneinsparungen, da der Bedarf an umfangreichen Designüberarbeitungen und -aktualisierungen sinkt.
Während der Entwicklung des Design System Managers verwende ich eine Vielzahl von Tools, um den Prozess zu vereinfachen und die Zusammenarbeit zu verbessern. Figma, ein kollaboratives Designtool, ermöglicht es meinem Team, in Echtzeit gemeinsam an Entwürfen zu arbeiten. Docusaurus ein Open-Source-Tool für die Dokumentation von UI- und Softwarekomponenten, hilft mir dabei, Komponenten zu visualisieren und isoliert zu testen, um sicherzustellen, dass sie in verschiedenen Kontexten korrekt funktionieren.
Der Aufbau eines Designsystem-Managers ist eine fortlaufende, tägliche Aufgabe, die eine ständige Verbesserung und Verfeinerung erfordert. Indem ich mich auf Schlüsselaspekte wie Design-Token, responsives Design, atomares Design, Zugänglichkeit, Belastbarkeit und Kostenreduzierung konzentriere, kann ich ein robustes und effizientes System schaffen, von dem sowohl Designer als auch Benutzer profitieren. Mit Werkzeugen wie Figma, Token Studio, Docusaurus, Webkomponenten und nativem CSS kann ich vieles vereinfachen und sicherstellen, dass der Designsystemmanager flexibel und skalierbar bleibt und sich an die sich ständig weiterentwickelnde Welt des digitalen Designs anpassen kann.
Ever imported Markdown in Storybook into an MDX?
I tried the following (in Storybook 7) and it was failing with an Error, that I was not able to find when searching for it:
import StorybookChangeset from './CHANGELOG.md';
# Changelog
<StorybookChangeset />Code-Sprache: JavaScript (javascript)This returned with the following issue:
SyntaxError: '#' not followed by identifierCode-Sprache: Bash (bash)So I was wondering what the issue was, and Alexis Charpentier had the matching solution:
import { Markdown } from '@storybook/addon-docs';
import StorybookChangeset from '../../../CHANGELOG.md?raw';
# Changelog
<Markdown>{StorybookChangeset}</Markdown>Code-Sprache: JavaScript (javascript)Hope this helps you!