administrateur, Author at Agence O

La recherche, une navigation alternative

La barre de navigation permet de classifier par thèmes les différentes pages d’un site, d’un logiciel ou d’une application. C’est un point de repère stable et fiable pour chaque utilisateur qui le guide lors de l’exploration de l’interface.

Si, pour une grande majorité de cas ce système de navigation est suffisant, il faut se rappeler que les utilisateurs et les contextes de navigation peuvent être différents.

La recherche est un parfait système de navigation alternatif. Il permet à l’utilisateur de trouver une information ciblée. Cet outil répond à deux scénarii :

L’utilisateur ne trouve pas l’information via la navigation : après exploration du site, il va utiliser le moteur de recherche pour la trouver ;
L’utilisateur sait exactement ce qu’il recherche, la recherche est précise et ciblée : l’utilisateur n’a pas besoin d’explorer le site, le moteur de recherche est un gain de temps et lui permet d’accéder rapidement à l’information souhaitée. Cette alternative est utilisée principalement par les visiteurs réguliers du site, qui connaissent le site et qui savent ce qui s’y trouve.

Le rôle du champ doit être clairement identifiable

Il est important de respecter les standards graphiques : un champ de saisie et une icône loupe, le tout placé en haut de page de préférence sur la droite. C’est sous cette forme et à cet emplacement que les utilisateurs s’attendent à trouver le champ recherche. Il doit être présent sur toutes les pages, toujours au même endroit.

*Emplacement du moteur de recherche – nike.com*

Dans le cas où le site dispose de très peu de contenu, il est envisageable d’opter pour un champ recherche discret : une simple icône loupe, avec un champ qui se déploie au clic pour permettre la saisie.

*Champs recherche minimisé en état normal – chobani.com*

La recherche doit être simple et optimisée

Les études montrent que les options de recherche avancée ne sont utilisées que par un public très averti. Pour la majorité, les utilisateurs ne savent pas les utiliser. Ces options sont perturbatrices. Un champ simple, parfaitement identifiable, optimisé sur quelques mots répond au mieux aux attentes des utilisateurs.

La recherche doit pouvoir être catégorisée et restreinte à certaine partie du site

Pour éviter de noyer l’utilisateur sous un nombre important de résultats de recherche, il est intéressant de restreindre la recherche à une partie du site. Par défaut la recherche se fait dans tout le site, la possibilité de restreindre la recherche doit être le choix de l’utilisateur. Sinon elle peut être source d’un grand nombre d’erreur.

L’autocomplétion permet de guider l’utilisateur dans sa recherche. L’internaute indique uniquement un mot clef, le moteur de recherche lui propose une liste de résultats.

*Moteur de recherche qui peut être restreint en fonction des catégories – amazon.fr*

Dans le cas où le site dispose de beaucoup de contenu il est intéressant de regrouper les résultats de la recherche selon les catégories. Si nous prenons en exemple un site e-commerce important, il est judicieux de classer les résultats de recherche par rayons.

*Résultats de recherche classés par catégories – natureetdecouvertes.com*

Un champ recherche presque parfait, c’est bien. Avec des résultats pertinents, c’est mieux !

Le champ recherche n’est pas une bouée de secours. Il n’est pas là pour pallier à une manque d’organisation du contenu dans un site Internet.

Le moteur de recherche se doit de fournir des résultats pertinents, ce qui demande une bonne indexation de toutes les pages du site. Dans le cas contraire, l’internaute se trouvera noyé sous un nombre trop important de résultats de recherche qui ne répondent pas à sa demande.

Pour arriver à combiner le champ recherche presque parfait avec des résultats pertinents, vous devrez veiller à :

Indexer régulièrement le contenu sur lequel porte la recherche afin de disposer d’une information récente et à jour ;
Classer les résultats de recherche selon la manière dont ils répondent aux critères de recherche de façon à afficher dès les premières pages les résultats les plus pertinents pour l’utilisateur ;
Fournir un titre à chaque résultat et une description courte afin d’accélérer la lecture et de faciliter la compréhension.

Et pourquoi pas un champ recherche alternatif ?

Osez l’originalité, si le contenu du site et la cible de celui-ci vous le permet !

*Arte propose une moteur de recherche qui permet d’affiner de façon très ludique la liste des résultats de recherche – Arte.tv*

*Une recherche sous forme de phrase à trous ? Permet, ici aussi, de filtrer de façon très ludique le contenu, à l’aide de listes déroulantes – Feelactiv.com*

Brutalisme : sous le béton, le graphisme

Communication Design

Il y a un mois Flavien Berger sortait son dernier morceau accompagné d’un clip sobrement nommé “Brutalisme”. On y suit l’histoire d’amour entre un chevalier en armure et une femme en kimono rouge, entre le sable de la plage d’Acapulco et les murs des tours Nuages de Nanterre…

Une occasion très poétique pour nous de revenir sur une tendance qui ne date pas d’hier : Le Brutalisme. Quand, même derrière un bloc de béton, on peut susciter de l’émotion…

*Découvrez la vidéo – > https://www.youtube.com/watch?v=E11DAkrjlP8*

Ôde au béton

Soyez prêt à troquer vos moulures et divers ornements haussmanniens contre la rigueur allemande. Répétitions, formes géométriques simples, matériaux bruts ; avant de revenir en force dans l’univers du graphisme et du web design, le brutalisme est avant tout un courant architectural.

Issue de l’oeuvre de Mies van der Rohe ainsi que celle de Le Corbusier, le brutalisme puise son inspiration dans le mouvement moderne. Ce terme tient son origine du mot “brut” en relation avec l’expression “béton brut” souvent utilisée par Le Corbusier et non de “brutal” comme certains pourraient le penser.

À la fin des années 1940, il est urgent de reconstruire rapidement les villes touchées par la seconde guerre mondiale et ce à moindre coût. De nombreux architectes optent alors pour des matériaux bruts tel que le béton ou la brique, des volumes massifs et une certaine mise en avant des éléments structurels des bâtiments. Le style se veut primaire, le raffinement et l’aspect décoratif sont mis au placard pour plus de minimalisme ; c’est ainsi que les paysages urbains prennent des formes abruptes et “crues”.

*Robin hood Gardens (1972), Alison & Peter Smithson’s , photographie Sandra Lousada*

Après un pic de popularité dans les années 1950/1960, ce mouvement va connaître une critique sévère : défiguration des paysages, suspecté de favoriser la criminalité, mauvais vieillissement des matériaux. On juge les bâtiments “laids et dénué d’esthétisme”.

Le brutalisme divise par son aspect rude et grossier. Il frotte le regard quand on s’y attarde. Il bouscule. Cependant il faut lui reconnaître une particulière qualité graphique, en témoignent de nombreux travaux de photographes et amateurs. Les complexes architecturaux issuent du brutalisme se prêtent très bien au jeu des shootings photos ou vidéos. Une liste non exhaustive de clips musicaux se déroule dans un décor architectural empreint au brutalisme, ce qui apporte une puissance visuelle et une griffe caractéristique.

*Geisel Library, University of California, San Diego, California, USA, 1970 by William Pereira & Associates, photographie Peter Chadwick “This brutal world”*

Naître brut ou le devenir

Faisons un bond dans le futur ; quelques décennies plus tard, dans les années 1990. Dès la naissance du web et l’utilisation des premiers logiciels de PAO le brutalism design se fait ressentir, non pas par volonté dans un premier temps, mais en réponse directe aux outils disponibles pour créer. Le design au début de l’ère numérique tend vers un style rudimentaire, dénué d’ornements, avec une structure particulièrement mise en avant. On retrouve nos codes si chers au brutalisme. Alors évidemment, on ne va pas construire nos sites internet avec du béton, mais avouez qu’on croirait presque regarder des blocs d’immeubles face à cette fenêtre du tout premier navigateur web :

*Fenêtres du premier navigateur web, appelé WorldWideWeb (plus tard rebaptisé Nexus) 1995 https://thehistoryoftheweb.com/web-first-and-second-browser/*

*Captures d’écrans de la version 1.0.1 de Photoshop, 1990*

