FORMATION

WEBDESIGNER PRO

Source : Freepik
FORMATION
WEBDESIGNER PRO

MODULE 1

Les fondamentaux
du WebDesign
La naissance d’Internet

1989 
NAISSANCE DU 1 SITE WEB ER

WEB 1.0

DESTINÉ AU CHERCHEUR
1 SITE FRANÇAIS EN 1992
ER

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 4

La naissance d’Internet

1989  1995  1996  2000

Code uniquement Avénement du et du Javascript Apparition du CSS en 1995
en HTML langage Flash... Avénement du CSS 3
(encore présent aujourd’hui
(et des gifs) et mort de Flash en 2007 avec (HTML pour le fond et
Apple et les smartphones) CSS pour la forme)
Tournant des webdesigners

Transformation du HTML STATIQUE en DYNAMIQUE à l’aide du PHP

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 5

La naissance d’Internet
HTML HTML + CSS

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 6

La naissance d’Internet

WEB 1.0
Environ 1990 à 2000
 WEB 2.0
Environ 2000 à aujourd’hui
 WEB 3.0
À partir d’aujourd’hui

Site statique Site interactif Interaction entre

avec hyperliens pour avec technologie complexe, Homme/Machine/Environement
accéder aux pages mais simplicité d’utilisation
Assistants personnels, IA,
Blogs, réseaux sociaux,... voiture autonome,...

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 7

Histoire du Webdesign

1990  2000  2007  2010  2017-8

Web 1.0 - Pas de CSS Passage au Web 2.0 iPhone 1 Responsive & Suivre les règles du Web
UI-UX primitif Avénement de CSS et appareils mobiles Flat design et de Google

Tournant du webdesign Inutilité de Flash Exemple : Pas de responsive

Windows Phone 2010 Temps de chargement...
=
Pas de SEO

Le Webdesign de demain (3.0)?

Interaction entre les objets et éléments / expérience émotionnelle et immersive / design d’expérience

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 8

Lexique du Webdesigner
Les formats de fichiers

  
IMAGES COLORIMÉTRIE DIVERS

jpeg / png / gif RVB Bitmap

eps / svg CMJN Vectoriel
zip / pdf Quadrichromie Anti-crelénage / Anti-aliasing
psd / ai / indd Pantone Résolution
ae / prpro / xd Code Hex PPP / DPI

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 9

Lexique du Webdesigner
La typographie

  
APPÉLATION ANATOMIE UNITÉ DE MESURE

Typographie / Font / Police Font pairing Pixel

Famille de typographie Ligne de pied / empattement Point
Interlignage / Interlettrage Em
Serif / Sans Serif / Display Approche
Script / Handdrawn Orphelin(e)
... ...

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 10

Lexique du Webdesigner
Types de sites

   
DESIGN STATIQUE Break points DESIGN ADAPTATIF DESIGN FLUIDE
WEB 1.0 Points de rupture WEB 2.0 WEB 2.0

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 11

Lexique du Webdesigner
Pré-header
Header

H1 Bannière

Accroche / Baseline

CTA Call to action

Appel à l’action

H2 DIV / Section

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 12

Lexique du Webdesigner
Création de site

     
Cahier des charges Storyboard Micro interaction Induire une action Répartition des zones Grille
Briefing Storytelling Affordance Zoning Grid

     
Repères Fil de fer Structure Maquettage Gabarit Prototype
Guidelines Wireframe Layout Template Proto

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 13

Lexique du Webdesigner
Techno

     
Flat design Animation Scroll Hierarchie Ergonomie Arborescence
Motion design Infinite scroll visuelle Interaction

     
CMS Framework Responsive Points de rupture Résolution Mobile first
design Break points rétina

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 14

Lexique du Webdesigner
Design

     
Pictogrammes Logotype Identité graphique Charte graphique Charte éditoriale Favicon
Icons Logo

     
Mockup Interface UX UI Masonry Front/Backend

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 15

Lexique du Webdesigner
Gestuelle / Gesture

     
Touche Double touche Glissé déposé Rapprocher Éloigné Appuyer
Tap Double tap Drag and drop Pinch Spread Press

     
Rotation Glisser Secouer Multi touche User Parallax
Rotate Swipe Shake Multi touch

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 16

Gestion de Site Web
Compréhension d’internet

( 
WEB
 
DEEP WEB / WEB CACHÉ-PROFOND
) 
DARK WEB

Site web avec des pages Page de gestion non accessible par URL Web non indexé
en hyperliens accessibles (un compte personnel par exemple) Navigateurs propre au Dark Web
(Web 1.0) (Web 2.0) (outil tierce nécessaire)

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 17

Gestion de Site Web
Compréhension d’internet

requête interrogation

 
 
réponse
 données
 
SITE WEB SERVEUR BASE DE DONNÉES

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 18

Gestion de Site Web
Langage de programmation

    
HTML CSS JAVASCRIPT PHP MySQL
Structure du site Aspect du site Interaction Front/Back Affichage selon User Base de données

Kotlin / Symphony / Python / Ajax / Angular / C et C++

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 19

Métiers du web

   
Visuel Opérationnel Éditorial Analyste
Graphiste / Webdesigner Chef de projet Community Manager / Rédacteur Data scientist
Directeur Artistique (DA) Responsable e-commerce Responsable Éditorial
Content Manager

 
Développement Marketing
Intégrateur - Développeur frontend Responsable emailing / Responsable affiliation
Dev back / Webmaster / Dev Fullstack Traffic manager (acquisition) / Webmarketer
Sécurité / Architecture / IA SEO manager (naturel) / SEM manager (payant)

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 20

Logotypes à connaitre

MODULE 1 - FORMATION WEBDESIGN PRO JOAN HAEGELE.COM 21