Stratégie de conception digitale : culture web à 360°

Partie 1: Design d'interface et expérience utilisateur

Introduction : les tendances en webdesign

• Skeuomorphisme
• Métro style
• Flat Design
• Material Design
• Outils : UI kits, design pattern

Atelier : Mettre en place une veille sur les tendances

UX Design (design d'expérience)

• Design d'expérience utilisateur
• Personas et parcours utilisateurs
• Les lois de l'ergonomie web
• Arborescence de navigation
• Mockup & Wireframes
• Header, footer, zoning de blocs

Atelier N°1 : Créer une fiche projet identitaire

Atelier N°2 : Créer une arborescence de site

UI Design (design d'interface)

• Les contraintes techniques liées au web
• La construction de gabarits d'écran
• Les gestuelles pour le tactile
• Optimisation de la lisibilité : typographie, caractères
• Optimisation de la taille des éléments
• Panorama des outils (InVision, UXPin, Adobe Muse)

Atelier : Créer un prototype intéractif (wireframe)

Images & typographie pour le web

• Les couleurs : RGB
• Les formats d'images : gif, jpg, png, svg, webp
• Notion de résolution d'image (écrans Rétina ou HD)
• Optimisation et enregistrement pour le web
• Les différents types de polices : web fonts
• Les unités de mesures (px, em, rem et %)
• Spécificités de la composition des textes sur le Web

Atelier n°1 : Sélectionner des images et les optimiser

Atelier n°2 : Identifier les typographies d'un site

Template graphique

• Qu'est-ce qu'un template graphique ?
• Cas des places de marché
• Les points de repères à avoir
• Choisir un modèle graphique (PSD)

Atelier : Télécharger un template graphique (PSD)

Webdesign dans Photoshop

• Organisation de sa zone de travail
• Création de multiples plans de travail (artboards)
• Les règles et le système de grille
• Utilisation de grilles prédéfinies
• Objets dynamiques
• Composition des calques
• Outils : plugins photoshop

Atelier : Créer un artboard "desktop"

Responsive design

• La notion de points de rupture
• La notion de Mobile First
• Rendre les images flexibles
• Avantages et inconvénients d'un framework RWD
• Tester son site responsive sur tous les terminaux

Atelier : Créer une maquette graphique mobile

Partie 2 : Les fondamentaux de la conception web

Introduction : droit de l'internet

• Les droits d'auteur sur Internet : la propriété intellectuelle
• La maîtrise de la loi « Informatique et Libertés »
• La publicité par Internet : emailing, spamming, promotion
• La protection de la vie privée et de l'e-réputation
• Information de l'usage des cookies
• Obligations juridiques : dépôt du nom de domaine, protection du nom du site

Atelier : Construire une check-list des bonnes pratiques

L'agilité dans la gestion de projets web

• Les différents acteurs d'un projet web
• Les différentes typologies de projets web
• Choisir les outils de gestion de projets
• Les règles d'or d'un cahier des charges fonctionnel et technique
• L'apport de valeur : MOSCOW
• La phase de test, de recettage et de mise en production
• Valorisation interne et externe du projet web

Atelier : Réaliser un mini cahier des charges

L'entonnoir des conversions

• Ecrire sur le web dans les règles de l'art
• Définir et scénariser vos conversions
• Les bonnes pratiques du Call To Action (CTA)
• Les bonnes pratiques des landing pages
• Outils : scénario, wireframing, landing pages

Atelier : Identifier des actions de conversions

Les fondamentaux du web

• Les principaux langages du web
• Compatibilité des navigateurs & OS
• Back-office Vs Front-office
• Structure d'une page Html
• Présentation de javascript & jQuery

Atelier : Créer une structure Html valide

Installation et configuration d'un CMS

• Qu'est-ce qu'un CMS ?
• Présentation d'un CMS
• Présentation d'un espace FTP
• Gestion de son menu de navigation
• Création de pages de contenus
• Gestion de redirection
• Gestion de son référencement naturel

Atelier : Installer et configurer son site

Intégration et déclinaison graphique

• Qu'est-ce qu'une feuille de styles CSS ?
• Positionnement CSS
• Les types de sélecteurs (id, class et balises)
• La gestion des éléments flottants (float)
• Les propriétés css importantes, les pseudos-classes

Atelier : Comprendre la logique d'intégration graphique