Skillbyte Podcast #56: Protoyping für Rapid application development (RAD)

Willkommen zum Skillbyte-Podcast! Skillbyte ist Ihr Partner für digitale Exzellenz.

In diesem Podcast geht es um das Thema: Protoyping für Rapid application development (RAD)

// Inhalt //
01:13 - Intro Christoph Bresler von spacepilots.co
02:15 - Intro Christian Strang von 10fastfingers.com
02:57 - Warum gibt es Prototyping Werkzeuge?
06:14 - Die Wertschöpfung von Prototyping
09:51 - Geschichte und Verwendung aktueller Prototyping Werkzeuge
15:25 - Figma - der neue Stern am Prototyping Himmel
20:56 - Figma - Power-Funktionen
24:04 - Figma Komponenten als Styleguide
26:08 - Code-Export aus Figma
27:19 - Kollaboration in Figma
28:33 - Produktentwicklung und Prototyping ohne Figma
36:40 - Prototyping Success Stories
42:46 - Wohin geht die Reise bei Prototyping Werkezugen?

Abonnieren Sie diesen Podcast und besuchen Sie uns auf https://www.skillbyte.de

Feedback und Fragen gerne an podcast@skillbyte.de

AUTOMATISCH ERZEUGTES TRANSKRIPT

Genau, oder auch einfach mal sagen Wir haben es mal gebaut. Wir geben das mal jemandem in die Hand und spiegeln das mal über Miro auf eine mobile App, welche man mit ein, zwei Nutzer einfach mal drüber gucken. Das ist jetzt mal zu testen und die klicken dann darauf rum und du merkst, was wir total genial fanden und was der Kunde vielleicht sogar vorgeschlagen hat versteht, der Nutzer eine ganz andere Lebenswelt hat oder andere Perspektive hat. Überhaupt gar nicht.

Und wir merken so Ah, okay, wir haben allein an diesem einzugehen fünf Dinge über den Nutzer gelernt, die wir uns nie hätten ausdenken können. Und die Zeit und das Geld, was wir da wieder gespart haben. Wunderbar.

Herzlich Willkommen zur Skillbyte Podcast Episode Nr. 56 Prototyping für Rapid Application Development Abonniert unseren Kanal für mehr spannende Themen aus dem Technology Umfeld, wenn er IT Entscheider oder IT Fachkraft seid. Wenn ihr eine Frage habt, sendet uns gerne eine E-Mail an Podcasts skillbyte Wir freuen uns immer über Bewertungen und insbesondere über Weiterempfehlung an Freunde und Kollegen. Heute bin ich mit zwei Experten zum Thema Prototyping hier und zwar zum einen Christoph Pressler Hallo Christoph Mahler, grüße dich! Schön dabei zu sein.

Danke für die Einladung.

Sehr gerne und mit Christian Strang Hi Chris, Hallo zusammen Christoph, du bist ja Mitgründer der Agentur Space Pilots. Vielleicht erzählst du kurz, was du machst und woran du beruflich arbeitest.

Ja, gerne. Ja, wie du sagst. Gründer der Digital Design Agentur Space Pallas. Wir arbeiten üblicherweise an der Nutzer Erlebnissen, also Konzept Design für Webanwendungen, Mobile Apps. Das ist so unser Thema. Die durchdenken wir, die planen wir und gestalten die auch. Und das mache ich jetzt seit ja schon einigen Jahren. Insgesamt ja bin ich schon seit 10 Jahren mit dem Thema Konzept und Design von Anwendungen dran.

Wahnsinn. Okay, also freue ich mich wirklich. Du hast reichlich Erfahrung und ihr werdet wahrscheinlich verschiedene Tools an, auch über die Jahre hat sich da wahrscheinlich eine Entwicklung abgezeichnet.

Ja, ja, auf jeden Fall. Da haben wir vieles ausprobiert und versuchen uns auch da irgendwie stetig weiterzuentwickeln. Gerade Design und Entwicklung, da können wir wahrscheinlich nachher noch mal zu sprechen. Das ist ja immer mehr eine Symbiose. Da versuchen wir uns auch aktiv weiterzubilden und bessere Workflows für Designer und Entwickler zu finden.

Super freue ich mich drauf. Christian Vielleicht möchte uns kurz sagen, wie du zum Thema gekommen bist und woran du arbeitest.

Ja genau. Ich arbeite an den First Fingers und an weiteren digitalen Produkten, denn an das Thema Prototypen drangekommen, in dem ich im Endeffekt damit angefangen habe, einfach Ideen, die ich halt hatte, per Code abzubilden und dann festgestellt habe über die Zeit, dass es halt nicht der effektivste Weg ist. Und habe mich dann so heran gehandelt über Paper, Prototyping und andere Tools und bin jetzt mittlerweile halt bei Sigma angekommen.

Also auch schon viele viele Jahre mit Prototyping Werkzeugen gearbeitet. Wie lange?

Ungefähr ungefähr 15 Jahre her.

Okay, dann haben wir eine ganze Menge Wissen heute im Podcast mega. Das Problem warum es diese Prototyping Werkzeuge überhaupt gibt, liegt ja historisch darin begründet, dass Anwendungsentwicklung Christian das gerade schon gesagt sehr lange dauert und damit auch sehr teuer ist. Man überlegt sich ein Feature oder einen Prozess Ablauf und dann implementiert man den oder so hat man das früher gemacht und hat dann festgestellt Oh, das ist gar nicht so cool, wie ich das mir vorgestellt habe, oder? Das bringt dem Kunden gar nicht so viel, wie es den Anschein hatte und hat jetzt diese ganzen Ressourcen aufgewendet für eine Funktion, die man im Grunde nicht braucht.

Das heißt, es gibt ein großes Bedürfnis in der Softwareentwicklung, den Entwicklungsprozess zu verschlanken. Die Entwicklung der letzten Jahre, also des Scrum Vorgehens Modell statt dem antiken Wasserfall Modell oder auch das Lean Startup Movement, wo der MVP, also quasi ein voll funktionsfähiger Mini Prototyp gebaut wird, der ja schon das Leistungsversprechen durchscheinen lässt, aber auf gar keinen Fall eine komplette Anwendung gebaut wird, zielen ja genau in diese Richtung. Der Entwicklungsaufwand soll zielgerichtet auf den Benutzer zugeschnitten werden.

Zweiter Faktor kommt dazu Die Software muss ja heute viel mehr Funktionen und Varianten anbieten als noch vor einigen Jahren, also in den 90ern oder frühen 2000ern. Da gab es halt normale Webseiten und Desktop Software. Heute bei vielen Applikationen gibt es eine Website, gibt es eine App für iOS und Android. Die Webseite funktioniert auch responsive, das heißt auch mit mobilen Geräten oder mit Tablets sieht die gut aus für verschiedene Bildschirmgröße und so weiter. Das heißt, der Funktionsumfang und der Entwicklungsaufwand steigt sogar noch.

Also man muss quasi mehr Output produzieren, was das Bedürfnis, die Entwicklungszeit zu reduzieren oder möglichst zielgerichtet einzusetzen, natürlich noch weiter steigen lässt. Wie ist da eure Beobachtung in den letzten Jahren?

Erst beobachten wir auch so und das wird mir auch schon so ein bisschen eine Ausbildung mitgegeben. Im Studium habe ich mich schon super viel mit Usability Engineering befassen dürfen und das ist halt eigentlich genau das ein was du gesagt hast von einem Wasserfall Modell zu agieren. Entwicklung und so. Ist ja auch eigentlich die Idee Anwendungen zu konzipieren und zu gestalten, dass man es erstmal schafft, sich die Nutzer Szenarien zu durchdenken und die komplexen Anwendungen und was sie alles auch in den Schnittstellen miteinander machen.

