SlideShare une entreprise Scribd logo
1  sur  44
ÉVOLUTION DU WEB-DESIGN
Conférence CCI Avril 2012
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
0/ web design ?!
KEZAKO ?
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
+
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
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...)
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
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
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
1/ Les dates clés
DU WEB DESIGN DE 1995
A NOS JOURS !
Avant 1994
LA PRÉHISTOIRE
AVANT 1994
1/ ÉVOLUTIONS DU WEB DESIGN
• HTML • Pas de Web design • Code au Bloc-notes
• Navigateur unique : Mosaic
AVANT 1990
1/ ÉVOLUTIONS DU WEB DESIGN
Dès 1995
LES ANNÉES BRICOLAGE
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
• 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
Dès 1998
L’ESPOIR DE
LA TECHNOLOGIE FLASH ?
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.
http://www.matinee.co.uk/site2/nmd.htm
Début 2000
UN PAS VERS LA STANDARDISATION
De 2000 à nos jours
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
= +
POINT CONNAISSANCES :
HTML+CSS : LE FOND ET LA FORME
2/ Flash ou HTML ?
L’ÉTERNEL DÉBAT
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
http://www.cilantro-cafe.com/
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
http://www.wearecupcup.com/
3/ La nouvelle donne
WEB MOBILE
11 JUILLET 2008
2007 - LA RÉVOLUTION DU WEB... MOBILE
2/ UNE NOUVELLE DONNE
Internet Mail
Géo
localisation
Applications
Téléphone
BLOCAGE DU FLASH SUR APPLE
2/ UNE NOUVELLE DONNE
ÉMERGENCE DE L’HTML5 ET DU CSS3 SUR LE WEB
2/ UNE NOUVELLE DONNE
Solutions Rich Média Solutions HTML
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
4/ Influence des
résolutions d’écrans
SUR LE WEB DESIGN
640x480 px 1024x768 px 2560x1440 px et +
4/ LES RÉSOLUTIONS D’ÉCRANS
IMPACT DES RÉSOLUTIONS SUR LE DESIGN
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
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
5/ Le Responsive Design
Un design qui s’adapte ?
5/ RESPONSIVE DESIGN
DESIGN ADAPTABLE
1280 px 800 px 340 px
http://www.foodsense.is/
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
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 !
Merci !
OLIVIER SOROS
Studio SO’HAPPY - communication globale
conseil I publicité I édition I internet I mobiles
www.sohappy-studio.com

Contenu connexe

Tendances

La communication au service de l’acceptation sociale des grands projets d’inf...
La communication au service de l’acceptation sociale des grands projets d’inf...La communication au service de l’acceptation sociale des grands projets d’inf...
La communication au service de l’acceptation sociale des grands projets d’inf...Bastien André
 
Case study 2 Human Computer Interaction
Case study 2 Human Computer InteractionCase study 2 Human Computer Interaction
Case study 2 Human Computer Interactionkhairulaidid
 
Design thinking et Agilité
Design thinking et AgilitéDesign thinking et Agilité
Design thinking et AgilitéMatthieu Gioani
 
Rapport exposé eXtreme Programming XP
Rapport exposé eXtreme Programming XPRapport exposé eXtreme Programming XP
Rapport exposé eXtreme Programming XPSarah
 
rapport-projet-de-fin-detudes
 rapport-projet-de-fin-detudes rapport-projet-de-fin-detudes
rapport-projet-de-fin-detudesAchraf Mokhtari
 
Pour Écrire un Bon Rapport en Informatique
Pour Écrire un Bon Rapport en InformatiquePour Écrire un Bon Rapport en Informatique
Pour Écrire un Bon Rapport en InformatiqueLilia Sfaxi
 
Exposébuzz/bad buzz
Exposébuzz/bad buzzExposébuzz/bad buzz
Exposébuzz/bad buzzawatef mejri
 
Page de garde PFE
Page de garde PFEPage de garde PFE
Page de garde PFErimabf
 
Ethnomusicologie générale
Ethnomusicologie généraleEthnomusicologie générale
Ethnomusicologie généraleNicolas Martello
 
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? Mémoire
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? MémoireINNOVER EN FRANCE AVEC LE DESIGN THINKING ? Mémoire
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? MémoireGeoffrey Dorne
 
Le redressement de projets en péril
Le redressement de projets en périlLe redressement de projets en péril
Le redressement de projets en périlPMI-Montréal
 
Virtualisation
VirtualisationVirtualisation
VirtualisationTsubichi
 
La production de contenus audiovisuels : une activité à internaliser ou à sou...
La production de contenus audiovisuels : une activité à internaliser ou à sou...La production de contenus audiovisuels : une activité à internaliser ou à sou...
La production de contenus audiovisuels : une activité à internaliser ou à sou...Thomas Groc de Salmiech
 
Modèle de cahier des charges web
Modèle de cahier des charges webModèle de cahier des charges web
Modèle de cahier des charges webForestier Mégane
 
