Wie Sie eine Webanwendung schon vor der Programmierung erleben

Mit dem Prototyp zur Qualitätssoftware

Die Anwendung Bootstrap Studio bietet eine einfache Möglichkeit zur Erstellung von Prototypen für Webanwendungen.

Wie bereits im Beitrag »Wireframes« beschrieben, verhilft die bildliche Darstellung einer Oberfläche zur Veranschaulichung der zu entwickelnden Anwendung. Wenn nun die Wireframes durch einfaches Einfügen von Aktionen und Animationen eine beispielhafte visuelle Darstellung der Softwarelösung bieten, kann aus einem Wireframe ein Prototyp entstehen. Die Bereitstellung eines Prototyps für den Kunden bietet die Möglichkeit die zukünftige Anwendung weitestgehend zu erleben. Durch klickbare Bereiche und Animationen kann ein Gefühl für den Umgang der Anwendung gegeben werden. Für die Realisierung solcher Prototypen kann die Software Bootstrap Studio eingesetzt werden.

Webanwendungen mit Responsive Design

Die Erstellung von Prototypen mit der Software Bootstrap Studio ist für jedermann möglich. Das Hinzufügen von Elementen wird durch die einfache Funktion des Drag & Drop realisiert. Formatierungen erweisen sich durch vorgegebene Werkzeuge ebenso leicht. Das Lernen von Programmiersprachen ist für die Verwendung von Bootstrap Studio nicht erforderlich. Ein paar hilfreiche Tipps und Tricks werden in der Bootstrap Documentation bereitgestellt. Durch learning by doing können weitere Kniffe entdeckt und kombiniert werden. Für die Nutzung von Bootstrap Studio wird eine Lizenz und ein Webbrowser für die Anzeige der Preview vorausgesetzt. Die Erstellung eines Prototyps kann durch die Verwendung eines leeren Designs oder ein Template gestartet werden.

Wer über HTML Wissen verfügt, hat bei der Verwendung von Bootstrap Studio noch ein paar weitere Vorteile. Über den Bereich „HTML“ -> „Attributes“ können Formatierungen einzelner Elemente über das Hinzufügen von Klassen vorgenommen werden. Für die Definition von eigenen Formatierungen oder Funktionen kann der Bereich „Styles“ verwendet werden. Hier können bereits erstellte js- oder css-Dateien in Bootstrap Studio importiert und übernommen werden. Nach Fertigstellung eines zufriedenstellenden Prototyps können die mit Bootstrap Studio erstellten css-Styles auch für die anschließende Programmierung verwendet werden.

Bootstrap Studio bietet nicht nur die Möglichkeit der Erstellung von Prototypen für Webanwendungen im Desktop Format. Darüber hinaus wird hier auch das Augenmerk auf das Responsive Design von Webseiten und Webanwendungen gelegt. Die Elemente können mit den jeweiligen Formatierungen für das Responsive Design definiert werden. So kann im Webbrowser die Vorschau sowohl für die Desktop- als auch die mobile Ansicht angesehen werden.

Durch die Anwendung von Bootstrap Studio wird der Prozess der stetigen Abstimmung stark vereinfacht und schützt beide Seiten vor unangenehmen Überraschungen. Dieses und andere Werkzeuge sind darum für uns das Mittel der Stunde, um in der Konzeptphase gemeinsam mit unserem Kunden die Funktionalitäten und das Aussehen einer Anwendung zu besprechen.