Ui Engineering Podcast

Michael Geers treibt seit mehreren Jahren das Thema Micro Frontends mit an. Wir unterhalten uns mit Michael darüber, wie Design Systeme und Pattern Libraries auch bei den nicht-technischen Herausforderungen in diesem Bereich helfen können. Das Interview wurde am 03.03.2020 aufgenommen. Shownotes & Links Michael Geers auf Twitter Micro Frontends Webseite Michael’s Vortrag auf der MicroCPH Konferenz: Micro Frontends the nitty gritty details Duet Design System (auf Web-Component Basis) Das Buch: Micro Frontends in Action

Hans und Peter bauen Warhol: Eine App mit der man seine Pattern Library für Tests der Design-Konsistenz des eigentlichen Produkts nutzen kann. Die beiden stellen Design Testing generell vor und erklären, warum Warhol eine gute Lösung dafür ist. Das Interview wurde am 21.02.2020 aufgenommen. Shownotes & Links Warhol auf Twitter Hans-Christian Reinl Peter Kröner

Wir sind zurück! Kaum zu glauben, aber es gibt uns immer noch. Die letzten zwei Jahre über ist viel passiert. Wir resümieren etwas und stellen die UIengine vor, welche in unseren Projekten als Werkbank für UIengineering dient. Das Interview wurde am 14.02.2020 aufgenommen. Shownotes & Links UIengine auf Github UIengine Dokumentation Thonet Brand Manual UIengineering Pattern Library Beispiel Klingel: Designsystem hoch 15 Dennis Reimann Jan Persiel

Antje Kroon und Ralph Schumann von der zwhy GmbH berichten über die Entscheidung eine Agentur Anfang 2017 in zwei Firmen zu trennen, um diese dann wieder zusammenzubringen, um Dinge aus einer Hand machen zu können. Glaubwürdig. Wir horchen mal rein wie es zu dieser Trennung gekommen ist und was das eigentlich bedeutet. Wie macht trennt man so eine Firma auf? Welchen Einfluss hat das auf die Kultur? Was hat das mit New Work und einer Konferenz dazu zu tun? Die Teams in denen die Hardcore-Entwickler und die Super-Kreativen saßen gab es irgendwie immer Gerangel … —Antje Kroon Wir versuchen gerade herauszufinden wo die Schnittmengen sind: Ist ein Websitenprojekt ein Software- oder ein Kommunikationsprojekt? Es ist beides. —Ralph Schumann Wenn wir (d.h. Entwicklung und Kommunikation/Design) zusammenarbeiten … müssen wir nichts wegdiskutieren, weil wir es vielleicht als eine Partei nicht können. —Ralph Schumann Die New Work Future Konferenz findet am 14. und 15. Juni 2018 in Hamburg statt.

Susanne Kaiser ist Technischer Vorstand bei der Just Software AG in Hamburg. In unserem Interview spricht Jan mit ihr über die Historie des Unternehmens und die der Software. Welche Auswirkungen hat die Entwicklung der Software auf die Teams und umgekehrt? Aber auch die Anforderungen an Produkt und Unternehmen von außen sind Thema. Team und Softwarearchitektur waren bei uns monolithisch und mit dem Wachstum wurden wir langsamer. Daraufhin haben wir unsere Teams aufgeteilt und auch die Software auf Mikroservices umgestellt, um wieder schneller agieren zu können. —Susanne Kaiser Die Teams können autonom arbeiten und entscheiden, aber … Es ist so, dass wir schon eine gemeinsame Basis benötigen, … hinsichtlich Styleguides z.B. Es soll sich ja noch aus einem Guss anfühlen. Und wir haben Standards, so dass sich nicht jedes Team seine eigene React-Library einführt. —Susanne Kaiser Wissenstransfer und Dokumentation ist ein weiterer Punkt im Gespräch: Wir haben erkannt, dass Dokumentation in der Seku

Thomas Lobinger ist Software Development Manager bei Amazon Web Services in Berlin. In unserem Interview mit ihm sprechen wir ein wenig über seinen Werdegang, über Design Systeme, wie bei Amazon Web Services Teams funktionieren und was er für Erfahrungen in den letzten Jahren in einem ständig wachsenden Unternehmen gemacht hat. Unser Team kümmert sich um das Design System, Tools und Automating … um das Leben von Frontend-Entwicklern und Designern besser zu machen und deren Produktivität zu erhöhen. —Thomas Lobinger Das Design System ist über eine längere Phase entstanden. Die Genesis des AWS Design Systems liegt darin begründet, dass das zentrale Frontend-Entwicklungsteam der großen Menge an Projekten nicht nachkommen konnte. Alleine 2016 sind 1017 Features und Services gelauncht worden, um dies mal in einen Kontext zu setzen. Deshalb ist das durch ein Team auch nicht machbar gewesen. —Thomas Lobinger Wir sprechen über Granularität und Feinteilgkeit in Designsystemen und was die Basis für Kom

