tendances 2014, 
l’engagement 
émotionnel
RESPONSIVE WEB DESIGN 
Le responsive influence considérablement le design 
ET CE N’EST QUE LE DÉBUT ...
MOBILE FIRST 
IMPACT DU MOBILE FIRST 
Influence de la navigation issue du mobile pour des designs version desktop. 
Burger...
FLAT DESIGN 
SIMPLIFIER LE DESIGN POUR PLUS D’ADAPTABILITÉ 
Le Flat design est un design minimaliste qui joue sur la simpl...
IMAGES & VIDÉOS 
PLONGEON & IMMERSION 
Séduire par l’utilisation de visuels qui plongent directement l’ 
utilisateur dans ...
TYPOGRAPHIE 
CONTENT FIRST 
Travail au niveau du contenu. Il est allégé et plus 
percutant 
La typo étant de plus en plus ...
AFFORDANCE 
FAIRE EN SORTE QUE LES ÉLÉMENTS 
SOIENT FACILES À 
INTERPRÉTER ! 
L'affordance est la capacité d’un système ou...
LA COULEUR 
COULEUR SIMPLIFIÉE 
Couleur de l’année > Radian Orchid 18-3224 
Tendance au monochromatique design 
Apparition...
SCROLLING VERTICAL 
& PARALLAXE 
RESPIRATION AVANT TOUT ! 
Le contenu est plus organisé et dans un format 
beaucoup plus f...
PRÉCONISATIONS POUR UN DESIGN FOR USE
SQUELETTE 
2 CHOIX DE DESIGNS POSSIBLES 
Design mosaïque 
Éléments modulables sous forme de tuiles posées sur une grille 
...
HEADER 
PLUS LÉGER, SIMPLE, MENU DE 
NAVIGATION CLAIR ET NON POLLUÉ 
Le logo 
Nouvelle possibilité d'emplacement pour le l...
SLIDER 
LE FULL ÉCRAN 
Pour suivre les tendances 2014, on part sur des sliders 
full écran (voir fixe) 
Nombre de diapos 
...
ANIMATIONS & TRANSITIONS 
CHERCHER L’ORIGINAL 
Mais des petits effets pour de grandes sensations... 
Animer les boutons et...
Sites en bandeaux 
- Parallaxe sur les différents bandeaux et les images de 
fond. 
- Mini-effets sur les textes, légers e...
LIENS & RÉFÉRENCES 
DESIGN BANDEAUX 
chartreuse-tourisme.com 
www.neupre.be 
www.tourisme-creuse.com 
www.tourisme-graveli...
LIENS & RÉFÉRENCES 
SITES AVEC VIDÉOS 
www.winshape.org/camps 
www.quebecstationsnautiques.com 
COULEURS 
www.pantone.com ...
Prochain SlideShare
Chargement dans…5
×

telmedia* : tendances digitales 2014, l'engagement émotionnel

1 121 vues

Publié le

Découvrez au travers de notre présentation, les grandes tendances du design digital

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 121
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
18
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

