Le blog de Sophie

Avan­tages et incon­vé­nients des grandes tendances web design de 2015

En 2015, on prend le meilleur de 2014, on profite des possi­bi­li­tés offertes par HTML5 et CSS3, et on remet l’in­ter­naute au centre de l’at­ten­tion (en prenant bien en compte les diffé­rentes plate­formes, appa­reils, réso­lu­tions et contextes d’uti­li­sa­tion). Au programme de 2015 : Respon­sive Design, Flat Design, Paral­lax et Infi­nite Scrol­ling, Mate­rial Design, Large Back­ground Image, Typo­gra­phy et Ghost Button, Card Design, SVG et enfin, Mono­chro­ma­tic Design. Cet article se consa­crera donc à vous présen­ter la liste des grandes tendances en webde­sign (pour l’an­née 2015), ainsi qu’une analyse un peu plus appro­fon­die de leurs avan­tages et incon­vé­nients respec­tifs.

Tendance web design 2015

1. Respon­sive Design

De plus en plus de consom­ma­teurs utilisent les tablettes et les smart­phones pour la navi­ga­tion en ligne. En Belgique, les chiffres sont en constante augmen­ta­tion depuis quelques années déjà. Les statis­tiques de dépenses publi­ci­taires (par les annon­ceurs), ainsi que les taux d’achats en ligne ne cessent de croître. De surcroît, Google prend désor­mais en compte l’ex­pé­rience mobile comme facteur de posi­tion­ne­ment sur son moteur de recherche (affi­chant désor­mais si votre site est respon­sive ou non à côté des résul­tats de recherche). En 2015, adap­ter son site pour la consul­ta­tion mobile est devenu indis­pen­sable.

Statistiques Navigation Mobile en Belgique 2014

On appelle Respon­sive Design (litté­ra­le­ment concep­tion web adap­tive) la faculté d’un site web à s’adap­ter au termi­nal de lecture. Avec l’émer­gence des smart­phones et des tablettes tactiles, il existe un grand nombre de réso­lu­tions d’af­fi­chage, rendant parfois l’ex­pé­rience utili­sa­teur diffi­cile. Ainsi, de plus en plus de sites proposent une version dite mobile, plus adap­tée à une lecture sur un termi­nal mobile […] Le respon­sive design change dyna­mique­ment l’af­fi­chage de la page en fonc­tion de la zone d’af­fi­chage, grâce aux feuilles de style (CSS) – comment­ca­marche.net.

Responsive Design

Les avan­tages et les incon­vé­nients du Respon­sive Design :

Adap­ter son site à chaque réso­lu­tion et appa­reil, parti­ci­pera d’une meilleure expé­rience utili­sa­teur et ainsi, augmen­tera votre taux de conver­sion ainsi que votre posi­tion­ne­ment sur les moteurs de recherche.

Le problème qui pour­rait se poser se situe au niveau des perfor­mances. En effet, sachant que la taille des images est recal­cu­lée pour passer d’un affi­chage grand écran (desk­top) à celui d’un smart­phone (mobile), les temps et vitesses de char­ge­ments (Page Load Time et Page Speed) peuvent en être impac­tés et ainsi, dimi­nuer la qualité de l’ex­pé­rience utili­sa­teur. Veillez donc à bien opti­mi­ser la taille de vos médias afin que le passage du desk­top au mobile ne dimi­nue pas vos perfor­mances.

2. Flat Design

Comme en 2014, le Flat Design, carac­té­risé par une repré­sen­ta­tion mini­ma­liste et épurée des éléments (en oppo­si­tion au skeuo­mor­phisme), restera la tendance. Pour rappel, le flat design se carac­té­rise par des formes simples, sans effets de volumes ni textures, avec des couleurs (souvent vives) utili­sées en aplats.

Flat Design versus Skeuomorphisme

Les avan­tages et incon­vé­nients du Flat Design :

Là où le Flat design se démarque, c’est que cette esthé­tique parti­cu­lière est simple, intem­po­relle et semble extrê­me­ment adap­table à de nombreux contextes. Elle est aussi en syner­gie avec l’évo­lu­tion du Web, autant d’ordre tech­nique que stra­té­gique. Les gens sont de moins en moins patients, ils veulent des sites légers avec des pages qui s’af­fichent rapi­de­ment. Le dépouille­ment graphique du Flat design lui donne donc un avan­tage puisqu’il permet de faire des sites moins lourds, grand avan­tage pour le Web mobile – nmedia­so­lu­tions.com.