Abrupt certes, mais si depuis plusieurs années les designers de divers horizons reviennent vers des créations teintées d’inspiration brutaliste, c’est qu’au final il doit bien y avoir quelque chose à garder dans ce courant si méprisé, non ?

Réaction et provocation

Au-delà de la construction pure et dure d’un bâtiment, le brutalisme cherche plus profondément à provoquer une réaction, à nous sortir de notre zone de confort, face à une certaine uniformisation de la beauté et une harmonisation des goûts. À l’heure du règne d’Instagram, “du beau et du bon”, le brutalism design apparaît comme une réponse à un monde un trop lisse.

En novembre 2017, un tweet de Janny Johannesson largement relayé dresse un certain état des lieux du web design en postant “Stop. Making. Websites. Like. This.” Formule accompagnée d’un tableau des captures écrans des sites du moment, quasi tous identiques.

*https://twitter.com/chopse/status/930935055274225664*

S’affranchir des standards est un exercice difficile, surtout lorsque qu’à force de les côtoyer, on finit par se reconnaître dans des designs consensuels et rassurants… (Autant du côté des designers que des marques).

C’est à ce moment que la bête noire qu’est le brutalisme refait son apparition, afin de donner un coup de pied dans le monde du design print et digital, un peu comme une philosophie d’outsider, tout en gardant une partie des codes du mouvement architectural. Cette fois-ci non pas en conséquence des outils numériques – qui ont bien évolués depuis – mais volontairement, comme une anti-tendance avec un esthétisme à contre-courant.

Comment cela se traduit-il alors ?

Nostalgiques du early web ou aficionados d’une esthétique rétro, certains designers reprennent les codes graphiques des premières interfaces quand d’autres privilégient des typographies aux graisses épaisses et imposantes.

On distinguera alors deux styles dans le brutalisme appliqué au web :

Un premier qui se veut dépouillé, basé sur des structures géométriques proche d’un zoning, avec des typographies ou des couleurs impactantes pour aller à l’essentiel. L’exemple ayant créé le buzz étant le dernier site de Balenciaga par le Bureau Mirko Borsche.

Dépouille visible ensuite sur des sites comme ZK/U ou encore Posh-Space :

On pourra noter l’atout d’un taux de chargement des pages très bas dû au design minimaliste ainsi qu’un accès brut et direct à l’information.

Quant à sa seconde utilisation, elle prendra forme dans dans une veine beaucoup plus “punk”, où une partie de l’UX – en particulier le parcours utilisateur – sera bien souvent mis de côté pour offrir une expérience visuelle plus intense. Couleurs criardes, lisibilité réduite, matières et forme 3D sont mis à l’honneur.

Souvent déconseillés pour les épileptiques, ces sites ne sont pas voués à un usage quotidien, mais permettent de provoquer une certaine sensation lors de la navigation. Ils sont expérientiels. Ce sont des oeuvres en soi. Ils n’ont pas vocation à être “sexy” ou informatifs. On aime ou on déteste, mais peu sont indifférents.

Un index en ligne à l’initiative de Pascal Deville recense une liste de sites qui se revendiquent appartenir au brutalism design. On peut ainsi lire en page d’accueil :

In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today’s web design.

Dans sa rudesse et son manque d’intérêt pour paraître confortable ou facile, le brutalisme peut être vu comme une réaction, par une génération plus jeune, à la légèreté, à l’optimisme et à la frivolité du web design d’aujourd’hui. http://brutalistwebsites.com/

Cependant un des risques dans l’expérimentation brutaliste est de tomber dans une forme trop conceptuelle qui ne s’adresse qu’à un public restreint dans le monde du graphisme. Du design pour des designers (et/ou artistes) en somme.

Brut is the new hype

Dans le monde de la mode, de nombreuses marques ont utilisés un esthétisme issu du brutalisme, souvent associé à un style urbain et moderne. Cela est davantage accentué par l’essor du streetwear et sa relation inhérente aux banlieues autrefois emblèmes de la modernité. On assiste en parallèle à une appropriation de codes populaires par les milieux branchés ; l’art primaire et abrupt remplaçant la subtilité et le raffinement pour devenir le top de l’élégance. Les marques de luxe succombent à la tendance en même temps qu’elles la nourrissent.

Il y a quelques années déjà, Prada sortait sa campagne FW 2014 sur fond de béton brut ou encore Rick Owens lors de son défilé FW 2016 2017.

Dernièrement, les deux géants de la sneakers ont sortis des campagnes aux saveurs de béton brut. Adidas avec la Deerupt et Nike avec son opération On Air.

On reconnaît des bâtiments aux formes massives et géométrique pour le Court métrage Deerupt, avec un focus sur la grille, le filet, la structure même de la chaussure. https://vimeo.com/258511022#at=7

Quant à la campagne Nike On Air, l’ensemble de l’identité et l’interface du site sort droit des premières navigations internets. Blocs simples tel un zoning, focus sur les matières, typographies bold… La marque a proposé de créer 6 designs de chaussure à l’image de 6 villes.

*https://news.nike.com/news/nike-on-air-winners-2018*

Pour conclure, les tendances et styles graphiques ne cessent de réinterpréter des codes déjà existants, ce qui leur permet une certaine évolution. Nous pouvons voir aujourd’hui des hybrides de genres qui puisent leurs inspirations un peu partout, années 90, brutalisme, color block, etc.

Le designer Aurelio Sanchez signe par exemple ainsi une identité minimaliste inspirée de l’architecture :

Ou encore le travail du bureau Mirko Borsche qui ne cesse de défier les règles de l’esthétisme.

*Bureau Mirko Borsche: Tunica AW17 http://bureauborsche.com*

S’il ne fallait garder qu’une leçon venant du brutalisme, ce serait peut-être celle de toujours chercher à se démarquer en sortant des sentiers battus. Cela afin de toujours revendiquer son identité propre et forte, et ne pas suivre une masse rassurante certes, mais trop lisse et impersonnelle.

Puissent nos bétons si rudes révéler que sous eux nos sensibilités sont fines.
LE CORBUSIER

#2 L’inspiration du mois. Les belles planches

Design tendances

Ce mois-ci, on vous invite à prendre votre premier bain de l’année – oui oui, en mai ! – apprécier la peinture à sa juste valeur et surtout, profiter de vos prochains week-ends pour aller découvrir une nouvelle exposition à Paris !

1 – L’eau au service du digital

Les températures estivales ont enfin pointé le bout de leur nez ! Pour beaucoup d’entre nous le mois de Mai rime avec une envie soudaine de baignade et d’évasion au soleil. En attendant vos prochaines vacances, laissez vous enivrer par l’ivresse des profondeurs à travers ces 2 sites dont l’identité visuelle s’articule autour de l’eau : This, studio de design américain et Rive Noire, agence de création parisienne.

On apprécie la poésie qui émane dès l’accueil du site. Constitué de courtes boucles vidéos filmées au ralenti, l’image est silencieuse et hypnotique. Elle donne l’irrépressible envie de plonger à son tour ! Pari osé, les 3 fondateurs du studio se montrent ici dans leur plus simple appareil (un shorty rayé). On pense transparence, authenticité, méthodes de travail immersives et bien chorégraphiées, donc orchestrées. Un concept original et inspirant qui donne un avant goût des vacances d’été !

On descend d’un palier de décompression avec ce studio aux couleurs sombres et abyssales ! Les éléments typographiques y sont en constant mouvement, reprenant le rythme lent des vagues. Mention spéciale pour le développement impeccable et le storytelling de la page Contact qui s’accorde à la perfection avec le concept global posé par les 3 fondatrices. De vraies sirènes du design et de l’écriture 🙂

2 – La peinture au service du digital

Dans un tout autre registre, on notera un regain d’intérêt pour la peinture avec l’exposition en ligne du peintre Leon Löwentraut : #Art4GlobalGoals, initiative engagée par l’UNESCO pour sensibiliser aux problèmes mondiaux à travers 17 objectifs, et le tout nouveau site de l’agence de création parisienne Paris Calling.

