Designing the Look for the Applications

Though the bulk of this book contains a lot of code and technology, we can't overlook the fact that the pages have to be well-designed, functional, and usable. Not only that, they have to meet the needs of the coder . We'll let Chris take over and reinforce this important point:

One of the best parts about working on this second book is that it has given Jordan and I a chance to improveand understandhow each of us works. The first time around, we didn't have a "working relationship," and it took some time to understand what an artist needs and what a programmer needs. I tried to draw on that experience and knowledge as I was sitting down and thinking about the designs of the various rooms that were going to be "dynamically driven" for the Oakbridge Community Center web site. As I go through the design process of the three rooms below, I will point out why that previous knowledge was so important and helpful.

For the booking room (see Figure 10.2), I started off by viewing that section as an "e-commerce-type page" and went from there.

Figure 10.2. The original sketch for the booking facility reflects Chris' design objective.

The chat room and the tour guides presented unique challenges, as I have never had an opportunity (or reason) to create such facilities in the past. I immediately decided that I would try to keep things as simple as they possibly could be for these two sections. For the chat room, I wasn't as concerned with how it looked as much as how it functioned. I specifically wanted to stay with a simple layout by using lots of squares and no rounded corners or borders.

Jord and I learned how difficult it is to put a shopping cart together that utilizes a layout with rounded corners, so those went out the window. Plus, throughout this whole process, I was also trying to make this layout easy to re-create through the use of as much CSS as possible. Finally, because the OCC masthead is brightly colored and, to an extent, visually complicated, I didn't want a situation where the chat room was so colorful and decorative that it competed with the OCC masthead. Therefore, I tried to use a lot of negative space to keep the chat room " open " and "spacious," as you can see in my sketch in Figure 10.3.

Figure 10.3. "Open" and "spacious" drove the initial design of the chat room.

After the chat room was finished, I knew I could draw on its theme of simplicity to create the tour room. You'll notice that both sections have a "sign up" and "password" page. I'm not sure if this is necessaryJord would be the judge of thatbut it seemed logical to me that one would first have to sign up before using these features of the site. This is one cool aspect about working with a programmer. Because I'm not wholly intimate with databases, I'm not sure how the final product will turn out. Jord may take my idea(s), look at them, and think of an entirely better (and cooler ) way to get these pages to work than what I have envisioned here. But this is all a part of working with a team as opposed to just working by yourself. Ideas can come from anywhere .

For example, I thought it would be interesting to have a QuickTime movie play whenever someone clicked on a particular section of the Oakbridge tour or possibly have a Flash streaming video file start playing. Also, in all our planning, we all seemed to overlook what happens after someone comes to the tour site. Again, it seemed logical that after viewing one of these interactive tours , wouldn't people want to try to book that particular facility (because we HAVE a booking section)? So I threw in the "Yes, I would" and the "No, I would not" buttons as part of the design shown in Figure 10.4.

Figure 10.4. When thinking about the design, Chris wondered what happens after the person completes the tour. The "Yes" button was his answer.

Still, even though I thought the first design was suitable for our purposes, I wanted to give Jord another possibility to draw from. What if people didn't want to wait for all those photographs to download (although they're extremely small)? What if we could make a text-based version of my first design? So I went about creating a page where someone clicks on a text link to the left and the streaming or QuickTime movie appears with the capability to book or not to book. Again, it was going to be interesting to see how Jord would decide to incorporate my ideas.

For the booking room, I knew Jord had previously designed an all-CSS calendar/planner, so I decided to see if we could manipulate that into an interactive booking facility. My plans are that someone selects a particular part of the OCC facility by clicking a radio button on the left. Immediately, when they do, a photo of their selection appears below the list (in this case, the ice skating rink), and then on the right, a week-long calendar pops up, displaying all the times for the ice rink and which hours the ice rink is booked.

This is the fun (and easy part) of creating web sites. You're only limited by what your imagination can conjure up. But the hard part comes into play when it's time to take all that imagination and creativity, throw it all together, and actually make it work! Fortunately, that's what programmers do best.