Webdesign UX et UI
Cette formation webdesign certifiante vous permettra d’acquérir une excellente méthodologie sur la conception, l’architecture et le prototypage d’un site Web avec le logiciel Axure. Vous apprendrez également à composer des mises en page efficaces et à optimiser la colorimétrie, le choix des polices et l’attribution d’une iconographie appropriée.
Web designer
Formation sur 5 journées
QU’EST CE QUE L’UX DESIGN
PRÉSENTATION DE L’EXPÉRIENCE UTILISATEUR (UX)
- Définition
- Son rôle
- Petit historique
COMPRENDRE LE FACTEUR HUMAIN
- Le processeur
- Extraire un schéma
- Composition avec et sans proximité
- La densité informelle
- Hiérarchie des composants visuels dans une image
- Les neurones miroirs
- Les interférences
- Les limitations cognitives
- Capter l’attention du cerveau
EXERCICE
Vous devrez recomposer 3 pages issues d’un site contenant 7 erreurs qui rendent l’expérience utilisateur très fâcheuse. De plus, vous serez en charge de repenser l’arborescence du site afin de mieux réorganiser les pages et améliorer le guidage.
COMPRENDRE L’UX DESIGN
LES PRINCIPES DE CONCEPTION
- Le feedback
- Affordance et mapping
- Le guidage
- La découverte progressive
- Homogénéité et anticipation de l’erreur
- La narration
EXERCICE
Une page Web souffre d’une affordance et d’un mapping très maladroit. Vous devrez repenser l’interface de manière très intuitive et la conception de manière à poser aucune difficulté à l’utilisateur lors de son passage.
ARCHITECTURER L ‘INFORMATION
ARCHITECTURE DE L’INFORMATION
- L’arborescence
- Croquis
- Zoning
- Wireframe
- Storyboard
- Les grilles
- Les types d’interface
- Sens de lecture
- Zone de flottaison
- Fil d’Ariane
- Zoning de bloc
- L’usage des textes et pictogrammes
- Hiérarchie textuelle et SEO
- Les formulaires
EXERCICE
REALISER UN PROTOTYPE
LE PROTOTYPE
- Définition
- Les 4 étapes
- L’anticipation
LES BASES DU PROJET
- La stratégie
- Devices et checkpoints
- Veille fonctionnelle
- L’innovation
- Les personas
- La taxonomie
- L’user flow
- Le mockup
- Le prototypage
- Le design
- Le maquettage / Test utilisateur
EXERCICE
AXURE
COMMENT PROTOTYPER AVEC AXURE
- Breakpoint
- Les grilles
- Présentation général
- Panneau : L’arborescence
- Panneau : Panneau central
- Panneau : Les widgets
- Panneau : Les masters
- Panneau : Propriété des widgets
- Interaction : Quicklink
- Interaction : OnClick
- Interaction : Les Cas
- Interaction : AnchorLink
- Exporter son prototype
- Rollover / Rollout
- Panneau dynamique
- Éléments collants
EXERCICE
CONCEPTION DE 2 PAGES WEB EN RESPONSIVE DESIGN
EXERCICE : RÉDACTION DU BRIEF UX
- Rédaction
- Interrogations
- Éléments à fournir
EXERCICE : METTRE EN PRATIQUE LES ÉTAPES CLÉS
- Stratégie
- Devices
- Veilles fonctionnelles
- Personas
- Taxonomie
- User flow
- Croquis
EXERCICE : FAIRE UN PROTOTYPE SUR AXURE
CONCEPTION D’UNE PETITE APPLICATION MOBILE
EXERCICE : RÉDACTION DU BRIEF UX
- Rédaction
- Interrogations
- Éléments à fournir
EXERCICE : METTRE EN PRATIQUE LES ÉTAPES CLÉS
- Stratégie
- Devices
- Veilles fonctionnelles
- Personas
- Taxonomie
- User flow
- Croquis
EXERCICE : FAIRE UN PROTOTYPE SUR AXURE
UI DESIGN – PRESENTATION ET ARCHITECTURE
- Définition
- Son rôle
- Les enjeux
- Les grandes tendances du Web
- L’expérience utilisateur
L’ARCHITECTURE
- Comprendre les devices et les checkpoints
- Composer à partir d’un wireframe
- Utiliser des grilles
- Penser en Responsive Design
- Organiser son PSD
- Construction d’une page
- Les outils indispensables
EXERCICE
- Recomposition et adaptation de la homepage d’un site initialement conçu pour les desktops pour une déclinaison en application mobile.
COLORIMETRIE ET POLICES
COLORIMÉTRIE
- Définition
- L’usage des couleurs
- Le cercle chromatique
- Les types de combinaisons
- Les contrastes
- Le langages des couleurs
- Adobe color CC et autres outils indispensables
POLICES
- Définition
- Différence entre Police, Font et Typographie
- Les grandes familles typographiques
- Bien choisir ses polices
- Règles typographiques
- Google fonts et autres outils indispensables
EXERCICE
- Création d’un logo à l’aide des Google fonts et d’Adobe color CC
ICONOGRAPHIE
- Définition
- Hiérarchie des composants visuels
- Les neurones miroirs – Jouer avec les connotations
REALISER UN E-MAILING
ANATOMIE D’UN E-MAILING
- Définition
- Contraintes techniques
- Architecturer efficacement son E-mailing
- Découverte de Mailchimp
EXERCICE
- Vous serez en charge de réaliser la maquette d’un mailing en Responsive Design
REALISER DES BANNIERES EN GIF ANIME
BANNIÈRES
- Définition d’une bannière
- Les formats standards
- Optimiser votre déclinaison
- Animer votre bannière sur Photoshop
- Bien exporter vos bannières
EXERCICE
- Réalisation d’un jeu de 3 bannières.
MAQUETTER UN SITE ONE PAGE
PRÉPARATIFS
- Rédaction du brief
- Comment concevoir l’interface d’un site
- Veille graphique
- Utilisation des outils
EXERCICE
- Réalisation de la maquette d’un site « One page » en parallax et en Responsive Design.
Webdesigner, graphiste, directeur artistique, concepteur ou développeur de sites ou d'applications mobiles, chef de projet web, chef de projet numérique multisupports, chef de projet digital…
Il est nécessaire pour suivre cette formation d'avoir une culture Web et d’avoir déjà pratiqué des logiciels de PAO tels que Photoshop.
- Formation en inter-entreprises : 500 € HT par personne par jour
- Formation en intra-entreprise : nous consulter
Pauses café et déjeuner du midi compris si la formation se déroule dans nos locaux.
Le stage peut être prise en charge par votre organisme collecteur (numéro officiel d'organisme de formation: 11 95 04407 95). Prévoir des frais de déplacement en sus si la formation est réalisée dans les locaux du clients hors île de France.
Possibilité de formation à distance.