10 tendances UX & Web Design pour booster les conversions de votre site

Chaque année apporte son lot de changement et de nouvelles tendances. L’année 2016 est déjà bien entamée, mais c’est l’occasion de réviser ses classiques pour la rentrée et se mettre à jour sur les tendances web design de cette année. Découvrez 10 concepts UX & Web Design en infographie, afin d’accélérer les conversions de votre site, grâce à cette infographie réalisée par l’agence design de Chicago, The Deep End. Sortez vos cahiers !

 

1. Des grandes images

Certaines études ont démontré que de larges images attiraient davantage l’attention des internautes et qu’ils avaient plus tendance à s’arrêter devant. Cet arrêt contribue à augmenter les conversions sur votre site, notamment s’il s’agit de photos de personnes souriantes, de vidéos d’ambiance ou bien de cinémagraphes.

2. Le « split screen » (écran partagé)

Si votre site propose différents produits, services ou catégories, vous pouvez diviser l’écran en deux parties afin de proposer des landing pages plus adaptées aux différents clics de vos prospects. En utilisant le split screen, vous encouragez votre audience à choisir sa propre aventure et les diriger là où ils sont les plus susceptibles de cliquer.

3. Les couleurs monochromatiques avec un CTA contrasté

Si votre site web est en grande partie en noir et blanc, ou de couleurs tamisées, placez un bouton Call-To-Action lumineux de façon à ce qu’il ressorte et obtienne davantage de clics. Votre CTA sera simplement beaucoup plus visible et c’est ce que les internautes le verront plus facilement !

4. Prioriser la navigation

Si on laisse trop de choix aux internautes, ils sont susceptibles de ne rien choisir du tout. Pour résoudre cela, cachez dans un menu toutes les pages secondaires (qui ne sont pas dans votre top), puis stylisez votre principal CTA comme vu dans le point précédent. Vous établirez ainsi des priorités et dirigerez votre audience exactement là ou vous souhaitez qu’elle aille.

5. Réduire le champ de collecte d’une adresse e-mail

Si vous souhaitez créer une page dédiée à la collecte d’adresses e-mails, il est plus efficace d’avoir un petit champ de formulaire, avec de bons titre et sous-titre. De cette façon, les internautes savent ce qu’ils sont censés faire, et vous êtes plus susceptible de collecter des adresses e-mails.

6. Les vidéos

Le format vidéo a explosé ces deux dernières années. La plus grande difficulté est de gagner la confiance de votre prospect afin de créer une conversion. Une vidéo bien réalisée permet aux gens de mieux connaître la personnalité de votre entreprise. C’est le format idéal pour souhaiter la bienvenue, récolter des témoignages ou faire des démonstrations produits.

7. Les boutons call-to-actions « collants »

Une fois que vous avez déterminé votre CTA le plus important, il doit rester visible. En restant, par exemple, en haut à droite de votre écran, même si vous faites défiler une page. Vous pouvez également le mettre dans une barre latérale « collante » ou sur mobile.

8. Une mise en page en cartes

Inspiré de Pinterest, une mise en page façon « cartes » est très visuelle et permet aux internautes d’aller rapidement à tout ce qui les intéresse, le noter, le garder en favori, ou d’aller sur une page où ils sont susceptibles de convertir.

9. Un CTA de colonne

Si un site comporte plusieurs colonnes, des études ont montré que vous pouvez interrompre ce flux de colonne en plaçant u CTA au titre convaincant. Les internautes seront ainsi plus enclins à cliquer.

10. Une expérience utilisateur personnalisée

A chaque fois que vous allez à Amazon, le site vous montre ce que vous avez regardé la dernière fois. La plupart des gens n’achètent pas du premier coup, et Amazon le sait ! Voilà pourquoi il vous montre à plusieurs reprises les derniers articles que vous avez consultés. Cette expérience est très personnalisée, Amazon connaît vos habitudes de navigation, sait ce que vous avez consulté, et en vous le montre à nouveau afin de conclure une vente.

 

Infographic-2016-Web-design-trends

Tendances graphiques de l’été 2016

Bientôt arrivés à la moitié de l’année, nous nous devions de refaire un point sur les tendances graphiques de l’année 2016. Parce que ce qui est à la mode l’hiver dernier ne l’est plus forcément l’été suivant, le site DesginMantic a réalisé une infographie sur les tendances printemps/été 2016 en matière de design. Faites défiler !

 

