Ziggourat FORMATION

03. Formation Design des interfaces Web

Objectifs

Acquérir les bases de conception des interfaces numériques. Créer des gabarits visuels riches et efficaces en tenant compte des dernières évolutions du Web : applications mobiles, bannières interactives, mini-sites, réseaux sociaux, espaces participatifs, diffusion multi-supports, etc.

Participants

Directeurs artistiques, webdesigners, graphistes ou toute personne souhaitant acquérir les bases de la conception graphique d’interfaces riches pour le Web.

Prérequis

De bonnes connaissances de l’outil informatique et d’Internet sont indispensables à ce stage. Une connaissance des bases de l’utilisation du logiciel Photoshop est un plus.

Programme

Introduction

• Qu’est-ce qu’une interface ?
• Interfaces Web vs pages Web
• Interface, interactions et interactivité
• Du design numérique au design d’interface
• Vers une expérience orientée utilisateurs

Comprendre le média Web

• Qu’est-ce que le numérique ?
• Média numérique vs média traditionnels
• HTML, XML et les langages du Web
• CSS et la notion de feuille de style
• JavaScript et la notion d’interaction
• L’agrégation et la diffusion de flux d’information (APIs, RSS, etc.)
• La diffusion multi-supports et multiplateformes
• Vers une nouvelle vision de l’information

Adopter une démarche centrée utilisateur

• Spectateur, auditeur, lecteur vs utilisateur
• Utilisateur, acteur et usager : design Web et urbanisme
• Prendre en compte les attentes utilisateur
• Comprendre la notion de comportement
• Cibler, modéliser, tester les interfaces (techniques, méthodes)
• Rendre les contenus accessibles

Concevoir des interfaces visuelles efficaces

• La lecture visuelle de la page-écran
• Les contraintes techniques de la page-écran (tailles, définition, lisibilité, etc.)
• Les règles de composition de la page-écran
• Les principes du zoning
• La création de Storyboard visuels
• L’utilisation de la grille de mise en page
• Typologie des différents modèles de mise en page
• Standards visuels et règles d’habillage
• Les différents statuts de l’image
• La gestion typographique des contenus éditoriaux
• La gestion des formulaires
• Typologie visuelle des différents éléments d’interaction
• HTML, HTML5 et ses différents aspects sémantiques
• CSS3 et ses possibilités visuelles
• Fonctionnalités visuelles AJAX
• JQuery, JQuery UI & Co (JQtouch, JQuery mobile) et la conception d’interface riches
• Panorama des technologies et logiciels Adobe (Flash, Edge, Catalyst, Flex, Builder, etc.)
• Adobe Flash et la conception Rich Media

Optimiser ses interfaces dédiées

• L’intégration des micro-contenus éditoriaux
• La conception visuelle des formulaires
• La gestion de l’affichage des contenus dynamiques
• La gestion de l’affichage des flux entrants et sortants (liens sociaux, RSS, etc.)
• La conception visuelle des espaces sociaux et participatifs
• L’utilisation des interfaces de type « dashboard Â»
• La conception visuelle de Widgets
• L’utilisation des GUI et d’API externes
• Panorama des principaux GUI : Facebook, iPhone, iPad, Android, Palm
• Panorama des principales Open APIs : Facebook, iPhone, iPad, Androïd, Palm
• Utilisation des principaux kits de conception

Etude de cas et exercices de mise en Å“uvre