Also von Web zu App zu mobile App zu irgendwelchen bekennst, dass man das halt sauber durchdenkt und durch Prototypen. Wenn man sich da verläuft und irgendwo in die falsche Richtung läuft, dann ist das eine Entwicklung, meistens ein Stück teurer und deswegen ist das ganze Usability Engineering und die richtige Art des Prototyping für die aktuelle Phase oder für die aktuelle Herausforderung zu finden, Benutzer und deren Bedürfnisse zu analysieren. Um dann erst mal zu skizzieren, wo wir hinwollen, hat er einfach noch viel, viel mehr an Wert gewonnen.

Und da sprechen wir noch gar nicht davon, dass irgendwie auch Software Ergonomie seitig die Ansprüche immer höher werden. Durch Anwendung ist ein ganz anderes Thema. Aber Komplexität, wie du sagst, steigt, der Wunsch nach Agilität steigt und die Erfahrungen und Erwartungen von Nutzern sind auch mittlerweile ganz andere.

Das bekomme ich auch mit, auch wie du sagst, die Oberfläche oder diese Prozesse. Flows, das ist ja das eine, was designt werden muss. Die Schnittstellen im Hintergrund sind das andere. Und da wird es ja noch teurer, wenn man sich verrennt und eine Funktion implementiert, die letztlich dann nicht den erwarteten Nutzen bringt.

Das ist ganz spannend. Ich habe einen potenziellen Kunden geschrieben. Wir sind gerade ein bisschen. Ich werde diese kleine Geschichte einfach mal ein Jahr gerne, weil sie mich gerade daran erinnert und wie sie schrieb, auf ein Angebot von uns, das wir uns initial mal um vier Frames und ihr Design kümmern. So ein bisschen auch dahin. Das ist ja schon recht viel, auch was wir dann da aufbringen müssen an an Geld Invest, um eigentlich erst mal was zu sehen.

Und dann war das natürlich auch so ein bisschen eine Steilvorlage für das Thema Usability Prototyping. Und ich habe ja dann auch geschrieben Ja, das ist wichtig. Das ist vielleicht nicht wenig Invest, aber wenn wir uns nachher verlaufen und irgendwie ganz viele Funktionen entwickeln und technisch umsetzen, die nachher keiner braucht, dann ein Vielfaches vielleicht von dem ausgegeben, was du eigentlich ausgeben wollen und was wir jetzt investieren müssen. Deswegen macht es auf jeden Fall Sinn, dass wir uns vielleicht ein bisschen länger im Konzept aufhalten.

So nenne ich jetzt mal vereinfacht also die Phase des Bruttosozialprodukts. Und dann hast du am Ende vielleicht oder sehr, sehr wahrscheinlich viel, viel weniger Schmerzen mit der Anwendung, die du dann bauen möchtest.

Ja, das ist eigentlich ganz interessant, weil das hört sich so an, als hätte die Kunde noch nicht dieses Problem gehabt, dass sie mal zu viel Geld in Entwicklungs Ressourcen gesteckt hätte, was ein gutes Problem ist. Aber andererseits ist dann wiederum, wenn es passiert wäre, hätte dann dieses Learning gehabt, aus dem sie dann quasi erkannt hätte, dass das doch einiges bringt.

Ich habe auch tatsächlich in vielen Briefings von anderen Agenturen und Projektpartnern oder technischen Partnern immer wieder gehört, dass da auch eine Einstiegsfrage zu Kunden ist. Ja, haben Sie schon mal irgendwie in digitalen Projekten gearbeitet oder in komplexeren Software Projekten? Und dass das auch quasi so eine Ausschluss Frage für einige Dienstleister ist. Aber um genau das herauszufinden und zu wissen oder zumindest denn den Kunden auch darauf vorbereiten zu können, dass da eben so was kommen kann, dass es wichtig ist, da sehr viel darüber zu sprechen, weil ich glaube, dass das nicht mal erlebt hat, der weiß nicht warum.

Warum um diesen ganzen Prozess gemacht wird, damit investieren. Wir müssen erst mal vorbereiten, uns Gedanken machen. Wir wollen ja alle mal loslegen. Also viele Personen wollen mal loslegen. Das spüre ich so und das ist auch super, weil das ist ja ein Treiber. Aber letztendlich tut es ja auch immer recht schnell, wenn man merkt, die Personen haben es noch nicht selbst mal durchlitten und wissen nicht, warum man das ganze Theater macht.

Ich meine, dass das kann teilweise sogar dabei anfangen mit der Idee, dass wenn man wenn ich jetzt mit Leuten spreche, die als irgendwie eine super tolle Idee haben, dann merkt man was ich halt direkt den Status von den oder den Erfahrungen, dann werde Ideen ich sagen wollen, weil für mich ist es dann direkt schon so ein Zeichen, dass es quasi schon vor Prototypen, dass wir nicht mal die Idee kommunizieren. Kannst du da kommunizieren? Willst du schon mal direkt von The Red Flag?

Und das stimmt. Das ist ganz verrückt, die Leute. Wenn so ein Gebäude gebaut wird, dann ist das halt total klar, dass das erst mal geplant werden muss. Bis ins Detail, bis hin, wie die Türen eingebaut werden. Also eine Planungsphase, ein Jahr oder länger. Und dann erst wird mit dem Bau begonnen, also dem eigentlichen Bau des Gebäudes. Und auch während dem Bau treten natürlich noch Probleme auf, die gelöst werden müssen. Aber am Ende baut man das Gebäude dann so, wie es geplant ist und hoffentlich erfüllt es dann auch den Zweck.

Wird etwas gedacht, ist bei Software, weil es halt so was intern gibt. Es ist eine, sieht man nicht. Oder man denkt Ach, das ist so eine Webseite, die hat mein kleiner Bruder ja in zwei Nachmittagen gemacht.

Ja, man versteht das halt auch nicht, wenn man technisch nicht versiert ist. Also wenn so ein Haus gebaut ist, ist halt Stein auf Stein. Das kann man irgendwie auch, wenn man selbst nicht da in dem Business unterwegs ist, verstehen. Aber Software, wenn man selber nicht irgendwie Softwareentwicklung gemacht hat, ist das wirklich so ein schwarzes Loch?

Es gibt ja auch alles schon. Das ist ja auch so ein bisschen, dass der Gedanke bei vielen Personen, die sich jetzt nicht so viel mit Anwendungen auseinandersetzen, die denken Ja, es sind Bausteine, die steckt man zusammen, es ist alles modular, da läuft das einfach. Es gibt einen fertigen Chat, das unfertige Kunden, Verwaltung ohne Kontakt, Verwaltung, die steht nur einfach zusammen und dann läuft das halt. Was gibt es denn da für Unterschiede und für was für Sonderfälle?

Das kann man sich ja gar nicht vorstellen. Und dann rennt man ja schon in so ein Szenario rein.

Aber Bausteine ist ein gutes Stichwort, weil Bausteine gibt es natürlich in Anwendungen wie Buttons coole leisten, Menüs leisten, Hinweis, Texte und so weiter. Und oft reicht es ja, wenn man diese einzelnen Prozessschritte sie durchdenkt, mal die Masken dafür erstellt, mal so eine Click Strecke macht und sagt Okay, wie sähe das denn aus, wenn wir die und die Funktion umsetzen würden? Und ich kenne das noch von vor das inzwischen auch schon zehn Jahre her, dann werden diese Designs oder die einzelnen Screens wirklich wurden dann noch in Photoshop gemacht oder ganz schlimm in Powerpoint.

Die wurden dann einzeln ausgedruckt und an die Wand gehangen. Also wie wenn so eine Zeitung entsteht, hängt man ja auch jede Zeitungsseite so an eine lange Liste und sieht dann, wie die Zeitung nach und nach entsteht. So wurden dann auch diese Prozesse. Angeklickt und für mich persönlich war das so der Anfang vom Prototyping. Ob jetzt Photoshop das richtige Werkzeug damals schon war, weiß ich nicht, aber so konnte man sich das. So wurden die Schritte dann designt und auf jeden Fall hat man Geld gespart gegenüber der Implementierung.

