Les grandes tendances du webdesign de 2015

Camille Franc

Il est important de prendre en considération le large spectre des possibilités qu’offre internet lorsque vous vous lancez dans la conception d’un site web. Avec un peu d’audace, les graphistes peuvent repousser les limites du possible en terme d’interactions et de créativité, sur tous les tableaux – comme on peut souvent le voir sur les sites internet des agences publicitaires, par exemple.
Dans cet article, nous nous intéresserons aux nouvelles tendances webdesign les plus pertinentes de 2015, là ou l’innovation et les opportunités se trouvent. Vous ne verrez plus jamais les sites internet du même œil après cela !

1. Grand format

Capture d’écran 2015-05-27 à 15.55.27

Site web de Born

Voir les choses en grand semble être le principe le plus important en ce qui concerne la conception graphique de site internet de nos jours. Il n’en demeure pas moins que la plupart des gens acceptent difficilement que la page d’accueil – surtout au-dessus de la ligne de flottaison – ne contienne que quelques mots, apposés sur une image ou une vidéo. Il arrive même parfois que le menu de navigation soit supprimé, ou tout au moins, qu’il soit caché dernière une petite icône.

Les deux aspects de cette tendance peuvent être nommés « cinématographique », inspiré du cinéma et de la publicité, et « couverture de livre », à l’image plus traditionnelle des magazines.

Void and form

Couverture de livre. Site web de Void and Form.

Derrière cette tendance se cachent des raisons tant esthétiques que pratiques. Elle permet d’avoir un maximum d’impact sur l’utilisateur, dès son arrivée sur votre site. Elle est également plus facile à développer, ce qui rend son adaptabilité plus grande, que ce soir sur un Smartphone ou sur un ordinateur (la mise en page ne change pas, bien que la taille de l’écran soit différente).

La mode des images en plein écran est apparue l’année dernière (nous en avions déjà parlé dans notre article sur les tendances de 2014). Mais avec l’accessibilité grandissante aux images en haute définition et les prouesses d’une technologie toujours plus rapide, les sites web conçus tels des « couvertures de livres » sont passés, depuis, à un tout autre niveau.

Bellroy

Inspire par le cinéma et la télévision. Site web de bellroy.

La tendance « cinématographique » repose sur les vidéos en plein écran (ou presque), accompagnées de quelques mots ou éléments en premier plan. Ce concept a également été mentionné précédemment, dans notre article sur les tendances webdesign de 2013, alors qu’il n’avait été exploité par quelques agences publicitaires seulement.

Ce style fait désormais de plus en plus de convaincus. L’année dernière, la refonte du site de PayPal avec une vidéo en plein écran en fond a notamment participé à rendre ce concept très populaire.

2. L’expérience multimédia

Jack Daniels

Le site de Jack Daniels est un très bon exemple « d’expérience multimédia », moderne et réussie.

Ce concept n’est pas nouveau. Le mot « multimédia » a tellement été utilisé qu’il est presque désuet de sens… Ce sont néanmoins des bataillons entiers de graphistes et développeurs qui rivalisent constamment de talents pour créer des expériences multimédias plus engageantes les unes que les autres.

Il y a quelque temps, Flash était la plate-forme de choix pour créer ce type d’effet. On parle maintenant de l’élément <canvas> HTML5 qui vous permettra bientôt d’ajouter pratiquement n’importe quel contenu visuel dynamique à votre site.

Jviewz

Site web de The DNA project de j.viewz

Le projet participatif The DNA project de j.viewz est un autre exemple remarquable d’une interface réalisée avec l’élément canvas. Jonathan Dagan (aka j.viewz) explique son processus de création pour son prochain album, tout en invitant les visiteurs à mettre la main a la pâte.

Raise the River

Site web de Raise the River

Le site de Raise the River illustre très bien, lui aussi, le concept « d’expérience multimédia », grâce à sa métaphore visuelle ingénieuse, mais aussi grâce à sa mise en page. La vitesse de l’animation et l’incapacité de faire défiler forcent pratiquement l’utilisateur à se poser et à s’adapter au rythme de la page.

De manière générale, les graphistes essayent de « permettre » le plus possible à l’utilisateur lors de la création d’un site web. Raise the River nous montre que de bloquer certaine fonction à l’utilisateur pendant un certain temps peut parfois conduire à une meilleure expérience.

