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.

Les champs marqués d'un * sont obligatoires.
7 + 2 =
Jonas
Outils et méthodes pour des interfaces ergonomiques et engageantes!

Formateur