tendances phares du design digital et interactif

84
DESIGN MULTIMEDIA INTERACTIF Les grandes tendances 2014 Speaker : Patrice Blain Directeur conseil Groupe Scala ancien dirigeant fondateur de La Souris Verte [email protected] @patriceblain

Upload: scala

Post on 21-Jun-2015

457 views

Category:

Design


2 download

DESCRIPTION

#ScalaBigDay Jeudi 12 juin 2014 "Tendances phares du design digital et interactif" (Salle 2, 11h15 - 12h00) Speaker : Patrice Blain

TRANSCRIPT

Page 1: Tendances phares du design digital et interactif

DESIGN MULTIMEDIA INTERACTIFLes grandes tendances 2014

Speaker : Patrice BlainDirecteur conseil Groupe Scalaancien dirigeant fondateur de La Souris Verte

[email protected]@patriceblain

Page 2: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Un peu d’histoire back to the future

Page 3: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

1994premiers pas de l’internet en France

Netscapetrès faibles débits, page 40 ko maxSite Html statiques simplesaucun outil de production et de designaucune typographie digne de ce nom en dehors de l’Helveticaprédominance de Yahoo

1995W3C devient opérationnel

Page 4: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 5: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 6: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

1998Création de Google et d’Amazon

sites html usage intensif des <tables>typo-images800x600 pixels

Guerre Netscape contre Internet ExplorerCSS ?

Page 7: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 8: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 9: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

2000 -> 2005gé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

Page 10: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 11: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 12: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

2005 -> 2010Généralisation des CMSFlash est mortGoogle domine le monde, rejoint par Facebook et Appleémergence des réseaux sociaux puis des smartphones

2003 création LinkedIn, 2004 Facebook, 2006 Twitter2007 iPhone

Page 13: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

2010 -> 2014Html5, CSS3 à la portée de tous !Enfin des typographes sur le web !Multi-device -> Responsive designApple iOS7 -> Flat design

Page 14: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Design multimedia interactifkesako ?

Page 15: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

designLe 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.

X message, X communication, X information, X commerce

Page 16: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

multimediaRapprochement des industries de la communication et de l’audiovisuel, et des technologies informatiques.

X texte, X image fixe et animée, X son

Page 17: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

interactif X utilisateur, X écran, X interface, X navigation

Page 18: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

matériel et réseau

X accès, débit, X capacité de traitement et calcul X écrans et résolutions

Page 19: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Les tendances d’aujourd’hui pour votre communication digitale de demain

X HTML5 et CSS3 structurent les codes visuels X la mobilité change tout

Page 20: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

de grandes et belles images

X des vrais parti pris iconographiques sensibles

Page 21: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 22: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 23: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 24: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 25: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

des univers colorésjoyeux, chaleureux

X un univers visuel marqué et chaleureux X des couleurs plein pot,... non à la fadeur !

Page 26: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 27: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

de la vidéo X et du rich media ?

Page 28: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 29: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 30: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

minimalistepas plus

Page 31: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 32: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 33: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

ou bien des longues pages de scroll

X plus de scroll, moins de clicks X un site en une seule page ?

Page 34: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 35: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 36: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

de la respiration au service du message

X beaucoup d’espace blanc

Page 37: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 38: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 39: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 40: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

le texte X fusionne dans l’image X le contenu rédactionnel se mue en «shots»

informationnels et émotionnels X et le texte se «redensifie» via le storytelling digital

Page 41: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 42: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 43: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

des (vraies) typographies X identitaire X lisible X sensible

Page 44: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 45: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 46: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

des icônes X des icônes-fonts directement intégrables X campaign monitor X font awesome

http://www.awwwards.com/31-examples-of-icons-in-navegation-menus.html

Page 47: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 48: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 49: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 50: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

le design émotionnelCommuniquer 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.

X mettre en avant les hommes X des grandes et belles images, de l’émotion X de la surprise , de l’inattendu X une petite touche d’humour (le ton de la souris verte

sdkjhfqsd fds fs X parfois des mascottes (le singe de mailchimp)

Page 51: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 52: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 53: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

une navigation intégrée au contenu

X call to action X scroll plutot que click X interface et contenu = navigation

Page 54: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 55: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

des blocs, des blocs l’effet pinterest

X Composition en blocs de tailles différentes, parfois superposés, créant des effets dynamiques

X Effets de roll-overs X Navigation claire et structurée pour l’utilisateur X S’adapte aisément au petits écrans (responsive)

Page 56: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 57: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 58: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 59: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

des blocsmais aussi des cercles

X un univers visuel marqué et chaleureux X des couleurs plein pot,... non à la fadeur !

Page 60: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 61: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

boutons et call to action

X tactile X navigation intégrée au rédactionnel X action X click ou scroll ?

Page 62: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 63: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 64: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

au menuj’me déplie et j’me replieselon mes envies

Page 65: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 66: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 67: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 68: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

responsive certes,...mobile first ?

Page 69: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 70: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

Page 71: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

et demain ? X très haut débit X mobile first X animation X gamification X vectoriel X 3D X vidéo X temps réel X data X objets connectés

Page 72: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

la fin du pixelest l’avenir du vectoriel

X 72 dpi a-t-il encore un sens ? X avènement du format SVG et du vectoriel

X avec des petits écrans X deux fois mieux définis et plus précis X dont effets de zoom X mais avec un débit 4 ou 10 fois moindre X comment choisir la taille et la résolution de mon image ?

Page 73: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

plus d’écrans X la problématique multidevice implique une vraie réflexion

amont sur la cible

Page 74: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

data X open-data et big-data X data-vizualisation X personnalisation poussée

Page 75: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

rich mediaAvec le très haut débit, la capacité de calcul entre les mains des digital natives, il faut s’attendre à des évolutions majeures :

X + de vidéo X 3D temps réel, X gamification

Page 76: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

les objets connectés X notre environnement devient numérique X domotique X réalité augmentée X personnalisation X plus de services X le numérique, c’est pas que le web

Page 77: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

en résumé

Page 78: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

une identité affirmée la marque s’exprime enfin à l’écran

X des typos, X des couleurs franches et affirmées, X des choix iconographiques personnalisés et pertinents

cette évolution suit directement les tendances du design des identités visuelles globales

Page 79: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

un message plus clair, plus simpleet plus impactant

X textes courts X des mises en pages sans fioritures X une approche «affiche» plus que documentaire

Page 80: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

un message scénarisé

X peu de textes mais plus impactants X animations, parallax, (no-flash) X scroll et navigations alternatives X story-telling X réseaux

Page 81: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

orienté utilisateur X persona X design émotionnel, proposer une expérience X interactions directes et réseaux sociaux : vraiment

interactif ? X lisibilité, navigabilité (accessibilité ?) X s’adapter aux diffrérents usages (responsive)

Page 82: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

mobilesimplevisuelcontenuusable

Page 83: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

se poser les bonnes questionspour ne pas se tromperNe pas s’aveugler par les modes et leurs mots : responsive, mobile first, émotionnel,...

X mes objectifs X le message X la cible X valoriser la marque

Page 84: Tendances phares du design digital et interactif

LES GRANDES TENDANCES DU DESIGN INTERACTIF - PATRICE BLAIN - 12 JUIN 2014S C A L A

merci de votre attention

Patrice Blain 06 11 91 15 [email protected]@patriceblain