Und da gab es noch Ablauf, Diagramm, Werkzeuge in der Microsoft Visio oder verschiedene andere, wo dann die Verzweigungen eingezeichnet wurden, so dass man so die ersten zarten Versuche und dann hat man halt schon eine Diskussionsgrundlage gehabt, die Masken oder die Webseiten Darstellung, die hing dann an der Wand. Man konnte darüber sprechen, es gab wiederverwendbare Elemente. Na, das hat man auch per Photoshop mit Instanzen diese Buttons überall platziert und sah auch ein bisschen krumm und schief aus.

Aber man konnte sich vorstellen, ungefähr wie der Processes und dann darüber diskutieren und den dann eben glatt schleifen, dass man ihn wirklich runter, bevor man ihn dann aus implementiert. Das hat dem kreativen Prozess geholfen wurde. Auch als Diskussionsgrundlage wurden diese Screens verwendet und zeigt klar Man konnte klar sehen, dass es sich um Prototypen handelt, weil die ja an der Wand ausgedruckt waren und nicht nicht aus implementiert waren, dass man die auf dem Monitor schon gesehen hat oder so.

Und die ersten Prototyping Werkzeuge haben ja auch genau so gestartet. Ich kann mich erinnern 2012 2013 habe ich mit Balsamico Mock ups angefangen. Da konnte man das. Sah alles aus wie Hand gezeichnet, konnte man eben genauso einzelne Elemente hintereinander platzieren, um eben diese Prototypen zu erstellen. Ob die Balsamico auch verwendet oder habt ihr noch vorher angefangen?

Ich haben wir das auch sehr sehr stark verwendet. Auch als ein Tool in der Uni wird das schon vorgestellt. Zwei 2012 2013 haben wir sehr viel damit gemacht und tatsächlich ziehen wir auch zwischendurch immer noch mal zurück zur Hand, weil weil es eben genau das tut. Du kannst schnell diese verschiedenen Komponenten mal zusammen klicken und wenn man sich in einer ganz frühen Phase befindet, im Team oder auch mal bei einem Kunden, erst mal ganz, ganz grob irgendwelche Sachen zusammen zu werfen, zu gucken was, was könnte da sein?

Sprichst du davon von der Contact Verwaltung und da sprichst du von unserem oder wie? Was genau ist das, was du meinst, das mal überhaupt zu visualisieren? Da kann man das nach wie vor. Oder nutzen wir das nach wie vor immer wieder mal? Das ist eben weniger die Frage, was ist dann das Tool an der Stelle? Sondern wie kriegen wir es schnellstmöglich hin und auf pragmatische Art und Weise dem Team oder auch dem Kunden was zu zeigen, was visuelles, was er sich ein bisschen vorstellen kann, um die Kommunikation irgendwie zu synchronisieren.

Sprechen wir über das Gleiche, haben wir ein ganz anderes Verständnis. Das kann genauso eine Skizze sein, also auf Papier. Aber tatsächlich hat er dadurch das Balsamico auch so ein bisschen trivial ist und so ein bisschen stark vereinfacht ist das auch, da ich einen echten Nutzen, weil man auch sieht. Also ich weiß nicht Christoph oder Christian wie es euch gegangen ist. Man hat ja auch manchmal so HTML Prototypen gebastelt und hat dem Kunden das dann gezeigt. Und dann ist beim Kunden der Eindruck entstanden Ach, das ist ja schon fertig, dann können wir das denn online Shantanu zu sein und dieses Problem hat man halt bei Balsamico gab es nicht, weil man ganz klar sieht, dass es sich hier um Prototypen handelt, der nur wie auf Papier gemalt ist.

Ich habe da auch einen anderen Werdegang als der Christoph hat das eben ganz schön gesagt. Diese Tools nutzt du ja im Endeffekt, um zu kommunizieren, um entweder im Team zu kommunizieren oder vor allem auch zwischen dem Team und den Kunden zu kommunizieren. Aber da ich halt die meisten Projekte immer alleine gebaut habe, habe ich diese Tools benutzt, um die Sachen aus meinem Kopf zu bekommen, zu visualisieren und dadurch Fehler zu erkennen. Das habe ich aber meistens dann auf Papier gemacht, zwei Frames oder so und bin dann halt meistens auch relativ schnell in Photoshop eingesprungen.

Beziehungsweise davor habe ich dann teilweise diesen Schritt gemacht, dass ich irgendwie Bootstrap geschnappt habe, so ein Basis Interface gebaut hatte, um zu gucken, wo welche Elemente hin müssen. Aber alles so, dass es eher für mich war und jetzt nicht irgendwie, dass ich das konkret kommunizieren müsste mit einem Kunden.

Auf jeden Fall Balsamico. Christoph angesprochen sehr basic. Das ist auch meine Erinnerung an dieses Werkzeug. Ich habe es jetzt noch länger nicht verwendet, dadurch natürlich aber eine niedrige Lernkurve. Man kann es jedem geben und jede Person kann im Grunde sofort damit los arbeiten. Heute ist es ja schon so, dass diese Prototyping Werkzeuge ganze Click Strecken Formular Felder Validierung beinhalten und man ich sage jetzt mal ein bisschen hochtrabend fast fertige Anwendungen generieren kann, mit Scrolling, Bildauswahl, verschiedenen Icons, Grafiken usw.

Und diese Anwendungen laufen dann auch im Browser, so dass man im Grunde auch schon eine relativ umfangreiche Demo zeigen kann. Und die aktuellen Werkzeuge, wie man zum Beispiel da kommen wir gleich noch hin. Die bieten sogar die Erstellung von Inhalten, also von Prototypen auf unterschiedlichen Plattformen an. Also das sehe ich als ganz, ganz große Stärke. Du kannst am Rechner eine Maske zusammen klicken, wie immer. Du kannst auch mit dem iPad was machen. Du kannst auch auf dem mit einer App was machen oder auch zeigen.

Und diese Konvergenz ist einfach sehr hoch und dadurch auch die Kollaboration, dass viele Menschen gleichzeitig an Prototypen arbeiten können und dann unterschiedliche Aspekte verbessern können. Wollen wir mal in die moderne Welt springen? Welches Werkzeug Christoph benutzt ihr denn aktuell vorrangig bei Space Pilots? Ist das eins oder habt? Da er ja bestimmt mehrere im Köcher, aber ihr bestimmt ein Lieblingsthema.

Tool entwickelt sich tatsächlich geradezu fickt hin dadurch, dass man eben mittlerweile zusammenarbeiten kann an einem Design. Das ist ja so ein bisschen, das nehme ich mal einfach vorweg, so ein bisschen der entscheidende Vorteil, dass wir das einfach gleichzeitig dran arbeiten können. Und das war bisher immer noch ein Schmerz, dass man, selbst wenn wir eine synchronisierte Cloud haben, in unterschiedlichen Dateien arbeiten müssten, mit Entwicklern und Designern, die vor allem im Designer die Oberflächen gestaltet haben, Designs entwickelt haben.

Und dann muss man sich absprechen, wer es wann drinnen und es synchronisiert und so weiter. Deswegen geht es gerade Richtung Firma. An sich ist aber die Frage so ein bisschen wie Wie ist das Team Set up? Was ist gerade der Zweck von der Prototyping Phase? Was brauchen wir gerade am meisten und wie ist das Team aufgestellt und wie kann es am besten damit umgehen? Das heißt, wenn wir ein Team haben, was total fit im Moment in Sketch ist, mit den Libraries und allem drum und dran super gut klarkommt, dann springt man Sketch und arbeiten mit der Division und ergeben dann über die Prototypen.

Aber es wird eben immer mehr, weil die Nachfrage auch irgendwie steigt, weil auch die die Product Teams immer mehr mit ihr arbeiten und auch viel zu langsam die, die die Transformation dahin eingeleitet haben. Und auch mit den Dateien, die wir haben, auch gut weiterarbeiten können. Also auch ist jetzt Dateien werden noch verstanden und interpretiert. Der Weg zu Iceman, das haben Sie glaube ich sehr sehr gut gemacht ist sehr sehr einfach. Dieses gemeinsam kommentieren im Browser sich das Ganze anschauen, das ist schon recht flott und einfach.