Ce site a fait l’unanimité à l’agence ! On ne résiste pas à l’envie de projeter de grands coups de pinceaux hasardeux sur les 17 objectifs pour révéler l’interprétation en peinture de l’artiste. La typographie, très condensée et à la graisse généreuse, rappelle les codes des affiches de propagande. Un concept fort et engageant au design ultra soigné !

En touches plus subtiles, on apprécie ici les effets d’animation révélant ça et là des coups de pinceaux sur les boutons du site. L’alliance du fait main et du numérique donne à cette agence une image de proximité qui rassure. Une joyeuse bande de nanas aux talents multiples, comme en atteste la page Team du site !

3 – L’exposition immersive de Gustave Klimt à l’Atelier des Lumières

Si vous êtes à Paris, ne manquez pas de visiter le nouveau Centre d’Art Numérique ouvert dans le quartier du 11e ! Installé dans une ancienne fonderie du XIXe, ce lieu de 2000m² se prête

Parfaitement à des projections de tableaux autour de grands artistes viennois. Pendant environ 1 heure, 3 films se succèdent au moyen de 140 vidéoprojecteurs et d’une sonorisation spatialisée pour faire vivre au spectateur des sensations inédites.

Testée et approuvée, l’immersion est totale ! A peine entré, on est plongé dans l’univers de l’artiste, ne sachant pas où regarder tant les façades sont nombreuses. Les émotions sont amplifiées par une ambiance sonore adéquate qui accompagne l’exposition tout au long des projections. Pour une appréciation optimale de l‘expérience, on vous conseillera de vous promener tranquillement parmi tous les recoins de cet immense lieu, la mezzanine vous faisant profiter d’une vue quasi panoramique sur les oeuvres projetées, l’observation depuis le sol étant plus sujette à la contemplation et la relaxation. N’oubliez pas de faire un tour dans la pièce miroir, expérience à part entière, ainsi que dans le bar du lieu, au design particulier et psychédélique. Un lieu très prometteur à découvrir d’urgence !

4 – Le coffret mystère Cook & Nelson

Réalisé par l’agence Butcher & Butcher, le panier Cook & Nelson piquera votre curiosité. Ce coffret, d’un bleu profond et au minimalisme intriguant, dévoile une collection de spécialités culinaires protégées dans des étuis sur mesure, aux couleurs vibrantes et primaires. Chacun d’eux est orné d’un motif graphique basé sur le drapeau de la ville dans laquelle le produit a été fabriqué.

L’effet de surprise est réussi ! On apprécie la simplicité des formes graphiques et de la gamme colorielle choisie. On notera en outre l’absence totale d’emballages en plastique au profit d’emballages en carton. Une belle initiative pour compenser l’impact carbone générée par l’importation de ces produits de tradition issus des 4 coins des Etats-Unis.

Say it with a gif / Dites-le avec un gif

Design tendances

Qui n’a jamais répondu à une conversation ou un mail avec un gif animé ?

Vrai phénomène de la culture web, le gif – que l’on prononce “giffe” – est partout et se décline sous toutes les formes. Vidéo-gag, mème, photographie animée, prétexte à l’expérimentation 3D, témoignage d’une expression artistique, le gif animé ne connaît aujourd’hui aucune limite.

Décryptage d’un véritable phénomène numérique et culturel.

1. Plus de 30 ans d’histoire

Le gif a connu de nombreuses périodes de mutations avant d’obtenir sa reconnaissance actuelle.

Il naît le 15 juin 1987 des mains expertes de Steve Wilhite, développeur de CompuServe travaillant alors sur un nouveau format de fichier d’image numérique.

En 1990, il donne vie aux pages web et permet d’augmenter l’attractivité des publicités du web.

L’entrée dans le 21e siècle marque une période sombre dans son histoire, laissé de côté pour son côté trop pixellisé, kitsch et désuet, au profit du format Adobe Flash.

Au début des années 1990, il fait son coming back avec l’arrivée du smartphone et des plateformes de partage photos et vidéos (ex : Tumblr).

En 2012, à l’aube de ses 25 ans, il est élu “mot de l’année” par l’Oxford University Press Dictionary, tout juste un an avant le mot « selfie ».

En 2015, Mark Zuckerberg cède enfin à la pression de ses utilisateurs en autorisant l’entrée du gif sur Facebook, jusqu’alors boudé par le jeune milliardaire du fait de son caractère intrusif et polluant.

2. Le GIF façon mème

Entrons maintenant dans le vif du sujet.

Vous les voyez partout depuis les années 2000, les mêmes demeurent aujourd’hui un moyen de communication aussi pertinent que les mots. Running gags imagés tirés d’extraits de films comiques ou de vidéos populaires, on les retrouvent sur les réseaux sociaux tels que Facebook, Twitter, Tumblr.

Vous n’êtes sans doute pas passés à côté du fantastique Tumblr “Les joies du code”, sorti en 2012 et illustrant les private joke des développeurs informatiques, duquel ont suivi toute une série de Tumblr reprenant et déclinant ce même concept en masse, pour ne citer que les plus connus : Ciel mon Agence ! ou Je suis une vraie fille.

Au même titre que les emojis, l’utilisation des mêmes est devenu un moyen d’expression à part entière permettant d’émettre un avis ou partager un sentiment sur l’actualité de façon plus ludique et légère qu’une simple image ou un texte.

3. Le GIF photographique

Le gif connaîtra une toute nouvelle dimension artistique avec l’avènement du Cinemagraph, inventé par Jamie Beck et Kevin Burg, respectivement photographe dans le milieu de la mode et graphiste spécialiste de l’animation. Ce procédé consiste à réaliser des images photographiques animées par un léger mouvement répétitif sur une zone définie, donnant à leurs images une impression de profondeur visuelle très poétique et envoûtante.

On verra alors apparaître de nombreux artistes jouant avec cette nouvelle technique d’images montées en boucle, recherchant un certain réalisme photographique.

Julien Douvier

Le concept peut aussi être poussé de façon plus audacieuse et décalée, laissant place à l’imagination débordante de l’artiste. Ci-après quelques références incontournables :

Romain Laurent

Rrrrrrrroll

Bill Domonkos

Milos Rajkovic

4. Le GIF expérimental

Dans une toute autre forme, certains artistes emprunteront un chemin plus expérimental, composant leurs gifs de toute pièce dans des univers hypnotiques, mêlant des formes basiques en 3D avec des composantes mathématiques. Dénuée de toute forme humaine, ces gifs “pour le beau” deviennent un vrai terrain d’expérimentation, prétexte pour exprimer leur talent et leurs idées.

Voici un panel des travaux les plus représentatifs de ce mouvement.

Doze Studio

Matthieu DiVito

Alexey Romanowsky

Carl Burton

Paolo Čerić

5. Le GIF vectoriel

Depuis l’apparition de la plateforme sociale Dribble en 2009, une véritable explosion de talents émergents des 4 coins du globe a chamboulé le monde du gif.

Dribble est devenue une vraie mine d’or d’inspiration. De nombreux designers adeptes de l’animation y publient régulièrement leurs histoires muettes, nous faisant alors profiter de leur créativité sans limite sur un laps de temps restreint.

Les marques l’ont compris, ces boucles d’animation courtes représentent un potentiel fort en terme de storytelling où l’on peut aujourd’hui communiquer afin de booster son image de marque, quelque soit son secteur d’activité.

Quelques illustrateurs/animateurs à suivre de près :

Guillaume Kurkdjian

James Curran

Marcus Magnusson

Teodor Hristov

Tony Babel

Robin Davey

6. Le Gif-iti

Devant ces moyens d’expression exclusivement digitaux, en 2010, le graffeur londonien INSA a eu l’idée d’un nouveau concept : le gif-iti, où l’art de mixer le graffiti et le gif, donnant lieu à des créations numériques animées immortalisant le travail faramineux du street artiste. Une manière inédite de consommer l’art urbain.

7. Le gif illustratif