Les couleurs

Comme les saisons, les tendances graphiques changent ! Pour cet été, l’utilisation de couleurs saisonnières dans vos créations peut les rendre plus attrayantes. Utilisez notamment l’association de couleurs bien tranchées, des couleurs tramées, le noir, ou des motifs. À éviter absolument : les bleus ennuyant, des couleurs pastel, l’aplat de couleurs monotones.

Typographie

Il est également important de se rappeler que les tendances qui sont populaires en une saison pourraient ne pas être aussi à la mode la saison suivante. Par exemple, les polices sans serif, slab serif ou grasses sont délaissées au profil des typographies découpées, avec des détails géométriques ou en ribbon art.

Icônes

Enfin, si vous êtes dans un processus de conception d’un logo, un site Web ou tout autre graphique, cette infographie peut aussi vous donner un peu d’inspiration pour créer des icônes. Privilégiez les icônes non figuratives, dynamiques et avec des traits fins, aux icônes avec des ombres, symétrique ou flat.

Vous voilà fin prêt à braver la tendance automne/hiver pour laisser place au graphisme estival !

 

Graphic-Design-Guide-book-2016

Outil : Tester le design responsive de votre site grâce à Google Resizer

L’équipe design de Google vient de lancer un nouvel outil vous permettant de tester si le design de votre site s’adapte bien sur différents écrans : bureau, tablette et mobile. Découvrez Google Resizer.

 

L’outil est assez simple mais il fallait y penser ! Et qui d’autre que Google qui a quasiment obligé tous les sites web a passé en responsive l’année dernière pour aujourd’hui les aider à optimiser l’apparence d’un site sur plusieurs écrans.

resize-design-google05

La prise en main de Google Resizer est donc elle aussi assez simpliste : entrez l’url du site web que vous souhaitez vérifier, puis constatez le résultat sur desktop, tablette et mobile. Si vous souhaitez voir les résultats plus en détail, cliquez sur l’icône « ordinateur » en haut à droite, vous pourrez ainsi tester les différents tailles d’écran Windows allant de xsmall à xlarge (480, 600, 840, 960, 1280, 1440 et 1600 pixels).

L’autre icône « mobile » vous permet de constater le résultat sur différentes tailles d’écrans de smartphones et tablettes en mode portrait et paysage.

resize-design-google03

resize-design-google02

 

Petit plus, le site de test design déployé par Google permet également de tester toutes les pages de votre site à l’intérieur de leur outil. N’hésitez donc pas à passer en revue toutes vos pages pour être certain d’obtenir un site totalement responsive design.

design.google.com/resizer/

 

resize-design-google01

10 tendances web design en 2016

Ça y est on a tourné la page de 2015 et on regarde dans le futur pour voir ce qu’il se fera de mieux en Web Design en 2016. Quelles tendances se dessinent pour cette nouvelle année ? Les tendances design 2015 vont-elles être révolues ou bien ré-adoptées ? Découvrez les 10 tendances web design de 2016.

 

1. Le retour de la typographie

La typographie fait son grand retour, et sera l’élément graphique incontournable de 2016. Les grandes images en tête de page disparaissent au profit de typographies. La typographie se suffit parfois à elle-même grâce à une mise en page élégante et graphique sans autre artifice que du texte. La tendance en 2016 reste mobile, les internautes consultent les sites depuis leur smartphone, il convient alors de leur proposer des typographies aérées et lisibles sur petit écran. Un effort conséquent est ainsi fait pour améliorer la lecture avec des textes plus gros et des interlignages favorisant la lecture.

Pour preuve également, la liste des typographies proposées par GoogleFont qui ne cesse de s’allonger de jour en jour ! Ces polices tendances permettent aux graphistes d’offrir un design moderne à leurs créations.

JBDLW-10things

 

2. Le Flat design et style minimaliste perdurent

Le Flat Design et le style minimaliste ne sont pas seulement un effet de mode, ces tendances se confirment pour la troisième année consécutive. Le flat design correspond aux exigences de légèreté, de rapidité, de simplification, de lisibilité, d’accessibilité, de mobilité liées au web d’aujourd’hui. Plus que jamais, l’heure est aux sites épurés, avec une charte graphique qui laisse pleinement la place aux textes et éléments visuels.

ifft-minimaliste

 

3. Les éléments photographiques en HD

