SlideShare une entreprise Scribd logo
1  sur  84
Télécharger pour lire hors ligne
DESIGN 
MULTIMEDIA 
INTERACTIF 
Les grandes tendances 2014 
Speaker : Patrice Blain 
Directeur conseil Groupe Scala 
ancien dirigeant fondateur de La Souris Verte 
p.blain@groupe-scala.com 
@patriceblain
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
Un peu d’histoire 
back to the future
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
1994 
premiers pas de l’internet en France 
Netscape 
très faibles débits, page 40 ko max 
Site Html statiques simples 
aucun outil de production et de design 
aucune typographie digne de ce nom en dehors de l’Helvetica 
prédominance de Yahoo 
1995 
W3C devient opérationnel
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
1998 
Création de Google et d’Amazon 
sites html usage intensif des <tables> 
typo-images 
800x600 pixels 
Guerre Netscape contre Internet Explorer 
CSS ?
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
2000 -> 2005 
généralisation progressive du Haut Débit en Europe 
(illimité en France) 
sites Flash, animés, sonorisés 
séparer la structure du style : 
> premiers CMS 
> intégration progressive des CSS 
> prééminence de Google et référencement naturel => texte et 
navigation lisibles par GoogleBot 
Mozilla et Opéra vs IE
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
2005 -> 2010 
Généralisation des CMS 
Flash est mort 
Google domine le monde, 
rejoint par Facebook et Apple 
émergence des réseaux sociaux 
puis des smartphones 
2003 création LinkedIn, 
2004 Facebook, 
2006 Twitter 
2007 iPhone
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
2010 -> 2014 
Html5, CSS3 à la portée de tous ! 
Enfin des typographes sur le web ! 
Multi-device -> Responsive design 
Apple iOS7 -> Flat design
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
Design 
multimedia 
interactif 
kesako ?
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
design 
Le design est une activité de création en vue de la réalisation 
et de la production d’un objet ou d’un système, situés à la 
croisée de l’art, de la technique et de la société. (wikipedia) 
Apporter des solutions globales 
à une problématique complexe, 
dans des systèmes ouverts et diffus, 
sans paramètres fixes. 
Pas de solution prévisible ou calculable, 
ni définitive. 
XX message, 
XX communication, 
XX information, 
XX commerce
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
multimedia 
Rapprochement des industries 
de la communication et de l’audiovisuel, 
et des technologies informatiques. 
XX texte, 
XX image fixe et animée, 
XX son
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
interactif 
XX utilisateur, 
XX écran, 
XX interface, 
XX navigation
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
matériel 
et réseau 
XX accès, débit, 
XX capacité de traitement et calcul 
XX écrans et résolutions
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
Les tendances 
d’aujourd’hui pour votre 
communication digitale 
de demain 
XX HTML5 et CSS3 structurent les codes visuels 
XX la mobilité change tout
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
de grandes 
et belles images 
XX des vrais parti pris iconographiques sensibles
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
des univers colorés 
joyeux, chaleureux 
XX un univers visuel marqué et chaleureux 
XX des couleurs plein pot,... non à la fadeur !
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
de la vidéo 
XX et du rich media ?
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
minimaliste 
pas plus
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
ou bien 
des longues pages 
de scroll 
XX plus de scroll, moins de clicks 
XX un site en une seule page ?
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
de la respiration 
au service du message 
XX beaucoup d’espace blanc
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
le texte 
XX fusionne dans l’image 
XX le contenu rédactionnel se mue en «shots» 
informationnels et émotionnels 
XX et le texte se «redensifie» via le storytelling digital
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
des (vraies) typographies 
XX identitaire 
XX lisible 
XX sensible
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
des icônes 
XX des icônes-fonts directement intégrables 
XX campaign monitor 
XX font awesome 
http://www.awwwards.com/31-examples-of-icons-in-navegation-menus.html
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
le design émotionnel 
Communiquer de l’émotion 
au travers d’une interface graphique 
dans le but de faire passer un moment agréable 
à l’utilisateur lors de son expérience sur un site 
Le design émotionnel sert à transmettre de l’humanité 
dans les interfaces et donc de la proximité ou de l’empathie. 
XX mettre en avant les hommes 
XX des grandes et belles images, de l’émotion 
XX de la surprise , de l’inattendu 
XX une petite touche d’humour (le ton de la souris verte 
sdkjhfqsd fds fs 
XX parfois des mascottes (le singe de mailchimp)
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
une navigation 
intégrée au contenu 
XX call to action 
XX scroll plutot que click 
XX interface et contenu = navigation
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
des blocs, des blocs 
l’effet pinterest 
XX Composition en blocs de tailles différentes, parfois 
superposés, créant des effets dynamiques 
XX Effets de roll-overs 
XX Navigation claire et structurée pour l’utilisateur 
XX S’adapte aisément au petits écrans (responsive)
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
des blocs 
mais aussi des cercles 
XX un univers visuel marqué et chaleureux 
XX des couleurs plein pot,... non à la fadeur !
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
boutons 
et call to action 
XX tactile 
XX navigation intégrée au rédactionnel 
XX action 
XX click ou scroll ?
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
au menu 
j’me déplie 
et j’me replie 
selon mes envies
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
responsive certes,... 
mobile first ?
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
et demain ? 
XX très haut débit 
XX mobile first 
XX animation 
XX gamification 
XX vectoriel 
XX 3D 
XX vidéo 
XX temps réel 
XX data 
XX objets connectés
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
la fin du pixel 
est l’avenir du vectoriel 
XX 72 dpi a-t-il encore un sens ? 
XX avènement du format SVG et du vectoriel 
XX avec des petits écrans 
XX deux fois mieux définis et plus précis 
XX dont effets de zoom 
XX mais avec un débit 4 ou 10 fois moindre 
XX comment choisir la taille et la résolution de mon image ?
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
plus d’écrans 
XX la problématique multidevice implique une vraie réflexion 
amont sur la cible
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
data 
XX open-data et big-data 
XX data-vizualisation 
XX personnalisation poussée
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
rich media 
Avec le très haut débit, la capacité de calcul entre les 
mains des digital natives, il faut s’attendre à des évolutions 
majeures : 
XX + de vidéo 
XX 3D temps réel, 
XX gamification
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
les objets connectés 
XX notre environnement devient numérique 
XX domotique 
XX réalité augmentée 
XX personnalisation 
XX plus de services 
XX le numérique, c’est pas que le web
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
en résumé
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
une identité affirmée 
la marque s’exprime 
enfin à l’écran 
XX des typos, 
XX des couleurs franches et affirmées, 
XX des choix iconographiques personnalisés et pertinents 
cette évolution suit directement les tendances du design des identités visuelles globales
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
un message 
plus clair, plus simple 
et plus impactant 
XX textes courts 
XX des mises en pages sans fioritures 
XX une approche «affiche» plus que documentaire
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
un message 
scénarisé 
XX peu de textes mais plus impactants 
XX animations, parallax, (no-flash) 
XX scroll et navigations alternatives 
XX story-telling 
XX réseaux
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
orienté utilisateur 
XX persona 
XX design émotionnel, proposer une expérience 
XX interactions directes et réseaux sociaux : vraiment 
interactif ? 
XX lisibilité, navigabilité (accessibilité ?) 
XX s’adapter aux diffrérents usages (responsive)
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
mobile 
simple 
visuel 
contenu 
usable
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
se poser les bonnes questions 
pour ne pas se tromper 
Ne pas s’aveugler par les modes et leurs mots : responsive, 
mobile first, émotionnel,... 
XX mes objectifs 
XX le message 
XX la cible 
XX valoriser la marque
LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 
merci de votre 
attention 
Patrice Blain 
06 11 91 15 03 
p.blain@groupe-scala.com 
@patriceblain

Contenu connexe

Plus de SCALA

Le BYOD en entreprise
Le BYOD en entrepriseLe BYOD en entreprise
Le BYOD en entrepriseSCALA
 
Big Breakfast Scala_Windows10 et le Cloud_Nicolas Bonnet
Big Breakfast Scala_Windows10 et le Cloud_Nicolas BonnetBig Breakfast Scala_Windows10 et le Cloud_Nicolas Bonnet
Big Breakfast Scala_Windows10 et le Cloud_Nicolas BonnetSCALA
 
Les 3 bottes secrètes du design émotionnel
Les 3 bottes secrètes du design émotionnelLes 3 bottes secrètes du design émotionnel
Les 3 bottes secrètes du design émotionnelSCALA
 
Le Cloud selon Scala
Le Cloud selon ScalaLe Cloud selon Scala
Le Cloud selon ScalaSCALA
 
Twitter - bonnes pratiques pour un bon usage professionnel
Twitter - bonnes pratiques pour un bon usage professionnelTwitter - bonnes pratiques pour un bon usage professionnel
Twitter - bonnes pratiques pour un bon usage professionnelSCALA
 
La BI, Power BI, et SQL Server 2014
La BI, Power BI, et SQL Server 2014La BI, Power BI, et SQL Server 2014
La BI, Power BI, et SQL Server 2014SCALA
 
e-Réputation et visibilité sur le Web
e-Réputation et visibilité sur le Webe-Réputation et visibilité sur le Web
e-Réputation et visibilité sur le WebSCALA
 
Externaliser vos services managés
Externaliser vos services managésExternaliser vos services managés
Externaliser vos services managésSCALA
 
System Center 2012 Orchestrator : Simplifiez vous l’IT avec l’automatisation ...
System Center 2012 Orchestrator : Simplifiez vous l’IT avec l’automatisation ...System Center 2012 Orchestrator : Simplifiez vous l’IT avec l’automatisation ...
System Center 2012 Orchestrator : Simplifiez vous l’IT avec l’automatisation ...SCALA
 

Plus de SCALA (9)

Le BYOD en entreprise
Le BYOD en entrepriseLe BYOD en entreprise
Le BYOD en entreprise
 
Big Breakfast Scala_Windows10 et le Cloud_Nicolas Bonnet
Big Breakfast Scala_Windows10 et le Cloud_Nicolas BonnetBig Breakfast Scala_Windows10 et le Cloud_Nicolas Bonnet
Big Breakfast Scala_Windows10 et le Cloud_Nicolas Bonnet
 
Les 3 bottes secrètes du design émotionnel
Les 3 bottes secrètes du design émotionnelLes 3 bottes secrètes du design émotionnel
Les 3 bottes secrètes du design émotionnel
 
Le Cloud selon Scala
Le Cloud selon ScalaLe Cloud selon Scala
Le Cloud selon Scala
 
Twitter - bonnes pratiques pour un bon usage professionnel
Twitter - bonnes pratiques pour un bon usage professionnelTwitter - bonnes pratiques pour un bon usage professionnel
Twitter - bonnes pratiques pour un bon usage professionnel
 
La BI, Power BI, et SQL Server 2014
La BI, Power BI, et SQL Server 2014La BI, Power BI, et SQL Server 2014
La BI, Power BI, et SQL Server 2014
 
e-Réputation et visibilité sur le Web
e-Réputation et visibilité sur le Webe-Réputation et visibilité sur le Web
e-Réputation et visibilité sur le Web
 
Externaliser vos services managés
Externaliser vos services managésExternaliser vos services managés
Externaliser vos services managés
 
System Center 2012 Orchestrator : Simplifiez vous l’IT avec l’automatisation ...
System Center 2012 Orchestrator : Simplifiez vous l’IT avec l’automatisation ...System Center 2012 Orchestrator : Simplifiez vous l’IT avec l’automatisation ...
System Center 2012 Orchestrator : Simplifiez vous l’IT avec l’automatisation ...
 

Tendances phares du design digital et interactif

  • 1. DESIGN MULTIMEDIA INTERACTIF Les grandes tendances 2014 Speaker : Patrice Blain Directeur conseil Groupe Scala ancien dirigeant fondateur de La Souris Verte p.blain@groupe-scala.com @patriceblain
  • 2. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 Un peu d’histoire back to the future
  • 3. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 1994 premiers pas de l’internet en France Netscape très faibles débits, page 40 ko max Site Html statiques simples aucun outil de production et de design aucune typographie digne de ce nom en dehors de l’Helvetica prédominance de Yahoo 1995 W3C devient opérationnel
  • 4. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 5. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 6. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 1998 Création de Google et d’Amazon sites html usage intensif des <tables> typo-images 800x600 pixels Guerre Netscape contre Internet Explorer CSS ?
  • 7. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 8. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 9. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 2000 -> 2005 généralisation progressive du Haut Débit en Europe (illimité en France) sites Flash, animés, sonorisés séparer la structure du style : > premiers CMS > intégration progressive des CSS > prééminence de Google et référencement naturel => texte et navigation lisibles par GoogleBot Mozilla et Opéra vs IE
  • 10. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 11. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 12. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 2005 -> 2010 Généralisation des CMS Flash est mort Google domine le monde, rejoint par Facebook et Apple émergence des réseaux sociaux puis des smartphones 2003 création LinkedIn, 2004 Facebook, 2006 Twitter 2007 iPhone
  • 13. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 2010 -> 2014 Html5, CSS3 à la portée de tous ! Enfin des typographes sur le web ! Multi-device -> Responsive design Apple iOS7 -> Flat design
  • 14. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 Design multimedia interactif kesako ?
  • 15. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 design Le design est une activité de création en vue de la réalisation et de la production d’un objet ou d’un système, situés à la croisée de l’art, de la technique et de la société. (wikipedia) Apporter des solutions globales à une problématique complexe, dans des systèmes ouverts et diffus, sans paramètres fixes. Pas de solution prévisible ou calculable, ni définitive. XX message, XX communication, XX information, XX commerce
  • 16. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 multimedia Rapprochement des industries de la communication et de l’audiovisuel, et des technologies informatiques. XX texte, XX image fixe et animée, XX son
  • 17. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 interactif XX utilisateur, XX écran, XX interface, XX navigation
  • 18. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 matériel et réseau XX accès, débit, XX capacité de traitement et calcul XX écrans et résolutions
  • 19. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 Les tendances d’aujourd’hui pour votre communication digitale de demain XX HTML5 et CSS3 structurent les codes visuels XX la mobilité change tout
  • 20. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 de grandes et belles images XX des vrais parti pris iconographiques sensibles
  • 21. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 22. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 23. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 24. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 25. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 des univers colorés joyeux, chaleureux XX un univers visuel marqué et chaleureux XX des couleurs plein pot,... non à la fadeur !
  • 26. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 27. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 de la vidéo XX et du rich media ?
  • 28. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 29. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 30. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 minimaliste pas plus
  • 31. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 32. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 33. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 ou bien des longues pages de scroll XX plus de scroll, moins de clicks XX un site en une seule page ?
  • 34. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 35. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 36. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 de la respiration au service du message XX beaucoup d’espace blanc
  • 37. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 38. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 39. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 40. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 le texte XX fusionne dans l’image XX le contenu rédactionnel se mue en «shots» informationnels et émotionnels XX et le texte se «redensifie» via le storytelling digital
  • 41. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 42. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 43. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 des (vraies) typographies XX identitaire XX lisible XX sensible
  • 44. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 45. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 46. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 des icônes XX des icônes-fonts directement intégrables XX campaign monitor XX font awesome http://www.awwwards.com/31-examples-of-icons-in-navegation-menus.html
  • 47. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 48. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 49. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 50. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 le design émotionnel Communiquer de l’émotion au travers d’une interface graphique dans le but de faire passer un moment agréable à l’utilisateur lors de son expérience sur un site Le design émotionnel sert à transmettre de l’humanité dans les interfaces et donc de la proximité ou de l’empathie. XX mettre en avant les hommes XX des grandes et belles images, de l’émotion XX de la surprise , de l’inattendu XX une petite touche d’humour (le ton de la souris verte sdkjhfqsd fds fs XX parfois des mascottes (le singe de mailchimp)
  • 51. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 52. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 53. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 une navigation intégrée au contenu XX call to action XX scroll plutot que click XX interface et contenu = navigation
  • 54. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 55. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 des blocs, des blocs l’effet pinterest XX Composition en blocs de tailles différentes, parfois superposés, créant des effets dynamiques XX Effets de roll-overs XX Navigation claire et structurée pour l’utilisateur XX S’adapte aisément au petits écrans (responsive)
  • 56. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 57. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 58. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 59. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 des blocs mais aussi des cercles XX un univers visuel marqué et chaleureux XX des couleurs plein pot,... non à la fadeur !
  • 60. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 61. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 boutons et call to action XX tactile XX navigation intégrée au rédactionnel XX action XX click ou scroll ?
  • 62. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 63. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 64. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 au menu j’me déplie et j’me replie selon mes envies
  • 65. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 66. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 67. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 68. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 responsive certes,... mobile first ?
  • 69. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 70. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014
  • 71. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 et demain ? XX très haut débit XX mobile first XX animation XX gamification XX vectoriel XX 3D XX vidéo XX temps réel XX data XX objets connectés
  • 72. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 la fin du pixel est l’avenir du vectoriel XX 72 dpi a-t-il encore un sens ? XX avènement du format SVG et du vectoriel XX avec des petits écrans XX deux fois mieux définis et plus précis XX dont effets de zoom XX mais avec un débit 4 ou 10 fois moindre XX comment choisir la taille et la résolution de mon image ?
  • 73. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 plus d’écrans XX la problématique multidevice implique une vraie réflexion amont sur la cible
  • 74. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 data XX open-data et big-data XX data-vizualisation XX personnalisation poussée
  • 75. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 rich media Avec le très haut débit, la capacité de calcul entre les mains des digital natives, il faut s’attendre à des évolutions majeures : XX + de vidéo XX 3D temps réel, XX gamification
  • 76. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 les objets connectés XX notre environnement devient numérique XX domotique XX réalité augmentée XX personnalisation XX plus de services XX le numérique, c’est pas que le web
  • 77. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 en résumé
  • 78. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 une identité affirmée la marque s’exprime enfin à l’écran XX des typos, XX des couleurs franches et affirmées, XX des choix iconographiques personnalisés et pertinents cette évolution suit directement les tendances du design des identités visuelles globales
  • 79. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 un message plus clair, plus simple et plus impactant XX textes courts XX des mises en pages sans fioritures XX une approche «affiche» plus que documentaire
  • 80. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 un message scénarisé XX peu de textes mais plus impactants XX animations, parallax, (no-flash) XX scroll et navigations alternatives XX story-telling XX réseaux
  • 81. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 orienté utilisateur XX persona XX design émotionnel, proposer une expérience XX interactions directes et réseaux sociaux : vraiment interactif ? XX lisibilité, navigabilité (accessibilité ?) XX s’adapter aux diffrérents usages (responsive)
  • 82. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 mobile simple visuel contenu usable
  • 83. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 se poser les bonnes questions pour ne pas se tromper Ne pas s’aveugler par les modes et leurs mots : responsive, mobile first, émotionnel,... XX mes objectifs XX le message XX la cible XX valoriser la marque
  • 84. LES GRANDES TENDANCES DU SCALA DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014 merci de votre attention Patrice Blain 06 11 91 15 03 p.blain@groupe-scala.com @patriceblain