Les illustrateurs non adeptes du vectoriel et peu familiers du logiciel After Effect ne sont pas en reste puisque sur le même principe que l’animation image par image, ils peuvent aussi donner vie à leurs peintures numériques.

Saching Teng

Rebecca Mock

Henrique Lima

Anna Taberko

Laurène Boglio

Quelques artistes de la blogosphère BD exploiteront magistralement cette technique jusqu’à composer une bande dessinée aux moyens de plusieurs gifs animés mis bout à bout. On assiste alors à une expérience de lecture nouvelle démontrant que le 9ème art est en perpétuelle évolution.

Boulet

“Notre Toyota était fantastique”

Jen Lee

“Thunderpaw”

Discipline en constante mutation, terrain de jeu pour les créatifs d’aujourd’hui et de demain, le gif n’a pas fini de se réinventer et de nous surprendre.

Depuis 2014, il est même reconnu comme média de création à part entière puisqu’il jouit dorénavant d’un concours : le Prix de la Motion Photography, lancé par la Saatchi Gallery à Londres.

Sujet de partage et de convivialité numérique, il fait partie intégrante de la réflexion digitale pour son esthétique et ses moyens d’expressions inépuisables. En clair, vous n’avez pas fini d’en voir s’animer !

A l’agence, on ne communique plus que par gifs. Chacun son style : l’épileptique, le poétique, l’ultra concept ou encore l’humoristique. Devenu un vrai sujet de veille en soi, on ne passe pas un jour sans se partager nos dernières découvertes ! Et comme les marques en redemandent, on boucle cet article en gif gif gif !

Pour ceux ou celles qui ne seraient pas totalement rassasié(e)s ?
Quelques perles rares à visionner…

Si vous êtes amateur du pixel art et non sujet à l’épilepsie, ne passez pas à côté de l’univers bariolé et déjanté de Paul Robertson !

Pour les fans de Games Of Thrones, le compte d’Eran Mendel est une excellente source de gifs complètement décalés illustrant les scènes les plus mémorables de la série. Attention, spoilers 🙂

Ils ne datent pas d’hier, mais cet article serait incomplet sans ces 2 références de clips musicaux inspirés du cinemagraph : Joel Compass “Back To Me” et Casseurs Flowters – 06h16 – Des histoires à raconter.

Enfin, pour les cinéastes en herbe, le tumblr Orbo Cinemagraphs regorge de gifs magnifiques au format 16/9 tirés de films cultes. Un tumblr à suivre pour son esthétisme irréprochable et envoûtante.

Le dégradé est mort, vive le dégradé !

Design tendances

Chez Agence’O, on peut dire que nous avons une réelle Histoire avec le dégradé ! Il y a encore quelques minces années, comme tout un chacun, nous criions au drame en en apercevant un, subsistant dans les communications de nos clients.

Alors qu’aujourd’hui, nous sommes les premiers à les désirer, les travailler, et surtout les revendiquer comme système graphique HAUTEMENT CONTEMPORAIN. Nous ne sommes pas les seuls et certainement pas les premiers à retourner notre veste de la sorte.

Le dégradé est mort, vive le dégradé !
Retour en image sur cette bête (tout sauf) noire, qui nous a rendu chèvre…

Un peu d’histoire

Le “bon goût” des 90’s

Si vous étiez déjà un adepte des ordinateurs dans les années 1990, il y a de fortes chances que vous ayez croisé la route des fameux WordArts, premiers logotypes typographiques digitaux en dégradé (si l’on puis dire)

Disponible via Microsoft Word, cette fonctionnalité de modification de texte est principalement caractérisée par ses effets 3D et son panel de dégradés colorés (le fameux “gradient” pour les plus anglophones d’entre nous). Bien qu’extrêmement populaire à l’époque, on s’accordera pour dire que dans cet univers haut en couleurs, le “bon goût” n’a pas sa place…

Rapidement adopté sur les pages de garde des exposés et autres documents de présentation pour apporter une touche “pop”, le WordArt illustre parfaitement l’engouement pour les dégradés de couleurs dans les 90’s.

À cette période tout est permis, on retrouve les dégradés linéaires les plus excentriques dans de nombreux habillages graphiques, des logos, des génériques d’émissions télé, des artworks ou des jeux vidéos. Du bleu vers le rose, du violet au vert, rien n’arrête les designers dans leur quête de modernité, d’identités flashy et saturées à souhait.

*Suede – Coming Up – 1996 / Wham – Music from The Edge of Heaven – 1986 par Peter Saville*

Associés au début de l’ère numérique et à la création assistée par ordinateur, les dégradés chatoyants font désormais partie du décor et sont peu à peu délaissés à cause de leur connotation vieillotte, voire ringarde.

Bonjour Internet. Au revoir petit dégradé !

Avec l’explosion d’internet, la multiplication des devices et l’omniprésence des interfaces, le graphisme appliqué au web se développe à vitesse grand V. Il s’oriente alors vers plus de minimalisme pour guider les utilisateurs. C’est à partir de 2010 que l’on voit apparaître le Flat Design axé sur la fonctionnalité et la simplicité. Dans le web-design les mots d’ordre sont aplat de couleur, accessibilité, épure, épure ou encore ÉPURE : le dégradé vit les heures les plus sombres de son histoire…

Mais face à trop de rigidité, voire une certaine “froideur” (avouons-le) dans le design numérique, comment replacer de “l’humain” au cœur de nos créations graphique et ainsi susciter l’émotion ?

Aujourd’hui, l’expérience utilisateur est au centre de toutes les problématiques et engendre la quête d’un design dit “émotionnel”. Pour captiver son public on cherche à toucher sa sensibilité et entretenir une relation particulière avec lui. On parle à ses souvenirs, à son vécu pour y trouver de l’écho / le faire vibrer.

Aujourd’hui cela est rendu possible grâce au progrès des langages et techniques d’intégration qui insufflent un vent nouveau dans la création digitale. Ainsi la recherche d’une empreinte plastique et d’une patte graphique plus éditoriale, davantage assimilé au print, est particulièrement mise en avant ces dernières années dans le design numérique.

On travaille des formes plus organiques, on s’essaye à des rendus aléatoires proposés par les logiciels qui laissent place à l’interprétation, on ajoute des effets de papier découpé ou collé. Numériquement on ajoute du bruit ou du grains volontairement sur les visuels pour ainsi se rapprocher des rendus analogiques. Tout est bon pour retrouver de la sensibilité et de l’émotion.

Le Come-Back

Gradient 2.0

Tapi dans l’ombre depuis quelques temps, le dégradé est enfin prêt à resurgir.

Notre Gradient 2.0 fait son grand retour, il se veut plus contemporain ; on choisit des gammes colorées plus travaillées et inspirées de la nature (coucher de soleil, aurore boréale, profondeur de l’océan…) avec des transitions plus douces.

Par ailleurs le mode d’image RVB permet, au même titre qu’une 5e couleur en impression, de proposer des visuels aux nuances fluos et vibrantes très appréciées dans les applications lifestyle.

En matière d’identité visuelle on garde en tête le dernier logo d’Instagram, un bon exemple du renouveau des transitions colorées progressives. Sorti mi-2016, il est reconnaissable grâce à son background dégradé et son dessin linéaire blanc représentant un appareil photo en défonce. Dans un article publié sur Medium Ian Spalter, le Responsable Design chez Instagram explique :

We wanted to create a look that would represent the community’s full range of expression — past, present, and future. (…) we knew that people loved the rainbow (…) the rainbow is a bridge into the colorful gradient
IAN SPALTER

Désormais nous connaissons le bleu Facebook, le jaune Snapchat et le dégradé Instagram.

Plus récemment (fin 2017), le logo Tinder a troqué son typogramme pour plus de minimalisme. Seule la flamme reste en se parant d’une transition chaude allant du jaune orangé vers le fushia.

Dans la création web plusieurs tendances ressortent, comme l’utilisation du background dégradé multicolore, le travail de formes et d’univers oniriques abstraits, les dégradés “Duo Tone”.

*Insymbiosis site web par Phoenix Creative studio*

La consécration !