Les résolutions et les tailles des écrans augmentant, l’utilisation de belles photos en HD va de pair. En 2016, les images de grande qualité en haute résolution devront captiver l’attention de l’internaute. Pour cela les entreprises font appel à des banques d’images payantes. Si leur budget est moindre, elles font l’effort de produire leurs propres visuels ou se rabattent sur des banques d’images de photos HD gratuite et libre de droit.

stockup-selection

 

4. Des GIF partout !

Ces petites images en boucle, très courte, permettent d’être très pédagogique et ludique à la fois. L’utilisation de GIF permet d’agrémenter un site Web ou un post sur les réseaux sociaux, il amène une note dynamique ou humoristique qui le rend plus accrocheur.

09-Future-1-v2

 

5. Le story telling

La nouvelle interface design 2016 devra séduire l’internaute en lui racontant une histoire. Les sites peuvent désormais tracer un récit linéaire et interactif. En scrollant, l’internaute fait défiler des éléments graphiques et participe à l’évolution de l’histoire. Le plus étant de créer une action qui force l’internaute à s’inclure dans l’animation pour accaparer son attention.

 

6. Le responsive design

Pour la troisième année, le responsive est au tableau des tendances de l’année. Capital depuis le déploiement de la mise à jour Google Mobile-Friendly, le responsive design permet d’offrir une meilleure expérience utilisateur aux internautes et mobinautes.
En effet, les notions d’interface utilisateur et d’expérience utilisateur sont au centre de l’approche design. La multiplication des appareils, des formats et des résolutions impose de s’adapter à l’utilisateur.

shutterstock_217125406

 

7. L’information par l’image : infographie, data visualisation et vidéo

Les informations sont aujourd’hui communiquées de la façons plus minimaliste et compréhensible possible afin d’accrocher l’attention du lecteur. On a coutume de dire « trop d’information, tue l’information », la tendance est désormais à la clarification.
La vidéo peut-être utilisée comme vecteur principal d’un message ou combiné avec du texte qui se superpose à cette dernière.
L’infographie et la data visualisation donnent quant à elles, la possibilité d’afficher efficacement des données complexes en une forme compréhensible et ludique.

Infographie-human-coders-salaires

 

8. Le slideout, menu réduit, ou menu hamburger

Le slideout est le menu sortant à gauche au passage du curseur, par effet recouvrant ou poussant le contenu.
Ce n’est pas vraiment une nouveauté, mais plutôt un retour à la navigation verticale, notamment avec le changement de nos habitudes et la massive navigation sur mobile.
Ce menu communément appelé « menu hamburger » permet de cacher les différents liens pour laisser plus de place à la page d’accueil et aux informations importantes. Ce type de menu réduit est notamment utilisé par des sites d’informations qui doivent gérer un grand nombre de thématiques.

slideout

 

9. Le split screen

Ce petit dernier fait son apparition cette année avec l’utilisation du double scroll. Le split screen permet de réaliser une mise en page mettant les éléments en contraste et en vis-à-vis.
Dans la dernière mise à jour de son OS, Apple a d’ailleurs inclut le split screen dans El Capitan afin d’afficher deux fenêtres en vis-à-vis.

18

 

10. Le long scrolling

Le site web basé sur le défilement, que ce soit parallaxe, horizontal, vertical, ou à l’infini, s’est imposé en 2015 et va perdurer en 2016. Il surprend les visiteurs par l’animation, mais permet également de renvoyer directement les visiteurs vers des « call to action », et encourage les visiteurs à rester plus longtemps sur la page.
Le long scrolling évite de charger d’autres pages pour obtenir l’information souhaitée. Ce design est très intuitif sur mobile et booste la vitesse de chargement.

Dropbox

 

 

Sources :  my-web-garden.fr et graphiste.com

Quels sont les outils plébiscités par les web designers en 2015 ?

De nouveaux outils apparaissent tous les jours pour les web designers. Le site substractions.com a mis en ligne sa toute première enquête annuelle sur les outils préférés des graphistes. Le but de cette étude est de faire un panorama à un instant T de ce marché en constante évolution, d’identifier les outils actuels préférés des web designers, et ainsi de faire la lumière sur certaines utilisations. L’étude repose sur les réponses de plus de 4 000 participants à travers 200 pays, et est divisée en 6 catégories de tâches réalisées par les web designers : brainstorming, wireframing, interface design, prototyping, project management et version control & file management.

 

