{"id":837,"date":"2006-11-14T07:40:39","date_gmt":"2006-11-14T07:40:39","guid":{"rendered":"\/ifbookblog\/?p=837"},"modified":"2006-11-14T07:40:39","modified_gmt":"2006-11-14T07:40:39","slug":"itin_place_2007_redux_design_j","status":"publish","type":"post","link":"https:\/\/futureofthebook.org\/blog\/2006\/11\/14\/itin_place_2007_redux_design_j\/","title":{"rendered":"ITIN place | 2007 redux: design journal, parts 1 & 2"},"content":{"rendered":"

ITIN place — May 2006 archives<\/a> (left two columns with live links):<\/strong><\/p>\n\n

<\/embed><\/object><\/p>\n\n

[1] SUMMER 2006<\/strong>
\nAt the beginning of the summer, Ben Vershbow, Alex Itin, and I began to discuss a redesign of <\/em>IT IN place<\/a>‘s archives. Itin blogs prolifically, his posts rich with media: scans of paintings, animated .gifs, Vimeo linked video collages. As a result, at present, his blog archive is enormous, slow loading, and unweildy. The archive requires better display and search capabilities—a map— to foreground the sheer volume of Itin’s work, rather than bury it. Below is a series of exchanges, both visual and conversational, following the redesign of <\/em>IT IN place‘s archives…<\/em><\/p>\n


\nAlex:<\/strong> I’ve more or less figured out an idea of how to maybe make it work… I want to show the sense of time and the sense of connectivity of the posts. I’ve always been paying attention to relations of color and shape on the vertical axis… I’m hoping and wondering if something cool might be seen on the horizontal too…. …using scale might be interesting and helpful (if it’s not to complex to do)… so that you see a tiny map of the whole thing and then you can zoom in…. Kind of like Eames “Powers of Ten”<\/a>…. but the original thumbnail variation might be easier to make.
\n

\"northmore-itin1.jpg\"<\/center>
\n
Alex’s first mockup<\/em><\/center>
\nSally:<\/strong> I think the current blog as a large strip and the archive as streams of film to one side would work… We can use size to mark the most recent post, but we could also use other design choices as well (say highlighting or animating, playing with transparency, etc.)
\nAlex:<\/strong> At this point I think we’re more or less talking about a sort of map, or key page to open up the blog archive to easy spelunking without huge load times. It did seem to me that it would be interesting to have these “bands of abstract color” (like a stan brakhage strip of film<\/a>) and then you could bring them “closer” to the eye an reveal a thumbnail-like image … so that one could search for a favorite entry, or search by a more graphic abstract randomness. Maybe the feature should be sexy enough to encourage play?
\nSally:<\/strong> We could start with something relatively static like you suggested: the lengths of film and the thumbnails (as links to indv. posts.)
\nThen, we could juice it up. Some ideas:
\n– We could animate the ribbons so that the visitor could scroll up\/down the length of the ribbon either with a scrollbar-like object or by clicking and dragging the ribbon itself…
\n– We could add a magnifying function that might magnify frame by frame (post by post) on mouse rollover.
\n– We could mess with magnification to give a sense of zooming in and out on posts. This is, of course, running wild with your first design idea.
\nAlex:<\/strong> sort of like the osx animated side menu?
\n
\"northmore-itin2.jpg\"<\/center>
\n
My response<\/em><\/center>
\nBen:<\/strong> What is the relationship between all this meta-film strip\/Stan Brakhage goodness and the actual blog ( i.e. the week or so of latest material, as one accesses it now?) Are these in separate places or are they somehow juxtaposed?
\nAlex:<\/strong> A good question and one that has been puzzling me… I suppose the first notion is that at the bottom of the page you have the “continued” button and that would call up this “menu” page… as a way of browsing the archive without getting stuck in lengthy loads… However, it might also be interesting to come up with a way of having the main blog as a large strip and the archive as sort of streams of film to one side… this would be a different looking blog, but maybe it’s time for a rethink.
\nSally:<\/strong> On a tech note: I’m entering from an XML\/Flash background, so at this point I imagine organizing the posts on the back end of the site and using Flash & XML to visually map. I’m not up on blogging technology so by default, I envision this xml driven Flash site. At this point, I’m unsure of how to fold in the dynamic (blog) aspects of IT IN: user comments, relative ease for Alex to regularly post, etc.<\/p>\n\n

[2] SEPTEMBER<\/strong>
\nExperimenting with interactive elements. I began to manipulate a month of Alex’s blog, May 2006. As he suspected, the bird’s eye view of a month looks fantastic. Presenting a map that one can pull closer or push away works, now just to sort out what the map should look like. Alex directed me to images of a show he had in 2003<\/a>, his paintings tiled on one wall. If we think of Alex’s blog as a curated space, reading the present form (verticle, with scrolling) is tantamount to standing nose up against the gallery wall. How should we curate virtual space—as though it were physical space? Should we allow the reader to ‘step’ back, virtually? What should that look like?<\/em>
\n

\"arc01.jpg\"<\/center>
\n
Real gallery and Virtual gallery: ITIN space, SoHo, NYC 2002 – 2003 and test02.html<\/em><\/center>
\n
\"northmore-itin3.jpg\"<\/center>
\nSally:<\/strong> Hi Alex, When we met up a couple weeks ago, we talked about making a mock up of a few months to see how it looked. Here’s a link to a few static jpgs online. Your entries look great en masse!!! I’m pretty excited to see what could happen when we add a little interactivity to it, tool around more. I tried to put up several different versions of the same thing–all attempting what we talked about.
\nAlex:<\/strong> I…think…it’s…going…to…look…great!
\nSally:<\/strong> I thought i’d get to work this weekend animating the bits we talked about making interactive, and see what happens. How’s that sound?
\nAlex:<\/strong> I did sort of think that it would be cool that by opening one entry you’d open the one above it and below it…. but that sound kind of tricky…
\nSally:<\/strong> It’s late, and I’ve just dropped a scroll bar into the example… I am starting to jot down some questions… So far, we have the blog entries arranged chronologically and I inserted them in the flash file by date. But, there are sometimes several entries per date. Would you want each clickable item to be an entry, or a date? I thought date would be easier… but then I realized each entry’s url is not uniform, but the title of the entry (i had thought it’d be the date… hmmm).
\nAlex:<\/strong> I would go by each titled entry (sometimes a lot of disparate things will all come together on one day to publish, but they’re still discreet “chapters”… Does that make sense?
\nSally:<\/strong> Yep, that makes sense! Thanks. Still hammering away. I got sidetracked with a few ideas. Meantime, an experiment along the way:<\/p>\n\n

<< panel.onPress = function(){ this.startDrag();>> (give it a drag!)<\/strong>
\n<\/embed><\/object><\/p>\n\n

Alex:<\/strong> that’s pretty cool! Different from what I thought… being about to drag it around like that…. Definitely going to make people want to play around with the archive.
\nSarah:<\/strong> scrolls are in!
\nAlex:<\/strong> That seems to work pretty great.
\nSally:<\/strong> Neat, this was good to hear! I’ll keep on tinkering with the layout.<\/p>\n\n

<< myScroll = function () { >><\/strong>
\n

<\/embed><\/object><\/center><\/p>\n\n

Ben:<\/strong> We were all just looking over the mockups and all agreed that some combination of 2 and 5 seems ideal. In 2, we like the fact that there’s no scrolling required (though I do love the little Itin-esque scroll bar you devised). In 5, we like that there’s more space between columns, and obviously, that there’s the zooming action when you mouse over. Seems that if 5 was representing a single month, you could fit everything into a fixed frame, sans scrolling. We could then have one of these pages per month, with the nice little backwards\/forwards navigation you sketched out in the first mockup.
\nSally:<\/strong> Hey Alex, I linked Ben to the mockups I’ve been posting. He preferred elements of test02 and test05, which led me to 06 (at the top of this post<\/em>)–imagining what one month per page would look like. Thoughts? There’s no fancy coding here, just screen shots of your entries as before. The zooming function I’ve been using isn’t working best, as you can see the resolution isn’t good and it’s a bit irritating to manipulate. So, I’m learning a new one that I hope will work better.<\/p>\n\n

<< panel.onRollOver = function() { _parent.zoom(x2);} >><\/strong>
\n

<\/embed><\/object><\/center><\/p>\n\n

Stay tuned: parts 3 & 4 coming soon!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

ITIN place — May 2006 archives (left two columns with live links): [1] SUMMER 2006 At the beginning of the summer, Ben Vershbow, Alex Itin, and I began to discuss a redesign of IT IN place‘s archives. Itin blogs prolifically, his posts rich with media: scans of paintings, animated .gifs, Vimeo linked video collages. As […]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[84,92,170,467,1238,1968],"tags":[2132],"class_list":["post-837","post","type-post","status-publish","format-standard","hentry","category-archive","category-art","category-blogosphere","category-design","category-multimedia","category-visualization","tag-art-multimedia-blogosphere-archive-visualization-design"],"_links":{"self":[{"href":"https:\/\/futureofthebook.org\/blog\/wp-json\/wp\/v2\/posts\/837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/futureofthebook.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/futureofthebook.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/futureofthebook.org\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/futureofthebook.org\/blog\/wp-json\/wp\/v2\/comments?post=837"}],"version-history":[{"count":0,"href":"https:\/\/futureofthebook.org\/blog\/wp-json\/wp\/v2\/posts\/837\/revisions"}],"wp:attachment":[{"href":"https:\/\/futureofthebook.org\/blog\/wp-json\/wp\/v2\/media?parent=837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/futureofthebook.org\/blog\/wp-json\/wp\/v2\/categories?post=837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/futureofthebook.org\/blog\/wp-json\/wp\/v2\/tags?post=837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}