Christoph Reinartz ist UI/UX Engineer und Fullstack Developer bei Trivago. Wir sprechen in unserem Interview mit ihm über das bei Trivago eingeführte Design System und die Kultur der Produktteams. Um die Designer und Product Owner mit an Bord zu holen geht es ja auch darum, eine gemeinsame Sprache zu entwickeln. Damit die Leute ein gemeinsames Verständnis haben, von dem was man macht. —Christoph Reinartz Das Design System unterstützt dabei das Finden und Kommunizieren der gemeinsamen Sprache. Das [Design System] ist kein rein technisches Thema, es ist auch nicht ein reines Design-Thema. Das ist eigentlich ein Thema, was die Organisation im Gesamten betrifft. —Christoph Reinartz Wir sprechen über die Idee des Design Sprints und wie sie bei Trivago in der Produktentwicklung eingesetzt werden: Ideen werden getimeboxed erarbeitet. Es geht relativ schnell in Skribbles, die werden wieder diskutiert, es wird gevotet auf die verschiedenen Lösungen. So kann man auch durch das Timeboxing schnell eine

Was eigentlich nur als ein kleines Stimmungsbild beginnt, ist vielleicht der Anfang eines ganzen Staffelthemas. Heute geht es kurz um Remote-Arbeit, die Vorurteile und ein paar Anmerkungen. Shownotes & Links Buch: Remote, office not required by David Heinemeier Hansson/Jason FriedAmazon :) Basecamp Slack Platz frei im Loft74

Heute sprechen wir kurz über die Idee wie man sich in einem Projekt seine Vorgehensweisen dokumentieren kann und Best Practises festhalten kann. Ausserdem kurz etwas zum UI Pairing mit Dennis. Shownotes & Links Pairing

Patrick Blom ist Senior Backend Entwickler bei SHOPMACHER. In unserem Interview mit ihm berichtet Patrick von typischen Prozessen bei der Entwicklung von Shops und dem Shopmacher eigenen Produkt CommerceCockpit. Wiederverwenden und Synergien nutzen ist bei SHOPMACHER ein tagtägliches Thema: Der Grundgedanke der Wiederverwendbarkeit (von Komponenten) ist da. … Natürlich schauen wir auch, ob man Komponenten aus einen Basisportfolio, das wir mal entwickelt haben, verwenden kann und diese dann )für den Kunden) angepasst werden. —Patrick Blom Technologien, die verwendet werden: Wir nutzen gängige Technologien wie HTML5, LESS, (gehen) weg von jQuery hin zu nativem JavaScript und die Basis unseres Produktes ist Symfony bzw. TWIG. —Patrick Blom Patrick spricht auch über die verschiedenen Arten von Zulieferungen aus Richtung der Kunden und Designagenturen. Oft ist der Designprozess vorgelagert, aber manchmal geht SHOPMACHER in den Lead aus einer beratenden Rolle: Wenn die Sachen (Designs) zu uns komm

Heute sprechen wir über ein kleines Tool, welches das im Code designen ein wenig einfacher macht: Codekit. Alternativen gibt es einige (s.u.) und es ist ein guter Einstieg ins Arbeiten mit Dingen wie Preprozessoren und Browsersync, ohne dies als Designer alles von einem Entwickler aufsetzten lassen zu müssen. Shownotes & Links Codekit Prepros Koala

Benjamin Rabe ist User Experience Designer bei mindmatters. Er berichtet in diesem Interview von der Zusammenarbeit mit Kunden und den größeren Aufgaben, denen man mit Design begegnen kann und unsere Verantwortung als Produktentwickler. Ich glaube die größere Aufgabe ist tatsächlich, dieses Toolset das man als Designer hat soweit zu öffnen, dass sie zum einen verfügbar sind für alle und zum anderen auch das Mindset so zu schärfen, das jeder weiß, wann man sie anwenden kann. —Benjamin Rabe Es geht darum, wie wir im Zusammenspiel mit Kunden auch grundsätzlich auf das Projekt einwirken und größere Fragen klären können: Das was Design grade im frühen Prozess leisten kann, ist diesen Ideationsprozess gut zu begleiten, Möglichkeiten sichtbar zu machen und Wege auszuleuchten. —Benjamin Rabe Außerdem sprechen wir auch über die Verantwortung, die in der Produktentwicklung liegt und welche kulturstiftenden Aspekte unsere Arbeit haben kann: Ich finde das ist in gleichem Maße der schwere wie auch spanne

