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 FIRSTInfluence 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.comwww.oti-delasorgue.fr

HEADER

PLUS LÉGER, SIMPLE, MENU DE NAVIGATION CLAIR ET NON POLLUÉ

Le logoNouvelle 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)

MultilinguismeAffichage de la langue en cours et les autres langues s’affichent au survol (drapeaux, textes)

Liens d’évitementDans 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.frlegifrance.gouv.frservice-public.fr

SLIDER

LE FULL ÉCRANPour suivre les tendances 2014, on part sur des sliders full écran (voir fixe)

Nombre de diaposPrivilé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

CHERCHER L’ORIGINALMais 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 mieltympanus.net/Tutorials/CaptionHoverEffects/index2.html

ANIMATIONS & TRANSITIONS

Sites en bandeaux- Parallaxe sur les différents bandeaux et les images de fond.- Mini-effets sur les textes, légers et subtilsdaneden.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ÉOSwww.winshape.org/camps

www.quebecstationsnautiques.com

COULEURS

www.pantone.com

colours.neilorangepeel.com

LIENS D’ÉVITEMENTwww.urbilog.frlegifrance.gouv.frservice-public.fr

SLIDERmaisondulac-aiguebelette.com

MOTEUR DE RECHERCHEwww.lesmenuires.com

www.discovertasmania.com.au

www.kuhl.com lac-aiguebelette.com

ANIMATIONS & TRANSITIONSh5bp.github.io/Effeckt.csswww.meribel.netstorehouseagency.comwww.protest.eu/nl/dameswww.dittodc.comcolouredlines.com.au/who-we-are

tympanus.net/Tutorials/CaptionHoverEffects/index2.html

daneden.github.io/animate.css