On notera également la démarche créative du projet Baugasm lancé début 2017 par Vasjen Katro, friand de dégradés extravagants alliant formes 2D et 3D. En produisant un visuel par jour pendant 365 jours, il a décidé de poursuivre l’expérience deux années de suite pour 2018.

Le travail du studio Irradié pour le Peacock Society Festival édition 2017 est décliné aussi bien en version numérique qu’imprimée. Il mélange des grilles très géométriques à des formes flottantes dans un large nuancier multicolore. On retrouve une certaine empreinte graphique numérique appliquée pour une campagne d’affichage.

Plus récemment, on se souvient de l’affiche des Nuit blanches 2017 par Manuel Bürger et Pierre Vanni, dans un style résolument rétro jouant sur la symbolique d’un levé de soleil aux aurores après une longue nuit.

Dans le milieu du packaging on retrouve les même teintes acidulées dans différentes gammes de produits. Du textile à la cosmétique en passant par l’industrie agro-alimentaire.

Et après ?

Dans le graphisme comme dans la mode, tout est un éternel recommencement. Adopté puis délaissé pour être enfin remis au goût du jour sous une autre forme, les dégradés n’ont pas fini de faire parler d’eux. Très présents dans toutes les formes du design, on peut se demander à quelle autre tendance vont-ils finir par laisser leur place, à quoi ressemblera leur prochaine évolution…

Allons-nous encore retourner notre veste sous peine de supprimer par tous les moyens cet article apologétique de la toile dans quelques années ?

L’arrivée de la réalité augmentée et le recours de plus en plus courant aux créations 3D ouvrent de nouvelles perspectives graphiques et offrent un large terrain d’expérimentation pour la suite.

Mais aujourd’hui la seule vraie question qui trotte encore dans nos têtes reste : Pourquoi Photoshop propose toujours, en 2018, le même nuancier dans sa palette de dégradés ?

#1 L’inspiration du mois. Les belles planches

Design tendances

Avec l’arrivée du printemps, fleurs en big pattern, teintes acidulées & naïves qui sentent bon le thé vert, un joyeux coup de vent dans les cheveux, et puis…comme un retour sur les bancs du collège…

1 – Les affiches punchy d’Andreea Robescu (Illustration & Graphisme)

Pour fêter l’arrivée du Printemps et réchauffer un peu les températures actuelles, quoi de mieux que l’univers graphique d’Andreea Robescu ? Voici une sélection non exhaustive de ses réalisations qui mêlent couleurs vives, formes abstraites et techniques variées avec une omniprésence du girl power, thème de prédilection de cette artiste pluridisciplinaire.

“La plus belle […. de la plus fraîche] de tes copines …”. Elle n’aura pas attendu le printemps pour faire pousser les fleurs, mais on peut dire qu’elle le porte haut et contrasté cette Andreea !
A l’agence on adore ! C’est frais, c’est coloré, vivant, jeune… ça donne la pêche et l’envie de croquer dedans. Un beau mélange pictural pour une technique qui nous rappelle nos années lycées.

http://andreearobescu.com/

2 – Le rouge et/ou bleu en couleur(s) dominante(s) (Digital)

Ce mois-ci on notera une vague de camaïeux de rouge vif et de bleu Klein, teintes franches s’adaptant facilement sur des illustrations en page d’accueil, comme en atteste ces 2 exemples ci-dessous : Creddy, une compagnie d’investissements BtoB et The Mads, une agence de design russe. Mention spéciale au travail d’animation et de développement impeccable sur ces 2 références.

Ici l’alliance de ses teintes rassure ; et on comprend pourquoi. On parle tout de même d’investissement, de capitaux. Alors on a beau se jeter de le vide et faire de jolies cabrioles illustrées, le tout est bel et bien de retomber sur ses pattes ; pouvoir jouer l’équilibriste en toute confiance.
Le vent dans les cheveux oui ; mais une brise qui ne décoiffe pas. Un bel exercice de style !

https://en.creddy.ru/

On pense à l’analytique rouge des feutres de nos professeurs. Cerclant de manière approbatrice ou non nos devoirs ; les annotant. Faisant passer du mauvais ou bon côté de la moyenne nos copies d’étudiants plus ou moins émérites. Un rouge analytique, expert, brut, aux contours parfaits de celui qui n’hésite pas, ou que trop peu.

https://themads.agency/

3 – Les packagings atypiques de la marque de thé anglaise Ukiyo (Identité & Packaging)

Vent de fraîcheur dans l’industrie du thé vert avec ce packaging peu conventionnel aux couleurs acidulées et à l’identité graphique soignée. Indéniablement un packaging qui ne passera pas inaperçu en magasin et provoquera un coup de coeur avant même d’y avoir goûté. Une identité graphique réalisée par l’agence londonienne I Want Design.

http://www.iwantdesign.com/

C’est beau, c’est mignon…. ça fait principe de collection.
Attention tout de même à ne pas trop rappeler l’univers du savon… Risque de cafouillage dans les rayons.

http://www.ukiyo.co.uk/

4 – Les animations décalées de Toggl (3D & Motion)

On finit avec un outil de time tracker familier des agences de communication : Toggl. Récemment, la société a rafraîchi son image par une mise à jour de son site internet, laissant de côté les vidéos décalées des enfants transposés dans l’univers du travail/bureau au profit d’animations 3D cartoonesques et acidulées, présentant de manière ludique un process de travail efficace.

L’outil fait évoluer son mode de communication en conservant un ADN assez naïf. On quitte la photographie de l’enfant pour le retrouver dans les teintes et modes de représentation des illustrations. A croire que “timer” ses activités au boulot, c’est (réservé) un jeu d’enfants !

https://toggl.com/

Marques, comment communiquer via les STORIES sur Instagram ?

Communication tendances

“swipe up”, “boomerang”, “rewind”… 24h pour sortir du lot. Instapreneurs, Storytellez vous !

Ah ce terme de “swipe up” ! Bien marketing, mais surtout ultra utile ! “Swipe up” ou “balayez vers le haut”. Instagram “dépoussière” le Storytelling dans les Stories, principal levier de click to shop (ou “discover”) à capitaliser.

Tout d’abord, sachez que 300 millions de personnes utilisent chaque jour le format Story et qu’un tiers des Stories les plus vues ont été créées par des marques. Cela donne à réfléchir, et surtout à investiguer !

La Story permet de communiquer autrement, avec spontanéité et naturel, de part le caractère instantané de son format comme par sa durée limitée à 24h.

Julie Pellet, responsable du département Europe du Sud Instagram, nous livre quelques conseils, et on les suit :

Miser sur l’authenticité. Le format est court. Les photos s’affichent 5 secondes et les vidéos 15. “il faut oser ! Le contenu organique ne sera disponible que 24h, alors il faut lâcher prise, libérer sa créativité, être impactant pour convaincre.” Livrer une Story, c’est permettre à son audience de pénétrer dans son univers. Si l’on ne donne pas, si l’on n’est pas vrai et spontané, généreux, cela n’accroche pas.
“Un seul mot d’ordre : soyez authentique. Sur Stories, le contenu disparaît après 24 heures, l’occasion de montrer quelque chose de différent, de créer l’exclusivité et d’engager. Backstages, tutoriels, interviews, promotions, contenu interactif… Les variations sont infinies.”

La vidéo PORTRAIT est à privilégier. “Le temps passé par les utilisateurs à regarder des vidéos sur Instagram a augmenté de 80% par rapport à l’an passé et les Stories y ont très largement contribué. Ce contenu est consommé sur un écran mobile, 98% des utilisateurs découvrent le contenu en gardant leur smartphone en mode portrait. Développer de la vidéo verticale pour Stories permet d’investir l’intégralité de la surface d’un écran mobile et ainsi de créer une expérience immersive, pour capter efficacement l’attention”.

Le petit plus pour les marques : penser à la publicité dans les Stories. Elle permet d’ajouter un lien sortant ou d’utiliser le format Canvas pour inviter le spectateur à prolonger l’expérience et à lui faire découvrir un produit. “Si votre objectif est de renvoyer du trafic vers votre site internet, pensez à encourager votre audience à «swipe up», c’est-à-dire à faire glisser leur pouce vers le haut de l’écran pour découvrir votre site.”

