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

p.blain@groupe-scala.com@patriceblain

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

Un peu d’histoire back to the future

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

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

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

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 ?

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

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

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

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

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

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

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

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

Design multimedia interactifkesako ?

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

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

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

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

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

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

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

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

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

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

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

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 !

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

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

de la vidéo X et du rich media ?

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

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

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

minimalistepas plus

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

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

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 ?

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

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

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

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

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

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

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

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

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

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

des (vraies) typographies X identitaire X lisible X sensible

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

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

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

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

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

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

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)

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

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

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

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

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)

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

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

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

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 !

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

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 ?

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

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

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

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

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

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

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

responsive certes,...mobile first ?

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

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

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

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 ?

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

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

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

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

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

en résumé

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

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

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

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)

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

mobilesimplevisuelcontenuusable

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

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 03p.blain@groupe-scala.com@patriceblain