Das wusste ich gar nicht. Man kann also Sketch Dateien importieren.

Genau. Denn der Weg zurück geht glaub ich nicht, ist mein letzter Kenntnisstand.

Das wäre auch geschäftlich unklug.

Wahrscheinlich erscheint eine strategische Entscheidung ja genau nicht, aber ansonsten ist es mit Sketch. Machen wir doch schon mal via Frames, oder? Tatsächlich springe ich dann mal auch in Balsamico noch mal zurück. Aber wir haben auch zu Studentenzeiten habe ich dann irgendwie mit kino.to die Prototypen zusammen geklickt. Da ging es dann doch eher darum, dass man schnell visuelle Elemente hat und man konnte ganz witzig Animation mit Kino und PPT machen. Also das zeigt dann eben, wenn es um bestimmte Dinge wie Interaktion geht und gar nicht so sehr um die Feinheit der Designs, dann gibt es vielleicht auch mal andere Wege.

Es geht ja immer darum, irgendetwas zu zeigen und zu kommunizieren oder eben kreativ zu sein, viele, schnell viele Varianten von Designs zu machen. Und dann bietet sich manchmal vielleicht auch ein anderes Tool an. Aber wenn wir jetzt grundlegend unsere Konzepte, also die User Flows durchdenken oder die die Seiten Architektur oder eben konkrete Screen Designs, einzelne Screen Designs, dann eignen sich da sieht man schon schon sehr gut.

Ich finde es auch interessant, weil an sich würde man jetzt als Typekit Tool nehmen oder ansehen und Balsamico als low identity. Aber theoretisch kannst du halt mal über die Community auch Libraries einbauen, in denen du Komponenten hast, die halt auch aussehen wie Low Fidelity und du nimmst quasi das High Fidelity Tool, aber baust Prototypen die die aussehen, wo der Kunde dann auch nicht erwartet, dass die jetzt schon liefern.

Bei Fidelity sprichst du von von welcher? Von der visuellen Identität. Das ist ganz schön. Da haben wir, das ist glaube ich, Teil des jubilierte Engineering. Da trennen Sie das glaube ich, ganz schön in die inhaltliche Genauigkeit. Fidelity Die visuelle Genauigkeit, also Interaktion, visuelle, und das ist ganz schön, das kann man immer heranziehen. Ich sag ja, die ganze Zeit kommen so ein bisschen auf den Zweck an. Man muss sich überlegen, womit arbeitet man gerade?

Hat man schon fertige Inhalte und geht es darum, die Inhalte und die Struktur klar zu haben, dann braucht es erst mal kein richtiges Design Tool, dann kann das auch eben Pen und Paper sein. Oder im Balsamico. Wenn man erst mal nur im Texte und welche Bilder könnten da stehen, also das Narayen an sich arbeitet und dann ist die Frage wie muss es dann visuell auch schon sehr genau sein, weil dann Entwickler halt wirklich Komponenten umsetzen wollen im Frontend.

Dann spreche ich meist von der visuellen Fidelity muss das high oder Low sein und oder wie ist denn? Wie ist das mit der Interaktion? Muss man die Interaktion darstellen? Geht es darum, dass wir sehr viel Übergänge zeigen, vielleicht sogar Animationen darstellen wollen? Und dann an dieser Fidele die Auswahl von niedrig bis hoch? In all diesen drei Kategorien kann man dann auch so ein bisschen sein Produzent den Tool quasi aussuchen, je nachdem, was gerade erforderlich ist. Aber man bietet mittlerweile halt für alle Phasen eigentlich schon eine ganz gute Unterstützung.

Ich bin selber Softwareentwickler und ich habe immer mehr ein iPad Tab offen. Boah, die Fanseite oder das ist natürlich kommt aus der Box oder dem Design. Da werden halt Masken abgebildet, die die Fanseite so angefordert hat oder mit der Fanseite so abgestimmt sind und nicht implementiert die dann runter. Auch sehr komplexe Prozesse können darüber abgebildet werden. Wobei, ich kann das gar nicht so beurteilen. Ich benutze bei IKEA wahrscheinlich 10 prozent der Funktionen, falls überhaupt und das Tool kann viel viel mehr.

Also von daher ist es gut, dass Christoph das und Christian, dass ihr heute da seid und da mehr drüber sprechen könnt, was es da noch alles gibt. Für mich ist glaube ich, die USP oder der hohe Wert entsteht durch diese Konvergenz. Also viele Leute können gleichzeitig an einem Prototypen arbeiten, Multi Geräte mäßig. Dadurch kommt man sehr schnell voran und jeder kann in seiner Welt bleiben, in der er zu Hause sind und gemeinsam an einem Artefakt arbeiten.

Ich find es halt mittlerweile auch interessant, was jetzt gerade für die neue Version ging es darum wo stellst du die Dateien zur Verfügung? Wenn haben halt die Conference Page wo ich quasi. Single Source of Trust habe ich dann alle Module beschrieben und dann ist die Frage Wo packst du jetzt zum Beispiel für Achievements Fuhrparks für die Achievement Dateien rein? Und vorab ist dann gesiebt und da halt reingepackt. Und jetzt sage ich halt alles was grafisches ist in dieser Datei drin. Also alles was du, wenn du versuchst, geh einfach da rein, dort ist das Helm drin.

Das ist ganz schön, wenn das alles an einer Stelle dann zusammenkommt.

Gibt es denn eine besonders herausstechen Funktion bei IC MA, die euren Workflow maßgeblich vereinfacht hat? In den letzten ein, zwei, drei Jahren als Ortho Layout? Das Kollaborative, das hatten wir gerade schon so ein bisschen dieses Zusammenarbeiten, das ist definitiv ein Riesenvorteil. Die Layouts funktionieren auch ein ganzes Stück, besser noch als bei Sketch aus meiner Sicht, dass man da eben responsive Designs noch mal viel, viel einfacher und und und auch schlanker umsetzen kann. Also nicht noch mal irgendwie vielleicht.

Eine zweite, dritte Adaption braucht unterschiedliche Arbeitsflächen, wo man noch mal E-Mobil Designs oder umgekehrt die Desktop Designs noch mal anpasst und ausprobiert, sondern die Komponenten lassen sich schon so gut ineinander verschachteln und auf die Responsive ausrichten, dass man da mit einem Design eigentlich sehr sehr gut die verschiedenen Typen abbilden kann.

Was ich noch super spannend finde ist halt dieser Komponenten Ansatz bei IKEA, dass man so eine Art Master Komponente baut und darüber dann halt Instanzen abbildet. Und wenn man jetzt sagt okay, das passt eigentlich nicht. Sagen wir die Master Komponente ist irgendwie ein blaues Viereck. Ich habe ja 20 Instanzen davon, da kann ich die Master Komponente anpassen farblich und alle unter Instanzen passen sich halt auch an. Das finde ich halt super. Und wenn man das jetzt noch zum Beispiel mit Atomic Design kombiniert, dass man halt von klein auf Designs aufbaut.

Also muss man sich jetzt mal anschauen, ob damit die seinerzeit so ein eigenes Ding finde ich im Moment sehr spannend, wie robust das ganze halt wird. Auch wenn man dann halt noch Anpassungen macht und sich das im ganzen Design dann halt umsetzt in allen Pages.

Kurz als Einschub Atomic Design. Das ist so ein Ansatz, dass man wie Atome Moleküle und größere Strukturen bilden, kann man das natürlich auch im Design machen. Also eine Atom wird zum Beispiel der Sub mit Button und ein Molekül wäre eine Lock in Maske, wo der Sub mit Button drauf ist. So meinst du das? Und die Login Maske könnte man jetzt überall oder an mehreren Stellen verwenden. Und wichtig ist, dass man die Komponente Lock in Maske verwendet innerhalb von Stigma, dass wenn sich an dieser Komponente etwas ändert, sich überall etwas ändert, wo diese Komponente eben verwendet wird.