categories-outils-webdesigners

 

1. BRAINSTORMING

Dans cette première catégorie sur la recherche des idées et la créativité, on s’aperçoit que le premier outil plébiscité par les web designers est tout bête : le papier et le crayon à 64%. Sketch, Illustrator et Photoshop représentent à peine un quart des réponses au total.
L’utilisation de Sketch pour le brainstorming et la recherche d’idées est à peu près la même à travers le monde, les Etats-Unis devançant de quelques points les autres pays. Cependant, l’adoption de Sketch comme remue-méninges est cependant plus élevé parmi les start-ups et les entreprises de haute technologie.

brainstorming

 

2. WIREFRAMING

Bien que cette catégorie semble être une opportunité pour des outils comme Balsamiq ou OmniGraffle de briller (car complètement calibrés pour le wireframing) les participants favorisent des outils de conception comme Sketch (27%), loin devant Illustrator (19%), et HTML/CSS (14%).

wireframing

 

3. INTERFACE DESIGN

Cette enquête révèle l’ascension fulgurante de Sketch. Il s’agit de l’outil de conception d’interface privilégié d’un tiers des participants.
Alors que la plupart des graphistes choisissent Sketch comme outil principal de design d’interface, Photoshop semble cependant être le plus populaire, car plus souvent évoqué en premier et second choix de logiciel.

interfacedesign

 

4. PROTOTYPING

Les outils qui existent sur le marché aujourd’hui n’étant pas assez bien conçus pour les graphistes, ils sont 38% à préférer créer leurs maquettes grâce à du code HTML/CSS. Le premier outil de prototyping a émergé de la liste est Invision avec seulement 18% des votes. 38% n’utilisent pas d’autres outils pour le prototyping.

prototyping

 

5. PROJECT MANAGEMENT

67% des répondants ont déclaré utiliser d’autres outils que ceux proposés parmi les réponses suggérées. En effet, les outils de gestion de projets sont nombreux. Salsa semble tout de même tirer son épingle du jeu à 37%, suivi de Trello (31%), Github, Basecamp, Evernote, et Asana, Bitbucket , Hipchat, Pivotal Tracker parmi les outils non cités dans l’enquête.

projectmanagement

 

6. VERSION CONTROL & FILE MANAGEMENT

Enfin en ce qui concerne le partage de fichiers et l’organisation des versions, les web designers interrogés plébiscite Dropbox à 51%, puis GitHub à 39% et Google Drive à 30%.

filemanagement

 

 

Mise à part Sketch qui tire son épingle du jeu dans cette enquête, les web designers semblent plutôt être adeptes des « moyens du bord » pour le brainstorming et le prototyping. Enfin, Slack et Dropbox se démarquent eux aussi, outils également utilisés par le grand public.

ultimate-designers-toolbox

 

Pour découvrir l’étude dans son intégralité, cliquez ici.

Créer un bouton “call-to-action” efficace

Votre magasin possède une belle vitrine, qui donne envie d’acheter, mais vous n’avez pas indiqué aux clients qu’ils pouvaient entrer dans votre magasin, la porte est close et aucun panneau ne signale aux clients d’entrer … Pour votre boutique en ligne c’est la même chose, il faut inviter l’internaute à passer à l’action, lui donner une instruction lorsqu’il se trouve sur votre page. En anglais, on appelle cela un « call-to-action ». Nous allons voir comment créer un bouton call-to-action efficace pour votre site et convaincre vos clients de passer à l’action.

 

1. Soignez le design de votre bouton call-to-action

La clarté du message doit tout d’abord passer par la clarté du visuel. Le bouton call-to-action doit attirer l’attention du visiteur pour qu’il ne pas noie son regard dans le reste du site.
3 éléments sont cruciaux dans la réalisation de votre bouton : sa place, sa taille, sa couleur.
Rendez-le visible en le différenciant du contenu qui l’entoure. Utilisez des couleurs qui ressortent, laissez des espaces blancs et vides de contenus autour des éléments d’appels à l’action, vous pouvez aussi jouer sur les contrastes pour que votre bouton soit bien visible et identifiable comme un bouton cliquable, et sa taille doit être suffisamment importante.

 

2. Indiquez le chemin à votre visiteur

