2. Qui suis-je ?
Olivier SOROS
Directeur artistique
Web-designer
Gérant de la société SoHappy
Intervenant - formateur à la formation
D.U. Multimédia à Pau
4. 1/ DESIGN VISUEL :
Éléments graphiques,
couleurs,typographies,
et mise en page.
2/ DESIGN FONCTIONNEL
(L’ergonomie) :
système de navigation,
menus, boutons, liens.
C’EST LE LANGAGE DE VOTRE PAGE !
0/ WEB DESIGN ?
Graphisme Ergonomie
+
5. Le WEB + DESIGNER
+
Ergonomie (IHM)
Connaissance
des contraintes
de développement
Accessibilité
Standard W3C
L’émergence
des nouvelles
technologies (veille)
Créativité (idées)
Sens artistique
Culture visuelle
Communication
Maitrise des
logiciels
QUALITÉS
QUALITÉS
6. C’EST AUSSI, SUIVRE LES ÉVOLUTIONS...
0/ WEB DESIGN ?
1990 2010
Résolutions et tailles des écrans (images + grandes)
Connexion Internet (fichiers + lourdes) (Modem, ADSL, Haut Débit...)
7. Des technologies du Web et des Logiciels
HTML, XHTML, HTML5 • FLASH, FLEX, SILVERLIGHT • 3D
• Photoshop • Fireworks • Dreamweaver • Flash
C’EST AUSSI, SUIVRE LES ÉVOLUTIONS...
0/ WEB DESIGN ?
Technologies Logiciels
8. Styles, couleurs, mise en page, formes, etc.
Tout en sachant se différencier !
C’EST AUSSI, SUIVRE LES ÉVOLUTIONS...
0/ WEB DESIGN ?
Des tendances graphiques
9. UNE GROSSE INFLUENCE SUR LE WEB DESIGN
0/ WEB DESIGN ?
1990 2010
Des nos jours > Sobriété / simplicité (Design & ergonomie)
• Plus d’espace (blancs) • Travail sur la mise en page
10. 1/ Les dates clés
DU WEB DESIGN DE 1995
A NOS JOURS !
15. LA PROBLÉMATIQUE
1/ ÉVOLUTIONS DU WEB DESIGN
> Poids des pages
limité (<80ko),
> graphisme limité,
nécessité
d’optimisation
des images.
Choix des
polices HTML
limité
Mise en page à
l’aide de tableaux
> Contraintes
structurelles
(TABLES)
56Kbits > 6Ko/s
Modem
texte
texte
16. • JPEG ou GIF animés
> Compteurs visibles et animés
• Editeurs HTML Wysiwyg (visuel) :
> Dreamweaver & Frontpage
• Naissance de
Photoshop 3 sur PC et Mac
LES TENDANCES DE L’ÉPOQUE
1/ ÉVOLUTIONS DU WEB DESIGN
19. 1996, L’ESPOIR DU FLASH ET DU RICH MEDIA ?
1/ ÉVOLUTIONS DU WEB DESIGN
1993 1998 2005
> Animation d’objets vectoriels,
> Possibilités d’interactions (script Actionscript),
> Totale liberté pour le graphisme et la mise en page,
> Choix de polices illimité,
> Pré-chargement des animations,
> La technologie idéale pour le graphiste.
22. LES STANDARDS DU WEB
1/ ÉVOLUTIONS DU WEB DESIGN
> Mise en page par «CSS, feuilles de styles» :
séparation des contenus de la mise en forme.
> Dreamweaver / Photoshop / Fireworks :
+ performants + plus simples à utiliser + respectueux des
standards W3C
= +
25. Pas de contraintes
de structure et de
mise en page
+ Interactif & animé
+ Immersif (AS3)
Interface logicielle
simple et conçue
pour le graphiste
Des possibilités de
gestion du multimédia
inégalées
(visioconférences,
streaming, 3D…)
Les moteurs de
recherche ne lisent pas
les contenus flash :
mauvais
référencement
Fichiers + lourds >
Chargement plus long
Mise à jour
du lecteur flash
Ignoré sur
Iphone & Ipad
AVANTAGES / INCONVÉNIENTS > LE DESIGNER
2/ FLASH
27. Contenu mieux
référencé
Fichiers moins lourds
> Chargement plus
rapide
Meilleures gestions
des contenus
Conforme aux
standards W3C
Compatible
Iphone & Ipad
Contraintes
graphiques liées à la
structure <DIV>
Nécessité de connaître
HTML et CSS (code)
Choix des
polices limité
Pour compenser ces
limites > JQUERY
(javascript)
AVANTAGES / INCONVÉNIENTS > DESIGNER
2/ HTML
33. ÉMERGENCE DE L’HTML5 ET DU CSS3 SUR LE WEB
2/ UNE NOUVELLE DONNE
Solutions Rich Média Solutions HTML
34. NON LE FLASH N’EST PAS ENCORE MORT !
2/ UNE NOUVELLE DONNE
Nouvelle orientation du Flash vers :
ÉVÈNEMENTIEL VISUALISATION 3D JEUX EN LIGNE
SITES WEB PLUS CLASSIQUES
TABLETTES & SMARTPHONES
36. 640x480 px 1024x768 px 2560x1440 px et +
4/ LES RÉSOLUTIONS D’ÉCRANS
IMPACT DES RÉSOLUTIONS SUR LE DESIGN
37. Le site internet ne s’adapte pas à votre résolution d’écran :
> Taille fixe en pixels définie en fonction d’un choix de résolution
(actuellement majoritairement du 1024 x 768 px)
> La page est alors soit centrée, soit calée à gauche de l’écran
4/ LES RÉSOLUTIONS D’ÉCRANS
38. Est-on obligé à s’adapter à toutes ces résolutions ?
4/ LES RÉSOLUTIONS D’ÉCRANS
GRANDE
RESOLUTION
PETITE
RESOLUTION
SITE IPAD ET/OU
ANDROID+ +
AUX
ORIENTATIONS
42. 5/ RESPONSIVE DESIGN
DESIGN ADAPTABLE
En résumé, il permet de créer à partir d’un même
gabarit plusieurs mises en pages qui s’adapteront
aux différentes résolution d’écran.
> adaptation de le mise en page en fonction du support,
> adaptation des images et vidéos (flexibles),
> adaptation de la taille des typographies.
La solution technique :
utilisation des Medi@ Queries
43. 6/ CONCLUSION
LE CONSTAT : TOUT S’ACCÉLÈRE...
RESTEZ AU CONTACT !
> Accélération des technologies
> Développement fulgurant de nouveaux terminaux
et de nouveaux usages (navigation sur mobile)
Tout ce qui est vrai aujourd’hui
ne sera peut-être plus vrai demain !
Rendez-vous dans un an !
44. Merci !
OLIVIER SOROS
Studio SO’HAPPY - communication globale
conseil I publicité I édition I internet I mobiles
www.sohappy-studio.com