Edition + mobile

Niveau : cours 2 et 3DVG 2021-2022 - Uli Meisenheimer & Nicolas Tilly

Le travail de notre cours portera sur la mise en page d’une édition papier, plus spécifiquement d’un « catalogue d’objets » et la transposition de sa structure et de son design graphique sur mobile.

Le travail de cette année servira à inventer des similitudes et des différences ou oppositions entre la manipulation d’un objet papier et les gestes à la surface de l’écran mobile, donc la comparaison de deux manières d’organisation d’information différentes. En partant d’un corpus d’images de votre choix (min. 30 images) et de textes accompagnants, vous allez réfléchir aux différentes grandes parties de votre objet papier (sommaire, chapitres, liste de produits, images, …) ainsi qu’aux divers niveaux d’information typographique (titres, descriptions, noms, codes produit, numéros, légendes,…) afin de les mettre en page.

Pour cette partie du projet vous allez travaillez des questions de choix et hiérarchies typographiques, l’utilisation de la couleur, l’emplacement et l’organisation des éléments de votre catalogue en double pages. Afin de traduire la « mise en page papier » sur mobile, vous allez apprendre à utiliser les langages du Web et divers outils. Nos discussions / réflexions concerneront notamment la question du marquage du début et de la fin, l’orientation de la lecture, la pagination, le déroulé, le rythme, les diverses couches de lecture, le zoom et les interactions tactiles liées aux différents éléments de composition.


2021 - 2022

Prototypes présentant des interactions entre des maquettes papier et l’écran mobile. L’idée est de voir comment transposer des « mouvements » de consultation entre le livre et l’écran tactile : touner la page, plier/déplier, glisser, superposer…

Skeuomorphisme

Tourner la page - consulter une édition papier/écran

Lien vers le code

Plier et déplier un bandeau coloré

Lien vers le code


2020 - 2021

Voici l’ensemble des exercices et modèles conçus avec les languages du Web : html, css et js. Ceux-ci présentent un concept central en web design : le responsive, ou la façon d’adapter les contenus et la mise en page au format du mobile. Ces exemples sont aussi des démonstrations pour la conception d’interactions tactiles.

Hello (responsive web design)

Lien vers le code

Lien entre deux pages et fondu sur les images au chargement de la page

Lien vers le code

Une listecomportantdes vignettes et du texte

Lien vers le code

Zoomer dans une image et la déplacer

Lien vers le code

Swipe - faire défiler des images en balayant l’écran

Lien vers le code

Toucher un élément pour l’effacer

Lien vers le code

Scroller dans une page avec des animations

Lien vers le code

Un bandeau d’images qui défile en continu

Lien vers le code