Salut !

Je suis Robin Roland...
... Mais je suis aussi designer d'interfaces numériques, designer Web, rédacteur Web et graphiste !

Ce site est mon portfolio ; vous y retrouverez mes réalisations, ainsi que mon CV et mes informations de contact.

RAPPEL

Vous naviguez actuellement en mode d'accessibilité étendue.

Si Javascript est disponible sur votre navigateur et que vous souhaitez accéder au mode de navigation standard, vous pouvez cliquer ici.

RÉALISATIONS/

Répertoires
Fichiers

RÉALISATIONS/MDEN_WITE_WEB_MEMOIRES.HTML

MDEN - SITE WEB DES MÉMOIRES 2024

LIEN VERS LE SITE MDEN 2024 : https://masterdesign-memoires.unistra.fr/2022-2024/

Design d'interface et développement Web du site Internet de l'édition 2024 des mémoires de recherche du Master Design des Environnements Numériques de la Faculté des Arts de l'Université de Strasbourg.

Maquettage et prototypage sous logiciel Figma, basé sur une direction éditoriale imprimée.

Développement front‑end en technologies natives (HTML, CSS et ES) sous IDE Visual Studio Code.

GALERIE
  • Planche d'identité visuelle Web du projet, présentant un nuancier de pastilles colorées, les boutons interactifs stylisés avec des curseurs de console en ligne de commande à leur droite (un bouton de chaque couleur du nuancier), et les spécimens des typographies Sentient, Acumin et Aber Mono. Chaque mémoire/étudiant auteur se voit attribué une couleur qui est reprise dans l'expression visuelle des éléments de son mémoire au format Web.
    Planche d'identité visuelle Web du projet
  • Mise en situation de la page d'accueil du site Web sur terminal au format bureau, affichant l'index des mémoires sous forme d'un ensemble de pastilles thématiques réparties sur le corps de la page, chaque pastille laissant entrevoir le centre du visuel d'illustration de la page de garde de chaque mémoire. Les mémoires sont espacés et regroupés selon leur champ disciplinaire d'appartenance.
    Mise en situation de la page d'accueil du site Web sur terminal au format bureau
  • Page d'accueil du site au format bureau, contenant l'index des mémoires prenant la forme d'un ensemble de pastilles thématiques réparties sur le corps de la page, chaque pastille laissant entrevoir le centre du visuel d'illustration de la page de garde de chaque mémoire. Les mémoires sont espacés et regroupés selon leur champ disciplinaire d'appartenance. Lorsqu'une pastille est ouverte, un panneau se déploie sur son fond de couleur propre et affiche le sous-titre du mémoire, l'illustration de page de garde en entier, et un bouton d'appel à l'action pour accéder à la page du mémoire. Le panneau ouvert ici est celui du mémoire « Hors des Sentiers Conçus » de Robin Roland, sous-titré « Quelle place les designers donnent-ils à l'humain dans l'interface humain-machine ? », accompagné d'un bouton libellé « ACCÉDER AU MÉMOIRE ».
    Page d'accueil du site au format bureau
  • Mise en situation de la page d'accueil du site Web sur un terminal au format mobile, avec un panneau d'accès aux mémoires déjà ouvert. Le panneau ouvert ici est celui du mémoire « Hors des Sentiers Conçus » de Robin Roland, sous-titré « Quelle place les designers donnent-ils à l'humain dans l'interface humain-machine ? », accompagné d'un bouton libellé « ACCÉDER AU MÉMOIRE ».
    Mise en situation de la page d'accueil du site Web sur terminal au format mobile
  • Page d'accueil du site aux formats mobile et tablette, présentant en lieu d'un panneau ouvert centré dans la page un empilement vertical des blocs de présentation des mémoires.
    Page d'accueil du site aux formats mobile et tablette
  • Mise en situation de la première hauteur de page d'un mémoire sur terminal au format bureau, affichant l'en-tête du site, le visuel de couverture, le titre, le sous-titre, les années universitaires de rédaction, les informations de contact de l'auteur, un résumé, un mot de l'auteur, et les options de navigation et de téléchargement.
    Mise en situation de la première hauteur de page d'un mémoire sur terminal au format bureau
  • Première hauteur de page d'un mémoire sur terminal au format bureau, affichant l'en-tête du site, le visuel de couverture, le titre, le sous-titre, les années universitaires de rédaction, les informations de contact de l'auteur, un résumé, un mot de l'auteur, et les options de navigation et de téléchargement. En retrait de la visualisation de la première hauteur de page se trouve celle du menu de navigation/index du mémoire sur fond de couleur du mémoire, reprenant le chapitrage du mémoire et l'affichant sous forme d'une liste d'ancres HTML cliquables en position fixe, à gauche de l'écran et en superposition sur le reste du contenu assombri de la page.
    Première hauteur de la page d'un mémoire et menu de navigation du mémoire au format bureau
  • Mise en situation de la première hauteur de la page d'un mémoire et début de section des références sur terminaux au format mobile.
    Mise en situation de la première hauteur de la page d'un mémoire et début de section des références sur terminaux au format mobile
  • Première hauteur de la page d'un mémoire et début de section des références au format mobile.
    Première hauteur de la page d'un mémoire et début de section des références au format mobile
  • Newsletter promotionnelle du site des mémoires, structurée de haut en bas avec un en-tête montrant les mémoires disposés les uns à côté des autres en quadrillage alternant vide et plein, un paragraphe introductif, un bouton d'appel à l'action dirigeant vers le site et/ou un lien à copier, un visuel des mémoires empilés, quelques petits paragraphes de présentation du projet et un pied de courriel avec les coordonnées du Master Design des Environnements Numériques.
    Newsletter promotionnelle du site des mémoires. Composition HTML et images
  • Mise en situation de la newsletter promotionnelle sur terminaux aux formats bureau et mobile.
    Mise en situation de la newsletter promotionnelle sur terminaux aux formats bureau et mobile
  • Logo officiel de l'édition 2024 des mémoires du Master DEN, constitué d'un monogramme symétrique de cercles concentriques noirs en perspective, reprenant la forme circulaire retrouvée sur les premières de garde et les pastilles de l'index du site Web, le tout dans une composition rappelant une dynamique de feuilletage manuel d'un ouvrage papier.
    Logo officiel de l'édition 2024 des mémoires du Master DEN
    Visuel de référence montrant l'édition imprimée originale des mémoires de recherche du Master, mettant en avant les choix typographiques et la palette chromatique, la mise en page éditoriale avec la première de couverture percée donnant une lecture initiale tronquée de la page de garde avant ouverture du mémoire (visuel de la page de garde à deux niveaux de lecture selon que la première de couverture est ouverte ou fermée) ; éléments dont s'inspire directement la déclinaison Web. Le mémoire montré pour la démonstration est titré « La place des notifications dans l'utilisation du numérique » par Nicolas Diebold, sous-titré « vers une économie de l'intention ».
    Visuel de référence montrant l'édition imprimée originale des mémoires