Quelques campagnes success Stories de l’année 2017

Airbnb et son hashtag #LiveThere lors de la campagne “Live like a local”. La marque souhaitant donner plus de visibilité à son concept Airbnb Experiences, a imaginé plusieurs Stories dévoilant tantôt les coulisses d’un restaurant japonais connu seulement des locaux, les paysages d’une communauté voyageant à San Francisco, etc. La marque a alors parlé d’une « augmentation à deux chiffres de son ancrage mémoriel » pour la campagne lancée.

Parfois, la beauté du produit et l’univers d’un spot TV sur la plateforme parlent d’eux-même. Asos et Maybelline New York l’ont bien compris, créant des mini spots accrochants et extrêmement immersifs.

Asos, aux stories acidulées, rythmées de musiques accrocheuses, de visuels et sons simples ainsi que de beaucoup de mouvements pour renforcer la perception d’une marque expressive.

Nous cherchons une conversation plus émotionnelle avec notre audience
Leila Thabet, directrice du contenu et de l’engagement chez Asos.

Le “Colossal Big Shot” de Maybelline New York. Une succession de stories de 15 secondes mettant en lumière le packaging brillant du mascara, des vues rapprochées du produit, ainsi que des zooms sur la manière de l’appliquer.

Notre audience cible est activement engagée avec le contenu Instagram au quotidien, ce nous permet d’enrichir la manière dont nous partageons notre histoire de marque dans une logique plus intégrée et pertinente grâce à du mouvement, de la musique, et avec deux influenceuses beauté Manny Mua et Makeup Shayla
Anne Marie Nelson-Bogle, senior vice presidente de Maybelline New York

Dernières nouveautés : la création de boomerang* dans les Stories, la possibilité de mentionner d’autres comptes, l’apposition de stickers, ou la création d’un hashtag réunissant le contenu permanent*.

Le défi des marques va être de trouver le bon rythme entre des contenus permanent et éphémère. Le challenge est de créer du contenu qui ne vivra que 24 heures.
Julie Pellet

La to-do list

Changer votre compte instagram en un compte entreprise si ce n’est pas déjà le cas.
Soyez audacieux, authentiques et généreux.
Trouvez le bon rythme en alternant contenus permanents et éphémères.
Montrez les coulisses de vos événements, de votre société. Dévoilez les tutoriaux, les étapes des process de fabrication, diffusez des interviews des équipes ou égéries.
Intégrez des publicités dans vos stories, ainsi que des liens sortants.
Encourager votre audience à “swipe up”, c’est-a-dire à faire glisser leur pouce vers le haut de l’écran pour découvrir votre site.
Créez des contenus verticaux, pour une expérience plus immersive car adaptée au mobile.
Consultez vos statistiques et adaptez vos posts en fonction. De nouvelles statistiques ont été ajoutées récemment par le réseau social, notamment au sein des Stories : ainsi, les marques peuvent connaître le nombre de personnes ayant sauvegardé le contenu qu’elles publient. « Il s’agit d’un vrai signal sur les produits qui marchent le mieux », note Julie Pellet.
Communiquez aux bonnes plages horaires selon les cibles que vous visez. Ne perdez pas de vue que la cible est majoritairement millenials.
Privilégiez la qualité à la quantité des posts.
Conservez l’ADN de votre marque et trouvez votre champs lexical instagram propre.

Et pourquoi ne pas tester les nouvelles lunettes connectées ACE pour faire des Stories encore plus immersives ?

INSTAGRAM, ou comment doper ses canaux e-commerce ?

Communication Digital tendances

“tap to view”, “shop via link in bio”, “swipe up”.
Instapreneurs, voici votre nouvel Eldorado !

Il est aujourd’hui établi qu’Instagram n’est plus “seulement” un réseau social de partages de photos à filtres avantageux, mais une réelle plateforme de communication. Pour ceux que l’on nomme les “instapreneurs”, c’est l’eldorado business par excellence !

Dans les chiffres, ce sont environs 800 millions de comptes dans le monde dont 500 millions actifs chaque jour.

Majoritairement tenus par des millenials (90% des utilisateurs ont moins de 35 ans), la convoitée audience Insta passe en moyenne 7,5 heures par jour en ligne. Pour elle, l’achat mobile est banalité.

Le développement des “Instagram Brands”, marques direct-to-consumer, est massif.
Passant de l’anonymat à la consécration via la plateforme, les marques – comme les bijoux Loü.Yetu par exemple – peuvent augmenter de 750% leur CA en un an, dopé par le canal de communication Insta et ce parfois bien avant d’avoir un site web (encore moins une boutique physique).

Avec Instagram, j’ai eu la chance de construire très vite une visibilité. Il y a un mois et demi, nous étions à 8 000 fans sur le réseau et nous avons atteint les 47 000 aujourd’hui. Nous avons été approchés, en septembre 2016, par la directrice des achats du Printemps Haussman, via Instagram, et ce, alors que nous n’avions même pas de site Web.
Camille Riou, Fondatrice de la marque de bijoux Louyetu.

Quelques exemples d’Insta Success Stories :

Glossier, marque de cosmétique dirigée par Emily Weiss, ancienne bloggeuse d’Into the Gloss, a vu ses ventes augmenter de 600% en 2016 en se basant sur sa communauté de followers et en utilisant à bon escient le réseau social. C’est un peu à partir d’elle que tout à débuté.
Cult Gaia, au sac “Ark” ayant généré plus de 12 000 posts a connu une envolée de son CA de 850% en 2017. La marque estime que 70% des ventes sur son e-shop proviennent d’’Instagram.
Ganni, marque à l’origine confidentielle de prêt-à-porter danoise, a construit sa notoriété sur le réseau avec son hashtag #GanniGirls. LVMH est aujourd’hui son principal actionnaire.
Ciao Lucia, Maison Cleo, Shantybiscuits, Saks Potts, Coucou Suzette, Aycactus, …
La liste de ces insta brands (majoritairement mode, beauté, déco & lifestyle) ne cesse de s’allonger tant la plateforme est porteuse de clicks to shop en instantané.

Pourquoi tant d’engouement pour des marques d’origine si confidentielles si ce n’est le fait, en tant qu’instagrammeur, de dénicher la perle rare, l’objet “valeur clé” ?

La génération Z aime l’unicité, la transparence, l’authenticité. Une petite marque, indépendante et pourquoi pas familiale, découverte sur Insta et appréciée d’un influenceur trendy et connecté, sera comme un gage d’appartenance à la communauté UP des “initiés” de la marque, donc de sa communauté.

Les marques ne s’y trompent pas. Pour se faire remarquer et être suivies, elles ont dû inventer un nouveau système de communication, en évolution conjointe avec les nouvelles fonctionnalités de la plateforme. On pense notamment aux fameuses Stories.

Pandora Sykes nommait récemment cette mécanique dans le Business of Fashion Magazine la “BFF Marketing” :

[…] une approche friendly du consommateur qui lui donne l’impression que la marque est sa meilleure amie, qu’elle crée des produits faits sur mesure pour lui, et lui donne le sentiment d’appartenir à une communauté.
Pandora Sykes

L’instagramer est un dénicheur de talents. Les marques en sont les meilleures amies, et fédèrent des communautés d’”initiés”. Quant à Instagram, de Social media, il est devenu plateforme m-commerce.

Les grands noms de la mode et du luxe tiennent la tête du classement, avec Zara, H&M, Chanel ou Dior. Cependant, certaines marques nées à l’heure des réseaux sociaux ont su profiter pleinement des fonctionnalités d’Instagram pour se glisser en haut du classement, comme les montres Daniel Wellington, Fitvia ou Natural Mojo.

Parmi les grandes innovations m-commerce au service des marques se trouvent :