Ne négligez pas l’emplacement du call-to-action. De nombreuses études d’eye-tracking ont révélé que le regard est souvent attiré par la partie supérieure du site, le header. Les couleurs dominantes de votre site ou la présence d’un slider sont également à prendre en compte dans l’emplacement de votre call-to-action.
Si vous souhaitez que vos visiteurs se convertissent en prospects, clients, contacts, ou personnes qui interagissent avec votre entreprise, vous devez penser le call-to-action comme un dispositif mécanique. Chaque page de votre site internet doit comporter un appel à l’action qui a une utilité. Partout où vos visiteurs atterrissent, pensez à leur redirection.

 

3. Soyez persuasif

Demandez vous également quels sont les points importants de votre produit, offre ou service qui peuvent convaincre les internautes de passer à l’action. Le client doit pouvoir saisir rapidement qui vous êtes, ce que vous faites et ce que vous lui proposez, et ainsi déterminer si vous êtes LE site qui répond à ses attentes.
Votre message doit être simple, clair et concis. Utilisez des verbes d’action à l’impératif : achetez, contactez, commentez, partagez, téléchargez ….

 

4. N’éparpillez pas les messages

… mais choisissez-en un par page. Si votre site internet est correctement optimisé, bien référencé avec des mots clés pertinents, il y a alors de fortes chances pour que votre visiteur se trouve sur votre site car il répond à son problème.
Ne cherchez pas à obtenir davantage que ce qu’il est venu chercher, et déterminez une action qui vous permettra d’interagir avec le visiteur, soit en le menant à une vente, un téléchargement, une adhésion, un don, un contact …

« A quoi va répondre ce call-to-action ? », « Que va-t-il offrir/permettre ? ». Les réponses à ces questions vont vous permettre de déterminer s’il est nécessaire ou non de créer un call-to-action. Un simple lien peut parfois suffire.

 

Quel avenir pour le flat design ?

Le flat design faisait déjà partie des tendances webdesign bien ancrée dans 2014 et poursuit son ascension en 2015, mais un article de Wink Strategies s’interroge sur son possible déclin à la prochaine saison. Bilan sur l’avenir du flat design.

 

Le blanc, qu’il fallait à tout prix combler auparavant, permet aujourd’hui de conserver l’attention de ses lecteurs. Dorénavant il faut oxygéner sa page, supprimer tous chichis et faire en sorte que l’internaute reste plus longtemps sur son site tout en naviguant facilement.
A contrario des dernières années ou l’usager, encore peu habitué, avait besoin d’être guidé, et ou le skeuomorphisme était la tendance graphique dominante pour ses dégradés et couleurs qui aidaient à la navigation, la tendance web aujourd’hui se rapproche de plus en plus du print design. L’usager est devenu plus familier des interfaces, le graphisme s’est éloigné du skeuomorphisme et de son imitation des formes réelles, pour devenir plus abstrait. Déjà très présent en 2014, le flat design fait à nouveau partie des tendances web design de 2015.

« Les interfaces élégantes sont celles qui ont le plus d’impact, avec le moins d’éléments » Allan Grinshtein, LayerVault.

La simplicité pour tous ?

S’il permet d’aller droit au but, le flat design risque de lasser. Il faut adapter chaque design à chaque problématique. Il ne faudrait pas faire du Flat Design car c’est à la mode, mais réfléchir à une stratégie design à 2 ou 3 ans, et ce, pour tous vos devices.
Votre marque s’inscrit dans un cadre global articulée autour d’une charte graphique harmonisée sur tous vos supports. Si vous envisagez de passer au flat design, repensez entièrement votre charte graphique pour l’adapter en mode “flat” avant d’uniformiser vos présences sur web, mobiles et objets connectés car le flat design ne vit pas sur une seule plateforme, mais sur toutes celles où vous êtes présents.
De plus, opter pour le flat design signifie également privilégier le contenu visuel, pensez-vous donc à budgétiser l’achat de photos, polices, icônes …

 

La fin du Flat design est-elle proche ?

Sans fioritures, simple et épuré, le flat design séduit le monde entier et a dépassé les frontières du web design pour conquérir divers domaines comme le print, le graphisme et l’architecture. Et c’est d’ailleurs de là que vient ce courant graphique : inspiré des mouvements architecturaux et artistiques des années 1920, le Flat Design découle du style Bauhaus (l’institut allemand des plus rationnels). Leurs créations misaient sur le minimalisme et le géométrisme. Le Flat Design ne risque donc pas d’être remplacé de sitôt.