Also genauso wie das im Source Code für die Anwendung gemacht wird, wenn Atomic Design verwendet wird. Dieser Ansatz, den kann man auch bei Ikea benutzen.

Das ist doch glaube ich bei den, bei denen du generell schon ganz gut mitgedacht. Also eben genauso zu arbeiten auf kleinster Ebene. Bei mir ist das dann eben auch Komponenten bei jetzt Schwarz und Symbole und die jetzt in Varianten anzulegen macht es halt wirklich noch mal leichter und die auch dann eben in die Prototypen. Also wenn das wenn das mal durch Tests ist, eine Serie machst und du schaltet hintereinander, dann kannst du eben diese Varianten auch mal austesten, dass du einen Button oder Narayen Design von den Werten noch mal darstellen kannst.

Das macht es echt viel, viel leichter und schneller, da Prototypen zu bauen. Aber grundsätzlich bauen diese Design Tools schon sehr sehr gut genau auf diesen Atomic Design Ansatz an, das man eben von den kleinsten Element sich die Module nach und nach zusammenbaut. Und wenn man da auch konsequent arbeitet, dann ist das eigentlich ein durchgehender Posten. Vom ersten Moment wo man diese Komponente hat, läuft das durch die Entwickler diese Komponente dann so im Code dann nachbauen können und dann eben auch an den richtigen Stellen die Einzelelemente eben richtig wiederverwenden können, um sich ganz, ganz viel Aufwände zu sparen.

Wenn ich diese Komponenten oder dieses Paradigma des Atomic Designs auch in Sigma konsistent durchziehe, hat dann der Style Guide ausgedient? Also kennt ihr vielleicht Nostalgie? Große Unternehmen machen das wie sich bei uns generell die Unternehmens Sprache aus. Wie sieht bei uns ein Okay aus, wie sie abbrechen Button aus? Wie sieht eine Fehlermeldung aus, wie Sie Erfolgsmeldung aus und möglichst das über viele Anwendungen konsistent zu halten, damit der Nutzer immer sofort erkennt Ach, das ist die Anwendung vom Unternehmen XY z.

Das könnte man damit ja eigentlich prima abbilden, dass man da den Style als sozusagen als Tomic Komponente innerhalb von Firma anlegt.

Also ich hab da nicht so viel Erfahrung wie der Christoph, aber was ich glaube ist, dass auch viele Unternehmen mittlerweile Firma als ihren Style Guide benutzen und verlinken. Helm also, die alle Komponenten hier angelegt werden und lassen sich ja quasi auch so in der Komponenten Übersicht noch mal anzeigen. Und damit baut man sich ja eigentlich Einsteiger. Das dahinter steckt wahrscheinlich eher noch mehr die Frage Wie schafft man es, das konsequent auch zu nutzen? Also Einsteiger, das hat ja auch nur Nutzen, wenn er irgendwie bei allen Teams ankommt und dann auch gelesen, verstanden und eingebunden wird.

Das ist jetzt natürlich nochmal ein Stück einfacher, gerade wenn man es jetzt irgendwie schafft sich ein sauberes Design System aufzubauen und alle Farben Schriften drin sind alle Varianten von den Komponenten, die gut dokumentiert sind, die dann vielleicht auch über ein Design Management System irgendwie dann ins Storyboard einfließen, wo sich die Entwickler, vielleicht auch schon die die Elemente der Komponenten oder die Snippets rausziehen können und es da dann auch irgendwie eine Single Source of. Und im besten Fall synchronisiert. Ich glaube, da läuft es auch gerade so ein bisschen hin.

Das machen wahrscheinlich einige schon ganz gut. Von einigen Start ups auch schon gehört, die da recht fit sind, die dann wirklich es schaffen. Bei fängt man an den aktuellsten Stand zu haben, das zu synchronisieren mit ihrem Design Managementsystem und dann eben auch das in Storybrooke schon rein zu bekommen. Und viel viel besser schaffen, das die Design Elemente immer wieder verwendet werden, aktuell gehalten werden, synchronisiert sind mit der Entwicklung und da dieser ganze haben wir die aktuellste Version.

Und wo sind denn die Komponenten? Und auch das ja noch ein Design Fall das ganze Thema so ein bisschen erschlagen wird.

Kann man denn aus Sigma heraus, das weiß ich gar nicht auch Frontend Code generieren für verschiedene Erbakans?

Also du kannst auf jeden Fall verschiedene Komponenten die auch in verschiedenen Varianten ausgeben lassen, also zumindest CSS Styles. Wie gut das schon irgendwie mit speziellen Programmiersprachen sei. Es wird direkt oder so funktioniert, dass das weiß ich noch nicht genau.

Du kannst unter ins Bett, kannst du den Code anzeigen lassen. Aber klar, wie Christoph schon meint, wenn jetzt irgendwie sowas wie Tellerand, CSS oder so was nimmst, bringt das dann eh nicht direkt was. Aber wenn man jetzt in den Prototypen Bereich unterwegs sind, dann ist das schon nicht schlecht oder zumindest kann man sich halt daran orientieren.

Also da purzelte rohe HTML Code raus oder nur CSS, soweit ich das jetzt sehen kann.

Na gut, immerhin kann man da vielleicht kleinere Abkürzungen nehmen, auch wenn man nicht den Anspruch haben kann, dass die fertige Anwendung daraus purzelt. Aber ja, das sind so Kleinigkeiten. Aber wenn ich jetzt irgendwie ein Quadrat habe mit einem Gradient, dann gibt mir die kann ich halt diesen Background. Dieses Element kann ich mir dann halt anzeigen lassen, ohne zu gucken welches. Welche Farbe ist das genau? Und das ist dann schon praktisch. Aber ich habe es in dem Sinne auch noch nicht benutzt.

Das ist das tolle bei Sigma ist ja, dass man nur einen Link schicken muss an seine Arbeitsgruppe und alle können zumindest den Prototypen angucken oder können auf der Workbench dann gegebenenfalls auch Aktionen durchführen. Das heißt, das ist natürlich ein weiterer Vorteil, dass niemand außer einem aktuellen Browser Software installieren muss. Hat Fix eigentlich eine Desktop App?

Hat es schon, aber das war halt auch ein Grund, warum ich mich halt für Verkehr entschieden habe. Du kannst quasi auf dein iPad gehen und dort weiterarbeiten, brauchst jetzt keine spezielle Software und dieser Browser basierte Ansatz ist schon meiner Meinung nach ein sehr, sehr starkes Argument dafür.

Die Browser sind mittlerweile so weit, dass sie auf alle Funktionen wie eine Desktop App abbilden können, inklusive Hardware, Beschleunigung und so. Ich weiß auch gar nicht, wie das ist bei der Desktop, die einfach nur sich da weiß der Christopher sicherlich auch besser gibt. Jetzt angefangen haben mit der Browser Version dann irgendwann die Desktop Version, vielleicht auch einfach nur ein Container Narayen. Kann natürlich auch sein, dass sie vom Browser angefangen und dann die Adoption Richtung Desktop gemacht, soweit ich das weiß.

Es ist die, die die mobile App eben im Moment ergänzen dafür da, um sich die Prototypen auch anzusehen. Also ähnlich wie bei Sketch oder Adobe xD dass man diesen Maurice Mod hat, um dann sich die Produzenten mal da anzeigen und testen zu lassen.

Christoph Die Frage geht jetzt so in deine Richtung Prozessschritte außerhalb der eigentlichen Entwicklung und vielleicht dem ersten Kunden Brainstorming, wo du sagst, dass da bin ich explizit nicht. Hickman da gibt es ein besseres Werkzeug zu oder als Agentur oder auch als Entwickler kenne ich das. Hast ja so deinen Werkzeugkoffer, wo einzelne Werkzeuge drin sind. Wo liegen die Schwächen bei mir und bei welchen Prozessschritte? Gerade in der Experience würdest du auf jeden Fall ein anderes Werkzeug nehmen oder anders vorgehen.

