Graphisme – pistes pour le site web

Le chantier du graphisme est complexe – il s’agit de proposer des interfaces claires, intuitives et ayant un même air de famille entre le WEphone et le site web.
De la même manière que pour le WEphone, nous n’aurons pas le temps ni les moyens d’aboutir à une version évoluée et complète du site web d’ici la fin de la phase 2, donc les efforts actuels sont portés sur le fait de déterminer les intentions, les idées et les fonctionnalités que nous aimerions voir sur le site web final.

Dans les grandes lignes, les intentions et envies sont les suivantes:
– le site doit être vivant et modulable, il doit rendre compte à sa manière des enjeux contenus dans le projet (rapport à la mémoire; réapropriation d’un territoire et de médias; auteur collectif; forme de l’inachevé et de l’ouverture, etc). On doit également sentir qu’il s’agit de jouer avec les dimensions spatiales et temporelles: espace réel / espace digital; potentialités d’un espace (réel ou digital); temps multiples (le passé dans le temps réel; le futur à l’horizon du présent; le temps du parcours et le temps du film, etc)
– la place du spectateur: il n’est pas seulement passif mais peut aussi devenir actif – et le but du site est de l’inviter à le devenir. Il s’agit donc d’imaginer plusieurs stratégies qui l’y amènent (marcher son film; commenter les films des autres; éditer des modules etc). Le site comme moteur d’enregistrement de son parcours à travers les liens qui y sont possibles… (d’où l’idée du bouton d’enregistrement qui s’allume sur le logo, cf plus bas)
– degré de personnalisation: découlant de ce qui est développé ci dessus, inviter le visiteur du site d’utiliser celui-ci en combinant les modules et les filtres de recherches selon ses envies. Le site est, d’une certaine manière, un gestionnaire de base de données avec lequel on peut accéder et afficher les informations qui nous intéressent…
– et bien sûr, il faut que le contenu éditorial soit le plus complet et “excitant” possible: il s’agit de parler autant à un public plus large (habitants, touristes d’une ville) qu’à des spécialistes habitués à ce genre d’aventures.

Ce qui est posé actuellement est surtout une grille de base qui est très modulaire; la plupart du temps on a une zone centrale qui peut présenter soit du contenu éditorial soit du contenu “vivant” (les films etc), entourée par une zone verticale et horizontale qui donne des contenus supplémentaires selon le contexte (news; commentaires; films; parcours; modules).

Premier exemple: la homepage.

siteweb_home_mai09

A savoir:
– la zone de menu est encore en évolution; il s’agit de rester sobre, mais actuellement c’est trop neutre et standard (donner plus de “profondeur”, de volume, de hiérarchie).
– En dessous du logo, il y aurait une zone de texte défilant avec un lot de phrases qui décrivent le projet (style “un lieu de rencontre entre l’espace urbain et l’espace digital”; “un dispositif qui permet de générer un film en marchant” etc);
– de la même manière, le texte sous “Le dispositif” change (il y a 3-4 types de textes différents);
– un film, sous forme d’une capture d’écran, est promu en home et donne un exemple avec les commentaires et statistiques sur le résultat escompté;
– on peut filtrer les films affichés via une liste déroulante (actuellement, trié selon le nombre de vues et par date) directement dans l’entête;
– Edit box: c’est l’endroit où on trouvera les fonctionnalités d’édition (notre boite à outils). Elle n’est opérationnelle que si on est loggué (ce qui est possible de faire en tout temps). On pourra y changer / éditer les commentaires que l’on a fait sur les films; si l’on a marché un film, on peut via cette interface ajouter des intertitres au film (en fonction des règles édictées), on peut y concevoir des modules personnalisés (fonction encore très embryonnaire, mais qui permet de concevoir des boites qui présentent de manière imagée des statistiques, par exemple une représentation de la vitesse en rapport avec le nombre de médias, ou les thématiques par rapport aux sujets etc); on peut indiquer les préférences de tri, de recherche etc
Questions ouvertes:
– première ligne de menus: idéalement ne garder que le login et mettre le reste ailleurs…
– permettre de hiérarchiser (via des couleurs, formes ou séparations) les niveaux de contenus (cf ci dessous)

Deuxième exemple: la page du visionnement des films.

siteweb_movie_mai09

Il y a plusieurs idées ici, qui sont assez difficiles de rendre compte sur une image statique:
– le logo prend des couleurs différentes en fonction de la navigation. Il y a deux pistes (encore toutes fraîches, à vérifier et tester):
1) couleurs qui donnent une indication sur le niveau ou le type d’information. Le rond en magenta “s’allume” si on est logué, si l’on enregistre une action (texte, module etc); le premier / détermine les informations éditoriale (textes, extraits image etc) et le double // détermine les “informations collectives” (les films, parcours, commentaires), ce qui est vivant de manière indépendante…
2) couleurs qui donnent l’information du niveau de navigation. Il y a 3 niveaux: la home; le premier niveau de menu; le deuxième niveau de menus.
– il reste également à voir comment on “éteind” notre salle de cinéma (la page qui accueille le duo trajet / film), de manière à pouvoir se concentrer sur l’essentiel, tout en ayant la possibilité d’y voir également quelques statistiques (selon une présentation que l’on peut personnaliser)…

Encore pas mal de travail…!

UF, 22.05.2009

Share

Comments are closed.