Leçon webdesign

Ressources en ligne à utiliser

Générateur gratuit de templates Html et CSS. Cet outil permet de copier-coller des grilles et formats de mise en page web depuis n’importe quel navigateur. C’est utile soit après des cours de présentation générale pour s’attarder sur la graphie/le contenu ou pour des étudiants moins forts en code qui veulent travailler à partir d’une base technique fonctionnelle. On peut également s’en servir en introduction (plus casse gueule) pour montrer comment fonctionne un fichier .html basique et comment on y ajoute un fichier .css pour travailler la présentation du texte.

schnaps.it, générateur de templates HTML5 et CSS3

Titre séquence: L’intelligence de la main à l’écran/imprimer à l’écran

Enjeux: répondre plastiquement à des problèmes numériques d’ordre technique

l’étudiant doit être capable de comprendre comment fonctionne un site web et d’en coder un.

Développer un regard critique sur les modes de présentation à l’écran

Dans quel DNMaDe?

Je me situe ici en DNMADE deuxième année car les étudiants doivent déjà avoir acquis des compétences techniques et plastiques concernant l’image et la présentation/archive de projet, juste après le retour de stage d’observation professionnelle.

Je me situe ici en DNMaDe Numérique option graphisme comme au sein de l’école Nantes Atlantique qui a un partenariat avec le Media Lab.

Ou le DNMaDe Design graphique: objets numériques et imprimés de Boulogne Billancourt. Ce sont deux formations qui prennent en compte le code au cours de la première année de formation, la majeure numérique de Nantes ouvre vers des métiers de webdesigner, de designer numérique alors que la formation de Boulogne ouvre vers des métiers centrés sur le traitement de l’image par le biais de supports multimédias (donc une dimension exploratoire plus intéressante selon moi).

On se situe en deuxième année car en première année on introduit aux outils et en deuxième année on vient structurer un peu plus et affiner le portfolio et l’usage critique des outils et des matériaux.

Objectifs:

→ être capable de sélectionner des visuels et des traitements graphiques pour parler d’une collection

→ créer une navigation web lisible et fonctionnelle pour un utilisateur.

Compétences:

Cette séquence se situe dans les Enseignements transversaux car elle doit permettre d’arriver à la compréhension d’outils communs pour le designer ou l’artisan dans un contexte de production qui implique du code et des outils numériques. Cette séquence met également l’accent sur l’expérimentation et la mise en pratique par l’étudiant.

UE10.

EC 10.2 Technologies et matériaux: il y a une investigation plus une veille technologique au cours de cette séquence → évaluée par des captures écran ou dépôt d’animations effectuées avec l’outil Processing.

EC 10.3 Outils et langages numériques: approfondissement de l’usage d’outils de spécialité plus un rappel critique de l’usage des outils et matériaux. → rejoins le Bloc Outils d’expression et d’exploration créative

UE 11.

EC Pratique et mise en oeuvre de projet: avec la création d’un carnet de bord de captures d’écrans pour tenir compte de l’évolution du site web (la maquette donnée aux étudiants) et avoir un échantillonnage.

EC Communication et médiation du projet avec une présentation orale et la mise en ligne des sites web.

Evaluation:

J’évalue selon 3 critères généraux:

• est-ce que le site web fonctionne? La maquette/prototype de site doit être navigable quand je clique sur le lien et je dois obtenir les informations essentielles.
• un critère esthétique: est-ce que les animations et traitements graphiques de la collection sont cohérents avec les sujets des collections de Forney?
• un critère théorique: est-ce que les références sont bien mobilisées et est-ce que le parti pris pour traiter l’information est valide?

Intitulé séquence:

A partir de l’analyse et la sélection d’une collection de fanzines/objets graphiques de la bibliothèque Forney (ou BPI), vous produirez un site web mettant en avant la collection choisie à l’aide d’une structure HTML et d’animations web. Ce site web devra rendre compte de la nature des objets présentés et de leur lecture qui vous est propre. Ce site web servira de support de communication sur vos choix d’outils de production web à aprtir d’un format imposé.

Déroulé de la séquence:

Il y aurait un déroulé ici sur 7 séances, soit l’équivalent de 7 semaines sur le sujet avec cours magistral, visite et micro-projet.

Intro: Il va s’agir de préparer la viste au sein de la bibliothèque Forney ou alors de la Bibliothèqe du centre Georges Pompidou. Ce projet serait en partenariat avec la bibliothèque et on fait un retour sur les collections présentes.

Ensuite, lors de la visite, chaque étudiant se concentre sur une collection parmi une sélection et va ensuite devoir se pencher sur son traitement (l’objectif donné aux étudiants pour après).

Cours magistral avec références sur la lisibilité du web et sensibilisation aux enjeux de production liés aux outils numériques → aller vers l’open et le code créatif.

→ analyse du site web actuel de la bibliothèque avec les étudiants et présentation de la maquette du rendu final: page d’accueil, page de présentation des collections, au moins une page pour un objet en particulier avec descriptif. Le modèle de navigation est le même pour tout le monde.

La séance 2: Visite de la bibliothèque Forney, capture d’éléments et récolte concernant les collections d’objets graphiques et fanzines: échantillons, photos, dessins, références.

Initiation au logiciel Processing et HTML (à partir de ce qu’ils connaissent en première année, ce qui permet de rafraichir les compétences et d’aller plus loin dans leur boîte à outils et leur matériauthèque personnelle).

Ici, on commence à produire des animations et des interactions graphiques à l’écran qui vont servir pour la suite.

La séance 3: Séance d’atelier et d’outils sur Processing et HTML: création de traitements d’images simples, permet de se créer une série d’exemples de code qui peut servir de base future pour d’autres projets. Leur montrer l’hébergement sur le serveur du DNMaDe (permet de voir ensuite le site web depuis n’importe quel ordi).

Début des recherches concernant la Direction artistique d’une collection.

La séance 4: Exposé des tutoriels utilisés et choix d’animations/styles de traitement graphiques. Création et rendu d’une fiche illustrant les points pertinents ou non pour leur démarche.

Séance permettant de fixer les collections choisies par les étudiants et début du travail HTML et processing plus spécialisé sur une collection.

La séance 5: Séance de travail sur l’articulation entre 1 interaction codée = 1 traitement d’image pour parler de la collection choisie.

Optimisation des choix techniques et plastiques de étudiants. C’est ici que les profils des étudiants vont jouer: comment je pallie un problème technique avec une réponse plastique ou comment je répond à un style d’image avec un traitement technique.

La séance numéro 6: séance de finalisation et débuggage des sites web, la mise en ligne des prototypes sur le serveur et les premiers tests depuis un autre ordinateur. Séance de retour sur les carnets de bords composés de captures écrans des essais de code et essais graphiques.

La séance numéro 7: présentation à la documentaliste responsable de la communication de Forney ou de la BPI, si possible avec le développeur responsable du site web de la bibliothèque.

Retour des évaluations individuelle et désinstallation de la présentation. Les sites webs restent en ligne et peuvent être utilisés pour les portfolios des étudiants.