Octobre 2014 - by Tilap

Tripbook POC

A tripbook UI proof of concept

This webpage is a proof of concept of an interactive UI mixing magazine content style and "relative side content". The initial need is to build a tripbook.

The needs

First of all, I wanted to tell a story: the one I've lived during my travel. But a travel always comes with plenty of stuff: pictures, map, words, timeline... So, building the UI often lead to a mess...
I've not found a real bright and good solution for the timline, but I've many ways in my mind and will test them soon. But here is a test of "dual interactiv content".

Relative content

The relative content (map, big picture) is in the side panel on desktop.

The problem with 2 panels: the interaction between them. To not flash the brain and eyes of the user, I've decided to limit the interactions.

  • When scrolling the main content, the side content is update only when changing big section. It's avoid to flash 5 times a second.
  • Any other update of the side content required explicit user request (click on a button/link, ...).

The responsive problem has been quickly solved by simply removing the side content.

Map sample

For all places put in content, a pin is drawn on the map. When focusing a content section by scrolling, the map focus on all its places.

For example here, here are some famous places I visited in Barcelone: I went to the "Guel parc", I've visited the awesome Sagrada Familia and walked during a sunny afternoon in Gràcia.

La Rambla, a place put in the title

And to end, another secret place that will be on the map.

Note: I haven't design the map yet - neither popup nor the map itself, it's a hard task I'll work later...

UI elements

Below are the basic available media elements. And I've put the place I live to show how map pan when changing section.

Carousel

A basic carousel, working on touch devices, with a shadow on the sides to show the user there are other contents. Clicking an image open a modal.

Images

Big image with a caption

Side paragraph image

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

Video (vimeo)

Typography

Below the base typography for the "magazine" page content.

A first level title

A second level title

A third level title

A fourth level title

A fifth level title

Here is some bold text, and here is an italic one. There is basic links too. And below, a "slipsum" text - ie a "Samuel L. Jackson" quote from Pulp Fiction movie. For he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.

Ordered and unordered lists

  • A list with a first item
  • A second item that is a bit longer for example, not a bit in fact, longer;
  • Another item
    • Sub item
    • Another sub item
    • One more sub item
  • A last item
  1. A list with a first item
  2. A second item that is a bit longer for example;
    1. Sub item
    2. Another sub item
    3. One more sub item
  3. Another item
  4. A last item

A button link

A call to action link

Un adulte créatif est un enfant qui a survécu — Ursula K. Le Guin

Give me your feedback

You're welcom to let any idea, feedback, comment about that poc, or contact me directly on twitter