Facile d’utilisation et clair pour l’utilisateur, le Flat Design est également très pratique pour les webdesigners. Il leur permet de réfléchir à l’accessibilité web, l’expérience utilisateur et l’ergonomie sur tous les supports (ordinateur, tablette, smartphone). Le flat design est modulable et vit très bien sur tous type de plateformes, de résolution et d’écran. Cette nouvelle tendance web design répond donc à toutes les exigences actuelles des interfaces rapides, intuitives et responsives.

 

Quelles tendances après le flat design ?

Influencé par les supports, les technologies, les start-ups, les designers, les modes, mais aussi et surtout par les grands acteurs que sont Apple, Google ou Microsoft, le web design s’imprègne des tendances et des modes qu’il inspire en retour.
Monopage, Data design, Gamification, Vintage, Social design … retrouvez les tendances du web design 2015 imaginé par le Directeur Artistique Philippe Rondepierre ici.

 

10 tendances web design en 2015

Ça y est on tourne la page de 2014 et on regarde dans le futur (pas trop loin quand même) pour voir ce qu’il se fera de mieux en Web Design en 2015. Quelles tendances se dessinent pour la nouvelle année ? Les tendances design 2014 vont-elles être révolues ? Découvrez les 10 tendances web design de 2015 par Philippe Rondepierre.

 

Influencé par les supports, les technologies, les start-ups, les designers, les modes, mais aussi et surtout par les grands acteurs que sont Apple, Google ou Microsoft, le web design s’imprègne des tendances et des modes qu’il inspire en retour. La frontière entre design réel et design numérique n’est quasiment plus perceptible aujourd’hui.
Tout comme dans la mode, il est possible d’imaginer les tendances de demain. C’est ce qu’a fait le Directeur Artistique Philippe Rondepierre, en développant les tendances du web design 2015 en 10 points sur Alsacreations.com

 

1. Le flat design et le style minimal
Le flat design correspond aux exigences de légèreté, de rapidité, de simplification, de lisibilité, d’accessibilité, de mobilité liées au web d’aujourd’hui.

2. Le Responsive
Design liquide, adaptatif ou responsive, ce n’est plus une tendance. Les notions d’interface utilisateur et d’expérience utilisateur seront au centre de l’approche design. La multiplication des appareils, des formats et des résolutions impose de s’adapter à l’utilisateur.

3. Le Monopage
Les sites monopages sont optimisés pour la navigation sur les écrans tactiles. Le storytelling, la navigation verticale, horizontale ou en biais, le double scroll, la parallaxe, les animations, les images, la vidéo… se conjuguent de façon créative.

4.L’image d’abord
Photo, vidéo, illustration, data design, icône, sont autant d’éléments qui permettent de donner la bonne image, de passer le bon message, de donner la bonne information en un clin d’œil. Particulièrement sur les mobiles peu adaptés à la lecture de longs textes.

5.La typographie
En grand et sous toutes ses formes, la typo contribue à mettre en scène l’image, elle se conjugue avec les icônes et s’adapte à la mise en page.

6.Le Data design
Cloud et data centers se sont développés ces dernières années, les bases de données sont partout.Le data design retranscrit les données sur écran, de façon visuelle et graphique.

7. La gamification
Le serious game répond aux besoins de ceux qui veulent faire passer un message de façon plus efficace par les ressorts émotionnels du storytelling, du jeu et de l’image.

8. Le Vintage
Rien de tel que les références au passé pour paraître plus authentique ou pour communiquer des valeurs d’empathie et de bienveillance qui humanisent un site.

9. Social design
Les sites sont de plus en plus connectés avec les réseaux qui les amènent dans la sphère privée et relationnelle, notamment par la “blogosphère” ou l’économie collaborative. Certains blogs et réseaux sociaux ont inspiré le web design, comme Tumblr ou Instagram

10. Tout connecté
La réalité augmentée, la domotique, les objets connectés, le cloud, seront interconnectés pour finir par se fondre dans le paysage et dans nos vies. Le design des interfaces devra suivre, même s’il dispose déjà de solutions efficaces comme le flat design et le data design.

 

Pour aller plus loin, consultez l’excellent article de Philippe Rondepierre ou sur Slideshare Tendances Web Design 2015 .

5 tendances du web design en 2014