Flat Design Site Web

Au début d’in­ter­net, le skeuo­mor­phisme (de par son analo­gie avec les objets du réel), permet­tait à l’in­ter­naute néophyte de comprendre immé­dia­te­ment comment il pouvait inter­agir avec chaque élément. L’ac­cès au web s’étant depuis lors démo­cra­tisé (et les inter­nautes étant passés de néophytes à utili­sa­teurs pres­sés et aguer­ris), cette analo­gie aux objets du réel n’est plus néces­saire et le flat design ne pose plus de problèmes de compré­hen­sion aujourd’­hui (contrai­re­ment à ce que certains peuvent encore présen­ter aujourd’­hui comme un incon­vé­nient).

3. Paral­lax and Infi­nite Scrol­ling

Avec l’avè­ne­ment des tablettes et smart­phones à écrans tactiles, « scrol­ler » est devenu plus intui­tif que « cliquer » (que ce soit à l’aide de la roulette de votre souris ou simple­ment de votre doigt). Ainsi, deux types de design sont appa­rus : le Paral­lax Scrol­ling et l’In­fi­nite Scrol­ling.

Today’s web design is conti­nually enhan­cing user expe­rience by provi­ding an inter­ac­tive expe­rience between the user and the device. For this reason, scrol­ling is gradually domi­na­ting clicking because it is seen more intui­tive, easy to use, and in many cases reduces load time […] It’s best that all the rele­vant infor­ma­tion be stream­li­ned on the home page so the user can get a solid over­view of your products, services, and how your company stands out among the rest. Howe­ver, it’s also impor­tant to allow that visi­tor to click into deeper infor­ma­tion on a subject of inter­est.  Not only will this provide the best user expe­rience, it will also allow you to rank for addi­tio­nal search phrases […] – brown­box­bran­ding.com.

Traduc­tion :

Les desi­gns web actuels cherchent conti­nuel­le­ment à amélio­rer l’ex­pé­rience utili­sa­teur entre l’in­ter­naute et l’in­ter­face. Pour cette raison, « scrol­ler » prend graduel­le­ment le dessus sur l’ac­tion de « cliquer », car scrol­ler est perçu comme plus intui­tif, plus facile à utili­ser, et réduit les temps de char­ge­ment. Il est plus inté­res­sant d’avoir l’en­semble des infor­ma­tions sur la page d’ac­cueil, de sorte que le visi­teur puisse rapi­de­ment avoir une vue d’en­semble de vos produits et/ou services, et puisse ainsi cerner comment votre entre­prise se posi­tionne parmi ses concur­rents. Cepen­dant, il est égale­ment impor­tant de permettre aux visi­teurs de cliquer vers davan­tage d’in­for­ma­tions s’ils le dési­rent. Non seule­ment cela amélio­rera l’ex­pé­rience utili­sa­teur, mais cela vous permet­tra égale­ment de vous posi­tion­ner sur plus de termes de recherche (un atout non négli­geable pour le réfé­ren­ce­ment natu­rel).

L’In­fi­nite Scrol­ling Design

A design pattern where content is fetched asyn­chro­nously from a data­base or master file and inser­ted into the user’s page as they consume the infor­ma­tion. This results in a seemin­gly endless page that conti­nues to load content as the user scrolls towards the bottom – site­point.com.

Traduc­tion : Un modèle de design où le contenu est appelé de manière asyn­chrone depuis une base de données, puis est inséré sur la page tandis que l’in­ter­naute consulte l’in­for­ma­tion. Cela résulte en une page appa­rem­ment infi­nie qui persiste à char­ger du contenu tandis que l’in­ter­naute scroll vers le bas.

L’In­fi­nite Scrol­ling est un modèle de design que l’on retrouve sur la plupart des réseaux sociaux actuels, tels que Face­book, Twit­ter, ou encore Dribbble et Tumblr.

Avan­tages et incon­vé­nients de l’In­fi­nite Scrol­ling Design :

