UI design, check. XHTML, check. CSS, check.
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.
I have a couple of questions about the XHTML wireframes: are they completely static, or is there a degree of fake interaction that lets you navigate from screen to screen? Also, are there separate wireframes that model the blank state, the populated state and error states?
Comment by John Topley — May 14, 2006 @ 10:00 am
They are static, but there is a very small amount of interactivity that allows you to navigate through the different slides - however it is minimal.
Comment by David Stone — May 14, 2006 @ 1:31 pm
Hi David,
I’m personally a big fan of making a full “fake” prototype before I get to the coding. I define prototyping as creating mock-ups of every screen of the application.
In my experience it helps me (or my client) flesh out the idea and realize the scope before I have to design and write the real application.
You may not get every detail right. I always reserve the right to make UI changes later. But having something to look at and play with before you’ve invested a lot of technical work can make the technical work easier.
Good luck with the app!
Comment by Michael Sica — May 14, 2006 @ 11:33 pm
Just to let you know - once we get nearer to launching the app we’ll let you see both the wireframe powerpoint, and the XHTML wireframe.
Comment by Ryan Carson — May 16, 2006 @ 8:39 am
What happened to your wireframe on paper? Is this the XHTML version of your sketches last February?
Comment by Alvin — August 9, 2006 @ 6:07 am
Hey, you promised to give away both the XHTML wireframe and powerpoint wireframe once you launch, but its not there!
Any chance its still given away?
Comment by Ali — October 8, 2006 @ 8:48 pm