La possibilité de sauvegarder des images et les classer par thèmes dans des “Collections” privées. Fonctionnant comme une whishlist, la sauvegarde permet l’achat en différé.
Le “Tap to View”, permettant de créer des tags shoppables (lancé en 2016 lors de l’opération “Instagram Shopping” testée en partenariat avec une vingtaine de marques).
Enfin, le “Swipe Up”, permettant d’acheter un produit par l’intermédiaire d’un lien dans une Story, et ce sans quitter Instagram.

L’instagramer est un shopper, et bon nombre de solutions se mettent en place pour améliorer cette mouvance.

Headoo propose par exemple des solutions simples pour transformer le compte instagram des marques en nouveaux points de vente. Avec son simulateur de chiffre d’affaire sur Instagram, le service propose d’orchestrer l’expérience de social selling des abonnés des marques, augmenter jusqu’à 600% le nombre de clics VS un lien vers un site internet (à l’aide notamment des liens iShop Gallery), gérer cette même “gallery” et mesurer le taux de “shoppabilité” des images.

L’équation semble simple et prometteuse et il est vrai que certains comptes professionnels sont devenus maître dans l’art de l’insta-shoppable comme celui de Leandra Medine, fondatrice du blog ManRepeller, avec son Instagram mrinmycart 100% shoppable, dont les followers peuvent acheter directement tous les produits mis en image sur le compte.

Comment cela se traduit-il ?

Instagram a publié il y quelques jours une Story mettant en avant le service Instashop.

Les comptes invitent via les images postées à cliquer sur le lien de la bio de la marque, en haut de page. On retourne ainsi à la page Insta pour accéder au lien dans la bio.
On accède alors à une autre page, sorte de passerelle entre Instagram et le site e-commerce de la marque.
Les images du compte sont présentées sur cet espace, de la même manière ou agencées différemment avec parfois des contenus supplémentaires et aux formats variés (gif, vidéos, etc.).

Au clic, ils sont légendés sous forme d’images comme sur un e-commerce si l’image comporte plusieurs produits à shopper.
Ces images re-dirigent les instagramers sur les produits en questions mais au sein de l’e-commerce de la marque. On note que certaines marques travaillent particulièrement (comme « mrinmycart » cité plus haut) leur “tunnel d’achat” dans le sens où l’on semblerait ne pas quitter le réseau social. Tout semble facilité. Les liens sont exacts et tombent directement sur les bons produits. Le parcours est d’une fluidité telle qu’il est difficile de résister à shopper.

Quant à Instagram, il continue sur sa lancée en donnant accès à de la data mesurant le succès des campagnes des marques, le trafic généré par la plateforme ou encore le nombre de clics sur des liens shoppables. Ces mêmes données que Headoo – mentionné plus tôt – propose de savamment analyser.

Alors, prêt à doper vos ventes via Insta ?

Consultez notre article sur les Stories pour en savoir davantage sur les opportunités à ne pas rater.

Les tendances design à suivre en 2018

Design tendances

L’année commence à peine et les sites récompensés sont déjà florissants. Quels sont les nouveaux critères qui définissent un bon site internet ? Que nous réserve 2018 en matière de nouveautés ? Les tendances 2017 sont-elles déjà révolues ou sont-elles en mutation ?

Découvrez les grandes tendances qui définiront le design en 2018…

1. Les grilles asymétriques

2017 a marqué un changement majeur dans la structure des grilles CSS avec la popularité des designs en split screen.

En 2018 cette tendance à la déstructuration se poursuit en libérant les contenus de toute contrainte de gouttières, le côté aérien permettant de gagner en contemporanéité et esthétique.

Noyées dans un univers concurrentiel fort, les marques doivent aujourd’hui privilégier l’expérience utilisateur pour atteindre leur cible et augmenter leur taux de conversion. On leur conseillera un design unique et différenciant, plus engageant et en harmonie avec leur image, donnant plus de visibilité à leurs contenus éditoriaux et photographiques.

La grille perdure donc en 2018 mais s’efface au profit d’une balance harmonieuse entre les éléments visuels et les espaces vides afin d’aérer la présentation des contenus.

*https://dribbble.com/shots/4078804-Architecture-Firm-Minimal-Concept*

2. Les ombres portées

En réaction à l’essor du flat design apparu en 2013, la tendance au “semi-flat” a renversé les codes en 2017 et est toujours de rigueur cette année, répondant à une vraie demande d’authenticité.

La considération pour l’ombre portée n’est donc pas prête de s’amoindrir, on en use et abuse encore mais elle s’utilise de manière plus douce et diffuse dans les designs à venir afin de leur donner plus de nuance.

On note aujourd’hui une recrudescence de variations originales autour de cette tendance graphique :

L’ombre portée s’anime. Grâce aux possibilités infinies qu’offre l’animation CSS, elle se déforme ou s’agrandit à la navigation, permettant d’apporter fluidité et profondeur au design.
L’ombre portée se colore. Terminé les tonalités de gris, l’ombre est diffuse dans des tons pastel ou plus vifs pour donner une atmosphère chaleureuse et gaie, dissimulée derrière des formes plus incurvées.
L’ombre portée se pare de détails. Elle aiguille le regard de l‘internaute pour rendre sa navigation efficace et intuitive.

*https://dribbble.com/shots/4101695-Promotion-Walkthrough*

*https://dribbble.com/shots/3375891-Oscar-Artificial-Intelligence*

*https://dribbble.com/shots/4100353-Renewed-version*

3. La typographie

Elément essentiel et gage d’un design efficace, la typographie prend un véritable tournant cette année avec l’apparition de la police de caractère responsive et personnalisable. Preuve d’une constante évolution, elle devient intelligente et respecte les principes du Responsive Design en faisant évoluer sa largeur, son épaisseur ou sa courbure en fonction du type d’utilisation. Cette nouvelle souplesse d’utilisation favorise une expérience utilisateur optimale.

Choisie comme élément central sur un design épuré, la customisation typographique remplace aisément un visuel pour donner de la personnalité à votre marque.

On privilégiera une police de caractère en gras et sans empattement pour plus d’impact, mais les jeux entre typographies serif et sans serif sont toujours d’actualité, permettant de donner du rythme à la lecture.

*https://dribbble.com/shots/3552084-Web-UI-discovery-process-by-gleb*

4. Les couleurs vibrantes

L’ère du pastel est définitivement révolue !

2018 éclipse cette tendance et met en lumière les couleurs flashies, comme en atteste la nouvelle teinte de l’année élue par Pantone, le fameux “UltraViolet”.

Dérivées des teintes écrans, ces couleurs vives et originales se retrouvent partout, particulièrement sur des projets éditoriaux, permettant de faire le lien entre culture print et digitale.

Les marques se veulent plus audacieuses, exprimant le désir d’attirer l’attention, transmettre de l’émotion ou se démarquer par des couleurs vives et originales.

Plusieurs choix possibles s’offrent alors aux designers :

Travailler des aplats de couleurs ultra-saturés, comme Spotify l’avait amorcé en 2015 avec sa nouvelle identité
Opter pour de grands dégradés dynamiques appliqués sur des formes organiques, dans la tendance du “blob”
Incruster des dégradés éclatants en opacité sur des photos en noir & blanc pour les rendre plus inspirantes.

5. Les illustration immersives

Dans un désir de retour aux techniques traditionnelles, les illustrations sont toujours en vogue cette année pour enrichir la personnalité d’une marque et marquer sa différence face à la concurrence.

On oublie donc les banques d’images surfaites et on laisse la part belle aux illustrations personnalisées et aux infographies. On notera un engouement pour l’imperfection avec le retour du bruit sur les illustrations pour rappeler la texture granuleuse du papier.

En parallèle, le SVG est en train de devenir le leitmotiv des designers, format flexible et idéal pour conserver la qualité de ses éléments graphiques (logos, icônes, graphiques vectoriels etc.). Pour les adeptes du pixel perfect, le SVG offre une multitude de possibilités et s’anime facilement avec le talent des développeurs.

*https://dribbble.com/shots/3630446-Illustration-for-the-essensys-tech-part-1*

6. L’animation / L’interaction

Dans cette volonté de donner toujours plus de vie à ses créations, 2018 prolonge la tendance à l’animation sous toutes ses formes.