Vous avez plus de chance de rete­nir l’in­ter­naute sur votre site, puisque la seule action qu’il peut réali­ser est de scrol­ler. Scrol­ler étant une démarche simple et intui­tive, aucune besoin de guider l’in­ter­naute dans un proces­sus complexe. De plus, les habi­tudes de lecture des inter­nautes ne s’en retrouvent nulle­ment affec­tées.

When used correctly, navi­ga­tion is enhan­ced, SEO is unhar­med, and acces­si­bi­lity is main­tai­ned, as well as grace­ful degra­da­tion in fini­cky brow­sers and/or when JavaS­cript is turned off – Infi­nite-scroll.com

Traduc­tion :

Lorsque l’In­fi­nite Scrol­ling est utilisé correc­te­ment, la navi­ga­tion en est amélio­rée, cela n’af­fecte pas le réfé­ren­ce­ment natu­rel, et l’ac­ces­si­bi­lité est main­te­nue. L’In­fi­nite Scrol­ling fonc­tionne même sur des navi­ga­teurs non-compa­tibles et lorsque le JavaS­cript est désac­tivé.

L’in­fi­nite Scrol­ling sera plutôt employé sur des sites dont le contenu est prin­ci­pa­le­ment consti­tué d’images, si l’in­ter­naute ne doit pas réali­ser de recherche spéci­fique, enfin, si le site héberge un grand nombre d’uti­li­sa­teurs, lesquels génèrent une grande quan­tité de contenu. C’est donc le cas de la plupart des réseaux sociaux, tels que Face­book, Flickr, Behance, DeviantArt, Twit­ter, etc.

Facebook Design

Behance Site Web

FlickR Site Web

A contra­rio, implé­men­ter l’In­fi­nite Scrol­ling sur un site e-commerce est une très mauvaise idée. En effet, l’in­ter­naute étant distrait, il aura tendance à moins sélec­tion­ner de produits, ce qui aura pour consé­quence de dimi­nuer (et ce, de manière signi­fi­ca­tive) le taux de clics (CTR), et donc, les ventes.

Un autre incon­vé­nient réside dans le fait que, plus l’in­ter­naute descend vers le bas de la page, plus il y a de conte­nus char­gés. Ainsi, des problèmes de perfor­mance peuvent rapi­de­ment appa­raitre.

La plupart du temps, une fois que l’in­ter­naute a cliqué sur un lien, s’il décide de reve­nir en arrière pour reprendre sa navi­ga­tion là où il l’avait lais­sée, il est renvoyé à son point de départ, ce qui peut susci­ter une certaine frus­tra­tion. Sur un site e-commerce, l’in­ter­naute pour­rait vouloir retour­ner sur la page précé­dente afin de consul­ter le reste des produits de la liste (ce qui pour­rait lais­ser s’échap­per, à nouveau, des ventes).

Les inter­nautes savent désor­mais que certaines infor­ma­tions (les coor­don­nées de contact notam­ment) se retrouvent dans le footer. Cepen­dant, sur un site construit en Infi­nite Scrol­ling, le bas de page ne cesse de s’éloi­gner à mesure que l’in­ter­naute scroll vers le bas. Ainsi, soyez atten­tifs à ce que ces infor­ma­tions leur soit acces­sible ailleurs, sur le site.

ByKato Site Web

Le Paral­lax Scrol­ling

Initia­le­ment employé dans le domaine des jeux vidéo, cet effet a été détourné pour le web.

One big web design trend of the moment is paral­lax scrol­ling, which involves the back­ground moving at a slower rate to the fore­ground, crea­ting a 3D effect as you scroll down the page – crea­ti­ve­bloq.com.

Traduc­tion :

L’une des grandes tendances en web design du moment est le « Paral­lax Scrol­ling », où l’ar­rière-plan bouge plus lente­ment que l’avant-plan, créant ainsi un effet 3D lorsque vous scrol­lez vers le bas de page.

Flat Design Vs Realism

Un excellent exemple de Paral­lax Design vous est présenté à travers le site « Flat versus Realism » : http://www.flatvs­rea­lism.com/ (qui de surcroît, vous donne un excellent aperçu de ce qui oppose le Flat Design au Skeuo­mor­phisme).

Les avan­tages et incon­vé­nients du Paral­lax Design :