telmedia* : tendances digitales 2014, l'engagement émotionnel

  1. 1. tendances 2014, l’engagement émotionnel
  2. 2. RESPONSIVE WEB DESIGN Le responsive influence considérablement le design ET CE N’EST QUE LE DÉBUT ...
  3. 3. MOBILE FIRST IMPACT DU MOBILE FIRST Influence de la navigation issue du mobile pour des designs version desktop. Burger icon, slides verticaux, menu latéral, moteur qui se déplie...
  4. 4. FLAT DESIGN SIMPLIFIER LE DESIGN POUR PLUS D’ADAPTABILITÉ Le Flat design est un design minimaliste qui joue sur la simplicité. C’est un design plat, sans dégradés, sans ombres ni autres décorations inutiles.
  5. 5. IMAGES & VIDÉOS PLONGEON & IMMERSION Séduire par l’utilisation de visuels qui plongent directement l’ utilisateur dans un univers. La Vidéo en Background La vidéo a la capacité de transmettre un message que le texte ne peut pas communiquer !
  6. 6. TYPOGRAPHIE CONTENT FIRST Travail au niveau du contenu. Il est allégé et plus percutant La typo étant de plus en plus importante dans la conception d'un site, la taille des textes est revue à la hausse. Style de la typo : sans serif, simple, épurée et facile à lire... IL EST BIEN PLUS LOGIQUE DE DÉSIGNER UN CONTENU, QUE D’ADAPTER UN CONTENU À UN DESIGN
  7. 7. AFFORDANCE FAIRE EN SORTE QUE LES ÉLÉMENTS SOIENT FACILES À INTERPRÉTER ! L'affordance est la capacité d’un système ou d'un produit à suggérer sa propre utilisation. Les principaux éléments avec affordance à prendre en considération : Les boutons et onglets, les liens, les icônes, les champs de formulaires...
  8. 8. LA COULEUR COULEUR SIMPLIFIÉE Couleur de l’année > Radian Orchid 18-3224 Tendance au monochromatique design Apparition d’un nouveau nuancier CSS colours.neilorangepeel.com
  9. 9. SCROLLING VERTICAL & PARALLAXE RESPIRATION AVANT TOUT ! Le contenu est plus organisé et dans un format beaucoup plus facile à digérer. La parallaxe permet de contrôler la profondeur des objets. En 2014, cet effet sera plus discret et tout en finesse
  10. 10. PRÉCONISATIONS POUR UN DESIGN FOR USE
  11. 11. SQUELETTE 2 CHOIX DE DESIGNS POSSIBLES Design mosaïque Éléments modulables sous forme de tuiles posées sur une grille Design bandeaux Structuration du site écran/écran, les éléments sont ainsi hiérarchisés Attention aux recommandations opquast sur le scrolling vertical > 2100 px max = 3 scrolls Sites à voir : lac-aiguebelette.com www.oti-delasorgue.fr
  12. 12. HEADER PLUS LÉGER, SIMPLE, MENU DE NAVIGATION CLAIR ET NON POLLUÉ Le logo Nouvelle possibilité d'emplacement pour le logo (logo centré). Permet de placer le burger à gauche et s'adapte mieux à la version mobile (sites à fortes valeurs touristique et visuelle = territoire fier de son image et de son logo) Multilinguisme Affichage de la langue en cours et les autres langues s’ affichent au survol (drapeaux, textes) Liens d’évitement Dans le but d’alléger le header, possibilité de les masquer : - Masquer par défaut (attention de ne pas utiliser display none ou visibility hidden pour les atteindre au clavier) - Rendre visible à la prise de focus avec effet de glissement du site À appliquer sur l’ensemble des sites 2014 Sites à voir : www.urbilog.fr legifrance.gouv.fr service-public.fr
  13. 13. SLIDER LE FULL ÉCRAN Pour suivre les tendances 2014, on part sur des sliders full écran (voir fixe) Nombre de diapos Privilégier une bonne image à plusieurs mauvaises images. Le slider n’est pas une obligation. Si plusieurs bonnes images, prévoir un slider. Attention cependant au nombre (tps de chargement trop long, nausée et identité flou du site). On préconise 5 slides maximum. Sa fonction Éviter de l’utiliser comme une “UNE”. Illustration visuelle, mise en avant des atouts du territoire. Le slider peut être associé à un wording simple et efficace. Un bouton ou un lien peuvent-être présents afin de renvoyer vers une page associée. Wording associé Si le slider n'est pas utilisé comme une « UNE » alors le texte associé à l'image n'est pas source d'information primordiale. Afin d'être immersif et en suivant les tendances 2014, il est intéressant de traiter ce texte (grosse typo) sans calque de fond. Solution pour pallier l'accessibilité : 1/ Récupérer la valeur du texte et la placer dans le « alt » de l'image associée 2/ Affichage de la partie textuelle au survol de l'image maisondulac-aiguebelette. com
  14. 14. ANIMATIONS & TRANSITIONS CHERCHER L’ORIGINAL Mais des petits effets pour de grandes sensations... Animer les boutons et les pictos des réseaux sociaux lors du survol h5bp.github.io/Effeckt.css Pour ce point, différentes techniques faciles à mettre en place : - Remplissage de la couleur www.meribel.net - Augmentation de la taille du bouton storehouseagency.com - Transformation du contour rond en coutour carré www.protest.eu/nl/dames - Message derrière les pictos des réseaux sociaux : www.dittodc.com - Transition duration pour les boutons - Languette pictogramme qui affiche le libellé colouredlines.com.au/who-we-are - Pour les pots de miel tympanus.net/Tutorials/CaptionHoverEffects/index2. html
  15. 15. Sites en bandeaux - Parallaxe sur les différents bandeaux et les images de fond. - Mini-effets sur les textes, légers et subtils daneden.github.io/animate.css Boutons Attention à la taille des boutons (minimum 44 x 44 px pour la version mobile). Uniformiser l'ensemble des boutons d'un site (tailles, couleurs, styles). Influence de la navigation mobile, penser en zones cliquables et plus en liens. Par exemple, si pas de demande précise du client éviter les liens « en savoir plus.. » sur les actus et rendre le titre/texte cliquables. Textes Actus/Agenda Alléger les textes pour une page web. Garder la possibilité d'avoir un titre sur deux lignes. Pour le descriptif, alléger le plus possible, voir, ne pas en mettre selon les cas. Version mobile Si non responsive, prévoir une version mobile adaptée (cf document Mobile book of trends 2014) ET AUSSI...
  16. 16. LIENS & RÉFÉRENCES DESIGN BANDEAUX chartreuse-tourisme.com www.neupre.be www.tourisme-creuse.com www.tourisme-gravelines.fr www.biscarrosse.com DESIGN MOSAÏQUE www.albanais-tourisme.com www.oti-delasorgue.fr www.tourisme.grand-rodez.com www.tourisme-carcassonne.fr www.migrateurs-charenteseudre.fr www.visit-corsica.com
  17. 17. LIENS & RÉFÉRENCES SITES AVEC VIDÉOS www.winshape.org/camps www.quebecstationsnautiques.com COULEURS www.pantone.com colours.neilorangepeel.com LIENS D’ÉVITEMENT www.urbilog.fr legifrance.gouv.fr service-public.fr SLIDER maisondulac-aiguebelette.com MOTEUR DE RECHERCHE www.lesmenuires.com www.discovertasmania.com.au www.kuhl.com lac-aiguebelette.com ANIMATIONS & TRANSITIONS h5bp.github.io/Effeckt.css www.meribel.net storehouseagency.com www.protest.eu/nl/dames www.dittodc.com colouredlines.com.au/who-we-are tympanus.net/Tutorials/CaptionHoverEffects/index2.html daneden.github.io/animate.css

×