SlideShare une entreprise Scribd logo
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 icon, slides verticaux, menu latéral, moteur qui se déplie...
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.
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 !
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
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...
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
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
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 
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
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
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
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
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...
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
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

Contenu connexe

Tendances

Webdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieWebdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomie
Olivier Dommange
 
Tendances Web Design 2015
Tendances Web Design 2015Tendances Web Design 2015
Tendances Web Design 2015
Philippe Rondepierre
 
Le référencement naturel en 2018
Le référencement naturel en 2018Le référencement naturel en 2018
Le référencement naturel en 2018
Concept Image
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
Olivier Soros
 
Introduction au Responsive web design
Introduction au Responsive web designIntroduction au Responsive web design
Introduction au Responsive web design
Dagobert
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
Raphaël Goetter
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
Raphaël Goetter
 
Design Trends
Design TrendsDesign Trends
Design Trends
Hannah Sellam
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
Vanksen
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
USERADGENTS
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014
Vincent Pereira
 
Easypublication, Création de catalogues interactifs et flipbook HTML5
Easypublication, Création de catalogues interactifs et flipbook HTML5Easypublication, Création de catalogues interactifs et flipbook HTML5
Easypublication, Création de catalogues interactifs et flipbook HTML5
Kevin Le Meilleur
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Idean France
 
Benchmark graphique / Site Blendbow.com
Benchmark graphique  / Site Blendbow.comBenchmark graphique  / Site Blendbow.com
Benchmark graphique / Site Blendbow.com
Juliette CHOUAID
 
2014 12 11 Jimdo Tutoriel 2015
2014 12 11 Jimdo Tutoriel 20152014 12 11 Jimdo Tutoriel 2015
2014 12 11 Jimdo Tutoriel 2015
Terre et Côte Basques
 
HD HOMES 2013 Fr
HD HOMES 2013 FrHD HOMES 2013 Fr
HD HOMES 2013 Fr
hdhomes
 

Tendances (16)

Webdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomieWebdesign sites web et mobiles-strategies et enjeux-ergonomie
Webdesign sites web et mobiles-strategies et enjeux-ergonomie
 
Tendances Web Design 2015
Tendances Web Design 2015Tendances Web Design 2015
Tendances Web Design 2015
 
Le référencement naturel en 2018
Le référencement naturel en 2018Le référencement naturel en 2018
Le référencement naturel en 2018
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
Introduction au Responsive web design
Introduction au Responsive web designIntroduction au Responsive web design
Introduction au Responsive web design
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
 
Design Trends
Design TrendsDesign Trends
Design Trends
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014
 
Easypublication, Création de catalogues interactifs et flipbook HTML5
Easypublication, Création de catalogues interactifs et flipbook HTML5Easypublication, Création de catalogues interactifs et flipbook HTML5
Easypublication, Création de catalogues interactifs et flipbook HTML5
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
 
Benchmark graphique / Site Blendbow.com
Benchmark graphique  / Site Blendbow.comBenchmark graphique  / Site Blendbow.com
Benchmark graphique / Site Blendbow.com
 
2014 12 11 Jimdo Tutoriel 2015
2014 12 11 Jimdo Tutoriel 20152014 12 11 Jimdo Tutoriel 2015
2014 12 11 Jimdo Tutoriel 2015
 
HD HOMES 2013 Fr
HD HOMES 2013 FrHD HOMES 2013 Fr
HD HOMES 2013 Fr
 

En vedette

L'art de prendre_la_bonne_photo_au_b
L'art de prendre_la_bonne_photo_au_bL'art de prendre_la_bonne_photo_au_b
L'art de prendre_la_bonne_photo_au_bAudrey2012
 
IT-Projekte erfolgreich abwickeln - topsoft 2010_03_24 09:00
IT-Projekte erfolgreich abwickeln - topsoft 2010_03_24 09:00IT-Projekte erfolgreich abwickeln - topsoft 2010_03_24 09:00
IT-Projekte erfolgreich abwickeln - topsoft 2010_03_24 09:00
topsoft - inspiring digital business
 