Bien exploi­ter cette tech­nique amène beau­coup de flui­dité et sait vrai­ment comment capter l’at­ten­tion. Par contre, elle est à utili­ser avec précau­tion, car le Paral­laxe peut nuire gran­de­ment à la lecture ; il emmène la confu­sion de ne plus trop savoir où l’on en est et jusqu’où la page défile – nmedia­so­lu­tions.com.

4. Mate­rial Design

Annoncé en 2014 lors de la Keynote inau­gu­rale de la confé­rence Google I/O, puis lancé à l’oc­ca­sion de la sortie du dernier système d’ex­ploi­ta­tion Android L (soit la version 5.0. d’An­droid – Android Lolli­pop), ce qui fut baptisé « Mate­rial Design » consti­tue un mani­feste repre­nant les pratiques graphiques à employer sur Android, et ce, dans le but d’uni­fier les inter­faces des diffé­rentes plate­formes d’An­droid :

A visual language for our users that synthe­sizes the clas­sic prin­ciples of good design with the inno­va­tion and possi­bi­lity of tech­no­logy and science – google.com.

Traduc­tion :

un langage visuel (pour nos utili­sa­teurs) qui synthé­tise les grands prin­cipes de « design de qualité » avec l’in­no­va­tion et les possi­bi­li­tés offertes par la tech­no­lo­gie et la science.

Ces guide­lines prennent en consi­dé­ra­tion tout ce qui touche à l’Ex­pé­rience Utili­sa­teur (UX), à l’In­ter­face Utili­sa­teur (UI), à l’Ani­ma­tion, ainsi qu’à de nombreux autres aspects tant graphiques que typo­gra­phiques.

Mate­rial Design met l’ac­cent sur l’uni­fi­ca­tion de l’in­ter­face entre les diffé­rents types d’ap­pa­reils : smart­phones, tablettes, montres connec­tées et tous les autres services et appa­reils de Google. Le design d’An­droid est complè­te­ment revu avec du flat design et de la couleur. L’idée derrière le Mate­rial Design est de permettre aux déve­lop­peurs de sortir des appli­ca­tions tierces qui respec­te­raient les règles édic­tées par Google pour que l’in­ter­face soit davan­tage user-friendly et homo­gène, quel que soit le support ou l’ap­pli­ca­tion utili­sée. L’ac­cent est mis sur le jeu entre les diffé­rents plans et sur les mouve­ments entre chaque élément, avec des ombrages et des effets dyna­miques ; ainsi que sur les anima­tions de tran­si­tion ou encore les éléments posi­tion­nés sur diffé­rents plans pour créer un semblant d’in­ter­face en 3D – fran­droid.com.

La vidéo de présen­ta­tion du Mate­rial Design (réali­sée par Google) parle d’elle-même :

Avan­tages et incon­vé­nient du Mate­rial Design :

Bien qu’à force (et selon certains) les anima­tions pour­raient deve­nir rébar­ba­tives, l’ho­mo­gé­néité et la cohé­rence sur les diffé­rentes plate­formes et inter­faces graphiques d’An­droid, ainsi que la mise en exergue de grands prin­cipes de concep­tion (direc­te­ment liés à la qualité du design et l’opti­mi­sa­tion de l’ex­pé­rience utili­sa­teur) font du Mate­rial Design une avan­cée parti­cu­liè­re­ment inté­res­sante.

5. Large Back­ground Media, Typo­gra­phy and Ghost Buttons

L’uti­li­sa­tion de grandes images / vidéos d’ar­rière-plan (Large Back­ground Media) ainsi que la mise en exergue de typo­gra­phies person­na­li­sées ne vous est sans doute pas incon­nue (je vous renvoie à mon article inti­tulé : « Le pourquoi et le comment de l’usage de la Typo­gra­phie en Design et Web Design »).

Pour reprendre des extraits de cet article : la tendance web design actuelle fait de plus en plus usage de grandes images d’ar­rière-plan et/ou de site web à l’in­ter­face très épurée (que l’ar­rière-plan soit complè­te­ment blanc ou coloré). Utili­ser de grandes typo­gra­phies person­na­li­sées permet notam­ment d’har­mo­ni­ser « ce vide ».