3. Évolution de l’effet parallaxe

L’effet parallaxe a évolué de manières très variées, tout en conservant son attribut principal : les graphistes utilisent le défilement ou les mouvements de la souris pour animer des éléments ou des fonctions d’une page internet. En regardant de plus près, vous vous rendrez compte que la plupart des sites web mentionnés dans cet article ont adopté ce concept. Voici davantage d’exemples :

Défilement des évènements et illustrations

Mint Design Company

Site web de Mint Design Company

Il est facile de se laisser séduire par l’utilisation originale d’un vieux Sprite CSS sur le site de Mint Design Company. Le résultat est unique et engageant, tandis que le site en lui-même reste assez simple.

Défilement innovant

Color Scroll

Défilement par couleur – Site web de QUO+

Le site du vendeur de casques audio QUO+ vous embarque dans une folle aventure faite de défilements verticaux et horizontaux, sans oublier la page de produits où ù peutes essentiels. tiels. d oles commentaires! ques se developpent, assurez-vous de ne pas faire l’les essentiels. tiels. d ol’on peut également changer la couleur des casques en un glissement de doigts.

4. Illustrations animées

Boldking

Site web de Boldking

Tout comme dans le premier exemple, le site de Boldking contient des animations qui démarrent lorsque l’utilisateur atteint un certain endroit sur la page. Il s’agit souvent de quelques éléments qui se déplacent sur l’écran ou apparaissent avec un effet en entrée.

La page de produits du site (ci-dessus) comprend des SVG simples (« graphique vectoriel adaptable ») et Java Script pour créer des métaphores visuelles pour expliquer le fonctionnement de leur produit. Non seulement l’idée est bonne, mais il convient également de noter que la page entière ne fait que 1.5 Mb ! Les bibliothèques JS font parfois la même taille, à elles seules. L’une des animations est même interactive.

Colin and Dewi

Site web de Colin and Dewi

Le site internet du mariage de Colin and Dewi est simple, mais ingénieux, car il parvient à retenir l’attention de l’utilisateur. L’histoire vous est présentée morceau par morceau ; pour connaître la suite, vous devez faire défiler l’écran.

On pourrait penser à quelque chose de générique avec cette description, mais l’animation CSS en 3D, ainsi que les bouts de texte cachés rendent l’histoire de ce couple beaucoup plus engageante !

En-tête et effet parallaxe activés par le mouvement de la souris

Habitatweb

Site web d’HábitatWeb

Cet effet est utilisé pour créer l’illusion d’un espace tridimensionnel. C’est un bon atout lorsqu’il s’intègre bien dans la narration visuelle de la page, tout comme c’est le cas sur le site d’Habitat Web (ci-dessus), ou encore sur celui de l’Archéologie de la Grande Guerre.

Lorsqu’il est utilisé avec goût, cet effet fait toujours… de l’effet ! Bien que nous ne pensons pas qu’il devienne particulièrement populaire. S’il venait, en revanche, à être utilisé par les masses, il n’en deviendrait que mielleux et énervant.

5. Flat design

Colin and Dewi

Site web de Colin and Dewi

Au cours des trois dernières années, le flat design (ou « design plat ») a connu une popularité sans limites. La tendance ne faiblie pas et devrait durer indéfiniment. D’autant plus pour les petits éléments tels que les icônes, les menus, et les illustrations.

Non seulement le flat design sied à ravir à ces petits éléments (incomparable avec leur version 2.0 qui étaient encore visible partout il y a quelque temps), mais il permet également de changer d’échelle facilement, grâce aux nouveaux outils pour les polices d’icône. Icomoon.io est un exemple de service en ligne permettant à n’importe qui de créer leur propre police d’icône facilement et gratuitement.

Lab21

Lab 21 transforme le flat design en « design origami »

Il est intéressant de noter que le flat design n’est pas toujours si plat que ça. Les graphistes ajoutent souvent des dégradés, des textures, et des photos, pour créer un effet saisissant. En ce qui nous concerne, nous pensons que l’avantage du flat design n’est pas tellement le design lui-même, mais le fait qu’il permette de créer des métaphores visuelles originales.

