These are the different prototype ideas for my project. I'm haven't made a decision about which one I want to do yet.
Idea 1
 |
| Sketch Prototype 1 |
I really like this idea because its simple yet effective. I think its doable in the timescale that I have realistically. I could do further reading about scrapbook style layouts, could include an illustrative such as handwritten text annotations, or a diary/journal look?
Also a research journal about scrapbooks: http://www.imageandnarrative.be/index.php/imagenarrative/article/view/158 (A visual essay)
Also useful plugins to aid the design of this: (modify css3 styles to make it my own)
- http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/ (50 amazing plugins, notably: Page scrolling and parallex section, sticky fixes elements while the rest is scrolling)
- http://buildinternet.com/2011/03/mosaic-sliding-boxes-and-captions-jquery-plugin/
- http://stackoverflow.com/questions/10930783/mosaic-grid-gallery-with-dynamic-sized-images
- "masonry.js"
Or for more plugins or options:
 |
| Good reference materials |
Idea 2
 |
| Sketch Prototype 2 |
Also a viable design. I like this idea in the visual sense but I'l have to think about how the fonts will be positioned code-wise. I imagine a Lightbox will open up the information boxes. A good source will be researching typography.
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/ (50 amazing plugins, notably: text effects, sticky fixes elements while the rest is scrolling)
Rejected Idea 3
 |
| Rejected Prototype 3 |
Probably the most radical and impractical thing to produce on screen. On paper it looks good, but in practicality, not so much.
Idea 4
 |
| Sketch Prototype 4 |
A very intresting concept, if this works, that would be really good. Could be quite complex and time consuming to do. Will have to see if there are any good integrated plugin support for this. A good example is http://2ammedia.co.uk/
Idea 5
 |
| Sketch Prototype 5 |
Similar to scrapbook idea but more creative use of shape and layout. A very good source would be how to make one page scrolling websites.
Next Steps!!
It may be a good idea to create a more final prototype on Photoshop to get a better visualisation of what you're going to make. Gather images (decide on how many productions you're going to have) and structure first, and then make a mockup.
