WIF2010 préselection : souvenir d’une réalisation d’un site web en 24h

26 Fév 2010 Site web |

J’ai participé, il y a peu de temps aux présélections du WIF2010 (Webdisgn International Festival) . Le principe, réaliser par équipe, de une à trois personnes un site web en vingt quatre heures

Je vous propose de découvrir, pas à pas, la réalisation du projet de mon équipe, composée de Gabriel Uribe et moi même (Samuel Mandonnaud). La présélection étant en ligne, c’est chez moi que se déroule cette épopée.

14h Remise du sujet : Partager ses souvenirs

Bien installé, depuis 15min devant nos PCs respectifs, réception du sujet par Email à 13h59, d’après Google dont voici le contenu :

A travers une interface sensible, originale et poétique, proposer une application interactive permettant de partager ses souvenirs.

Pouvoir partager ses photos, vidéos, textes, émotions, découvertes, amours, colères, émerveillements… à vos amis et pourquoi pas à vos ennemis. Cet «outil» (site web, application web, site mobile, application mobile, service en ligne, objets communiquant…) devra être accessible en ligne.

On a décidé qu’à la réception du sujet, on ne se parle pas pendant 15min, le silence est d’or. Chacun rédige ses idées, afin de ne pas être influencé par l’autre, puis on confronte dans une joute verbale.

Gabriel a eu des idées sur l’affichage des souvenirs, tandis que moi de mon coté j’ai plus réfléchi sur le contexte. Nos idées étant complémentaire après 5 min de discutions la ligne directive est prête.

Concepts & Scénario

Dans un future proche, 40 ans, un inventaire a réalisé une machine permettant de soustraire, à un mort, ces souvenirs dans le but de réaliser un site web commémoratif, retraçant ça vie à travers ces souvenirs.

Ces donc cette technologie appliquée sur son créateur que l’on souhaite présenter, il est 14h30…

La premier étape a été de jouer les scénaristes et d’écrire la vie de ce personnage : qui il était ? qui était ses parents ? ses passions ? Le but est simplement de connaitre le sujet pour faciliter la suite.

Une fois le scénario fini nous avons choisis quatre périodes de ça vie et quatre émotions sur lesquelles on va travailler.

La joie : la famille

L’idée est de bosser le souvenir d’une sensation de joie mêlé avec le souvenir d’une sortie familiale. Cette page doit donc être agréable afin de retranscrire la joie, que se soit sur le choix du design sonore que dans l’image. Nous avons poussé la réflexion, en nous disant que dans un souvenir plaisant chaque détailles en amené d’autres.

C’est donc dans cette logique que Gabriel s’est lancé sur le graphisme, une couche de développement a permit de rendre le tout vivant.

Voir cette page sur la famille

L’imagination et la créativité : son travail

Notre personnage, Enzo Wowk se défini dans la seconde période de sa vie comme un hyperactif créatif. Cette page devait retranscrire le coté complexe et rapide de ses idées.

Gabriel a créé un graphisme épuré et a choisi une musique rythmée et motivante. De mon coté, j’ai réalisé une interface réactive à l’aide d’un balayage simple d’image, d’un fond réactif à la souris et d’une création d’éléments déclenchés par le mouvement de la souris.

Voir la page sur le travaille

La peur : une enfance difficile

La ligne directive de cette page est que l’émotion de la peur est paralysante. Se souvenir « vidéo » doit être assez flou et l’émotion doit être prenante pour le visiteur. Le choix s’est donc porté vers une double vidéo, la première, celle d‘un oeil accompagné d’un battement de cœur illustre l’émotion, la seconde celle du souvenir est plus complexe d’accès, l’utilisateur doit bouger en permanence la souris pour y accéder. Elle présente de vagues brides de souvenirs accompagnés d’une respiration prenante.

Voir la page sur la peur

Le zen : internement

Notre personnage passe quelques années de sa vie dans un asile, sa thérapie passe par une période de vide mais un vide zen qui permet une remise en question. Afin de répartire notre charge de travail (rappelons que le projet doit être bouclé en 24h) cette page est très légère, une page blanche avec un simple texte et une musique reposante.

Voir la page zen

L’interface : multilingue, swfadress et ergonomie.

L’interface devait être simple et épurée, les émotions doivent prédominées. Notre choix s’est donc naturellement penché vers une ligne de temps retraçant la vie d’Enzo, avec quelques informations complémentaires sur sa vie en plus des quatre pages.

Étant donné que le concours est organisé de façon internationale nous avons donc souhaité qu’il soit lisible en français et en anglais, avec une fonction maison, le site change les textes au clique sans recharger la page, le tout pioché dans une base de données xml.

Le dernier point qui nous tient à cœur est d’utiliser swfAdress afin que notre projet, malgré qu’il soit en flash, comporte des urls distinctes pour chaque page et supporte le retour natif navigateur.

Voir la page d’accueil du site

D’environ 15h à 10h, Gabriel a travaillé sur la création 3d et graphique avec quelques intégrations pour me gagner du temps pendant que je développe en AS3 toutes les pages.  Le tout, est ponctué de pause pour manger ou filmer des séquences, comme vers 3h du matin avec une course dans mon garage pour la séquence de la peur. De 10 à 12h, nous  nous sommes concentrés sur les choix sonores (musique, montage, développement as3 …) ainsi que sur la rédaction des textes. De 12h à 14h, nous avons peaufiné jusqu’à la dernière minute : correction orthographique, correction de bug ou de faute d’intention (ou de fatigue) … Ces deux dernières heures nous ont réveillé après une nuit sans fermer l’œil pour gabriel et avec une sieste de 20 minutes pour moi.

Le jury se réuni courant mars pour choisir parmi l’ensemble des créations (soixantaine) les équipes qui participeront au concours final. A suivre donc …

Plus d’informations :

1 Comment

  • Gabriel dit :

    Pleins de superbes souvenirs retracés ici !
    Un travail de 24h vraiment, intense, un sujet intéressant, un binôme déchainer et c’est parti, l’aventure était vraiment palpitante, et j’espère remettre ça bientôt ! On croise les doigts
    Merci Sam pour ces souvenirs partagés !
    🙂

Commenter

XHTML: You can use these tags:' <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Copyright © 2017 Le pret a surfer All rights reserved.
Desk Mess Mirrored v1.4.4.1 theme from BuyNowShop.com.