Eine responsive Web-App – Teil 1

Konzept und Wireframe

Henning über Webdesign

Um ehrlich zu sein, war es gar nicht so einfach ein überschaubares Thema für dieses Tutorial zu finden. Nach reiflicher Überlegung war der Colorculator geboren. Ein Tool zum einfachen Konvertieren von HEX-Farben in RGB- und HSL-Farben. Im Laufe dieser Reihe wird auf einige Features, Fallstricke und Ansätze des Web-App Developments eingegangen. Dabei geht es über das Konzept, zum Layout bis hin zur Programmierung.

Um diesem Tutorial einen echten Projekt-Charakter zu geben, wird in diesem ersten Teil auf das Konzept der Web-App eingegangen. Die Quellen des Colorculators gibt’s auf github – so, use the fork. Zunächst zur Funktionalität und zu den Anforderungen.

Die Funktion

Über ein Eingabefeld können HEX-Farben (3- und 6-stellig) eingegeben und on-the-fly in ihre RGB- und HSL-Entsprechungen konvertiert werden. Dabei soll die aktive Farbe dem Benutzer sichtbar gemacht werden.

Die Ansprüche

Die hier formulierten Requirements entsprechen nicht ganz den klassischen Business-Requirements, da an dieser Stelle bereits einiges an Vorwissen bezüglich der technischen Umsetzung in einem relativ hohen Detailgrad aufgeführt wird, aber es ist ja auch schließlich ein Tutorial…

Da Colorculator sowohl auf Desktops, Tablets wie auch Smartphones – namentlich dem iPhone – laufen soll, führt kein Weg an einem responsiven Ansatz vorbei.

Dabei soll das Tool über eine eigene HEX-Tastatur verfügen, die es dem Benutzer erleichtert die Farben einzugeben. Dieser Ansatz verhindert Fehleingaben. Dabei soll die Bedienbarkeit auf Smartphones (Touch-Events) und auch auf Desktops (Click-Events) gewährleistet sein.

  • Responsiv

Das UI soll minimalistisch, intuitiv, selbsterklärend, leicht benutzbar sein und mit HTML5, CSS3 und JavaScript umgesetzt werden.

  • HTML5, CSS3 und JavaScript
  • minimalistisch (ohne Grafiken)
  • gutes UX

Die Web-App soll offline-fähig und auf einem mobilen Endgerät ohne Internetzugriff immer noch lauffähig sein und den Benutzer über den momentanen Verbindungszustand informieren. Weiterhin soll die App mit einem Custom-Icon auf dem Home-Bildschirm des Benutzers aufrufbar sein. Die App soll ein Bewusstsein bezüglich ihres momentanen Situation haben und erfassen ob sie bereits vom Benutzer zum Home-Screen hinzugefügt wurde oder immer noch im Browser-Modus läuft.

  • Offline Application Cache
  • Web Clip Icon
  • Visuelles Feedback über den Netzwerkstatus
  • „Web Clip“-Bewusstsein und visuelles Feedback

Die App soll performant und auch mit bekannten NUI-Gesten steuerbar sein.

  • CSS/JS Kompression
  • Touch-/Shake-Events
Zusammenfassung
  • Responsives Web Design
  • HTML5, CSS3 und JavaScript
  • minimalistisch unter Verzicht auf Grafiken (siehe Punkt 8 Performant)
  • gutes UX
  • Offline-fähig
  • Web Clip Icon
  • Netzwerkstatus und visuelles Feedback
  • Web Clip Bewusstsein und visuelles Feedback
  • Performant
  • NUI-Gesten

F+A=FA

Funktionalität + Ansprüche = Funktionale Ansprüche — das Layout soll, wie bereits aufgeführt, responsiv umgesetzt werden. Aber was wird eigentlich an UI-Elementen benötigt? Ohne dieses Wissen lassen sich die erhobenen Anforderungen gar nicht zu digitalem Papier bringen.

UI-Komponenten
  • HEX-Label
  • HEX-Eingabefeld
  • RGB-Label
  • RGB-Ausgabefeld
  • HSL-Label
  • HSL-Ausgabefeld
  • Tastatur zur HEX-Eingabe (0-9, A-F)
  • Clear/Reset – Button
  • App-Name und „Erfinder“
  • Netzwerkstatus Anzeige
  • Homescreen Popup
Zusammenfassung:
  • 1 Eingabefeld
  • 2 Ausgabefelder
  • 1 Tastatur mit 16 Tasten
  • 1 Button zum Zurücksetzen der Werte
  • 1 Anzeige der aktiven Farbe

Wireframe

Es bietet sich zum Beispiel der Einfachheit halber ein symmetrischer Ansatz an, da sich dieser nachher im Coding sehr leicht berücksichtigen lässt.

Die 16 Tasten lassen sich sehr gut in 4 Reihen zu 4 Tasten umsetzen, wobei die HEX-Werte von Dunkel nach hell (Zahlen zu Buchstaben) angeordnet sind. Die 4 Reihen bilden allerdings ein Ungleichgewicht zu den 3 Ein-/Ausgabefeldern. Sieht man die Anzeige der aktiven Farbe allerdings auch noch als Ausgabefeld, so hätten wir 4 Tastenreihen auch 4 Felder entgegengesetzt. Symmetrie wieder hergestellt, pfffff! Gibt man nun noch den Feldern die gleiche Breite wie einer Tastenreihe ist das fast schon die halbe Miete!

Jetzt wo ein Gedankenmodell des UI-Ansatzes vorliegt, fällt auf, dass der Clear-Button noch nicht im Core-UI verankert ist und auch die Labels noch keinen Platz gefunden haben. Die Tastatur ist voll und auch bei den Info-Feldern haben wir keinen Platz mehr für die übergebliebenen Controls. An dieser Stelle würde es sich anbieten, z.B. Controls zu überladen, sprich ihnen eine Mehrfachfunktion zu geben. Im Hinblick auf den Clear-Button ist der einfachste Ansatz hier das Farbfeld auch als Ausgabe/Action-Element zu verwenden. Die Labels lassen sich in ähnlicher Form in die Felder integrieren. Das spart Platz, ist übersichtlich und passt in das bestehende Modell. Der nachfolgende Wireframe verdeutlicht den gewählten UI-Ansatz. Die Wireframes wurden mit Balsamiq Mockups, einem wirklich schicken Tool, erstellt!

Wireframe Konzept des Colorculators

Wie sich zeigt, lässt sich über diesen Ansatz ein übersichtliches UI sowohl im Hoch- wie auch Querformat realisieren.

Das war Teil 1 – Das Konzept. Im zweiten Teil wird das Wireframe-Layout nach HTML5 portiert und der Grundstein für das responsive Webdesign gelegt.

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries