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

1. tendances 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