laboratory

[ , , , , , ]
Project focus
Prototyping the
user experience
Learn about
Rapid application development
Posted in laboratory as , , , , ,
Date: May 25, 2011
2 comments

From Prototype to Design

This series follows the development of a web/mobile application from beginning to final design. Started May 2011.

Series: [ 1 2 ]

LegendList: Rapid Prototyping a Web and Mobile Web Application with Blueprint and jQuery (1)

Early stage prototypes of a travel site

I love prototyping. I love thinking through user experiences and flows, making sure things are working right before they’re looking right. It’s confidence building and makes for a better product in the end.

I thought it might be fun to record the development of LegendList from the earliest stages, so we’re starting just a little past the sketch pad. LegendList is a soon-to-be-cool, activity-centric travel site.

To get to the final product faster, we’re prototyping the web and mobile web versions simultaneously and using actual code. I’m using Blueprint for the basic CSS framework, jQuery and the jQuery’s UI library for JavaScript and custom form element needs, plus as much HTML5 and CSS3 as I can justify.

LegendList prototype 001

First pass was pretty generic and felt a bit too much like a prototype, so I added a few labels, spread out the fields, and some CSS3 spice (shadows, rounded corners). I also began to suspect that the drop-down lists for the autocompletes could turn out to be unreasonably long.

LegendList prototype 002

At this point I’m happier with the layout and certain that the drop-down lists would be too long to be helpful. After a little thought and experimentation, I decided to try creating a main navigation bar (which I wasn’t sure if we wanted yet on our home page) with a drop-down menu. This seemed more right.

LegendList prototype 004

Now we’re talking. Best of both worlds without those worlds colliding together.

At this point I feel the basics of the landing/search page are solid enough. Next I’d like to tackle a mobile home page, followed by search results, an activity page, and a bit of code cleanup.

Prototype

Related Posts:

2

This entry was posted on Wednesday, May 25th, 2011 at 12:47 pm and is filed under laboratory . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “LegendList: Rapid Prototyping a Web and Mobile Web Application with Blueprint and jQuery (1)”

  1. 1
    Prototyping is Like Online Dating… | Hanami Design | Reply
    June 4, 2011 at 9:55 am

    [...] on Prototyping I’m a big fan of prototyping in HTML (like with LegendList) because uses real-world situations and gets us working towards important code early. You [...]

  2. 2
    Review: App Sketcher – HTML/jQuery Prototype Creation Tool | Hanami Design | Reply
    July 25, 2011 at 5:52 am

    [...] features is the ability to export HTML and jQuery and since I’m such a big fan of creating prototypes with working code, how could I [...]

Leave a Reply