Upload
telmedia
View
338
Download
0
Embed Size (px)
DESCRIPTION
Découvrez au travers de notre présentation, les grandes tendances du design digital
Citation preview
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