Jason finished the UI for Amigo late last week, so once I got to a natural break within the code I was currently doing I decided it was time to start on the XHTML/CSS (jumping in and out of code too often isn’t productive, wait for a nautral break!) - I’m sure Ryan, Gill, and Jason can’t wait to see something that both works and looks the part, I know I can’t!
While the XHTML/CSS isn’t completed quite yet, it’s been more interesting then other projects I’ve worked on: this has been the first project where I’ve built the wireframes in XHTML before any design has been done. So rather then coding the XHTML from a blank slate I’ve been refactoring (as such), and so far I’ve noticed a few things:
- Early on we had something to look at. Yes it was rough, but it was in a browser - where it would end up, for everyone working on the project to see.
- Refactoring XHTML is very quick - while some pages needed more editing then others they were all done quickly.
- Refactoring CSS isn’t - removing redundant styles after the changes to the XHTML, checking all the browsers etc. isn’t as quick as refactoring XHTML!
- Any interaction questions you had about the UI will become much clearer once a version of it is working with the back end of the application.
If your in a similar position any time soon, and haven’t tried "XHTML wireframing", I’d recommend it, even if just to see if it works for you and/or your team. Personally I’ve not 100% made my mind up, I’d like to try it again on another project before I do, but so far it seems mainly positive.
Dave has pounded out the XHTML and minimal CSS for our wireframe. He did it in an impressive two days! It’s great to see it as actual HTML as it makes it more real. It also helped us see a couple of usability problems and inconsistencies.
All of this backs up the fact that it’s important to create something real as soon as possible, instead of staring at wireframes for too long.
I’ve made a list of about 30 changes that need to be made (all fairly minor stuff), so once Dave knocks those out, he can actually begin coding it!
Once we had come up with the idea, we wanted to get right into deciding how the app would work. We’re big fans of 37signals’ Getting Real process, which worked great on DropSend, our first app.
Gill and started sketching the user interface in my sketch book on a plane to NYC. It was funny because we were paranoid about people overhearing us, so we had to whisper. The above is a photo of our real sketches.
We started with the signup page and hammered out each page. Thankfully, the app was very simple (about 20 screens). We didn’t bother to sketch the admin that Carson Systems would see - just the customer user interface.
We didn’t go into any sort of detail - just the basics. Once we had the pages all sketched out, I refined them in PowerPoint. I know, it’s weird., but it works great for me. I find it quicker than Fireworks, Flash or Photoshop. You can quickly add pages and drawing boxes and writing text is super simple.
After I created the PowerPoint document, we re-visited it about 1 week later to see if we had forgotten anything. Gill went over it in detail and we changed a few things.
Now that we’ve got the wireframe all done, we’re going to have it build in unstyled XHTML to get a real feel of how it will work.