Projet gps
Projet gpsProjet gps
Projet gpsherv4619
 
Mémoire de fin d'étude - La big data et les réseaux sociaux
Mémoire de fin d'étude - La big data et les réseaux sociauxMémoire de fin d'étude - La big data et les réseaux sociaux
Mémoire de fin d'étude - La big data et les réseaux sociauxChloé Marty
 

Tendances (20)

La communication au service de l’acceptation sociale des grands projets d’inf...
La communication au service de l’acceptation sociale des grands projets d’inf...La communication au service de l’acceptation sociale des grands projets d’inf...
La communication au service de l’acceptation sociale des grands projets d’inf...
 
Case study 2 Human Computer Interaction
Case study 2 Human Computer InteractionCase study 2 Human Computer Interaction
Case study 2 Human Computer Interaction
 
Design thinking et Agilité
Design thinking et AgilitéDesign thinking et Agilité
Design thinking et Agilité
 
Rapport exposé eXtreme Programming XP
Rapport exposé eXtreme Programming XPRapport exposé eXtreme Programming XP
Rapport exposé eXtreme Programming XP
 
Soutenance orale de mémoire
Soutenance orale de mémoireSoutenance orale de mémoire
Soutenance orale de mémoire
 
Exposé anglais -The internet
Exposé anglais -The internetExposé anglais -The internet
Exposé anglais -The internet
 
rapport-projet-de-fin-detudes
 rapport-projet-de-fin-detudes rapport-projet-de-fin-detudes
rapport-projet-de-fin-detudes
 
Pour Écrire un Bon Rapport en Informatique
Pour Écrire un Bon Rapport en InformatiquePour Écrire un Bon Rapport en Informatique
Pour Écrire un Bon Rapport en Informatique
 
Exposébuzz/bad buzz
Exposébuzz/bad buzzExposébuzz/bad buzz
Exposébuzz/bad buzz
 
Page de garde PFE
Page de garde PFEPage de garde PFE
Page de garde PFE
 
Ethnomusicologie générale
Ethnomusicologie généraleEthnomusicologie générale
Ethnomusicologie générale
 
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? Mémoire
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? MémoireINNOVER EN FRANCE AVEC LE DESIGN THINKING ? Mémoire
INNOVER EN FRANCE AVEC LE DESIGN THINKING ? Mémoire
 
Le redressement de projets en péril
Le redressement de projets en périlLe redressement de projets en péril
Le redressement de projets en péril
 
Virtualisation
VirtualisationVirtualisation
Virtualisation
 
La production de contenus audiovisuels : une activité à internaliser ou à sou...
La production de contenus audiovisuels : une activité à internaliser ou à sou...La production de contenus audiovisuels : une activité à internaliser ou à sou...
La production de contenus audiovisuels : une activité à internaliser ou à sou...
 
Modèle de cahier des charges web
Modèle de cahier des charges webModèle de cahier des charges web
Modèle de cahier des charges web
 
Projet gps
Projet gpsProjet gps
Projet gps
 
Mémoire de fin d'étude - La big data et les réseaux sociaux
Mémoire de fin d'étude - La big data et les réseaux sociauxMémoire de fin d'étude - La big data et les réseaux sociaux
Mémoire de fin d'étude - La big data et les réseaux sociaux
 
Rapport PFE - B.Sc IT
Rapport PFE -  B.Sc ITRapport PFE -  B.Sc IT
Rapport PFE - B.Sc IT
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 

Similaire à L'évolution du web-design

Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1bduverneuil
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2bduverneuil
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignFrédéric Harper
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?WebSchool Orléans
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basicsAlinoa
 
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud Microsoft
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Olivier Dommange
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Webambin_fr
 
Atelier web et mobile design partie i introduction au web design ahmed bachir...
Atelier web et mobile design partie i introduction au web design ahmed bachir...Atelier web et mobile design partie i introduction au web design ahmed bachir...
Atelier web et mobile design partie i introduction au web design ahmed bachir...Ahmed BACHIR CHERIF
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologieekino
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursStéphanie Hertrich
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...i-breed et associés
 

Similaire à L'évolution du web-design (20)

Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Webdesign
WebdesignWebdesign
Webdesign
 
Design Trends
Design TrendsDesign Trends
Design Trends
 
Staelens cv 2019 word
Staelens cv 2019 wordStaelens cv 2019 word
Staelens cv 2019 word
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
 
Atelier web et mobile design partie i introduction au web design ahmed bachir...
Atelier web et mobile design partie i introduction au web design ahmed bachir...Atelier web et mobile design partie i introduction au web design ahmed bachir...
Atelier web et mobile design partie i introduction au web design ahmed bachir...
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 

L'évolution du web-design

  • 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 !
  • 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
  • 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
  • 17.
  • 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.
  • 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
  • 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
  • 29. 3/ La nouvelle donne WEB MOBILE
  • 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
  • 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