La typo­gra­phie est souvent plus parlante que les mots eux-mêmes et un choix subtil de police d’écri­ture peut faire toute la diffé­rence. Que ce soit pour susci­ter l’émo­tion, pour mettre en avant un nom ou une marque ou encore pour donner un senti­ment de sophis­ti­ca­tion ou, a contra­rio, de sérieux. La typo­gra­phie est désor­mais partout. La démul­ti­pli­ca­tion des choix typo­gra­phiques (il existe désor­mais des centaines de polices d’écri­ture dispo­nibles gratui­te­ment ou à l’achat, en ligne), ainsi que les avan­cées tech­no­lo­giques (le CSS3 permet à présent d’in­té­grer les typo­gra­phies à même le code) et l’uti­li­sa­tion massive, en web design, d’in­ter­faces épurées ou de grandes images d’ar­rière-plan, ont contri­bué à mettre en exergue le Design Typo­gra­phique.

Courant 2014, l’on voyait appa­raitre une nouvelle tendance, celle des « Ghost Buttons ».

“Ghost” button – that also can be called “naked”, “empty” or “hollow” – repre­sents a basic shape with a trans­pa­rent back­ground that is deli­nea­ted with a help of a solid border that is usually incre­di­bly thin. It perfectly blends into the compo­si­tion, beco­ming an essen­tial, almost indis­tin­gui­shable part, like a ghost – Onex­tra­pixel.com

Traduc­tion :

les boutons fantômes – égale­ment bapti­sés boutons “nus”, “vides” ou “creux » – sont consti­tués d’une forme basique avec un fond trans­pa­rent, déli­mi­tés à l’aide d’une bordure pleine, habi­tuel­le­ment très fine. Ces boutons s’in­tègrent parfai­te­ment aux compo­si­tions graphiques, de manière presque imper­cep­tible, tel un fantôme.

The Distance Site Web

Charles Axel Pauwels Site Web

Nizuka Développeur Front-End Site Web

Avan­tages et incon­vé­nients des Ghost Buttons :

Au sein d’un envi­ron­ne­ment travaillé, le bouton fantôme peut deve­nir un point d’at­trac­tion (call-to-action) qui atti­rera immé­dia­te­ment l’at­ten­tion de l’in­ter­naute. Ce type de graphisme s’in­tègre aisé­ment à tout type de graphisme et apporte natu­rel­le­ment de l’élé­gance et de la subti­lité au site web.

6. Card Design

De plus en plus de réseaux sociaux (notam­ment) disposent d’un design sous forme d’un ensemble d’en­carts prenant la forme de cartes. Pinte­rest, Dribbble, Behance ou encore Face­book et Insta­gram, tout disposent de cartes leur permet­tant de struc­tu­rer l’in­for­ma­tion. Davan­tage employé sur des sites présen­tant beau­coup d’images, on retrouve de plus en plus de Card Design sur des sites conden­sant de l’in­for­ma­tion tels que Twit­ter ou The Verge (et même sur des sites plus clas­siques comme c’est le cas de l’agence Talk PR).

Cards are packages of inter­ac­tive infor­ma­tion, usually presen­ted in the shape of a rectangle. Just like credit cards or base­ball cards, web cards provide quick and rela­ted infor­ma­tion in a conden­sed format. The hall­mark of all cards is inter­ac­ti­vity. Not only do they provide infor­ma­tion, but they poli­tely demand enga­ge­ment. Cards commonly include like buttons or ways to post to social media […] The main point of cards is to inter­act with the user and prompt that user to action. Cards are the perfect way to make your design glan­ceable, user-friendly, and respon­sive – Web Design Ledger.com

Traduc­tion :

les cartes sont des « paquets » d’in­for­ma­tions inter­ac­tives, souvent présen­tées sous la forme de rectangles. Tout comme les cartes de crédit ou les cartes de base­ball, les cartes web four­nissent une infor­ma­tion rapide dans un format condensé. Ce qui carac­té­rise fonda­men­ta­le­ment ces cartes, c’est leur inter­ac­ti­vité. Non seule­ment celles-ci four­nissent de l’in­for­ma­tion, mais elles incitent égale­ment à l’en­ga­ge­ment. Géné­ra­le­ment, les cartes incluent des boutons ou des possi­bi­li­tés de partage vers les réseaux sociaux. L’at­trait prin­ci­pal de ces cartes est l’in­te­rac­tion avec l’in­ter­naute et son inci­ta­tion au partage. Les cartes sont le moyen parfait de rendre votre design et vos infor­ma­tions compré­hen­sibles en un coup d’œil, user-friendly et respon­sive.

