Wireframing

The next stage in my Creative Pact project - I decided to do the thing properly this time. In the past when I've done designs for this site (note that in spite of the fact that I've never got anything online and indeed still haven't bought the domain name, I've been designing it on and off for the past 3 years) I've been continually sidelined by the simple matter of deciding what to put on the page - get halfway through a design, then think "oh, maybe I should include this content too" and then abandon ship because it all gets too confusing. So this time around, and with Djeli having bought the OmniGraffle wireframing app for the iPad, I decided to do some proper (if rough and not very advanced) wireframes, so I'd be thinking more about what I wanted on the page rather than what colour it should be. So this evening I imported a few (really too few, but I had a few difficulties) web-wireframing stencils into OmniGraffle and had a stab at doing a wireframe.

 

And this is the result. The requirements of the site aren't that complex and really the most complex bit is what to show in the nav and how to display it, but I think a sort of 2-layer accordion will be the best way to deal with that. This page is a detail page for the music section - the idea is that the main music page will be mostly a list of works, each of which will click through to a page like this, showing score cover, a player to listen to a snippet of the score, a link to download the PDF (this will probably go to Lulu.com so I can track downloads and get an idea of how appealing this is to people) and some notes on the work.

 

(and no, that's not what the page content will actually say :-) )

Done