Es kann auch Stift und Papier sein.

Dann ja, das hängt so ein bisschen von der Phase ab. Also bin ich sehr früh und vielleicht auch in Workshops und muss erst mal irgendwie das Produkt Discover und das entdecken. Wo laufen wir eigentlich hin? Dann macht es irgendwie auch Sinn und auch viele Ideen kreieren. Dann macht es total Sinn, auf Stift und Papier das Team dazu zu bekommen, viele Varianten und Ansätze zu zeichnen, um dann sich für die besseren Varianten zu entscheiden und da erst mal breit zu denken.

Ich glaube, gerade wenn auch wir jetzt zum Beispiel bei Christian irgendwie der Fall ist, dass du sehr gut irgendwie auch selber kochen kannst und sehr stark im Frontend Entwicklung ist und vielleicht auch so eine Brücke aus Design und Entwicklung selber abdecken kann, dann dann machts vielleicht auch mehr Sinn relativ schnell in HTML vielleicht mal so gut zu kochen. Gerade wenn die Dinge, die Interfaces jetzt keine Rocket sein sind oder man da nicht nicht finde ich was total abgefahren ist im Design sagen will, dann ist das eben auch mal ein kurzer Weg.

Oder wenn man jetzt wirklich unter oder was nicht erst mal Business Ordnern oder so sprechen muss oder Business Partnern auf der Serviette Restaurant oder aber da kann man die Dinge nochmal per per Powerpoint oder so runter schicken. Das ist natürlich nichts, womit man dann gut arbeiten kann, aber das ist dann eher die Frage des Anwendungsfall. Aber grundsätzlich lässt sich dann schon irgendwie wahrscheinlich 90 prozent der Fälle da gut gut abbilden.

Christian Wie ist das bei dir?

Im Moment bin ich damit voll und ganz zufrieden. Ich habe halt früher immer diesen Weg über Photoshop nicht gegangen. Ich habe quasi so ein HTML Konstrukt gebaut, die Funktionalität getestet, Shares gekauft, aber irgendwann will man es ja auch ein bisschen attraktiver machen, sage ich mal. Und dann habe ich dann zwangsweise halt zu Photoshop gegriffen. Oder jetzt im neuesten. War das so? Ich habe die erschaffen, habe ich designt, auch in Photoshop. Ich dann irgendwann festgestellt habe ich ich habe dann immer wieder, weil ich mir was ändern, wenn ich dir importiert hatte und dann gemerkt habe, das macht überhaupt keinen Sinn mehr.

Das irgendwie in Photoshop zu designen, hat das jetzt quasi einfach komplett umgesetzt. Also eher dieser andere Schritt, dass ich nicht noch ein weiteres Tool habe, sondern direkt durch schickt man eigentlich ein Tool weg subtrahiert habe.

Ich kann mich erinnern, dass ich auch bei der Gestaltung von diversen E-Mail Newsletter strecken. Also das ist aber auch schon fast 10 Jahre her. Wirklich dieses Onkels von Balsamico ausgeschnitten hatte also ausgedruckt und ausgeschnitten und habe das dann wild auf den Tisch herum geschoben um zu gucken Okay, wie kommt e Mail 8 9 10 Ich glaube es gab 25 oder 35 gar E-Mail Auto Responder. Wie muss da die Reihenfolge sein? Und die kriege ich auch hin, dass das an Ostern das richtige, die richtige E-Mail rausgeht und so, also mit allen möglichen Sonderregeln.

Und das war halt auch auf dem Schreibtisch mit großem Platz. Also man hätte es auch gut machen können, aber dann einfach praktisch.

Ich würde das auch so ein bisschen wieder covern ausprobieren, wenn man mal auch so ein bisschen Flos durchdenken will, wie ihm da dann Marketing, Flow oder Jusuf. Und da kommt auch dieser diese dieses Greenwald wieder ins Spiel. Die hat eigentlich per se keinen funktionalen Nutzen für den Prototypen selbst mehr. Aber um mal mit einem großen Team darauf zu gucken und mal Dinge auszuschneiden und umzuschreiben oder was hinzufügen und hinzuschreiben, da gibt es, glaube ich, nichts besseres, als dann vielleicht mal in der realen Welt irgendwie mit Papier oder so rum zu hantieren und dann mal schnell was zu machen, weil da kannst du dann nicht mit sieben, acht, neun Leuten in den Prototypen gehen und ja alles wieder neu zusammenschustern.

Dann wird es wahrscheinlich auch eventuell auch ein Problem mit der mit der Ladezeit und der Geschwindigkeit. Dafür macht das total Sinn. Oder eben, wenn man halt auch durch ist und testen will, dann das Testen am am Mobilgerät geht wahrscheinlich auch ganz gut, aber es wird wahrscheinlich etliche Fälle geben, wo man dann mal eine Testversion braucht einfach und man nutzt dann noch mal mehr und realen Daten auch da testen lassen muss und ein bisschen ausgiebiger auf verschiedenen Geräten testet. Und das wird es dann natürlich auch auf bei Prototyping durchaus mal Narayen aus meiner Sicht.

Also bei mir ist es auch so, dass ich ich bin jetzt mal so grob sagen Papier ist eines der Tools, die als als letztes Weg gehen werden und ersetzt werden. Ich meine, mit Papier kann man natürlich auch einfach ich habe jetzt meine Worte nur Dokumente oder sowas haben, einfach weil es halt dann hingeht. Wenn du jetzt den die erste Idee, dass die erste die erste Phase der Idee wirst du halt einfach irgendwie auch mal festhalten. Altes Papiers oder dann halt nur Notiz online Notizzettel oder so was.

Der Vorteil von Papier ist auch einfach diese Flexibilität, weil du hast ja immer ein Tool und das Tool Press halt irgendwie einen Ablauf rein und das Pflegepersonal sollte immer diese Flexibilität haben.

Auch das eine andere Energie finde ich, wenn du so zu mehreren um den Tisch rum stehst und Dinge hin und her bewegen kannst und denkst immer so mal so. Also auch wirklich früh im Prozess halte ich das für gut. Natürlich, irgendwann muss man es professionalisieren und man wir machen ja digital Projekte oder digital Produkte auch irgendwo muss es sein digitalisieren und mussten Werkzeug dafür nehmen. Aber am Anfang ist das ganz schön, wenn man so mit Händen und Füßen richtig arbeiten kann.

Super punktgenau.

Also wie gesagt, das ist ein wichtiges Tool und super Tool. Und trotzdem möchte ich gerade im Ganzen unter dem Aspekt Prototyping ganz, ganz dringend auch darauf hinweisen, dass alle, die irgendwie anfangen oder da mehr machen wollen, noch viel mit Software arbeiten, immer daran denken, erst mal den Stift in die Hand zu nehmen und das Grübeln, weil das ist so ein Stift und bei Stift und Papier passiert. Und die Menge an Ideen, die man in ganz vor Geschwindigkeit auswerfen kann, die kriegt man, so glaube ich, nirgendwo anders abgebildet.

Und da möchte ich echt jeden zu animieren, weil ich auch schon viele irgendwie Start ups oder Kunden sehe, die auch immer dann direkt in via Frames bauen oder Designs bauen, sich dann vielleicht auch so ein bisschen verlaufen, in der Ausgestaltung oder in den Möglichkeiten von den Tools. Wo es aber wirklich darum geht, über welche Funktionen reden wir, welche Varianten? In welchen Varianten könnte man diese Funktion abbilden? Das hilft dann auch nachher, wenn man verschiedene Varianten schon mal auf diese auf einem Papier ausgestaltete AUS designt hat und da schon entschieden hat.

