Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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

  • Login to see the comments

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

×