Au lieu de reproduire des éléments skeuomorphes, le flat design tente de communiquer l’idée de l’objet de manière synthétique, percutante, et amusante, quelle que soit la taille de l’élément graphique.

Nous pensons que cette tendance évoluera en se mélangeant aux autres styles graphiques, à la façon d’un collage, dans l’esprit du site web d’HábitatWeb, mentionné plus haut.

6. Moins de rectangles

Les graphistes aiment se sentir libres d’explorer de nouveaux horizons, en dehors des sentiers battus. C’est pourquoi cette tendance leur plaira. On pourrait la résumer ainsi : « dessinez une boîte et prouvez que vous pouvez la briser ». Le rectangle est le point de départ de tout graphiste (à notre connaissance, aucun écran d’ordinateur circulaire n’a encore été inventé). Tous les éléments HTML d’une page sont également rectangulaires.

Mais les graphistes, comme la plupart des gens, n’aiment pas les contraintes. Il existe trois stratégies qui vous aideront à vous libérer de cette impasse, et toutes les trois sont en vogue.

Faire comme si la page n’était pas rectangulaire

DAN Paris

Menu Instagram fait de cercles. Site web de DAN Paris

Essayez les cercles, hexagones, losanges, et même les formes irrégulières.

Lorenzo Bocchi

Site web de Lorenzo Bocchi

Avec une ligne d’horizon penchée et une mise en page des aperçus en perspective axonométrique, le site de Lorenzo Bocchi donne un sentiment d’espace et de mouvement.

The Rosa Welcome

Site web de The Rosa (via Pixelgrade)

Il suffit de regarder la page d’accueil du restaurant The Rosa pour avoir l’eau à la bouche. Sur le même principe que les anciennes techniques de trompe-l’œil, ce site parvient à recréer une vrai table de travail à l’intérieur d’un écran d’ordinateur. Prenez par exemple un fond en bois, et ajouter des objets au premier plan.

Swiss Airlines

Site web de Swiss airlines

Le meilleur moyen de défier le fameux rectangle est encore d’envoyer l’utilisateur dans un espace infini, où « faire défiler la page » signifie plutôt « voler à travers ciel » !

Swiss airlines change ainsi notre idée de la navigation internet, bien loin de notre perception traditionnelle de l’espace d’un « document ». En parcourant les pages de leur site, on se balade au milieu des nuages.

7. Mosaïques

Mosaïque

Mais si les rectangles vous plaisent, voici un moyen très tendance de structurer votre contenu: la mosaïque. Pour des raisons obscures, les mosaïques en web design vendent mieux que l’interface de Windows 8… Les mosaïques sont idéales pour optimiser l’adaptabilité du site, tout en restant esthétiquement saisissantes.

Si le concept vous lasse, vous pouvez explorer les mises en page irrégulières en zigzag, ou jouer sur le positionnement du texte et des objets.

8. Widgets de navigation

widget

Le widget de navigation du site The Daily Beast intègre le défilement au sein de l’article lui-même.

Depuis plusieurs années, la navigation internet est le terrain de jeu préféré des graphistes. Cette tendance a connu son apogée alors que les sites web étaient conçus uniquement en Flash. Le déclin de Flash a donc été synonyme de menus plus conventionnels, dénués d’animations et d’excentricités.

Mais la tendance est de retour, notamment grâce aux nouveaux outils de conceptions graphiques et à l’inadaptabilité des modèles traditionnels de navigation qui les a rendus obsolètes. Cette deuxième vague est également aidée par l’utilisation globale de Java Script et son évolution permanente (en termes de frameworks et plugins), et l’acceptation du CSS moderne par tous les plus grands navigateurs internet.

Voici quelques exemples des nouvelles tendances et expérimentations en ce qui concerne la navigation des sites web. Certains de ces concepts sont déjà largement rependus, tandis que d’autres, à peine naissants, nous laissent entrevoir la nouvelle ère du web design « moderne ».

Menus collants

menu collant

Ce type de menu indique quel chapitre dans le sous-menu vous êtes en train de lire, au fur et à mesure que vous faites défiler le contenu. C’est un choix idéal pour les pages simples avec beaucoup de texte. La page de manuel de LESS est l’une des plus agréables à consulter jamais conçue. Site web de Less CC.

Un menu collant est un menu qui reste en haut de page, même lorsque vous faites défiler l’écran. Que ça vous plaise ou non, ce type de menu est en train de se standardiser.

Les menus collants sont parfois combinés avec un scrollspy (« espion de défilement ») pour créer un widget indiquant votre position exacte sur la page. C’est très utile, notamment pour les menus complexes.

Navigation fixe aux quatre coins de l’écran

Navigation fixe

Site web de Hum

Navigation en street view

Navigation en Street View

Site web de Oh Deer Games

Les graphistes à l’origine de ce site web se sont inspirés du street view de Google Maps pour donner l’impression à l’utilisateur de se promener, au sens propre, sur Oh Deer Games. Le temps confirmera ou non la tendance, mais ce qui est certain, c’est que ce ne sont pas les seuls à avoir exploré les possibilités offertes par une navigation en street view, ou en « survol » axonométrique, bien connu dans le monde des jeux vidéo.

Ce qui nous amène à la tendance suivante…

9. Intégration de Google Maps

Non seulement cette tendance est en hausse (on la voit pratiquement partout), mais elle devient de plus en plus intéressante visuellement, grâce aux options de personnalisation fournies par Google.

Les sites web qui sont parvenus à utiliser cette tendance à leur avantage, les sites web ont développé leur concept sur le principe d’une carte. Ils ont ensuite utilisé les outils de Google Maps pour ajuster le style de la page.

intégration Google map

10. Interfaces composites

Necotrans

Site web de necotrans

Le vif intérêt pour les pages simples apporte son lot de défis qui peuvent être relevés de manière créative, tout en conservant une interface ergonomique et visuellement attractive. Le challenge est de faire tenir beaucoup d’informations et de fonctions en une seule page, sans perdre la modernité du graphisme, ni la fonctionnalité du site.

L’une des solutions envisageables est ce qu’on appelle une « interface composite » (ou mashup en anglais). Il s’agit d’une interface créée en plusieurs couches qui permet d’ajuster les fonctions requises ou tout simplement le contenu. En fait, ce n’est pas un concept tout nouveau : le principe est le même que pour les logiciels d’ordinateur, mais il n’a pas été très populaire pour une utilisation internet jusque-là. La tendance est en train de changer et le concept est de plus en plus exploité, car il est de plus en plus fonctionnel.

Le site de Necotrans n’a pas beaucoup de contenu au-dessus de la ligne de flottaison : une phrase est simplement apposée sur une photo en plein écran. Mais le petit menu sur la droite permet d’accéder à toutes les fonctions essentielles du site, à partir du même écran. Cela permet aux utilisateurs de rechercher des widgets sur le site (et les résultats apparaissent en temps réel), de personnaliser Google Maps, et d’accéder au formulaire de contact.

11. Minimiser

Minimiser

Site web de Maemo

Le principe KISS est de vigueur : Keep It Simple, Stupid ou encore, Keep It Short and Simple. Largement utilisé par l’armée et le gouvernement américains dans les années 60, cet acronyme signifie « ne compliquez pas les choses et restez simples ». Bien que vous travailliez dur pour simplifier vos designs, vous pouvez certainement pousser le bouchon encore un peu plus loin.

Le site du restaurant Maemo raconte son histoire de manière prenante en utilisant pourtant un langage extrêmement simple. Les utilisateurs sont ensuite invités à réserver une table, le seul call to action de la plate-forme. Le nom du restaurant apparaît sur un fond majestueux de brume tourbillonnant au dessus de fjords.

On découvre ensuite quelques photos modestes en faisant défiler l’écran. L’alignement horizontal et vertical est difficile à repérer. Malgré tout, nous avons le sentiment de vivre une expérience très sensuelle en parcourant ce site web. Les formes ascétiques soulignent la qualité des photos, tandis que le design minimaliste attire l’attention sur les quelques phrases savamment sélectionnées, comme des paroles de sagesse.

Que doit-on en retenir ? Il est possible de créer un site à la fois sobre et épatant ! Pensez à minimiser le contenu, les formes, et les couleurs autant que possible, et ajoutez des vidéos authentiques de bonne qualité.