Pinterest Réseau Social

TalkPR Site Web

Réseau Social Dribbble

Avan­tages et incon­vé­nients du Card Design :

Les cartes sont une bonne alter­na­tive au texte conven­tion­nel puisqu’elles attirent davan­tage l’at­ten­tion sur l’in­for­ma­tion four­nie. De surcroît, les cartes sont parfaites pour le Respon­sive Design puisqu’elles s’adaptent très bien au passage du desk­top au mobile. Leur espace étant limité, elles four­nissent de prime abord une infor­ma­tion conden­sée (sur laquelle il suffit de cliquer pour en savoir plus) qui permet à l’in­ter­naute pressé de réali­ser un rapide scan visuel de la page et/ou d’ef­fec­tuer une lecture en diago­nale.

Les cartes incitent à l’ac­tion et permettent aux utili­sa­teurs de parta­ger rapi­de­ment et aisé­ment l’in­for­ma­tion sur les réseaux sociaux rensei­gnés. Enfin, des données peuvent être collec­tées afin de déter­mi­ner quelles cartes ont obtenu le plus de succès (du point de vue des cliques ou du partage).

En ce qui concerne les incon­vé­nients du Card Design, quelques points peuvent être soule­vés. Lorsqu’un utili­sa­teur cherche une infor­ma­tion spéci­fique, avoir à parcou­rir l’en­tiè­reté des cartes à sa recherche, peut poser problème (veillez donc à mettre un moteur de recherche interne à votre site). Certains inter­nautes, peu habi­tués à ce type de design, pour­raient être rebu­tés. Enfin, il est impor­tant de bien prendre en compte l’uti­li­sa­teur auquel le site est destiné, ainsi que les besoins auxquels votre site cherche à répondre, puisque dans certains cas de figure, il est préfé­rable de guider l’in­ter­naute dans un proces­sus clas­sique et/ou complexe, plutôt que de lui permettre simple­ment de voguer aléa­toi­re­ment parmi un ensemble de cartes.

7. Le format d’image SVG

SVG est un format d’image vecto­riel basé sur une syntaxe XML. Le prin­ci­pal inté­rêt du SVG, c’est sa capa­cité à être redi­men­sionné sans perte de qualité et ce, direc­te­ment au sein du navi­ga­teur. Les feuilles de styles CSS mettent à dispo­si­tion des desi­gners des outils leur permet­tant de gérer au pixel près la taille des images SVG. La propriété CSS3 inti­tu­lée « back­ground-size » permet notam­ment de para­mé­trer la taille des images d’ar­rière-plan.

Compatibilité SVG et navigateurs 2015

Ainsi, pour toute image pouvant béné­fi­cier d’un trai­te­ment vecto­riel (logo, icône, etc.), le SVG consti­tue la solu­tion idéale. De surcroît, avec l’augmen­ta­tion des niveaux de compa­ti­bi­lité du SVG (et du CSS3) avec les diffé­rents navi­ga­teurs, nous pouvons suppo­ser que le SVG pren­dra son envol en 2015.

Les avan­tages et les incon­vé­nients du format d’image SVG :

En tant que format d’image vecto­riel, il permet de redi­men­sion­ner une image sans aucune perte de qualité ; En tant que format XML, il permet de béné­fi­cier de toute la puis­sance de JavaS­cript et surtout de CSS – letrain­de13h37.fr.

Le format SVG est donc un format idéal pour résoudre nombre de problèmes liés au design adap­ta­tif tel qu’il est pratiqué aujourd’­hui.

SVG, icône et syntaxe XML