Gute Auswertungen generieren Massnahmen – schlechte Auswertungen generieren P...
Gute Auswertungen generieren Massnahmen – schlechte Auswertungen generieren P...Gute Auswertungen generieren Massnahmen – schlechte Auswertungen generieren P...
Gute Auswertungen generieren Massnahmen – schlechte Auswertungen generieren P...
topsoft - inspiring digital business
 
[Infographie Etude JLL] Enquête sur l’évolution de la fonction immobilière 2015
[Infographie Etude JLL] Enquête sur l’évolution de la fonction immobilière 2015[Infographie Etude JLL] Enquête sur l’évolution de la fonction immobilière 2015
[Infographie Etude JLL] Enquête sur l’évolution de la fonction immobilière 2015
JLL France
 
Zahltag. Eine Auswahl.
Zahltag. Eine Auswahl.Zahltag. Eine Auswahl.
Zahltag. Eine Auswahl.
arsmedium
 
Organic Groups By Dominik Jais
Organic Groups By Dominik JaisOrganic Groups By Dominik Jais
Organic Groups By Dominik Jais
Dominik
 
Atelier 11 - Interco et structures touristiques
Atelier 11  - Interco et structures touristiquesAtelier 11  - Interco et structures touristiques
Atelier 11 - Interco et structures touristiques
R-Evolutions Touristiques de Brive
 
Evolution de la prise en charge des PPC dans les apnées du sommeil
Evolution de la prise en charge des PPC dans les apnées du sommeilEvolution de la prise en charge des PPC dans les apnées du sommeil
Evolution de la prise en charge des PPC dans les apnées du sommeil
RESEAU MORPHEE
 
Ma ville .meknes
Ma ville   .meknesMa ville   .meknes
Ma ville .meknesmerico2
 
Wie man Negative scannt
Wie man Negative scanntWie man Negative scannt
Wie man Negative scannt
ScanCorner
 
Präsentation dells 150708_de
Präsentation dells 150708_dePräsentation dells 150708_de
Präsentation dells 150708_de
Christian Alberto Dellsperger Wharwood
 
Preposicion en
Preposicion enPreposicion en
Preposicion enEscomay
 
Propiedades de la chía
Propiedades de la chíaPropiedades de la chía
Propiedades de la chía
giannalourdeselias
 

En vedette (20)

L'art de prendre_la_bonne_photo_au_b
L'art de prendre_la_bonne_photo_au_bL'art de prendre_la_bonne_photo_au_b
L'art de prendre_la_bonne_photo_au_b
 
IT-Projekte erfolgreich abwickeln - topsoft 2010_03_24 09:00
IT-Projekte erfolgreich abwickeln - topsoft 2010_03_24 09:00IT-Projekte erfolgreich abwickeln - topsoft 2010_03_24 09:00
IT-Projekte erfolgreich abwickeln - topsoft 2010_03_24 09:00
 
Gute Auswertungen generieren Massnahmen – schlechte Auswertungen generieren P...
Gute Auswertungen generieren Massnahmen – schlechte Auswertungen generieren P...Gute Auswertungen generieren Massnahmen – schlechte Auswertungen generieren P...
Gute Auswertungen generieren Massnahmen – schlechte Auswertungen generieren P...
 
[Infographie Etude JLL] Enquête sur l’évolution de la fonction immobilière 2015
[Infographie Etude JLL] Enquête sur l’évolution de la fonction immobilière 2015[Infographie Etude JLL] Enquête sur l’évolution de la fonction immobilière 2015
[Infographie Etude JLL] Enquête sur l’évolution de la fonction immobilière 2015
 
Zahltag. Eine Auswahl.
Zahltag. Eine Auswahl.Zahltag. Eine Auswahl.
Zahltag. Eine Auswahl.
 
Organic Groups By Dominik Jais
Organic Groups By Dominik JaisOrganic Groups By Dominik Jais
Organic Groups By Dominik Jais
 
Atelier 11 - Interco et structures touristiques
Atelier 11  - Interco et structures touristiquesAtelier 11  - Interco et structures touristiques
Atelier 11 - Interco et structures touristiques
 
