How to experience a web application before you even program it
With the prototype to the quality software
As already described in the article “Wireframes“, the visual representation of an interface helps to illustrate the application to be developed. Now, if the wireframes provide an exemplary visual representation of the software solution by simply inserting actions and animations, a prototype can be created from a wireframe. Providing a prototype to the customer offers the possibility to experience the future application as far as possible. Through clickable areas and animations a feeling for the handling of the application can be given. For the realization of such prototypes the software Bootstrap Studio can be used.
Workspaces in Bootstrap Studio
With the prototype to the quality software: In Bootstrap Studio, different work areas are offered. The left area is divided into Studio / Online (top) and Overview (bottom). “Studio” can be used to retrieve the bootstrap elements that are already included. Online offers possibility to download more available elements. These elements can be added to the interface via drag&drop.
Added elements are displayed in the Overview area. A visual representation of the elements is provided in the middle area of the application. The arrangement of added elements can be changed both in the Overview area and in the middle area. Tools for editing the elements, such as Look & Feel, Option, Animation (top) and Design (bottom) are provided in the right pane.
Below the visual representation of the elements, the HTML (left) and Styles (right) areas are available. In those formatting is possible, this is done by using attributes or js / css files.
Creating the prototype
The first prototype is to represent a table and a pie chart based on it. For this purpose, the required elements are added first and then the layout of the form and the elements are adapted.
For the search of elements, the search field displayed in the upper left corner can be used. Since an autocomplete search is integrated, the desired element will be found after a few keystrokes.
The first element to be added is the container. The div element is needed to divide the container into different areas. The first area is for a short description of the page. For this, the Span element is added to the first div. In addition, other elements such as an icon (logo of the company) or navigation elements nav can be used to adapt the prototype to the corporate identity.
In the subsequent div a table and an adjacent diagram can be included. Thus, in this div a row – element row – with two columns – element column – needed. Now in the first columns we add the table element for listing the data. In the second column we insert thechart element. Another div can then still be used to include other elements, such as a comment text or buttons.
Styling of the web application
In this step the labels and formatting of the elements are done.
For most elements, the label can be changed in the middle workspace by double-clicking (Span, Radio with label, Button and Link). For the Select element, changing the Item labels is enabled in the Option area.
After selecting an item, this area also displays the tools for formatting that item. The following table contains a brief description of the areas including an example:
| Area | Description | Example |
| Look & Feel | Visible change to the element | Font color |
| Options | Property of the element | Arrangement of the element |
| Animation | Animation of an element | Wobble on hover effect |
For example, to define the spacing between divs or rows, a Margin Top and Margin Bottom, specifying pixels, can be given to the respective element via Look & Feel. By displaying it in the center and previewing it in the browser, you can live to see exactly what the changes do.
Web applications with Responsive Design
The creation of prototypes with the software Bootstrap Studio is possible for everyone. Adding elements is realized by the simple function of drag & drop. Formatting turns out to be just as easy due to given tools. Learning programming languages is not required to use Bootstrap Studio. A few helpful tips and tricks are provided in the Bootstrap Documentation. By learning by doing more tricks can be discovered and combined. Use of Bootstrap Studio requires a license and a web browser to view the preview. Prototyping can be started by using a blank design or a template.
Those with HTML knowledge have a few more advantages when using Bootstrap Studio. Using the “HTML” -> “Attributes” section, formatting of individual elements can be done by adding classes. For the definition of own formattings or functions the area “Styles” can be used. Here, already created js or css files can be imported and adopted in Bootstrap Studio. After completion of a satisfactory prototype, the css styles created with Bootstrap Studio can also be used for subsequent programming.
Bootstrap Studio not only offers the possibility of creating prototypes for web applications in desktop format. In addition, attention is also paid here to the Responsive Design of websites and web applications. The elements can be defined with the respective formatting for the Responsive Design. Thus, in the web browser, the preview can be viewed for both desktop and mobile views.
By using Bootstrap Studio, the process of constant tuning is greatly simplified and protects both sides from unpleasant surprises. This and other tools are therefore the means of the hour for us to discuss the functionality and appearance of an application together with our customer in the concept phase.
Links
| Bootstrap Studio | https://bootstrapstudio.io/ |
| Bootstrap Dokumentation | https://getbootstrap.com/docs/4.3/getting-started/introduction/ |