Cepen­dant, il est impor­tant de garder en tête que, premiè­re­ment, SVG est un format parti­cu­lier qui a ses propres méca­nismes parfois radi­ca­le­ment diffé­rents de HTML (tout ce qui touche au texte par exemple, car SVG ne connait pas la notion de flux de texte). Cela lui donne un côté contre-intui­tif et implique un temps d’ap­pren­tis­sage qui n’est pas anodin si vous voulez être effi­cace rapi­de­ment avec cette tech­no­lo­gie. Deuxiè­me­ment, l’usage “grand public” de cette tech­no­lo­gie est beau­coup plus récent que celui de HTML. Concrè­te­ment, ça veut dire que les construc­teurs de navi­ga­teurs l’ont mise en œuvre beau­coup plus récem­ment et que vous serez donc plus faci­le­ment confron­tés à des bugs ou à des inco­hé­rences d’in­ter­pré­ta­tion, surtout si vous sortez de la zone bien maîtri­sée du dessin (les anima­tions, les filtres, les masques, les fontes, etc.) – Le train de 13h37.fr

8. Mono­chro­ma­tic Design

Les desi­gns mono­chro­ma­tiques s’ac­com­mo­dant parfai­te­ment à la tendance mini­ma­liste et épurée que nous connais­sions d’ores et déjà en 2014. Ces derniers feront donc encore et toujours la tendance en 2015.

Schéma couleur monochromatique

Mono­chro­ma­tic desi­gns should contain only one color or addi­tion of a few of its ligh­ter and darker tones. Howe­ver, it’s quite diffi­cult to meet the website crea­ted fully in one tone […] Most of mono­chro­ma­tic desi­gns are based on long-stan­ding black-and-white clas­sics with heavy usage of grey tones […] In black-and white desi­gns we can notice a stri­king contrast between two title colors. Other mono­chro­ma­tic website desi­gns are rather based on multiple shades of the title color, without clear oppo­sites, and some other color may be used as a color accent – desi­gn­web­kit.com.

Traduc­tion :

Les desi­gns mono­chro­ma­tiques ne sont suppo­sés conte­nir qu’une seule couleur et/ou quelques tona­li­tés plus claires ou plus sombre en supplé­ment. Cepen­dant, il est assez diffi­cile de trou­ver un site créé entiè­re­ment sur base d’une seule couleur. La plupart des desi­gns mono­chro­ma­tiques sont basés sur le clas­sique noir et blanc, avec un usage impor­tant de nuances de gris. Dans les desi­gns en noir et blanc, nous pouvons remarquer un contraste impor­tant entre deux couleurs. D’autres sites mono­chro­ma­tiques vont plutôt faire appel à de multiples nuances de la couleur prin­ci­pale, sans claire oppo­si­tions ; tandis que d’autres couleurs peuvent être employées pour accen­tuer cette couleur.

Site Web Monochromatique de Manoverboard

Jwilouvres site web monochromatique

Site web monochromatique jaune de Hivestorage

Avan­tages et incon­vé­nients du web design mono­chro­ma­tique :

Ce type de design attire davan­tage les inter­nautes de par son ambiance sophis­tiquée et son design discret. Les desi­gns mono­chro­ma­tiques cher­chant à créer une certaine harmo­nie, qu’un contraste, la plupart d’entre eux ont pour objec­tifs de susci­ter chez l’in­ter­naute un senti­ment d’apai­se­ment, à travers une ambiance calme et relaxante.

À cette fin, l’ou­til en ligne d’Adobe Kuler vous permet de défi­nir aisé­ment les mono­chromes ainsi que les diffé­rentes nuances de la couleur de votre choix : https://color.adobe.com.

Outil en ligne d'Adobe Kuler

En conclu­sion :

Design mini­ma­liste et épuré, mono­chro­ma­tique et respon­sive, … plusieurs grandes tendances actuelles l’étaient déjà en 2014. La ques­tion qui se pose désor­mais est plutôt : lesquelles vont persis­ter et mâtu­rer ? Lesquelles fini­ront par dispa­raitre ou évolue­ront de manière alié­nante ? Seul 2015 nous le dira !

Quoi qu’il en soit, une seule constante persiste : remettre au cœur du web l’ex­pé­rience utili­sa­teur, susci­ter toujours plus d’émo­tion, enfin, revi­si­ter les grands clas­siques pour créer des desi­gns encore plus beaux et origi­naux.

Une petite info­gra­phie très inté­res­sante : « 20 Web Design Trends for 2015 »

Tendances web design de 2015