Evolution de la prise en charge des PPC dans les apnées du sommeil
Evolution de la prise en charge des PPC dans les apnées du sommeilEvolution de la prise en charge des PPC dans les apnées du sommeil
Evolution de la prise en charge des PPC dans les apnées du sommeil
 
Ma ville .meknes
Ma ville   .meknesMa ville   .meknes
Ma ville .meknes
 
Wie man Negative scannt
Wie man Negative scanntWie man Negative scannt
Wie man Negative scannt
 
2011 10 05 09-30 dr marcel siegenthaler
2011 10 05 09-30 dr marcel siegenthaler2011 10 05 09-30 dr marcel siegenthaler
2011 10 05 09-30 dr marcel siegenthaler
 
3D
3D3D
3D
 
Präsentation dells 150708_de
Präsentation dells 150708_dePräsentation dells 150708_de
Präsentation dells 150708_de
 
Preposicion en
Preposicion enPreposicion en
Preposicion en
 
2011 10 05 15-15 rolf künzi opacc
2011 10 05 15-15 rolf künzi opacc2011 10 05 15-15 rolf künzi opacc
2011 10 05 15-15 rolf künzi opacc
 
2011 10 05 10-15 knut mertens
2011 10 05 10-15 knut mertens2011 10 05 10-15 knut mertens
2011 10 05 10-15 knut mertens
 
2011 01 06 10-15 steffen drawert
2011 01 06 10-15 steffen drawert2011 01 06 10-15 steffen drawert
2011 01 06 10-15 steffen drawert
 
Veille sr
Veille srVeille sr
Veille sr
 
VALDECUEVAS
VALDECUEVASVALDECUEVAS
VALDECUEVAS
 
Propiedades de la chía
Propiedades de la chíaPropiedades de la chía
Propiedades de la chía
 

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

Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
Concept Image
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenLes 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenSolange Derrey
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
Vincent Pereira
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
Georges59
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
Concept Image
 
Les 11 tendances du webdesign en 2014
Les 11 tendances du webdesign en 2014Les 11 tendances du webdesign en 2014
Les 11 tendances du webdesign en 2014
Nineteengroupe
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
Olivier Dommange
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016
Idean France
 
Tendance webdesign
Tendance webdesignTendance webdesign
Tendance webdesign
Kelian Nando
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLC
Brioude Internet
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Julien Dereumaux
 
Bien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelinesBien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelines
Microsoft Technet France
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
Olivier Dommange
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
Alinoa
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
La FeWeb
 
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Rencontres Nationales du etourisme institutionnel
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
Microsoft Technet France
 
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Vincent Vandevelde
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014
Inaativ
 

Similaire à telmedia* : tendances digitales 2014, l'engagement émotionnel (20)

Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
 
Les 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by VanksenLes 10 Tendances Webdesign pour 2014 by Vanksen
Les 10 Tendances Webdesign pour 2014 by Vanksen
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
Les 11 tendances du webdesign en 2014
Les 11 tendances du webdesign en 2014Les 11 tendances du webdesign en 2014
Les 11 tendances du webdesign en 2014
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016
 
Tendance webdesign
Tendance webdesignTendance webdesign
Tendance webdesign
 
Référencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLCRéférencement Mobile Brioude Internet - Formation VLC
Référencement Mobile Brioude Internet - Formation VLC
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
 
Bien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelinesBien passer le Store : Le respect des guidelines
Bien passer le Store : Le respect des guidelines
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
Atelier 11 - Nos sites internet se refont une jeunesse html5 css3 - ET8
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
Atelier "Nos sites internet se refont une jeunesse html5 css3" - ET8
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014
 

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

  • 2. RESPONSIVE WEB DESIGN Le responsive influence considérablement le design ET CE N’EST QUE LE DÉBUT ...
  • 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. 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. 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. 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. 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. 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. 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. PRÉCONISATIONS POUR UN DESIGN FOR USE
  • 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. 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. 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. 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. 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. 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. 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