L'évolution du Web-design de 1997 à nos jours.

1. ÉVOLUTION DU WEB-DESIGN
Conférence CCI Avril 2012

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

3. 0/ web design ?!
KEZAKO ?

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 !

11. Avant 1994
LA PRÉHISTOIRE

12. AVANT 1994
1/ ÉVOLUTIONS DU WEB DESIGN
• HTML • Pas de Web design • Code au Bloc-notes
• Navigateur unique : Mosaic

13. AVANT 1990
1/ ÉVOLUTIONS DU WEB DESIGN

14. Dès 1995
LES ANNÉES BRICOLAGE

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

18. Dès 1998
L’ESPOIR DE
LA TECHNOLOGIE FLASH ?

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.

20. http://www.matinee.co.uk/site2/nmd.htm

21. Début 2000
UN PAS VERS LA STANDARDISATION
De 2000 à nos jours

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
= +

23. POINT CONNAISSANCES :
HTML+CSS : LE FOND ET LA FORME

24. 2/ Flash ou HTML ?
L’ÉTERNEL DÉBAT

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

26. http://www.cilantro-cafe.com/

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

28. http://www.wearecupcup.com/

29. 3/ La nouvelle donne
WEB MOBILE

30. 11 JUILLET 2008

31. 2007 - LA RÉVOLUTION DU WEB... MOBILE
2/ UNE NOUVELLE DONNE
Internet Mail
Géo
localisation
Applications
Téléphone

32. BLOCAGE DU FLASH SUR APPLE
2/ UNE NOUVELLE DONNE

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

35. 4/ Influence des
résolutions d’écrans
SUR LE WEB DESIGN

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

39. 5/ Le Responsive Design
Un design qui s’adapte ?

40. 5/ RESPONSIVE DESIGN
DESIGN ADAPTABLE
1280 px 800 px 340 px

41. http://www.foodsense.is/

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