Nein, die und die Ansätze funktionieren nicht. Dann muss ich dich schon nicht als Pixel einbauen. Damit mache ich da auch dieses Dokument vielleicht schon übersichtlicher. Also das wird sich im ganzen Prozess widerspiegeln, dass man vorher kreativ war, beziehungsweise immer wenn es irgendwie wieder an eine neue Produkt Discovery Phase oder eine Vorbereitung von Sprint geht, macht das immer wieder Sinn. Und das ist nie verkehrt. Irgendwie auch mal was was auf das Kribbeln. Also wenn ich ein ganz großer Verfechter führe, merkt das schon.

Ja, auf jeden Fall total sinnvoll. Als Softwareentwickler sage ich dir ist das genauso. Also wenn du direkt an die Tastatur springst und anfängst die Lösung zu implementieren, ist das meistens nicht effektiv, sondern ich versuch die meiste Zeit darauf zu verwenden oder nicht, die meist einen sehr großen Anteil darauf zu verwenden, das Problem genau zu verstehen. Also was ist das Problem? Wie sieht eine ideale Lösung aus? Also wenn ich die grüne Fee über meiner Schulter erscheinen würde und sagt Okay, also das hier die die beste Lösung wünschen, so was würde ich ihr sagen und dann gucken was ist jetzt realistisch in dem Projekt Korsett, also Möglichkeiten des Kunden, Budget des Kunden, Zeit vorgegebener Zeit usw.

Und wenn man. Einen guten Überblick hat das ist ja bei der User Experience und auch beim Design genau so. Da kann man dann die Kraft zielgerichtet einsetzen. Das mache ich auch ohne Tools, also wirklich mit. Ich bin ganz erschrocken, sage ich wirklich, ich kauf pro Jahr einmal bei Amazon so ein Beutel Stifte und nach einem Jahr habe ich die aufgebraucht. Also ich schreibe, obwohl ich Softwareentwickler bin, sehr, sehr viel analog in Notizbücher, um mein Kopf zu sortieren.

Und dann nutze ich natürlich digitale Werkzeuge. Aber erst mal für diesen ersten Schritt bin ich auch noch oldschool unterwegs.

Da sind wir glaub ich bei dem Punkt, dass es gerade Problem verstehen. Designer müssen das Problem verstehen, um es zu gestalten. Softwareentwickler müssen das Problem verstehen, um eine Lösung zu bauen und dann natürlich auch schnell zu einem Kunden oder einem Projektpartner. Der muss das irgendwie selbst auch verstanden haben. Aber im besten Fall hat der auch noch mal mit dem Nutzer gesprochen und vom Nutzer verstanden, wie sein Problem Ausgangs Problem eigentlich ist. Und da kommen wir glaube ich dahin, dass wir daran noch so ein bisschen liegt.

Warum? Warum die Ansprechpartner heute häufig gar nicht wissen, warum das so komplex ist und warum man so viel verstehen muss. Aber das zeichnet sich darin ja ganz gut ab.

Habt ihr denn noch eine Success Story? Also wo ihr wirklich gedacht habt Wow, das läuft ja besser als gedacht, wir setzen ja das Werkzeug ein, das passt perfekt. Und ohne Prototyping wäre das hier gar nicht zu realisieren oder mit zehnfachen Kosten zu realisieren. Oder es würde 5 Jahre dauern.

Das passt. Aber ich hatte halt. Ich habe ja häufig Ideen in meinem Kopf, wo ich sage Mega. Und dann meistens gehe ich halt hin auch schon mal so einen technischen Prototypen. Allein das kostet dann halt auch immer ein paar Tage und seit neuestem gehe ich dann auch teilweise schicker mache oder halt auch wirklich mal was halt irgendwie schon. Auch der Unterschied für mich, dass wenn ich das jetzt per Papier mache, ist das halt noch mal was anderes als wie wenn ich sehe, wo ich mir auch visualisieren kann, wie das jetzt im Desktop aus.

Häufig ist das dann auch, dass man einfach merkt, dass das da fehlt. Was. Aber die Idee ist halt wirklich zu banal irgendwie. Und das ist das jetzt mein einziger Moment genau, dass ich mir Zeit gespart habe durch und dann Erfolg wäre genau gesparte Zeit. Du du gestaltest das aus mit dem Prototyping Werkzeug und siehst dann, da ich dachte, das wäre eine coole Idee, aber ist es nicht wieder wieder Zeit gespart? Alles super bei Christoph bei dir und dein Kunde wendete den Moment.

Wahrscheinlich auch häufiger gehabt, dass der Kunde sagt Oh, ich dachte, das wäre cool heute Morgen unter der Dusche, aber jetzt wo ich sehe, löst das ja genau, genau, genau. Oder auch einfach mal sagen So, wir haben es mal gebaut, wir geben das mal jemandem in die Hand und spiegeln das mal über Miro auf eine mobile App, welche man mit ein, zwei Nutzer einfach mal drüber gucken. Das ist jetzt mal zu testen und die klicken dann darauf rum und du merkst, was wir total genial fanden und was der Kunde vielleicht sogar selber vorgeschlagen hat versteht, der Nutzer eine ganz andere Lebenswelt hat oder andere Perspektive hat, überhaupt gar nicht.

Und wir merken so Ah, okay, wir haben allein an diesem Institut fünf Dinge über den Nutzer gelernt, die wir uns nie hätten ausdenken können. Und die Zeit und das Geld, was wir da wieder gespart haben. Wunderbar. Wir haben neulich hier für ein Spiel zur Bundestagswahl auch einen Kunden relativ schnell online gearbeitet. Der hat auch das Thema angesprochen. Man muss den Kunden irgendwie auch ein Gefühl dafür geben, ob das jetzt eine reale Software ist, gerade wenn es schnell gut aussieht, dass das erst mal ein Prototyp ist.

Wir haben es da glaube ich, ganz gut hingekriegt, auch mit ihm relativ schnell da reinzubringen und schon früh in der Trainingsphase ihm mal Dinge zu zeigen, also ein Seitenaufbau zu zeigen. Erste Farbkonzept, aber wirklich Schritt für Schritt die Nutzererfahrung. Also erst mal nur die Information, die irgendwie hinter einander stehen. Der Aufbau dieser Seiten Architektur zu zeigen und dann nach und nach die Farbe auch da rein zu gießen, die Bilder da reinzubringen, aber regelmäßig jede Woche an diesem Prototypen darüber zu sprechen.

Also die mit reinzunehmen, im Screenshot ja draufgucken zu lassen. Die da vielleicht mal ein bisschen mitarbeiten lassen, sodass man da zusammen an einem Stück die ganze Zeit arbeiten konnte. Und wir waren die ganze Zeit an diesem gemeinsamen Produkt dran, wo auch Entwickler mit dabei saßen. Die konnten direkt mal Hinweise geben. Wir konnten dann direkt in diesem Prototypen testen mit Nutzern, konnten diese Änderungen direkt wieder einfließen lassen. Also wenn wir da hätten springen müssen, noch mal in den Code, dann zum Testen oder dem dem Kunden irgendwas in der Präsentation gießen und dann vorstellen müssen, da hätten wir so viele mehr Aufwände für Zeiten sozusagen gehabt.

Das ist unvorstellbar und so, dass sich das wirklich evolutionär entwickelt hat. Von den ersten Kästen, die wir gemacht haben, bis hin zum finalen Design, wo sich die Entwickler, die CSS Snippets rausgezogen haben, die Assets rausgezogen haben, um einfach schneller umsetzen zu können, wo wenig Kommunikation erforderlich ist. Dann also natürlich immer noch ein bisschen, aber es ist viel weniger. Diese ganze Reise konnte der Kunde dann auch mitverfolgen, nachvollziehen, was da passiert, seine Impulse mit einbringen.

Und wir hatten in der ganzen Zeit diesen einen Prototypen, an dem wir gearbeitet haben und das wurde auch gemerkt, dass das läuft. Irgendwie so ziemlich einfach so in einem, durch das es motiviert durch das ganze Team scheint. Es scheint so Nebeneffekte zu sein, Zeit und Geld sowieso. Aber dieser Nebeneffekt, dass das einfach fließt und dieses Produkt immer sichtbar besser wird, das war das ganz faszinierende Sache. Und das hat in dem Projekt einmal mehr geklappt und mit ihr tatsächlich auch ein bisschen besser.

