ch3_mokup

#Mocking Up the Application «Save a Child»

The time has come to start working on our Web application Save a Child that will supports donations to ill children. In this chapter we'll take care of the Web design and will create the first prototype of the Save a Child site.

Introducing Balsamic Mockups

First, we'll create a mockup (a.k.a. wireframes) - a set of images depicting various views of our Save a Child application. The images may contain comments in the form of callouts that briefly explain what should change in a view if a user will make a certain action, e.g. clicks on the button. You can also think of a UI of any application as a set of states and the user's action result in your application's transition from one state to the other. As nerds and mathematicians say "UI of your application is a finite state machine", which at any given point of time is in one of the finite number of states, for example, in the view state Donate Form.

Visualize yourself sitting in a cafeteria and drawing sketches of your Web site on a napkin. Well, we'll use an electronic napkin so to speak - an excellent prototyping tool called Balsamic Mockups. This is an easy to use program. It gives you a working area where you create a mockup of your future Web application by dragging and dropping the required UI components from the toolbar onto the image of the Web page (see Figure 3-1).

Figure 3-1. The working area of Balsamiq Mockups

When the prototype is done, it can be saved as an image and sent to the project owner. Another option is to export the Balsamiq project into XML, and if both the project owner and Web designer have Balsamiq installed, the can work on it in collaboration. For example, the designer exports the current states of the project, the owner imports it and makes corrections or comments, then exports it again and sends it back to the designer.

##The Project Owner Talks to a Web Designer At this stage a Web designer talks to the project owner discussing the required functionality and then creates the UI to be implemented by Web developers. The artifacts given to developers by the designer vary depending by the qualifications of the designer. This can be a set of images representing different states of the UI with little callouts explaining the navigation of the application. If the Web designer is familiar with HTML and CSS, you may get a working prototype in the form of HTML and CSS files, and this is exactly what we'll create by the end of this chapter.

This is what the project owner said to our designer, "The Save a Child Web site should allow people to make donations to the ill children. The users should be able to find these children by selecting an area on the map. The site should be integrated with a payment system, include a video player and display statistics about the donors and recipients. The site should include a simple chat room and have a simple integration with Twitter and Facebook. The mockup should include three versions of the UI supporting desktops, tablets, and smartphones."

The Web designer opened Balsamiq and started to work. She decided that the main window will consist of four areas laid out vertically:

1. A header with the logo and several navigation buttons
2. The main area with the Donate support plus the video player
3. The area with the Find Local Kid, statistics, and a chat room.
4. A footer with several house-holding links plus the icons for Twitter and FaceBook.

##The First Mockups

The first deliverable of our Web designer depicted two states of the UI: before and after clicking the button Donate Now. The Web designer suggested that on the button click the Video Player would turn into a small button revealing the donation form.

Figure 3-2. The main view before clicking Donate Now. Take 1.

Figure 3-3. The main view after cliking Donate Now. Take 1.

The project owner suggested that turning the video into a button may not be a the best solution. We shouldn't forget that the main goal of this application is collecting donation, so they decided to move the video player to the lower portion of the window. The next version of the mockup looks as shown in Figure 3-4 a nd 3-5. The latter shows different UI states should the user decide to log in.

Figure 3-4. The main view. Take 2.

Next comes authorization. The view states in this process are:

1. Not Logged On
2. The Login Form
3. Wrong ID/Password
4. Forgot Password
5. Successfully Logged On

The Web designer has to create a mockup for each of these states. The project owner will review them and can return them back with some comments. Figure 3-5 illustrates selected views from authorization. Due to some miscommunication the Web designer assumed that unless the user log on to the application, she won't be able to see Save a Child. This is clearly wrong as the process of making donations has to be as easy as possible, and forcing the donor to log on may result in abandoning Save a Child application by some people.

Figure 3-5. Selected authorization UI states

##From the Mockup to HTML Prototype

We are lucky - our Web designer knows HTML and CSS. In this section we'll turn the still mockups into the first HTML prototype, which will use only hard-coded data but the layout of the site will be done in CSS and we'll use HTML5 markup.

"In this book we assume that the users of our Save a Child site work with the latest versions of Web Browsers FireFox, Safari, Google Chrome and Internet Explorer. While in the real world Web developers may need to deal with finding workarounds to the unsupported CSS or HTML5 features in the old browsers, the modern IDE generate HTML5 boilerplate code that include large CSS files providing different solutions to older browsers."