{"id":4899,"date":"2017-03-20T21:23:40","date_gmt":"2017-03-20T19:23:40","guid":{"rendered":"https:\/\/8660.at\/?p=1091"},"modified":"2017-03-20T21:23:40","modified_gmt":"2017-03-20T19:23:40","slug":"der-designprozess-von-phombie-flow","status":"publish","type":"post","link":"https:\/\/zeichenschatz.net\/en\/freiraum\/der-designprozess-von-phombie-flow\/","title":{"rendered":"Der Designprozess von Phombie Flow"},"content":{"rendered":"<p class=\"lead-in\">Im Sommer 2016 haben wir gemeinsam mit Stefan Grassberger ein paar Tage\u00a0reserviert um Neues auszuprobieren. Ohne konkretes Ziel wollten wir etwas mit Film und Interaktion zum Thema digitale \u00dcberforderung machen. Daraus entwickelte sich schlussendlich das\u00a0Browser-Game\u00a0<a href=\"https:\/\/8660.at\/projects\/phombie-flow\/\">Phombie Flow<\/a>.<\/p>\n<h2>Agiler Entwicklungsprozess<\/h2>\n<p>In den vier Tagen unseres Sommercamps\u00a0haben wir f\u00fcr Phombie Flow die Konzeption, das grobe Screendesign, den Dreh des Filmmaterials, den Schnitt und die Grundprogrammierung realisieren k\u00f6nnen. Wir hatten einen spielbaren Prototyp im\u00a0Browser, bei dem aber noch das\u00a0geplante Design fehlte. In den darauffolgenden Wochen vielen weitere Schritte unternommen, eine Menge ge\u00e4ndert, erweitert, und wieder verworfen.\u00a0Alles am lebenden Objekt.<\/p>\n<div id='gallery-1' class='gallery galleryid-4899 gallery-columns-3 gallery-size-medium'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-stefan-michael-1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-stefan-michael-1-300x200.jpg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-stefan-michael-1-300x200.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-stefan-michael-1-1024x683.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-stefan-michael-1-768x512.jpg 768w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-stefan-michael-1-1536x1025.jpg 1536w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-stefan-michael-1.jpg 1920w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-oliver-stefan-1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-oliver-stefan-1-300x200.jpg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-oliver-stefan-1-300x200.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-oliver-stefan-1-1024x683.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-oliver-stefan-1-768x512.jpg 768w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-oliver-stefan-1-1536x1025.jpg 1536w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-computer-oliver-stefan-1.jpg 1920w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-illustartion-1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-illustartion-1-300x200.jpg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-illustartion-1-300x200.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-illustartion-1-1024x683.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-illustartion-1-768x512.jpg 768w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-illustartion-1-1536x1025.jpg 1536w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-illustartion-1.jpg 1920w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-post-it-1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-post-it-1-300x200.jpg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-post-it-1-300x200.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-post-it-1-1024x683.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-post-it-1-768x512.jpg 768w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-post-it-1-1536x1025.jpg 1536w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-post-it-1.jpg 1920w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-scs-1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-scs-1-300x200.jpg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-scs-1-300x200.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-scs-1-1024x683.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-scs-1-768x512.jpg 768w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-scs-1-1536x1024.jpg 1536w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-scs-1.jpg 2048w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-schwacht-1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"200\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-schwacht-1-300x200.jpg\" class=\"attachment-medium size-medium\" alt=\"\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-schwacht-1-300x200.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-schwacht-1-1024x683.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-schwacht-1-768x512.jpg 768w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-schwacht-1-1536x1024.jpg 1536w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-making-of-schwacht-1.jpg 2048w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p>Es war eine v\u00f6llig neue Situation f\u00fcr mich, ein Projekt zu starten und bereits\u00a0in die Umsetzung zu gehen, ohne klar geplant zu haben, was es sein und k\u00f6nnen soll und was wir damit machen wollen. Das Entwicklen w\u00e4hrend des\u00a0Prozesses hat den gro\u00dfen Vorteile, dass wir uns wirklich damit <strong>\u00fcberrascht<\/strong> haben und es sich in eine Richtung bewegen konnte, die wir nicht vorhergesehen h\u00e4tten.<\/p>\n<p>Die Kehrseite dieses agilen Prozesses ist, dass es sich zeitweise etwas ziellos anf\u00fchlte. Auch der Code und technische Aufbau ist wegen der vielen \u00c4nderungen am Weg nat\u00fcrlich nicht ideal strukturiert. Doch nur auf diese Art konnten wir schnell viel ausprobieren \u2013 immer mit dem Ergebnis eines brauchbaren Prototyps.<\/p>\n<h2>Das Screendesign<\/h2>\n<p>In der Entwicklung des Designs wollte ich einen anderen Stil ausprobieren, der sich konsistent durch das Thema zieht. \u00dcberforderung und Druck sind nichts Angenehmes\u00a0und so sollte auch das Design etwas provokanter daher kommen. Das Screendesign ist etwas \u00fcberzogen und erinnert an Video-Spiele aus den 80er- und 90er-Jahren. Alles ist eckig und nicht so fein ausgeglichen wie es in einem Screendesign sonst \u00fcblich w\u00e4re.<\/p>\n<p>Die folgenden Screenshots zeigen den Entwicklungsweg von einem etwas plumpen Pixel-Look zum finalen, eckigen Screendesign.<\/p>\n<div id='gallery-2' class='gallery galleryid-4899 gallery-columns-3 gallery-size-medium'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-1-300x169.jpg\" class=\"attachment-medium size-medium\" alt=\"Zwischenritte im Screendesign mit eigenem Icon-Set\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-1-300x169.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-1-1024x576.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-1-768x432.jpg 768w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-1.jpg 1201w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-pixel-1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-pixel-1-300x169.jpg\" class=\"attachment-medium size-medium\" alt=\"Weiteres Screendesigns mit n\u00fcchternen Pixel-Icons\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-pixel-1-300x169.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-pixel-1-1024x576.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-pixel-1-768x432.jpg 768w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-overlay-pixel-1.jpg 1201w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-pixel-stil-1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-pixel-stil-1-300x169.jpg\" class=\"attachment-medium size-medium\" alt=\"Erster Entwurf Screendesigns im Pixel-Stil\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-pixel-stil-1-300x169.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-pixel-stil-1-1024x576.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-pixel-stil-1-768x432.jpg 768w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/phombie-flow-screendesign-zwischenschritt-pixel-stil-1.jpg 1201w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4934\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-2-Game-1-1.jpg\" alt=\"Phombie Flow Spieledesign Notifications\" width=\"1425\" height=\"802\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-2-Game-1-1.jpg 1425w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-2-Game-1-1-300x169.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-2-Game-1-1-1024x576.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-2-Game-1-1-768x432.jpg 768w\" sizes=\"auto, (max-width: 1425px) 100vw, 1425px\" \/><\/p>\n<p>Die \u00c4sthetik\u00a0der Notifications sollte einerseits an bekannte Nutzeroberfl\u00e4chen wie iOS und Android erinnern, andererseits aber auch Eigenst\u00e4ndigkeit haben. Ich habe deshalb f\u00fcr Phombie Flow ein Icon-Set mit kantigen Icons f\u00fcr die verschiedenen Notification-Dienste entwickelt. Das Icon-Set\u00a0kann <a href=\"https:\/\/8660.at\/free-edgy-line-icon-set\/\">kostenlos heruntergeladen<\/a> und bei Nennung von Phombie Flow frei\u00a0genutzt werden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4928\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/edgy-icons-phombie-flow-icon-set-1.jpg\" alt=\"\" width=\"1200\" height=\"550\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/edgy-icons-phombie-flow-icon-set-1.jpg 1200w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/edgy-icons-phombie-flow-icon-set-1-300x138.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/edgy-icons-phombie-flow-icon-set-1-1024x469.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/edgy-icons-phombie-flow-icon-set-1-768x352.jpg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2>Zum Styling<\/h2>\n<p>Da wir das Spiel als Browser-Game\u00a0realisiert haben, konnten wir unsere F\u00e4higkeiten gut erg\u00e4nzen und ich das Styling direkt am lebenden Objekt machen. Wir haben einen <a href=\"http:\/\/phombieflow.net\/styleguide.html\">Mini-Styleguide<\/a> angelegt, bei dem man alle Elemente auf einer Seite gesammelt sieht und ich sie so gut gestalten konnte. Denn im laufenden\u00a0Spiel\u00a0w\u00e4re das nicht m\u00f6glich.<\/p>\n<p>Ich wollte, dass sich das Design <strong>automatisch an die Bildschirmgr\u00f6\u00dfe anpasst<\/strong>. Deshalb habe ich in CSS f\u00fcr fast alle Ma\u00dfeinheiten ab einer gewissen Bildschirmgr\u00f6\u00dfe <code>vh<\/code> und <code>vw<\/code> units verwendet. Diese <a href=\"https:\/\/css-tricks.com\/the-lengths-of-css\/#article-header-id-12\" target=\"_blank\" rel=\"noopener\">Viewport Percentage Lengths<\/a> richten sich flexibel nach der Gr\u00f6\u00dfe des Browserfensters\u00a0und waren deshalb\u00a0genau die richtige\u00a0Wahl. Bei kleinen Bildschirmen ist es jedoch notwendig eine Mindestgr\u00f6\u00dfe zu definieren, aber einem Punkt kann es dann einfach passend weiter wachen, vom Tablet bis zum 4k-Monitor.<\/p>\n<pre lang=\"css\">@media (min-width: 64em) {\n  .notification {\n    width: 55vw;\n    top: 10vh;\n    left: 22.5vw;\n    padding: 2.5vmax 2vmax 2vmax 8vmax;\n    font-size: 1.8vw;\n  }\n}<\/pre>\n<h2>Was wir im Designprozess gelernt haben<\/h2>\n<p><strong>Alle Teile sind wichtig<\/strong> \u2013 bei einem Spiel sind alle Komponenten zu hundert Prozent wichtig. Aufgabenstellung, Inhalte, Timing, Interface, Bild, Ton, Design, Funktionsweise. Alles greift ineinander und ist gleich wichtig, weil es einander direkt beeinflusst.<\/p>\n<p><strong>Oft und immer wieder testen<\/strong> \u2013 und das ohne die Tester zu beeinflussen. Bei den ersten Tests haben wir nur gutes Feedback bekommen, weil wir vorher erkl\u00e4rt haben, worum es geht. Die n\u00e4chsten Tests, bei denen wir die Spieler mit den Anweisungen am Bildschirm alleine gelassen haben, waren vernichtend, denn:<\/p>\n<p><strong>Niemand liest den Text<\/strong> \u2013 vor allem nicht in einem Spiel und auch nicht, wenn es wenig ist. Wenn am Anfang des Spiels eine Anweisung steht, die l\u00e4nger als zwei S\u00e4tze ist, wird sie nicht gelesen. Alle klicken \u201eSpiel starten\u201c.<\/p>\n<figure id=\"attachment_4933\" aria-describedby=\"caption-attachment-4933\" style=\"width: 1425px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4933\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-1-Start-1.jpg\" alt=\"Phombie Flow Spieledesign Spielstart\" width=\"1425\" height=\"802\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-1-Start-1.jpg 1425w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-1-Start-1-300x169.jpg 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-1-Start-1-1024x576.jpg 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-1-Start-1-768x432.jpg 768w\" sizes=\"auto, (max-width: 1425px) 100vw, 1425px\" \/><figcaption id=\"caption-attachment-4933\" class=\"wp-caption-text\">Ein sehr sch\u00f6ner Start-Screen, man darf jedoch nicht damit rechnen, dass dieser kurze Text mit Anweisungen gelesen wird.<\/figcaption><\/figure>\n<p><strong>Tutorial einbauen<\/strong> und die Anweisungen in\u00a0einzelne Schritte aufteilen, die dann gleich getestet werden. Nachdem wir unser Tutorial eigebaut hatten,\u00a0gab es\u00a0f\u00fcr unsere Testspieler keine Probleme mehr Phombie Flow zu verstehen.<\/p>\n<figure id=\"attachment_1125\" aria-describedby=\"caption-attachment-1125\" style=\"width: 1435px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1125\" src=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-Tutorial-1-1.png\" alt=\"Phombie Flow Tutorial Screen\" width=\"1435\" height=\"802\" srcset=\"https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-Tutorial-1-1.png 1435w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-Tutorial-1-1-300x168.png 300w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-Tutorial-1-1-1024x572.png 1024w, https:\/\/zeichenschatz.net\/wp-content\/uploads\/2017\/03\/Phombie-Flow-Tutorial-1-1-768x429.png 768w\" sizes=\"auto, (max-width: 1435px) 100vw, 1435px\" \/><figcaption id=\"caption-attachment-1125\" class=\"wp-caption-text\">In einem Tutorial lassen sich Anweisungen viel besser integrieren und erkl\u00e4ren<\/figcaption><\/figure>\n<h2>Nur zu dritt m\u00f6glich<\/h2>\n<p>F\u00fcr mich am erf\u00fcllensten war, dass wir Phombie Flow <strong>nur zu dritt realisieren konnten.<\/strong> Keiner von uns alleine w\u00e4re dazu in der Lage gewesen, auch zu zweit w\u00e4re es nicht gegangen. Wir haben einander ideal \u00fcberschnitten, erg\u00e4nzt und schnell in unsere Fachbereiche aufgeteilt: Alle haben an der Ideenfindung und am Konzept und Testen gearbeitet, Stefan am Code, Michael an Film und Ton und ich am Design und Styling. Auch unser Making Of beschreibt den Weg zum Ergebnis:<\/p>\n<p>https:\/\/www.youtube.com\/watch?v=Bu80u6Kwg2o&#038;t=35s<\/p>\n<p>Alles in allem eine tolle Erfahrung, die wir gerne wiederholen m\u00f6chten. Wer nach all der Theorie jetzt etwas Praxis braucht, hier geht\u2019s zum Spiel:\u00a0<a href=\"http:\/\/phombieflow.net\" target=\"_blank\" rel=\"noopener\">phombieflow.net<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Im Sommer 2016 haben wir gemeinsam mit Stefan Grassberger ein paar Tage\u00a0reserviert um Neues auszuprobieren. Ohne konkretes Ziel wollten wir etwas mit Film und Interaktion zum Thema digitale \u00dcberforderung machen. Daraus entwickelte sich schlussendlich das\u00a0Browser-Game\u00a0Phombie Flow. Agiler Entwicklungsprozess In den vier Tagen unseres Sommercamps\u00a0haben wir f\u00fcr Phombie Flow die Konzeption, das grobe Screendesign, den Dreh [&hellip;]<\/p>","protected":false},"author":3,"featured_media":4945,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[83,92,224,350],"class_list":["post-4899","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-freiraum","tag-css","tag-designprozess","tag-making-of","tag-spieledesign"],"_links":{"self":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts\/4899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/comments?post=4899"}],"version-history":[{"count":0,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts\/4899\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/media\/4945"}],"wp:attachment":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/media?parent=4899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/categories?post=4899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/tags?post=4899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}