Also Christoph. Es war dieses Projekt, ich sehe das jetzt so vor meinem geistigen Auge, das nimmt quasi mehr und mehr Gestalt an. Jeder bringt kleine Änderungen ein. Das heißt, es ist auch ein Stück weit seins. Also man fühlt sich dann auch dafür verantwortlich. Jetzt darf man nicht vergessen Wir leben seit anderthalb Jahren in der Pandemie. Das heißt, oftmals sitzen die Leute zu Hause oder an unterschiedlichen Plätzen. Das heißt, es muss viel remote gearbeitet werden. Das ist sicher auch noch mal ein starker Pluspunkt von mir jetzt, dass man da so relativ problemlos zusammen telefonieren kann und digital an einem esset arbeiten kann.

So, und jetzt nach und nach ist diese, ist dieser Prozess eben gewachsen oder ausgestaltet worden, bis dann jeder mit dem Endergebnis zufrieden sein konnte.

Genau das war das war so! Das Vorgehen hat uns auch bei Gesprächen. Leuten in so einer Nutzergruppe über Teams zum Beispiel haben wir mal getestet in einer frühen Phase. Wie funktioniert das? Wie sieht das aus? Wie reagiert die wirkliche Zielgruppe darauf? Also Leute, die anders sind als wir, für die wir das die Anwendung gebaut haben und denen noch mal den Link zu schicken. Die zu Beobachtenden im Screenshot, wie sie auf diese Anwendung einwirken, wie sie darauf klicken, was sie da machen, ohne große Anleitung zu geben, sondern um zu explorieren und herauszufinden, was machen Sie anders als wir.

Das war ganz, ganz faszinierend. Ich bin froh, dass ich mittlerweile so gut gut geht über Zoom, über Teams und dann in Verbindung mit dem Sigma. Das ist. Das war dann schon echt eine riesen Erleichterung, sonst hätte dann ein Riesenaufwand machen müssen, sowas zu organisieren, Leute zu rekrutieren, einzuladen etc. pp. Also das ist schon praktisch. Und was mir gerade auch noch einfällt. Wir haben wir machen viel auch mit mit dem Miro Board, um Informationen zu sammeln Anforderungen.

Und das ist das, was ich mir jetzt gerade mal angucke, dass das Board oder so ähnlich oder auch dieses Board auf einem Online Whiteboard, wo man auch schon zusammenarbeiten kann, ähnlich wie bei Miro und auch schon mal so ein bisschen skizzieren kann, Bilder sammeln kann, Mut machen kann, um Stimmungsbilder zu sammeln. Auch diese Sachen scheinen da langsam ein bisschen zusammenzufassen. Das wär auch noch mal ein wichtiger Aspekt, wenn man da schon so ein bisschen Anforderung Entwickler sammeln kann und da auch nicht noch einen Toolbox hat, dann kann man sich da wahrscheinlich auch noch mal die eine oder andere Minute im Prozess sparen.

Die gibt es jetzt schon. So ein Ausblick auf Funktionen, die gerade ausgebaut werden, also die rudimentär wahrscheinlich schon funktionieren und die zukünftig vermutlich noch weiter an Bedeutung gewinnen werden. Christoph Christian Wenn ihr eine Glaskugel hättet, ihr habt jetzt ja schon auch viel Erfahrung mit Low Fidelity Tools beisammen, dann später Sketch heute schick mal gesammelt. Wohin geht die Reise bei Prototyping Tools? Also welche Probleme sind heute noch ungelöst, die ich sage mal in naher bis mittlerer Zukunft vermutlich auch von diesen Software Komponenten übernommen werden können?

Möchte dir da eine Prognose wagen.

Also ich könnte mir vorstellen, dass du irgendwann nicht einfach nur CSS bekommst, sondern tatsächlich so einen einfachen Website Export machen kannst. Natürlich ohne Typekit oder sowas. Aber dass du wirklich gerade so Webseiten bauen kannst, dir zum Beispiel eine Visitenkarte sind oder irgendwie ein Produkt promoten, wo jetzt kein großes Becken brauchst, das kann ich mir vorstellen, ist in der näheren Zukunft wird es irgendwann kommen, was dann halt noch mal viel größeren Publikum dieses Tool halt schmackhaft machen wird.

Also die Export Funktion werden besser. Christoph, was glaubst du?

Es geht ja so ein bisschen dahin, dass man noch mehr wie Christian sagt, irgendwie nach hinten raus, mit dem man mit den Dingen arbeiten kann. Und wenn wir aus dem Prototyping Tool viele verschiedene Frontend Technologien vielleicht direkt die richtigen Komponenten Beschreibung haben oder schon mehr Source Code Snippet in einen Entwickler steigert, vielleicht auch einpflegen können, der sich auch irgendwie global steuern lässt, dann wäre da ja bei Übergabe zwischen Design und Entwicklung noch mal irgendwie Zeit gewonnen. Das wäre ein ganz großer Wunsch oder auch so eine Erwartung, die ich da habe.

Und auf der anderen Seite aber auch vielleicht vor einem Prozess aus den ganzen Ideen, die irgendwo entwickelt werden, die bei Papier auf Papier entstehen, die auch schneller zu Komponenten werden zu lassen. Das ist vielleicht nochmal eine ganz, ganz interessante Sache, die man vielleicht noch mal darauf spezialisieren könnten.

Also vielleicht so eine Bibliothek an Best Practice Komponenten. Also wie sieht ein Lock in aus, der modern ist und alles abdeckt, was 90 prozent der Logins brauchen oder so?

Das wird zum Teil schon über Framework Anbieter gemacht mit UI usw. Da gibt es schon so Komponenten Libraries die man schon nutzen kann. Das schon ganz gut. Das funktioniert recht fein. Auch mit Plugins kann man da schon recht viel machen, aber vielleicht auch von einem Sketch. Wie kann man von einem Papier Scrabble recht hin recht schnell hin zu Komponenten und Vorschlägen. Das wäre ganz gut. Und wir haben auch immer noch das Thema, das ich glaube, gerade wenn es interaktiver wird, viele Designer auch schnell noch zu Freimaurer rüber springen und da auch noch mal andere Vorteile bietet, was Animationen Interaktion für verschiedene Programmiersprachen abbildet und auch da noch mal bissl Export Funktion hat.

Also da gibt es noch noch Dinge, die den Frame bietet, die man nicht hat und da entsteht glaube ich auch so in der in der nächsten Zeit noch so ein bisschen eine Symbiose ist.

Ein anderes Prototyping Tool mit anderen Stellen.

Das ist ein ganz anderes Tool und das ist aus meiner Sicht so, wie ich es bisher wahrnehme. Sehr stark in den Interaktion. Und so ein bisschen Code orientiertes Prototyping. Das sieht in meinen Augen so ein bisschen aus wie die fehlende, die eine der fehlenden wie einen fehlenden Puzzleteile in diesem Cloud-native in der Galaxie.

Damit kommst du dann irgendwann auch in die Synode Richtung das ist ja auch ein großer Trend ist in letzter Zeit, dass du halt irgendwie Dinge baust, die halt, wo du halt kein Programmierer bist. Und dann halt die Frage Wie weit kommst du damit oder wo stößt du dann gegen andere Tools an?

Vielen Dank euch beiden. Wenn unsere Zuhörer Fragen haben, können Sie gerne eine E-Mail an Podcasts skillbyte. Wir freuen uns immer über Bewertung und ganz besondere Weiterempfehlung an Freunde und Kollegen. Abonniert unseren Podcast und schaut auf Skillbyte Slash Blog vorbei für weitere spannende ITM. Christoph Christian Ich möchte mich ganz herzlich bei euch für diese Podcast Episode bedanken.

Vielen Dank für die Einladung. Hat mir echt Spaß gemacht.

Danke Maurice.