Du Responsive design au More Scrolling, en passant par le Less text Design, Flat Design ou bien Fixed Content, découvrons en une infographie les 5 tendances du web design en 2014.

 

Dans un autre temps du World Wide Web, la mode était aux GIF animés (quoique sont-ils vraiment si démodés ?), texte clignotant en surbrillance, fond fluorescent, sons en midi pour vous souhaiter la bienvenue … Bref, une mode d’une autre époque !
Au cours de ces dernières décennies, des vagues de tendances du design sont arrivées puis reparties, laissant la place à l’expérience utilisateur. Plus que jamais aujourd’hui, les web designers et UX designers se concentrent sur le minimalisme, la lisibilité et la facilité d’utilisation.

Le site WhoIsHostingThis a déterminé les 5 tendances du web design en 2014 en une infographie : Responsive design, More Scrolling, Less text Design, Flat Design, et Fixed Content. Chaque design apporte son lot d’avantages et d’inconvénients. Voyons les arguments avancés par chaque partisan.

 

Responsive design

Le site s’ajuste automatiquement à la taille de l’écran sur lequel il est consulté.
Les plus : moins de maintenance, meilleur SEO, le site est compatible avec des dizaines de nouveaux appareils qui arrivent continuellement sur le marché.
Les moins : la réalisation peut prendre plus de temps que prévu, et le temps de chargement est rallongé.

Scrolling design

Le site web est basé sur le défilement (parallaxe, horizontal, à l’infini)
Les plus : plus facile à réaliser, surprend les visiteurs par l’animation, renvoie directement les visiteurs vers des « call to action », encourage les visiteurs à rester plus longtemps sur la page.
Les moins : le SEO en prend un coup car il y a un seul et même ensemble de méta-informations, et ce grand nombre de données ralenti le temps de chargement de la page.

Less text design

Le design est axé sur les images, les icônes et de la vidéo.
Les plus : web design plus sophistiqué
Les moins : difficile pour les personnes handicapées qui ne peuvent pas accéder à Internet de manière traditionnelle.

Flat Design (UI)

Le design met l’accent sur la fonctionnalité, plutôt que sur le style.
Les plus : interface simple, l’utilisation des couleurs vives, de typographie et du gras aide à la disposition des éléments, les visuels tranchent avec le reste de la composition.
Les moins : les utilisateurs ne savent pas toujours s’ils peuvent cliquer ou non, les couleurs sont parfois difficile à accorder, la conception d’ensemble peut paraître trop basique.

Fixed Content

Un élément de la page, comme la barre de navigation ou une section de contenu, reste fixe pendant que l’utilisateur fait défiler.
Les plus : facilité d’utilisation, les utilisateurs trouvent plus facilement ce qu’ils recherchent.
Les moins : l’élément fixe peut être difficile à adapter sur un environnement mobile.

 

Vous êtes web designer ? Retrouvez toutes nos offres d’emploi sur LesJeudis.com

Web-Design-Trends

Infographie : UX Designer vs. Web Designer

Quelles sont les différences fondamentales entre UX Designer et Web Designer ? Cette infographie de l’agence Scorchagency.com décrit les différentes personnalités, missions et approches entre un UX Designer et un Web Designer par rapport à l’expérience utilisateur.

 

L’un est dans la réflexion tandis que l’autre est dans l’action. L’UX Designer et le Web Designer ont deux personnalités bien distinctes : le premier se montre philosophe et concepteur, alors que le second fait davantage preuve de créativité et curiosité.

Cela s’explique facilement par leurs tâches quotidiennes qui sont diamétralement opposées : l’UX designer doit avoir une vision globale : une connaissance du système que l’utilisateur va utiliser, du contexte d’utilisation, et de l’utilisateur final.
Le Web Designer doit lui faire en sorte que l’interface soit en accord avec la charte graphique de la marque. Après avoir déterminé sa cible principale, il déterminera la tendance de conception qui correspond à l’interface, puis il disposera le contenu dans l’interface de manière visuelle afin que l’utilisateur trouve facilement les informations recherchées.

Bien que complètement différents, les UX et Web designers sont complémentaires et leur union permet de créer une interface optimale pour l’expérience utilisateur.

 

ux-designers-vs-web-designers_5213d3afbecc3_w1500

 

Vous êtes UX ou web designer ? Retrouvez nos offres d’emploi sur LesJeudis.com