12. Pré-chargeurs graphiques

pre chargeur graphique

Exemples de pré-chargeurs graphiques

Avec les connexions internet ultras rapides d’aujourd’hui, il est facile d’oublier les modems 56K des années 90… Avec eux, nous avons également oublié les pré-chargeurs amusants qui étaient, à l’époque, essentiels à tout site web.

De nos jours, il est possible d’utiliser des vidéos en haute définition comme fond d’écran, ce qui était inimaginable il n’y a pas si longtemps que ça. Mais comme pour toute bonne chose, il y a un prix à payer : le temps de chargement de telles pages est nécessairement plus long.

C’est pourquoi nous assistons aujourd’hui à un retour en force des pré-chargeurs. Ils ne sont pas aussi engageants qu’au temps ou Flash permettait même de créer de pré-chargeurs en jeu, mais il s’agit de véritables œuvres d’art néanmoins.

13. Automation graphique

grid io

Cette capture d’écran du site grid.io relève une erreur qu’aucun graphiste en chair et en os n’aurait pu faire: un texte en noir sur un fond noir.

Cet article ne serait pas complet sans mentionner « The Grid », un projet créé par plusieurs graphistes qui ont récemment . Le principe est de remplacer les graphistes et les développeurs par une intelligence artificielle. Les graphistes doivent-ils s’inquiéter ? Pas si vite.

Pour l’instant, il n’est pas possible de tester ce système, il est donc difficile d’évaluer son utilité. Le site du Grid lui-même est actuellement la seule démonstration de son efficacité. Créer une intelligence artificielle capable elle-même de créer de l’art semble être à la mode. Mais le logiciel The Painting Fool par exemple, n’a pas encore réussi à faire disparaître la peinture des galeries d’art !

Conclusion

Ces 13 tendances en web design gagnent en popularité depuis l’année dernière et auront probablement un influence conséquente sur les sites web crées en 2015. Malgré tout, si nous devions résumer cette année de web design en une seule phrase, ce serait « le contenu d’abord ».

Cette devise a toujours été vraie, mais l’importance grandissante de l’esthétique met en exergue les erreurs commises avant les phases de design : le concept, le flux de la navigation, les wireframes, le contenu, etc. Alors que les possibilités techniques se développent, assurez-vous de ne pas faire l’impasse sur l’essentiel.

Quelle tendance fera fureur en 2015 d’après vous ? Faites part de votre avis dans les commentaires !

Auteur

Camille Franc
Camille Franc

Expert en webmarketing, Camille est passionné par l’entrepreneuriat et l’accompagnement de projets. Quand il ne vaque pas à la musique ou à la permaculture, il s'intéresse au digital, à la communication visuelle et aux nouvelles tendances sociales ! Bref, un jongleur à l'âme ouverte!

Articles similaires

5 tendances packaging à surveiller de près en 2016

5 tendances packaging à surveiller de près en 2016

Réaliser de bons packagings ne requiert pas seulement de bien connaître sa marque, mais également de connaître les tendances culturelles qui vont « parler » à votre audience. Les experts en marketing prêtent une grande attention aux ouvrages de littérature, aux hobbies et aux valeurs de leur audience. Ceci leur permet de trouver de nouvelles idées. Les…

Les grandes tendances en webdesign pour 2016

Les grandes tendances en webdesign pour 2016

Ça n’est pas tous les ans que l’on peut parler de gros changements ! L’accumulation des avancées technologiques de ces dernières années va grandement impacter les tendances en webdesign que nous verrons en 2016. Certaines textures vont se greffer au flat design, les « expériences cinématiques » seront de plus en plus usitées et les modèles JavaScript permettront de multiplier les expérimentations. La popularité…

Les 10 grandes tendances logo de 2016

Les 10 grandes tendances logo de 2016

Il n’y a rien de plus important que de créer un logo pour établir sa propre marque. Et puisque personne ne veut avoir l’air démodé, on voit toutes sortes d’expérimentations apparaître: certains grands classiques reviennent sur le devant de la scène et quelques petites surprises montrent le bout de leur nez. Sans plus attendre, voici les tendances 2016…

Concours de design actifs

Jeter un oeil aux derniers concours lancés sur 99designs!