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 recepients. 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.''* 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 clicking 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 and 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 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.”
Adding Styles With CSS
-We’ve been using some CSS in short code samples from Chapter 2, and now -let’s apply styles to make Save a Child look as in the mockup.We’ve been -using some CSS in short code samples from Chapter 2, and now let’s apply -styles to make Save a Child look as in the mockup.
-