Chrepps Blog

Bunt und granatenstark

Tag: Design

Modi und Moden – Rook Assistant Teil 3

Ein Teil meiner ursprünglichen Idee war, die App in mehrere Modi zu unterteilen. Das hilft mir, zu bedenken, was der Nutzer zu welchem Zeitpunkt sehen muss. Ob Modus der richtige Begriff ist? Es ist für mich jedenfalls ein hilfreicher Begriff. Man könnte es auch Unterseiten oder Schritte nennen. Hier sind die Modi, die mir bisher vorschweben:

  1. Startbildschirm
  2. Auswahl der Spieleranzahl
  3. Eingabe der Spielernamen
  4. Punktetabelle
  5. Gebot-Abgabe
  6. (optional) Erhöhung des Gebots
  7. Mitspieler-Eingabe und Spielausgang
  8. Punkte es gegnerischen Teams
  9. Spielende

Noch schöner ist natürlich so „hübschen“ Wireframes wie da unten im Bild. Das hat tatsächlich länger gedauert, als gedacht. Fast das ganze Viertelfinalspiel zwischen Russland und Kroatien (incl. Elfmeterschießen) hat es gedauert. Es war aber auch ein spannendes Spiel. Zu beachten ist noch, dass das neunte Bild hier die Punktetabelle zeigt. Das war für mich der nächste logische Schritt hier. Vor allem, weil das Spielende nicht wirklich viel Funktionalität bietet. Wir kriegen das schon hin.

Wireframe der Modi

Welches Tool benutzt du da eigentlich zum Malen?

Sehr gute Frage. Also erstmal male ich nicht – ich bin ja kein Maler. Das Tool, mit dem ich diese Grafiken und auch das Flussdiagramm von Teil 1 gestaltet habe, ist draw.io! Wirklich ein tolles einfaches Tool für Grafiken aller Art. Aber keine Malereien.

Warum sind die Texte im Wireframe eigentlich englisch? Und was heißt Wireframe auf deutsch?

Irgendwie kam mir das Gestalten der Oberfläche schon wie Programmieren vor, also bin ich direkt ins Englische geswitcht. Natürlich werde ich nachher die echten Texte auf deutsch drin haben. Es soll ja für mich und meine Mitspieler sein. Wireframe heißt Drahtmodell und meint nichts anderes als einen Design-Entwurf, der rein funktional gedacht ist. Farben, Formen und Abstände sollen nicht beachtet werden. Es geht darum, sich und anderen klar zu machen, wie es funktionieren soll. Auch die räumliche Anordnung wird angedeutet, aber kann nachher noch verändert werden.

Warum stelle ich mir selber hier die Fragen?

Weil ich es kann! Und aus demselben Grund hier noch ein anderes wichtiges Thema: Modus ist ein viel besseres Wort als Status, weil die Mehrzahl im Deutschen wenigstens logisch ist. Wer kommt auf die Idee, dass die Mehrzahl von Status Status (Statuuus) ist und nicht Stati? Kann mir das irgendwer erklären?!?

Bis zum nächsten Artikel.

Konkrete Pläne – Rook Assistant Teil 2

Beim letzten Mal habe ich grundsätzlich meine Überlegungen geteilt, wie der „Rook Assistant“ funktionieren sollte. Seitdem ist mir bereits aufgefallen, dass ich eine kleine Sache bereits übersehen habe. Für den Sieg ist es nämlich notwendig, zu behalten, ob jemand bereits ein Gebot gewonnen hat (nicht den Stich – nur das Gebot). Darum notiere ich es hier einmal. Ich könnte auch das Flussdiagramm anpassen, aber da es jetzt schon hier steht, ist es ja dokumentiert. Ihr könnt mich ja darauf hinweisen, falls diese Abfrage im Endprodukt fehlt.

Design

In einem ordentlichen Prozess käme jetzt der Punkt, an dem Konzeptioner und Designer das Aussehen des Produkts bestimmen. Man kann die App ja beliebig hübsch machen. Stattdessen werde ich mir wohl die komplette Funktionalität erstmal Programmierer-mäßig ohne besonderes Aussehen zusammenbasteln. Das heißt, ich schreibe alles schwarz auf weiß in einfaches HTML und sorge dafür, dass es das tut, was es soll.

Dem ganzen Spaß setze ich dann später eine Portion Bootstrap auf. Damit habe ich schon sehr lange nichts gebaut. Bootstrap ist extrem verbreitet und sollte in der Lage sein, die Bedürfnisse meiner App abzubilden. Am besten wäre natürlich eine schicke App-Optik. Da muss ich wohl noch etwas Recherche reinstecken.

Technologie

Jetzt wird es technisch! (Aber keine Angst, ich halte es oberflächlich) Nachdem die Entscheidung gefallen war, das Progrämmchen nicht als Android- oder iOS-App zu entwickeln, dachte ich zuerst, dass ich es einfach stumpf runterprogrammiere. Aber es sollte ja wenigstens eine kleine Lern-Lektion für mich sein, also bin ich nach etwas Grübelei zu dem Schluss gekommen, das Vue.js-Framework zu benutzen. Wie ich hörte ist das ja gerade total in. Vue.js ist wohl eine gute Wahl für schlanke Single-Page-Applications (SPA, also im Prinzip eine App, die auf einer Website läuft) und der Rook-Assistant wird mit Sicherheit eine SPA. Es gibt keine Server-Kommunikation oder so – alles läuft da wo man es sieht. Vermutlich werde ich nur die Basis-Funktionen von Vue.js benutzen, aber immerhin habe ich dann mal einen Blick in die Vue-Welt geworfen und meine Füße ins kühle Nass gesteckt.

Nächste Schritte

Offensichtlich steht erstmal ein Blick ins Vue.js-Tutorial an. Ich denke, ich hangele mich dort entlang und versuche, auf dem Weg schon ein Daten-Modell für die Rook-Assistant-App zu entwickeln. Mir schwebt da schon ein Array vor, der Objekte enthält, die Namen und Punktzahl des Spielers enthalten. Achja und ob der Spieler schon einmal ein Gebot gewonnen hat. Nicht vergessen!

© 2020 Chrepps Blog

Theme by Anders NorenUp ↑