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…
Tourner la page - consulter une édition papier/écran
Plier et déplier un bandeau coloré
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 entre deux pages et fondu sur les images au chargement de la page
Une listecomportantdes vignettes et du texte
Zoomer dans une image et la déplacer
Swipe - faire défiler des images en balayant l’écran
Toucher un élément pour l’effacer
Scroller dans une page avec des animations
Un bandeau d’images qui défile en continu
