 Eins, zwei und auf jeden Fall drei. Du noch nicht, das macht aber auch nichts. Wir gucken einfach mal, was haben wir gestern gemacht. So, wir hatten so ein nettes Sketch Note bekommen. Ich drehe mich mal hier zu euch. Genau, was haben wir gestern gemacht? Wir haben gestern einen fiktiven Workshop gemacht. Wir haben definiert, dass unser Kunde für die Website ein Autohaus ist und das Autohaus hat drei Zielkunden. Das eine ist der mit dem kleinen Budget, der nur ein Auto braucht, womit er zu arbeiten und zurückkommt. Das ist da der obere. Der kann auch ein gebrautes Auto haben. Der ist relativ schmerzfrei. Er möchte irgendwie günstig von A nach B kommen. Der zweite Kunde oder Zielnutzer ist der Angeber. Der hat auch nicht viel Geld, aber trotzdem möchte er ein neues Auto haben. Und der Dritte ist, er hat schon ein Auto und er möchte eins reparieren lassen. Und das Autohaus möchte er auf diese drei Typen reagieren und die Zielgruppe möchte er dann eben bedienen. So was möchte der, der sein Auto reparieren möchte, möchte wissen, dass die das machen und möchte wissen, welche Rezensionen gibt es. Das heißt, wie zufrieden sind andere mit dem Autohaus. Und die Zielhandlung ist, ich weiß nicht, ob ich auf dem Weg stehe, sonst setzt euch ein Stück rein. Die Zielhandlung ist eben, dass er anruft und ein Termin macht, das teilweise auch über den Chat machen kann. Das wäre hier von dem Dritten. Der Zweite, der Angeber, der kein Geld hat, der soll die Seite liken teilen, soll aber sich vielleicht Newsletter anmelden, aber primär soll er das Gleiche tun, wie der Erste. Nämlich suchen, filtern nach seinem Wunschauto auf der Seite Öffnungszeiten Info und idealerweise dann eine Probefahrt vereinbaren. Und das ist die Zielhandlung. Was wir machen wollten, ist im Grunde die richtigen Fragen bekommen, die wir uns an der Stelle stellen. Welcher User ist es, welche Priorität hat das und dazu entsprechend die Unterfragen zu stellen. Und da steigen wir jetzt nochmal ein. Das gehe ich jetzt nicht nochmal alles so mit euch durch. Das war jetzt das Sketch, was ich Sketch Not Mafia für uns dann während der Session quasi überlegt hat. Okay, machen wir oder starten wir mal. Ich sollte mich umdrehen, nicht so mit dem Rücken zur Kamera. Los geht's. Also how to wireframe part 2, Fortsetzung letzte Session, was wir in der letzten Session schon als Ziel hatten. Das ist im Grunde für euch eine Checkliste, die ihr angeben könnt, wenn ihr mit dem Kunden in einem Workshop oder Briefing wart und dann den Übertrag leisten müsst zu einer Struktur der Website, also zu einem Wireframe. Was haben wir gemacht? Wir haben das Autohaus definiert, ich habe die da nochmal dran gepinnt. Die drei Typen, Autokäufert 1 und 2 und den Autoinhaber, der sein Auto reparieren lassen möchte, definiert und haben dann Fragen, angefangen Fragen zu stellen und diese gruppiert. So sah das Ganze aus. Wir machen das aber neu, sonst können die Leute, die nicht dabei waren, das nicht nachvollziehen, was wir da getan haben. Also das machen wir heute, wir vervollständigen heute die Fragen und versuchen eine Checkliste hinzukriegen, die wir alle irgendwie durchgehen können. Wir hatten beim letzten Mal zwei Hauptschritte definiert. Der erste Hauptschritt ist, dass wir Gemeinsamkeiten und Unterschiede zwischen den Usern festlegen. Das heißt wir fragen uns an der Stelle, was haben die Zieluser, die wir hier haben, gemeinsam und was nicht. Wenn wir jetzt einfach mal so ein Brainstorming machen, dann würde ich euch das mal fragen. Also ich stelle euch die drei noch einmal kurz vor, dass sie auf jeden Fall verständlich sind. Autokäufer, also er hat kein Auto, möchte eins kaufen, gebraucht, will zur Arbeit fahren. Angeber, möchte ein Auto kaufen neu, aber hat trotzdem nicht viel Geld ausgeben, soll aber cool aussehen. Autoinhaber, Reparateur, der möchte sein Auto reparieren lassen, weil er in der neuen Stadt ist und das Auto ist liegen geblieben. Wir haben uns so ein paar Fragen schon gestellt, aber im Grunde müssen wir jetzt herausfinden, was brauchen die gemeinsam oder was möchten die gemeinsam auf einer Website finden. Und ein bisschen was aus der letzten Session würde ich jetzt mal wiederholen. Das heißt wir hatten eine Suche, ich glaube ich nehme mal die Pins hier, die halten besser. Magst du die anpinnen? Okay, alle müssen Autos suchen, zumindest müssen die ersten beiden Autos suchen. Der braucht dann sicherlich ein Suchfeld und einen Warten, womit er das Suchfeld dann abschießt. Dann haben wir gesagt, die brauchen Filter, weil der eine sucht ja nach einem gebrauchen Wagen und der andere schon mal nach einem Neuwagen, das wäre schon mal so ein typischer Filter, den man ansetzen würde. Dann haben wir überlegt, irgendwie müssen wir kontaktieren, dass wir auch was, was alle machen müssen. Was fällt euch noch ein? Was müssen die Leute auf der Website tun, damit ihr letztendlich die gewünschte Handlung, ah, die gewünschte Handlung fehlen uns. Ich habe das noch nicht gemacht, dass wir jetzt im zweiten Tag quasi das erste Erarbeitete wiederholen müssen. Deshalb machen wir das nochmal kurz. Der hier möchte ein Auto suchen, jetzt mal das angewendete aus dem Sketch Note Vortrag. Das ist eine Lupe, der möchte es filtern und der soll eine Probefahrt vereinbaren und vielleicht Kontakt aufnehmen als Vorstufe dazu. Der zweite soll auch das Auto suchen oder möchte auch ein Auto suchen, auch filtern. Er sucht Neuwagen und hat nicht so viel Geld. Und auch der soll im Grunde die Probefahrt vereinbaren, weil wir wollen den mehr an Auto verkaufen. Von daher haben wir hier das gleiche. Der dritte möchte sein Auto reparieren. Ich bin völlig aus dem Bild. Könnt ihr das noch lesen hier, so mit dem gelben geht es, wenn ich es jetzt so weit vorschiebe. Der dritte möchte sein Auto reparieren, möchte wissen, ob das Autohaus nicht hier spielen. Möchte wissen, ob bei dem Autohaus die Leistung passen. Möchte wissen, ob das Autohaus gut ist und ob die Marke passen. Was wollen wir von dem? Telefonnummer. Was wollen wir, dass der tut auf der Seite? Kontaktdaten. Was noch? Terminvereinbaren für die Reparatur. Vielleicht will er dann auch noch wissen, was das kostet. Das heißt, er soll vielleicht dann auch noch irgendwie anrufen und fragen, was kostet mich die und die Reparatur. Okay, jetzt wissen wir, was die wollen und was die sollen. Was brauchen wir im Grunde dafür auf der Website? Damit fangen wir mal bei dem ersten an. Ich, mein Auto suchen und filtern kann. Ein Suchfeld und ein Filter. Wir sollen eine Proberfahrt vereinbaren können, also brauchen wir Kontaktdaten in irgendeiner Form, Telefonnummer, Kontaktformular, solche Sachen. Was braucht der denn noch, damit er dann auch noch anruft? Was reicht es, die Ektaten zu haben? Okay, ich finde ein Auto und dann rufe ich sofort an. Oder was würdet ihr noch brauchen, wenn ihr ein Auto kauft? Was wollt ihr noch wissen? Also Kompetenz? Ja, ich wiederhole das nochmal. Ein paar Informationen über das Autohaus, die mich überzeugen, dass das ein kompetenter, guter Laden ist. Oder vielleicht auch vertrauenserweckend. Okay, was wären das denn so für Sachen? Kompetenz, wie stellt man denn jetzt auf einer Website Kompetenz dar? Vielleicht, indem ich Kundenstimmen mit draufnehme von zufriedenen Kunden oder irgendwelche Gütesiegel. Drei Stellenchen. Ne, fünf Stellenchen. Also Rezension und Bewertung. Was noch? Hat jemand Ideen, was wir noch brauchen? Also was müssen wir noch, wie kann ich denn Kompetenz auf der Webseite zeigen? Ich bin ein Autohaus und will zeigen, dass ich kompetent bin. Bisher habe ich eine Kundenrezension und da habe ich dann fünf gelbe Stellenchen gekriegt. Was würde man noch sehen wollen und was kommt noch kompetent drüber? Bitte. Das heißt Erfahrung? Das könnten die eigenen Stärken sein, wie langjährig aktiv in der Region 20 Mitarbeiter in der Werkstatt oder Auszeichnung Betrieb des Jahres seit drei Jahren. Ja, sehr gut. Erfahrung, Größe. Okay ja, super. Das heißt wir haben jetzt Kompetenz, so ein bisschen untermauert Erfahrung, Rezension und so was wie Größe. Das geht so ein bisschen ins Thema Sicherheit und wahrscheinlich ein. Wie bitte? Was wirkt Vertrauen. Genau, richtig. So online Vertrauen. Ja, sehr gut. Kann man vielleicht auf den zweiten anwenden. Also der hat jetzt hier, hat jetzt abgecheckt. Das Autohaus ist, das gefällt mir, das ist solide und das Auto ist da, was ich suche. Ich rufe jetzt an und mache eine Profahrt. Braucht der irgendwas anderes? Der zweite, das ist der, der Angeber ist, nicht so viel Budget hat, aber eigentlich auch ein Auto kaufen möchte. Ich glaube auch nicht. Was braucht der denn? Wir haben jetzt eine Suche, ein Filter und eine Kontaktzeite. Wir wissen, dass wir Kompetenz sind, was braucht er noch? Was braucht der hier so, wenn ich mein Auto reparieren lassen möchte? Preise. Ja, ich kann das uns auch wiederholen. Ja, ich wiederhole das. Also Preise haben wir jetzt, wenn ich das wiederhole. Ich glaube, wir machen das so. Okay, M braucht Preise. Was noch? Das Ungekehrte vom Preis ist die Leistung. Muss klar sehen, dass die auch Autos reparieren. Leistung und Preise. Und ich habe jetzt auch schon gesehen, die haben Erfahrung. Das heißt, da steckt das schon mit drin. Und ich würde die Idee auch kontaktieren. Das heißt eigentlich, passt das eigentlich so schon ganz gut. Welche von den Elementen brauchen alle User? Ja, also hier haben wir alle. Was brauchen noch alle User? Referenzen. Referenzen und das Thema Kompetenz. Okay. Noch was, was alle User brauchen? Ja, genau, also die gönnen alle zu. Das Thema Kompetenz brauchen alle. Okay, dann heißt es im Umkehrschluss. Das wäre jetzt die nächste Frage im Grunde. Welches spezielle Element braucht halt nur der eine? Also zum Beispiel der erste. Da hatten wir jetzt ein bisschen identifiziert, dass die ersten beiden quasi im Grunde die Suche brauchen. Und damit den Filter. Und für den Dritten hatten wir jetzt definiert der Brauch Leistung und Preise. Ja, sehr gut. So wissen wir jetzt im Grunde, was alle brauchen. Was vielleicht auf die Startseite soll. Das wäre jetzt eigentlich unsere nächste Überlegung. Wo sollen wir mit diesen Sachen hin? Und wie können die Sachen dargestellt werden? Wie sehen die Sachen aus? Kannst du mir kurz helfen? Nimm mal einmal diese Dinge ab, bitte. Wer von euch war denn vorhin in diesem Sketchkurs für Anfänger? 1, 2, 3, sehr gut. Kommt ihr mal kurz nach vorne? So. Jeder nimmt sich mal bitte so ein Stift hier. Da war noch einer mehr irgendwo. 3 haben wir, 4. Ja, 4 sind super. Setz euch ruhig mal vorne mit in die erste Reihe. Und ihr nehmt euch mal so... Jeder davon ein paar, setz euch ruhig danebeneinander hin und verteilt euch die so ein bisschen. Ja, so ganz viele werden es nicht. Wer von euch weiß, wie ein Wireframe Element aussieht? So ganz grob. Ich mal euch mal ins Auf. Ich bin auch nicht der Sketchpro. Ich werbe auch in dem Sketchkurs. Deshalb bin ich mal gespannt. Ein Wireframe Element, das hole ich Ihnen noch mal kurz als Exkurs hervor, ist im Grunde so etwas. Das insgesamt ist ein Wireframe Element. Das ist sogar schon so ein gruppiertes Element. Was denkt ihr, was das ist? Eine Kurve? Weil Bildplatzhalter. Tatsächlich. Also hier ist so ein... Hier ist ein... Hier ist ein... Tatsächlich, also hier ist ein... Das typische Platzhalter-Bildchen, was man hat. Hier kommt links ein Bild in diesem Block. Das hier ist... Headline. Irgendwie Text. Und ein Button. Das heißt irgendwie eine Aktion. Okay. Und da gibt es eigentlich beliebig viele. Wir können uns jedes Element im Grunde ausdenken. Es kann auch so ein Element geben. Das steht für... Video. Das kann dann auch in einem Player sein, wenn man dann sagt, okay, hier machen wir so eine Play Area hin. Und hier könnte hier was daneben stehen, wieder. Und hier wieder ein Handlungsaufruf, dann wollen wir das Video direkt hier abspielen. Kann sich aber auch irgendwie anders öffnen. Also in diesen UI-Elementen ist man tatsächlich relativ frei, was man machen möchte. Die UI-Elemente gruppiere ich immer gerne mit so einem Frame, damit man das sozusagen als Element sieht. Ich könnte das jetzt auch nehmen und woanders hinstecken oder könnte sagen, okay, dieser Teil soll darunter wandern. Das ist dann halt eben ein Wireframe-Element. Es gibt dann aber auch solche Sachen wie das hier. Wir können dann zum Beispiel so drei Bilder sein, wo dann die Anordnung so ist. Das ist dann auch ein Wireframe-Element. Wo wir jetzt gerade noch ein bisschen Zeit haben. Wer von euch weiß, wie responsive Design funktioniert, doch die meisten. Ich sage es nochmal kurz für jeden Fall die Zustauer zu Hause. Responsive Design heißt, wir machen jetzt diesen Bildschirm kleiner oder größer. Und der Inhalt muss sich irgendwie anders arrangieren. Das heißt, wenn ich das kleiner mache und ich habe jetzt hier nur diese Breite zur Verfügung, bei nicht responsive Design-Seiten so, dass der Content hier einfach rechts rausfährt. Und bei responsive Design-Seiten ist es so, dass dieser Teil, also innerhalb dessen hier, der wandert hier drunter. Und damit wird die Seite länger und schmaler. Aber sie wandern eben mal untereinander und alles ist trotzdem noch im Content. Was wir jetzt rauskriegen wollen, ist für unsere Startseite. Und wir hatten beim letzten Mal definiert, wir fangen mobile an. Wir entwickeln erst mal den Wireframe auf Mobile Design. Was muss hier rein? In die Seite und was brauchen alle und was brauchen nur manche? Wir hatten überlegt, wir müssen uns fragen, erst mal welchen User machen wir und fangen wir mit mobile oder desktop an. Die beiden Fragen hatten wir schon beantwortet. Wir machen den User 1 und er ist auf dem Mobile unterwegs. Und dabei ist uns aufgefallen, wenn wir User 1 nur machen, dann kriegt der User 1 eine Startseite und der User 2 vielleicht nicht unbedingt, der User 3 fühlt sich da auch nicht unbedingt wohl. Daher haben wir überlegt, wir brauchen noch eine Frage mehr. Und das war das, was wir eben gemacht haben, dass wir überlegt haben, was haben die User gemeinsam? Und das sind im Grunde die, die wir gerade hatten. Wir hatten gerade gesagt, wir haben noch mal die mit dem A. Wir haben Erfahrung, die Sternchen, die größte Mitarbeiter, Kompetenz und Kontakt. Macht mal einer so einen Kontaktsymbol. Da ist schon ein Kontaktsymbol. Dann brauche ich bitte irgendwie eine Symbolik oder so ein Element, was, keine Ahnung, kann frei aussehen. Da drin wollen wir Kommentare haben von, also Rezensionen haben und vielleicht irgendwie, wie viel passen wir hin auf eine Breite? Sagen wir mal so 2 Spalten, vielleicht. Das Dritte sind vielleicht 3 Schlagworte zu so und so für Erfahrungen, so und so für Mitarbeiter das ist. Kontakt. Dann schreibt mal da noch mal Kontakt hin. Pinst du die gleich dran? Oder wir machen, ja genau, so ist super. Kontakt ist jetzt da, wo das mit dem K ist. Hatten wir mal festgelegt, brauchen alle, müssen alle irgendwie sehen, ist das, was wir von dem wollen, aber vielleicht möchte ich erst in der Situation noch nicht. Sternchen, das heißt Rezensionen, gute Bewertungen, Kundenfeedback. Fangen wir auch erstmal mit drauf und das Dritte sind, ich habe jetzt nur 2, Größe und Erfahrung. Dann machen wir mal 2 nebeneinander, einfach 2 Zahlen. Sag mal irgendwie so. Er kommt mal schon inebri durch. Wie mache ich Größe, hatten wir jetzt an Mitarbeitern gemessen. 25 Mitarbeiter waren das jetzt und irgendwie eine Zahl, 15 Jahre Erfahrung. 25 ist realistisch, ja. Okay, passt. Gut, die Info muss drauf. Was fehlt dem jetzt noch irgendwie an Info? Wir haben jetzt das, was die alle, wir haben jetzt Erfahrung kommuniziert für alle. Preise waren nicht für alle, Preise brauchen wir für den letzten. Würden Sie Preise auf die Bewertung bleiben? Auch nicht. Was wir uns nämlich jetzt fragen, im Grunde wo und wann ist er jetzt? Er ist jetzt erstmal auf der Startseite, das heißt, er kommt jetzt erstmal rein und jetzt müssen wir im Grunde eine Frage stellen, die uns dabei hilft, den richtigen Content eben zu erwischen. Ja, genau. Würde sowas vielleicht treffen? Also 3 haben wir ja. Dann mal so 3 Call to Actions malen. Ja, das sieht gut aus, da warte ich drauf. Okay, man merkt schon so ein bisschen analog ist, das ist gar nicht so einfach. Aber wenn man, ich sag mal, jetzt hier die Rechteckgenkarte nimmt und wir haben beim letzten Mal schon ein paar ein paar Call to Action, das soll eine Suchleise sein. Das ist so eine Filterbar und ich glaube, wir haben, das war beim letzten Mal der Vorschlag, glaube ich, auch für diese 3 3 Elemente, jetzt machen wir die aber nochmal einzeln. Da haben wir ja so ein paar UX Elemente quasi oder Wireframe Elemente dann gemalt und man merkt jetzt eigentlich schon in dem Prozess, man ist da relativ frei, wie man das aufmalt. Worum es hier geht, ist eigentlich erstmal ein Gefühl dafür zu kriegen, was soll irgendwie auf diese Seite drauf und wir pinnen ja jetzt auch erstmal alles drauf. Das ist so der 1. Schritt, den wir machen wollen. Jetzt kommt gleich noch das 3. Und wir nehmen so ein paar Sachen, diesen Standardaufbau haben wir hier jetzt mal so ein bisschen vorweggenommen. Das hier oben rechts, das ist so ein Burgermenü, das kennt auch eigentlich jeder von euch. Und unten haben wir auf dem Wheel manchmal, manchmal nicht so ein Futterbereich, wo man noch die üblichen Futtersachen hat. Also sieht doch gut aus, oder? Wie findet ihr das? Neuwagen, mit der Braut fangen Sie da? Also der Neuwagen strahlt. Ah, okay. Okay, können wir hier auf das... eher so ein Pflaster irgendwie, ne? Und Werkstatt hier, der Schraubenschüssel, also passt super. Ich denke, das, was wir jetzt haben vom Umfang her, wir treiben das jetzt nicht bis ins Detail, wir wollen die Seite ja nicht online bringen, das hilft uns jetzt eigentlich schon mal, den Grundstock zu haben. Und jetzt mögen wir als nächstes eben hingehen und überlegen, das sind die Elemente der Startseite. Wir machen für jeden User offensichtlich eine Seite mehr, weil wenn ich hier draufklicken muss, ja irgendwo hinkommen. Wenn ich hier draufklicken muss, ich auch irgendwo hinkommen. Wenn ich da draufklicken muss, ich auch irgendwo hinkommen. Und jetzt ist im Grunde oder was wir jetzt finden müssen, ist, die Überlegungen brauchen wir 3 Bereiche oder können sich diese 2 einteilen. Und das hatten wir im Grunde ja schon beantwortet, indem wir sagen, die beiden haben eigentlich zum Großteil das Gleiche, was sie brauchen. Sie brauchen eine Suche, sie brauchen eine Filterung und sie brauchen die Rahmenbedingungen, damit sie auch anrufen. Das heißt, so ein Kontakt fällt. Wir haben beim ersten Mal gesagt, Sie wollen 3 Autos vergleichen. Das heißt, die beiden könnte man vielleicht sogar dann zusammenfassen. Welche Elemente sollen auf die Zielseite für den Benutzer? Das ist im Grunde ja das, was wir uns hier auch an der Stelle überlegen wollten. Und zwar, ja, würden wir jetzt einfach mal beide Zielseiten machen. Gucken wir hier weiter vorgehen wollen. 1 Sekunde. Gerade den Fahren verloren. Hier ist gar nicht so einfach das zu erarbeiten, glaube ich. Was wir machen wollten, ist ja für uns so eine Checkliste, an die wir uns daran entlang hangen können, um so Mayaframe zu erarbeiten. Und das wir jetzt halt auch in den Workshop merken, dass dann doch relativ komplex ist, diese Liste zu erstellen mit unseren Köpfen, weil wir irgendwie gar nicht genau wissen, wo soll man anfangen, was kommt irgendwie als nächstes. Ich würde ganz gerne mal eine Session einschieben, die ich eigentlich zum Plus geplant habe, weil wer von euch hat schon mal eine Website gebaut für den Kunden? Also fast jeder. Jetzt würde ich gerne das mal etwas umdrehen, mal Mikro rumgeben lassen und fragen, wie ihr das macht. Wie ihr mit dem Kunden sprecht, einfach mal euer Best Practice erzählen. Wer möchte, kann mal erzählen, was wäre so euer Workflow, ihr sollt die Autohausseite und wie würdet ihr vorgehen? Oder ihr habt eine andere Seite gebaut, wie seid ihr vorgegangen? Wie seid ihr von dem Workshop und was wir jetzt an Zielen haben zu der fertigen Website gekommen? Ihr könnt da erstmal was drüber erzählen, weil letztendlich ist es offensichtlich relativ schwierig, da jetzt ein Dreh reinzukriegen und ich habe auch nicht die Lösung für euch, jetzt wollen wir zusammenarbeiten. Wer möchte? Bitte, gerne. Ja, wir haben ja hier auf dem Waren Autohaus, das schon 50 Jahre am Markt ist und in der Zeit erfolgreichen Kunden, Mitarbeiter stammt von 25 Leuten aufgebaut hat, also offenbar funktioniert das, was und wie sie es machen, schon ganz gut und sie müssten eigentlich auch wissen, auf welche Weise das funktioniert. Also warum kommen die Leute zu ihnen und diese Stärken sollten sie kennen und dieser halt Starter, der schon verkaufen und wissen zum Beispiel unser Kernbereich ist eigentlich das Neuwagen Geschäft, weil gebraucht war, die Poloneben an, sag ich mal, so ein Spassalber und Reparaturen, das ist, wir haben so eine kleine Arbeitsbühne hinten, das machen wir gar nicht so. In der Kerngeschäft ist das Neuwagen Geschäft, wir müssen das auf jeden Fall nach vorne stellen und wenn das zum Beispiel klar ist, hätte ich ganz klar eine Prügesierung zum Beispiel von dem Thema Neuwagen. Dann würde ich sagen, was ist denn aus der Sicht des Kunden, dass was er hier nach vorne stellen müsste? Es sind drei gleichartige Geschäftsbereiche. Natürlich sind das verschiedene Wirtschaftsbereiche in dem Hause, aber vielleicht gibt es ein Kerngeschäft und das muss, weil es gut funktioniert, deswegen nach vorne gestellt werden. Das wäre so ein Kriterium. Das wollen wir auch nicht ändern, sondern das muss natürlich weiter so funktionieren. Okay, gibst du jetzt so eine Wortmeldung? Oh, okay. Dann passt das eigentlich doch ganz gut. Nach vorne. Aber wir haben eigentlich noch Zeit dafür, weil ich würde das eigentlich jetzt so feststellen, dass wir da gar nicht zu einem Ergebnis hinkommen. Also wir kriegen jetzt nicht die versprochene Checkliste raus, so einfach. Ich glaube im Kreis, weil wir jetzt eigentlich schon versuchen, die Website auszubauen, aber diese Mitteerebene der Fragen, auf die kommen wir jetzt alle zusammen nicht. Ich würde euch anbieten, dass wir ein Blogpost dazu verfassen. Zu dem Thema. Ich würde die Sachen, die wir erarbeitet haben, einfach mal zusammenfassen und versuchen, eine Checkliste zu erstellen. Ich werde einfach mal eine machen und sagen, das ist jetzt unsere Basis. Und dann biete ich die vielleicht zum Download an oder irgendwie kriegt. Ihr könntet ihr euch von dem Blog runterholen und dann würde ich sagen, dass ihr kommentiert einfach mit eurer eigenen Version oder dass wir an einer gemeinsamen Version arbeiten. Google Docs. Meint ihr, das geht vielleicht? Das ist eine Idee. Dann würde ich es in Google Docs. Würde ich einfach mit einer Basis anfangen. Dann würde ich irgendwie, bei dem Blogpost müsst ihr mir das verlinken. Ich weiß nicht genau, wie funktioniert das. Kann dann jeder darauf zugreifen, kann ich das so einstellen? Okay, dann gebe ich das frei. Also jeder, der den Link hat, kann da drinnen rumschreiben und letztendlich habe ich dann natürlich noch irgendwie eine Version als Backup. Aber im Grunde können wir dann zusammen diese Checkliste erarbeiten. Und jeder, das einmal für sich durchgehen muss und einmal so eine Checkliste sehen muss und das ist jetzt in so einem Format hier nicht genauso funktioniert, wie ich das vielleicht erhofft hatte. Ist das in Ordnung? Okay, dann gehen wir so vor. Wir haben jetzt noch ein paar Minuten. Habt ihr noch irgendwelche Fragen oder Ideen zu dem Thema WIFM? Bitte, ich wiederhole die Frage auch. Okay, also wann die, ich wiederhole die Frage. Die Frage war jetzt, wann man responsive design beachtet oder wann man überlegt, für welches Device man das macht. Wie war die Frage gemeint? Mhm. Ah, okay. Ich spiegel das mal gerne zurück. Wer zeigt seinem Kunden Wireframes von euch? Never. Da schütteln auch weich den Kopf. Mal vielleicht. Hast du es schon mal gemacht? Okay, das heißt, wenn beim Kunden, wenn man weiß, der Kunde versteht die Abtragion Wireframe und dass es ein Platzhalter ist und nicht seine Überschrift und nicht sein Bild und er kann den Übertrag selber leisten, dann schon. Also frühend ein Dummy. Wie seht ihr das? Noch jemand eine Idee? Die Frage war ja, wann zeige ich jetzt dem Kunden ein Mobile oder ein Desktop Wireframe und die Frage noch nicht genau richtig. Okay. Grundsätzlich sind wir, glaube ich, alle einer Meinung, wenn ich sage, wir sind am Punkt responsive design, die die Trennung eine mobile Version zu machen, wenn irgendwann der Monitor zu klein wird. Das ist ja schon ein paar Jahre her. Responsive Design passt ja im Grunde auf alle Geräte, sollte idealerweise auch für alle Bildschirmen Größen irgendwie passen und wenn man das nicht hinkriegt oder nicht den Aufwand reinstecken will, zumindest für die Gängigsten. Da jetzt vor einigen Jahren ja bei Google die große Meldung rauskam, das über 50% der Leute mobil suchen zumindest und dadurch zumindest auf die Seiten mit den Suchergebnissen gehen, haben sich viele Designer dazu entschlossen, Mobile First zu machen. Das, was wir gemacht haben, den Wireframe auf einem mobilen Gerät zu starten und wenn der für mobil passt, dann den Übertrag überhaupt zu machen auf den Desktop. Haben wir gestern auch noch beim Kneipengespräch drüber gesprochen, tatsächlich. Der Trend geht dahin, das zu machen und auch zu programmieren oder die CSS-Anpassung oder die Basis nur für Mobile zu haben und optionale Sachen, wenn der Bildschirm groß wird, dafür die Sonderanpassung zu machen und nicht umgekehrt. Wie man jetzt halt so vorgeht, ist halt häufig, man fängt an, man baut die Seite, guckt dann, wie sie sich auf dem Handy aussieht und dann pass ich das an, dass es auf dem Handy gut aussieht und das dreht sich jetzt tatsächlich ein bisschen um was man auch tun, weil es sollte, wenn ich mehr Seitenbesucher mit dem Handy habe als mit dem Desktop, sollte ich mich natürlich auf das konzentrieren, wo am meisten Besucher da sind. Und deshalb würde ich sagen, man fängt mit dem Wireframe mobile an, spricht auch vielleicht sogar auch das Mobile mit dem Kunden durch, wobei da die Frage ist und da haben wir offensichtlich wirklich sehr unterschiedliche Stile, auch hier im Raum. Du machst zum Beispiel so, das heißt da geht so ein bisschen in die Richtung, dass der Wireframe oder die Struktur gar nicht nach außen kommt, gar nicht zum Kunden, sondern wirklich für den internen Aufbau gedacht ist, für dich, dass man quasi für sich selber oder für den Team, mit dem man zusammenarbeitet, so eine Arbeitsstruktur hat. Finde ich spannend. Finde ich auch mutig, das zu machen, also so den Schritt zu gehen, ich investiere mehr Arbeit und dann habe ich das Feedback vom Kunden zu kriegen. Ich verstehe das, was man versucht. Wir machen das auch noch so. Das heißt, wir versuchen auch möglichst früh, also eine Softwareentwicklung heißt das Agil, an den Markt zu gehen, zum Kunden zu gehen und zu testen, findet er es gut, was ich da mache. Und ich denke, das kann gefährlich sein. Wenn ich einen Kunden habe, der das versteht, der sagt, okay, ich kann verstehen, was du damit meinst und dass die Überschrift jetzt in meinem Wortlaut ist und dass der Text noch nicht korrekt ist und das das Bild vielleicht auch noch nicht korrekt ist, dann kann ich das machen. Aber das können die allerwenigsten Kunden tatsächlich leisten. Die Erfahrung machen wir auch immer wieder, wenn wir ein Wireframe machen, ich mache mal so ein schnelles Beispiel für einfach unser Wireframe. Wenn ich jetzt ganz alleine arbeiten würde, dann würde ich mit Adobe XD, wenn das deinem Vortrag war, würde ich anfangen und tatsächlich das, was wir jetzt analog gemacht haben, einmal die Elemente überlegen aufgrund des Contents, die ich vom Kunden habe und würde mir dann wirklich hier relativ schnell und einfach drauf schreiben oder drauf zeichnen, was brauche ich. Ich habe mir angewohnt, immer drauf zu transgeschreiben, was es ist, weil ich das für mich mache. Das kriege ich fertig. Hier haben wir ein Teaser, wo ich sage, hier machen wir. Angenommen, das hier ist auf jeden Fall über auf der Fold. Bis hier unten hätten wir Maximalplatz, bevor man scrollen muss. Da würde ich hier oben ein kleines Teaserbild, da ist vielleicht das Autohaus drin. Ich zeichne auch manchmal ein bisschen auf die Bilder, was ich dafür ein Bild schon mal haben möchte, damit wir für ein Fotografen auch schon mal was als Anhaltspunkt haben. Und dann gehe ich weiter und überlege, was wäre die nächste richtige Sache. In dem Fall würde ich hier unsere Dreifaltigkeit machen, also die Entscheidung oder die Zweifaltigkeit sagen neu und bloß gebraucht als Bild oder als Titel oder als Teaser mit einer gewünschten Handlung ein Button drunter und hier habe ich unseren Schraubenschüssel. Jetzt kommt es. Auch mit dem Teaser. Was habe ich mir jetzt in meinem Kopf überlegt, das, was ich eigentlich in die Checkliste machen wollte. Er muss erstmal das, was alle haben wollen, das heißt irgendwie Größe zeigen, mit einem Bild geht das häufig schneller, als ich das da hinschreibe. Da steht vielleicht irgendwie hier oben 25 und unsere Sternchen drin. So könnte ich das auf einem Blick sichtbar machen, dass sie so eine gewisse Erfahrung haben und kann dann auch sagen, hier unten Kunden stimmen. Als ganz kleinen Link, wenn ich darauf achte, dass ich dann abtauchen kann, mir die Kundenstimmen irgendwie aufmachen kann oder runter scrollen zu den Kundenstimmen und von hier aus kann ich relativ schnell in den Bereich abtauchen, in den ich möchte. Also eine Strategie oder ein Ansatz von mir ist immer, die Zielnutzer, wenn ich mehrere habe, ganz schnell in ihren Bereich zu schicken. Weil ich sie da dann wirklich so ansprechen kann, wie ich das brauche. Wenn ich eine Seite für einen Nutzer mache, was der Idealfall ist, dann kann ich ganz anders herangehen, aber wenn ich erstmal die Nutzer sortieren will, dann mache ich erstmal so ein Safe Select. Das heißt, ich weiß ja, was ich will, als Juse, also selekte ich mich hier selber ein in die Schublade neu in Gebrauchtwagen und da kann ich die Schublade dann eben auch angehen. Und ich mache hier wirklich diesen ganzen Prototypen erstmal im Schnellverfahren mit Kästen weiter, mache ich das weiter aus und dann fülle ich das weiter an mit echten Inhalten. Und wenn ich das so jetzt im Kunden schicke, kann er sich das noch nicht vorstellen. Deshalb werfe ich überall Dummy-Bilder rein. Das heißt, ich such mir, egal wo, erstmal Bilder raus. Es gibt ja so Bilderportale, aber auch die Fotolier und Co. Die Dummy-Bilder kann man sich ja auch so runterladen. Die packe ich hier überall rein, dass es schon mal so möglichst so aussieht, wie das Bild, was wir später brauchen. Dann weiß der Fotografer, was er fotografieren soll. Und ich schreibe hier Überschriften auch schon richtig hin, damit der Kunde schon mal weiß, da geht es zu dem Gebrauchtwagen. Und ähnlich gehe ich dann eben mit jeder Seite vor. Jetzt einmal stoppen. Das wollte ich euch als kleinem Mehrwert wenigstens noch geben, wenn wir nicht die Checkliste haben, als Input, wie wir halt so vorgehen, was ich jetzt eigentlich machen müsste, das nächste kann das einmal zur Seite schieben. Wir haben daher eigentlich so einen Daumen hoch und ich muss ja zugeben, dass wir das nicht so hingekriegt haben, so ambitioniert, wie ich das gedacht habe, deshalb machen wir irgendwie mal den Daumen irgendwie weg. Gebt mir die Sekunde nach und dann würde ich das mal als Abschlussbild hier stehen lassen. Und da hoffe ich natürlich darauf, dass wir das zusammen hinkriegen. Wir sind ja auch heute hier und waren auch gestern da und haben mich echt supergut gefreut, dass wir mit mehr Köpfen eigentlich an denselben Problemen arbeiten, weil wir haben alle die gleichen Probleme oder Herausforderungen und ich glaube nicht, dass wir uns als Wettbewerb betrachten, sonst würden wir nicht alle selbst sitzen. Deshalb denke ich, dass wir uns supergut austauschen können und ich glaube, ein Baustein, der häufig halt eben schwierig ist, ist halt von dem Briefing zur Fertig-Website zu kommen und der Knackpunkt ist halt eben der Übertrag, wie baue ich diese Struktur auf und ja, da versuchen wir halt gemeinsam im Nachgang die Checklässe zu entwerfen. Ich mache den Start, bring das rein. Wie könnt ihr mich erreichen? Das ist natürlich noch eine so gute Frage. Wie läuft das hier? Hast du eine Ahnung? Ich habe keine 20 Visitenkarten oder so mit. Aber ihr habt alle was zu schreiben. Ja, ich mache das, so mache ich das einfach, das kommt dann schon an. Ich mache das für euch, dann kommt ihr oft über den Link, kommt ihr dann zu dem Beitrag. Da fasse ich das zusammen, was wir machen wollen und dann bilden wir so eine kleine Online-Community daraus und gucken, dass wir uns in Google Doc oder wie auch immer dann austauschen. Danke fürs Mitmachen und schönen Feierabend gleich.