Formation UI Design / Design Web
Formation
À Paris
Avez-vous besoin d'un coach de formation?
Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.
Description
-
Typologie
Formation intensive
-
Niveau
Niveau intermédiaire
-
Lieu
Paris
-
Heures de classe
35h
-
Durée
5 Jours
-
Dates de début
Dates au choix
Comprendre et maîtriser les spécificités du Responsive Web Design (RWD) : formats, interactivité, ergonomie. Concevoir, réaliser et maintenir un site Web RWD : élaboration de la charte graphique, appropriation des fondamentaux de la mise en page sur écran, ergonomie et principes de navigation, gestion du RWD.
Les sites et dates disponibles
Lieu
Date de début
Date de début
Les Avis
Les matières
- Navigation
- Gestion
- Mise en page
- Ergonomie
- Interactivité
- Appropriation
- Formation UI Design / Design Web
- Comprendre et
- Maîtriser les spécificités
- Du Responsive Web Design (RWD) : formats
- Ergonomie. Concevoir
- Réaliser et maintenir un site Web RWD
- Élaboration de la charte graphique
- Des fondamentaux de la mise en page sur écran
- Et principes de navigation
- Gestion du RWD
Professeurs
équipe des professeurs
Directeur
Le programme
Généralités, historique
Présentation de l'Internet et du Web
Les différents types de sites Web : sites vitrines, portfolio, sites de e-commerce, sites communautaires, blogs, sites événementiels
Prendre en compte les contraintes matérielles
Tailles d'écrans
Espaces colorimétriques RVB et hexadécimal
Formats des fichiers d'images et optimisation
Prendre en compte les spécificités d'un site Web
Non-linéarité de la lecture
Navigation dans les rubriques et les pages
L'interactivité
Hiérarchiser et clarifier l'information
Utiliser des liens hypertexte et des boutons
Utiliser des menus pour les rubriques
Optimiser la navigation
La charte graphique
Définir les différentes parties de l'interface : menus, contenu éditorial, bandeaux publicitaires...
Définir les couleurs utilisées : fond de page, menus, bandeaux, titres, texte...
Choisir le style des polices de caractères
L'interface : fenêtres, palettes de composants, panneaux
Les outils
Paramétrer l'application et organiser son espace de travail
Créer un projet de site Web
Créer un document HTML
Paramétrer le document
Mettre en forme la page et le texte
Insérer des images et des liens hypertextes
Atelier : créer un exemple de site « carte de visite »
Arborescence du site et principes de navigation
Définir l'ergonomie
Organiser les rubriques
Créer la cinématique des pages
Mettre en place une navigation simple et claire
Les bases du HTML/CSS
Structure et sémantique en HTML5
Utilisation des balises
Principes de base des styles CSS : les règles CSS
Mise en forme dans Dreamweaver
Style d'une balise HTML
Styles de sélecteurs : liens survolés, liens actifs...
Styles personnalisés
Attacher une feuille de style
Atelier pratique : Concevoir et créer un exemple de site vitrine, gestion des menus dynamiques
Création d'une maquette d'interface Web
Organiser l'interface : définir une grille
Définir un fond d'écran et un fond de page
Définir les espaces : contenu, menus, bandeaux publicitaires...
Mettre en forme la page : couleurs, polices de caractères...
Exportation des documents graphiques pour l'intégration
Utiliser les outils tranche
Créer des repères de zones
Créer une tranche d'après un calque
Définir les zones actives d'une image
Découpage de l'interface
Exporter l'interface pour l'intégration HTML
Utiliser les actifs pour exporter les propriétés CSS dans Dreamweaver
Exporter les images
Définir un formats : JPG, GIF, PNG
Optimiser les images pour l'exportation Web : tailles, paramètres, réglages, compressions...
Finalisation de l'interface : l'intégration HTML
Insérer les éléments dans une page HTML
Gérer les liens hypertexte internes/externes
Atelier pratique : réaliser une interface active de pages Web en utilisant Extract dans Dreamweaver
Qu'est-ce que le Responsive Web Design ?
Appréhender et comprendre la mise en forme adaptative
Penser et architecturer sont site
Définir les cibles
Utiliser des « Media Queries » : principes de base
Définition du « pixel-ratio »
JavaScript et jQuery
Utiliser du code JavaScript
Modifier et adapter du code JavaScript
Utiliser du code jQuery
Modifier et adapter du code jQuery
Les composants dans Dreamweaver
Insérer un composant Bootstrap : barres de navigation, images, boutons...
Insérer un composant jQuery : animations, barres de navigation, menus accordéon, boîtes de dialogue…
Utiliser les requêtes multimedia
Structurer son site pour le Responsive Web Design (RWD)
Créer des menus adaptables
Créer des tableaux adaptables
Créer des images adaptables
Atelier pratique : réaliser un site Responsive Web Design efficace en utilisant un modèle Bootstrap
Organiser son site
Définir les rubriques et les catégories de produits
Créer une fiche produit type
Les modèles ou templates
Utiliser des modèles de pages
Utiliser les bons outils pour créer une galerie marchande
Atelier pratique : réaliser un exemple d'interface de site de e-commerce
Vérifier la compatibilité avec différents navigateurs
Vérifier la conformité et l'utilisation de normes et de standards
Cerner et corriger d'éventuels problèmes
Optimiser le code
Avez-vous besoin d'un coach de formation?
Il vous aidera à comparer différents cours et à trouver la solution la plus abordable.
Formation UI Design / Design Web