Ein kleines Update zu Dennis’ UI Pairing Sessions und bevorstehenden Konferenzen: Die Web Engineering Unconference auf Mallorca und das eCommerce Camp Hamburg. Shownotes & Links Quick 'n dirty Episode 4 bei YouTube A Designer’s Code of Ethics

Unser Interviewgast Rico Pfaus ist Frontend-Architekt bei Galeria Kaufhof. Vor drei Jahren haben wir gemeinsam mit Rico am Relaunch der Galeria Kaufhof Platform gearbeitet und sprechen mit ihm über die Entwicklungen seit dieser Zeit. Das Interview wurde am 04.08.2017 per Skype aufgenommen. Die Episode wurde am 14.08.2017 offline gestellt.

Unser Interviewgast Mario Nebl arbeitet als Freies Radikal bei der SinnerSchrader Deutschland GmbH. Wir unterhalten uns mit Mario über den von ihm entwickelten Pattern Library Generator patternplate und Design Systeme. Allein dadurch dass alle über die selbe Sache sprechen, spart man viel Zeit und erreicht eine andere Durchdringungstiefe in allen Gewerken. —Mario Nebl Ebenso sprechen wir über Teamkonstellationen bei SinnerSchrader: Wir strukturieren unsere Teams anders: Es gibt kein Team in dem nur Technik oder nur Designer sitzen. Es wird immer gemeinsam in relativ kleinen Teams an einem Feature gearbeitet. Das führt dazu, dass man gemeinsam Verantwortung für das Ergebnis übernimmt. —Mario Nebl Das Interview wurde am 17.07.2017 in Hamburg aufgenommen. Shownotes & Links patternplate Space in Design Systems – Nathan Curtis React Sketch.app

Heute sprechen wir quick & dirty über die Chocolate White Icons, welche wir im Rahmen der UIengine und in anderen Projekten einsetzen. Was nervt bei der Iconerstellung, worauf musste man achten, welche Tools können dabei helfen. Shownotes & Links Chocolate White Icons UIengine Gapplin – SVG Viewer for Mac

Heute sprechen wir quick & dirty über die UIengine, welche wir als Pattern Library Generator in aktuellen Projekten einsetzen. Shownotes & Links UIengine Die UIengineering.de Pattern Library

Ein kleines Update aus dem Off: Im quick & dirty Style melden wir uns zwischen den Staffel zurück und sprechen über das was uns aktuell bewegt. Shownotes & Links UIengine Die UIengineering.de Pattern Library

Bart Simpson musste schon als Strafarbeit an der Tafel Dinge schreiben: Ist die moderne Form der Strafarbeit die Dokumentation? Im Nachgang Dinge von anderen so aufschreiben, dass es passt. Nervt. Aber es gibt einen Weg aus der Motivationsfalle Doku: Die Dokumentation selber. In dieser Episode sprechen wir über die Art und Weise wie es Spaß machen kann eine Doku zu haben und nicht daran zu verzweifeln. Wir reden über Beispiele aus unserer Arbeit und Prinzipien, die andere verwenden, um aus Dokumentation das zu machen, was sie leider nicht immer ist: Ein wertvolles Extra. Welche Tools wir verwenden und wie man Dokumentationen zu einer integrierten Sache machen kann, die auch noch das Team besser zusammenbringt, ein paar Tipps für mehr Selbstpromotion und besseres Projektinvolvement sowie Ideen für die Zukunft in unseren Arbeiten diskutieren wir ebenfalls. Und noch etwas in eigener Sache: Wir kommen wieder! Das Ende der ersten Staffel des UIengineering Podcast ist mit Folge 10 erreicht. Ab der zweiten Staffel

Es ist bekannt aus vielen Hollywoodstreifen, kein Agentenfilm oder moderner Thriller kommt ohne es aus: Das schwarze Fenster mit der weissen oder grünen Schrift, die superkryptisch aussieht. Aber ist das denn wirklich alles nur für den Obernerd zu verstehen und zu bedienen? Wie so oft in unseren letzten Gesprächen stellt sich heraus, dass es gar nicht so schlimm ist wie man denken kann. “With the helping hand of a friend” kann man auch als Designer eine Menge Freude am Terminal entwickeln, nämlich dann wenn man merkt, dass einem dieses Fensterchen ganz viel Arbeit abnehmen kann. Wer weiterhin 345 JPEGs von Hand speichern und umbenennen und optimieren will kann das gerne tun. Aber wer schlau ist, noch ein Leben nach dem Job hat, der hört genau hin und sammelt Ideen wie man früher Feierabend machen kann. Außerdem sprechen wir über die Arbeitsweise mit Build-Scripts und über die Arbeit an der uiengineering.de. Warum am Ende auch ganz kleine erste Schritte ein Weg in das mysteriöse Fenster Sinn machen haben wir