Interactive design plus @trangvitvinvit - Tumblr Blog

pages are linking and interactions are finally working.

possible improvements: elements of sound and gradients could be added for the build up experience at the end. maybe more work on the collage at last.

but the code finally didn’t break.

fucking namaste.

Final project description

This visualization of Georges Perec’s “Species of Spaces and Other Pieces” explores the screen as a space for a different reading experiment.

The act of reading on the screen is often described by one word: skimming. Since the screen is much different from the physical book, designing for the screen has to be different. Instead of mimicking the look and borrowing the metaphors of the physical book (such as "page"...), designers can (and should) think of ways to adopt the screen and design for it.

With that said, I wonder if I could create a reading experience that uses elements native to the screen. Instead of providing the readers with an abundance of text and the freedom to skim through, I only provide a hint of the text. The only way for the audience to read through is to interact with what's on the screen. Interactions with the screens are used as a catalyst to force attention. Through familiar screen interactions such as clicking and hovering, the viewer experience screen changes in color, clearness, dimension and position.

The text chosen for the project is an excerpt from Georges Perec's "Species of Space and Other a Pieces". It is a poetic prose with picturesque description of what Perec defined as "the page" space, going from the literal page in the notebook to the presence of the page as any space surrounding us.

I chose this text firstly because it is also about the concept of "the page" that I mention with the reading environment (physical book page vs. digital screen page). Also, it is a beautifully written literary text, which has a poetic quality that can grab the readers’ attention.

Even though the forced engagement factor might bring about frustration, it is a proposal for an alternative design solution on screen. The audience here is thus mainly designers, who will guide the reading experience through future designs.

A presentation created with Slides.

Presentation on Interactive Irreality, linked

static prototype changes (hopefully last time):

• font changed to Courier for the monospace / digital look

• added original scan of pages from original book

• repeated page folds

• OKShadow plugin color changed to blue (ink color)

second round of coding. instead of using page ankle, I separated it into 11 pages linking together.

temporary solution for media queries: bootstrap grids.

next round of static prototype. changing the entry point of the website since the previous is sort of dry. adding some shadow interaction and color change

First prototype. I grouped the lines and their text lines into the same div. So here’s 25 div’s that function exactly the same.

Also, the text is now a png since I’m still trying to figure out how to tilt a paragraph.

new iteration of static prototype - starting with ambiguity. forced interaction using javascript’s simple rule ‘checkShowing’

Change of text - the paper propaganda was rather dry. Perec’s text is more engaging and poetic. Concept still remains the same: using interaction to force concentration

next iteration of project

Initial plan of website appearance on paper vs. actual coding with html and css. Why don’t the borders work?

Process plan - or first time trying to code something. Here’s the screenshot of the coded plan, in a very cheesy teal and boring typefaces

Discover the world with Google Maps. Experience Street View, 3D Mapping, turn-by-turn directions, indoor maps and more across your devices.

whether the “book” is captured in a physical space (the page) or a virtual space (the screen), it is the mater of utilizing the SPACE to transcribe the content. omfg why didn’t I read Georges Perec earlier.

Elektrobilioteka project, merging the borders between the digital and physical interaction of a book

Website reviewing interactive e-books

Interactive book video by Mike Matas - Al Gore's book on the iPad

Trending Blogs

Recently Viewed Blogs

Interactive design plus