Les sites se parent de micro-interactions destinées à renforcer l’engagement des utilisateurs.

Fini les sites statiques qui renvoient une image dépassée et vieillissante, les boutons s’animent, les menus hamburger évoluent, même le parallaxe, que l’on pourrait croire dépassé, s’adapte pour ne pas être ennuyeux. On trouve aujourd’hui de nouvelles façons de l’appliquer en l’associant à une navigation en one-page.

Le plaisir du scroll perdure avec l’utilisation quotidienne des mobiles et la navigation intuitive des réseaux sociaux.

L’animation ne doit pas être un gadget ludique, mais donner du sens aux contenus, et l’on préfèrera donc – côté CSS – des animations se déclenchant au scroll ou des effets de transition entre les pages. Toute une flopée d’éléments visuels se présentent également aux designers pour voir leurs créations prendre vie et décrire de manière plus immédiate l’ADN d’une marque : les images en 3D, les gifs, le support vidéo, les logos ou icônes animés etc.

*https://dribbble.com/shots/4069756-Snow-Hunt-Interaction-Concept*

7. Le mobile first

La navigation sur mobile est devenue une habitude pour les utilisateurs. Depuis 2017, elle a même dépassé la navigation sur ordinateur. Si bien que 2 paramètres majeurs sont plus que jamais à prendre en compte dans les conceptions digitales :

Le lancement par Google d’un nouvel index Mobile First, mettant en avant des pages web sur les résultats de recherche si ces dernières répondent à un design adapté aux mobiles.
La popularisation de l’AMP (pages mobiles accélérées), nouvelle norme de codage plus légère permettant d’accélérer le chargement des pages sur mobile et augmenter considérablement son taux de visibilité et de clics

La conception des sites futurs devront impérativement prendre en compte ces nouvelles normes afin de se tourner davantage vers l’utilisateur.

*https://dribbble.com/shots/4101566-Snug-Mobile-App-Real-Project*

*https://dribbble.com/shots/4044613-Home-Finder-App-Exploration*

8. La photographie

Dans de nombreux domaines, notamment le e-commerce, le choix d’un contenu photographique peut rester plus pertinent que l’illustration.

La photographie apporte immédiatement une dimension humaine engageante et authentique. Si on la veut soignée, la meilleure option pour le directeur artistique reste de travailler en collaboration avec un photographe qui définira une ligne directrice pour représenter au mieux le sujet donné.

On peut en outre donner encore plus d’interaction et de vie dans une photographie en l’associant avec les techniques d’animation évoquées précédemment : les gifs façon cinemagraph, la vidéo ou les shootings photo en 360°.

*https://dribbble.com/shots/4062487-Adicolor-SS2018-Lookbook-Carousel*

En 2018, l’internaute est roi. On privilégie l’accessibilité et l’expérience utilisateur plutôt que l’apparence, on priorise la consultation mobile.

L’enjeu sera donc de faire face à tous ces défis techniques pour optimiser la navigation sans bouleverser les habitudes des utilisateurs.

Malgré ces contraintes, l’engouement pour l’esthétisme perdure, le designer se risque aux expérimentations pour fournir des sites toujours plus originaux, conviviaux et innovants.

2018 s’annonce inspirante, à vous de vous lancer !

Les ChatBots, nouvel espace de travail de l’UX

Expérience utilisateur

Depuis plusieurs années, nous assistons à un retour en force des activités manuelles et Propulsée en avril 2016 par le lancement des bots Facebook Messenger, la communication ChatBot est LA nouvelle manière d’envisager sa relation client numérique – H&M, SNCF, BlablaCar, Sephora… beaucoup se sont lancés dans l’aventure cette année.

Mais que se cache-t-il derrière les chatbots ? Quels en sont les usages ?

En 2018, l’internaute est roi. On privilégie l’accessibilité et l’expérience utilisateur plutôt que l’apparence, on priorise la consultation mobile.

L’enjeu sera donc de faire face à tous ces défis techniques pour optimiser la navigation sans bouleverser les habitudes des utilisateurs.

Malgré ces contraintes, l’engouement pour l’esthétisme perdure, le designer se risque aux expérimentations pour fournir des sites toujours plus originaux, conviviaux et innovants.

2018 s’annonce inspirante, à vous de vous lancer !

Expérience conversationnelle et non intelligence artificielle.

Derrière ce grand mot qu’est l’intelligence artificielle, se cache également beaucoup d’idées reçues.

Un Chatbot, ce sont certes des algorithmes reliés à une intelligence artificielle, faisant preuve d’apprentissage et d’auto-évolution, mais nous sommes bien loin de l’outil capable de fournir une réponse logique par lui-même.

Un chatbot reste incapable de construire une réponse logique et cohérente par lui-même [….] Retenez donc que les scénarios de construction de réponse et d’actions dans un chatbot sont, dans tous les cas, codés dans le programme principal (ou programme métier) du chatbot.
Dorian Marchand / DG, Kernel 42.

Il convient plutôt de parler d’un service interactif fournissant une expérience conversationnelle, d’un assistant virtuel ou encore de messageries nouvelle génération.

Le principal atout des Chatbots est – sur la base de modèles UX simples – de pouvoir comprendre l’utilisateur et lui proposer soit une réponse instantanée, soit d’entreprendre pour lui une action appropriée (recherche, crosselling, accès à une page…).

Simplicité des usages

L’avantage principal du ChatBot est qu’il s’appuie sur une interface familière à tous les utilisateurs de services de messagerie. Les innovations ne portent donc pas sur la forme mais interviennent dans le développement et la conception.

Il répond par ailleurs aux exigences des internautes : instantanéité, rapidité, disponibilité 24/24… Que ce soit pour rechercher une information, déclarer un sinistre, être conseillé dans son shopping, réserver un billet de train ou d’avion… les usages sont multiples.

*H&M – Votre styliste personnelle dans votre poche.*

Ce qu’il faut en retenir :

la simplicité de l’interface
la scénarisation des interactions
l’accompagnement et l’accès rapide à l’information

Avec plus de 50% des internautes qui utilisent une messagerie instantanée au quotidien, le ChatBot apporte un changement radical dans la façon dont les marques communiquent. Il se doit d’être pensé pour répondre aux problématiques de l’entreprise : assister un service client, fluidifier un parcours d’achat, simplifier la recherche… Mais il se doit également de véhiculer et d’être en cohérence avec votre image de marque.

55,5% des internautes utilisent l’instant messaging au quotidien – 1er choix de contact pour les Millenials.

De l’importance de la scénarisation et du rédactionnel

Non le métier d’UX Designer n’est pas mort, et s’avère même absolument indispensable dans la conception et scénarisation des parcours utilisateurs – sans doute même plus que sur un outil “classique” – car là où habituellement nous identifions des personas élargis par grandes catégories d’internautes, il convient dans le cadre d’un ChatBot de définir un arbre décisionnel beaucoup plus précis, avec cas d’usages pour chacune des réponses possibles et envisagées.

L’ensemble des scénarios envisagés est définis en amont. A la manière d’un livre dont vous êtes le héros, chacun des parcours devra être imaginé, conçu et rédigé de manière simple et précise afin d’apporter rapidement la réponse adéquate à l’internaute (messages de 300 signes, 4 messages successifs maximums…).

Le chatbot permet également d’intégrer des interactions – formulaires, questions à choix multiples… – à privilégier pour faciliter le dialogue et les interactions.

Outre la définition des cas d’usages et parcours utilisateurs, le ton employé et le rédactionnel ont une grande importance : ils sont le vecteur de votre image de marque dans cette relation client numérique. Allez-vous tutoyer ou vouvoyer vos clients ? Adopter un ton formel, informel, humoristique, empathique… ? Un agent humain va-t-il prendre le relai sur le ChatBot une fois les demandes de l’internautes qualifiées ?

Autant de choix stratégiques qui définissent votre ChatBot et sont partie prenante de sa conception.

Et vous, êtes-vous prêts à avoir une conversation personnelle avec une machine ?

1 2 3 4