La veille graphique de Marion !

Tendances webdesign 2017

On ne cesse de le dire, le web est un environnement continuellement changeant, de tous les points de vue (référencement, développement, webdesign…). Tous les ans de nouvelles modes ou techniques apparaissent, certaines juste en rapide coup de vent, d’autres perdurent un peu plus. Nous allons nous intéresser dans cet article aux tendances webdesign qui feront l’année 2017. Voici mes quelques conseils graphiques. En avant !

 

tendances webdesign 2017 degrades

1 – Des couleurs vives et des dégradés

En 2017, vous verrez apparaitre de plus en plus sur les sites web de belles couleurs riches et brillantes, bien pep’s ! La mode est aussi aux dégradés de couleurs vives, qui viennent souvent se placer en background de quelques sections du site, ou par dessus une image de fond, pour lui donner un peu de chaleur, de dynamisme et d’énergie. Tout cela vous permettra de vous démarquer des autres sites.
Un exemple de marque hyper connue qui est passée par là cette année : Instagram, avec son beau logo multicolore ;)

 

tendances webdesign 2017 ombres

2 – Material design et les ombres

Nous sommes passés dernièrement du flat design (aplats, pas de profondeur, minimalisme), au material design, qui apporte un brin de perspective, avec des formes géométriques, des ombres et du mouvement. En 2017, on reste dans cette optique d’utilisation de profondeur et de perspective, en travaillant avec de belles ombres visibles, plus marquées et plus foncées, qui permettront d’aérer et d’ajouter des zones de respiration dans vos designs.

 

tendances webdesign 2017 grande typo

3 – Des typos grandes et bold

Chaque année on voit de nouvelles tendances typographiques émerger sur le web. Tout le monde est bien conscient de l’importance de la typographie dans l’UX design. Il ne s’agit pas simplement d’assembler de jolies polices ensemble, la typographie est une partie essentielle de chaque design, elle permet de faire véhiculer une ambiance ou un message, et le choix de votre typo peut vraisemblablement faire basculer votre projet. Pour cette tendance webdesign 2017, misez sur des typos bien voyantes et originales, utilisez des font-size XXL, et du bold.

 

tendances webdesign 2017 menu hamburger

4 – Adieu les menus hamburgers !

Le menu hamburger a son avantage sur les écrans des smartphones, mais sinon, il n’est vraiment conseillé sur les sites et applications web, malgré son utilisation intempestive ces derniers temps… On préfèrera donc les menus classiques sous formes d’onglets horizontaux, quitte à repenser et optimiser son arborescence pour rester dans la limite des 7 ou 8 onglets maxi conseillés en terme d’UX.

 

tendances webdesign 2017 micro interaction

tendances webdesign 2017 micro-interaction

5 – Micro-interactions

Retenez bien ce mot, car ce sera lui le roi de cette année 2017 ! Qu’est ce que les micro-interactions ? Ce sont les animations interactives qui accompagnent une interface pour la rendre plus attrayante. Mais attention, elles servent surtout à l’UX : communiquer une situation, visualiser un état ou un résultat, mettre en valeur un changement ou une action de l’utilisateur… Elles permettent aux utilisateurs de comprendre et reconnaître ce qui se passe, s’est passé ou va se passer au moment où il interagissent avec l’interface.
Tout est dans le détail, car c’est le détail qui fera votre design.

 

tendances webdesign 2017 animation

6 – Animation

Ce point rejoint le précédent : insufflez de la vie à votre design, en utilisant (avec beaucoup de parcimonie) des GIFS animés, ou un effet parallaxe (défilement de l’arrière plan moins rapide que le contenu, ce qui crée un effet de profondeur, style 3D, et anime votre page. Grâce à ces techniques, attirez l’attention sur les éléments importants de votre site.

 

tendances webdesign 2017 scroll onepage

7 – Long scrolling / Mono-page

Le scroll n’est pas nouveau, c’est une fonctionnalité web majeure déjà à la mode depuis quelques années, et ça le restera. Le site “one-page” permet d’éviter les navigations complexes et permet une expérience utilisateur plus simple, fluide et facile à utiliser. Aujourd’hui le scroll est devenu un réflexe pour tout le monde.
Ce mécanisme de navigation a de grands atouts : faire passer très rapidement un maximum d’information à votre utilisateur, sur n’importe quel type d’appareil (ordinateur, tablette, smartphone), de façon narrative et immersive, et surtout je le répète, fluide.

 

tendances webdesign 2017 grille

8 – Cassez la grille

Tout design est conçu sur une grille (habituellement on travaille en “12 colonnes”, qu’on regroupera par exemple par 4 pour diviser la page en tiers, ou par 6 pour deux demie-pages, etc…). Cette fameuse grille est une base pour la conception du webdesign du site, et permet de garder de la cohérence, de l’équilibre et de l’ordre dans la construction.
Même si cette grille est donc importante pour l’UX, elle est aussi restrictive et rigide, et limite les options créatives. En s’éloignant de la grille et des structures de base rigides, on peut créer des interfaces plus originales, intrigantes et expérimentales. Faites toutefois attention à garder en tête l’UX et à ne pas mettre de confusion dans votre interface. Aussi, pensez responsive ! ;)

 

tendances webdesign 2017 design adaptative

9 – Design adaptative

Et oui, on ne parle presque plus de responsive design, mais plutôt d'”adaptative“. Avec l’efflorescence des appareils et donc des tailles d’écrans, il ne s’agit plus ici de faire une version mobile, une version tablette et une version desktop. Votre design doit s’adapter (quasiment) au pixel près, pour être optimisé sur n’importe quel device… Oui, il y a du travail derrière tout cela !

 

tendances webdesign 2017

En résumé, ces tendances webdesign 2017 nous amènent à la même conclusion : nos interfaces doivent se complexifier dans leur conception, avec l’ajout d’animations et la prise en compte du design adaptative, pour se simplifier dans leur utilisation, et surtout innover et donner encore plus envie à votre utilisateur (on s’oriente UX design avant tout).

Présentation de mon partenaire développeur, Weclain

Je travaille depuis des années avec un développeur web, qui m’épaule sur des projets plus complexes, ou qui nécessitent du développement sur-mesure. Alexandre Clain m’accompagne au fil des aventures, il est donc temps de vous le présenter !

 

Peux-tu te présenter brièvement stp.

Alexandre Clain, un Geek drôle, poétique vachement sympathique.

Webmaster Freelance – sur Bordeaux & Paris – depuis quelques temps déjà.

weclain developpeur web bordeaux

 

Quel a été ton parcours ?

Diplômé en Horlogerie il y a quelques années, j’ai travaillé dans une usine de finition d’outils chirurgicaux, à défaut de partir en Suisse. Insatisfait de me voir travailler dans ce domaine toute ma vie, j’ai opté pour une reconversion professionnelle il y a 7 ans.

C’est en jouant régulièrement – bon d’accord : tous les jours – à un jeu en PHP que j’ai voulu en savoir plus sur le fonctionnement d’un site internet et pourquoi pas construire mon propre site.

En 2010, j’ai commencé ma formation au CESI, en contrat de professionnalisation avec une entreprise située dans la vallée de Chevreuse : Bruneau du groupe Les 3 Suisses.

En tant que “Développeur / Designer“, j’étais principalement en charge de la maintenance et des évolutions du site Kalligo, mais également d’autres sites appartenant au groupe.

En 2012, l’histoire continue avec un nouveau contrat de professionnalisation pour devenir “Responsable en Ingénierie des Logiciels” avec une agence web sur Bordeaux. Durant ces deux dernières années de formation, j’ai pu me former davantage sur la gestion de projet, la programmation avancée et prendre aussi confiance en moi.

C’est fin 2014 que j’ai décidé de monter WeClain pour proposer mes services dans la création de sites web et d’accompagnement. En parallèle, je donne des formations sur la communication numérique. J’aime écrire, partager et créer. Je suis clairement un geek – social – passionné par les nouvelles technologies.

 

Pourquoi as-tu choisi de travailler en freelance ?

C’est mon État d’esprit, j’aime entreprendre et relever les défis. J’aime aussi être en contact direct avec le client : analyser ses besoins, le conseiller et mettre en place sa stratégie de communication sur le web. Freelance , c’est aussi se faire plaisir avec des projets auxquels on croit.

 

Décris-nous ton métier, tes tâches principales.

Webmaster n’est qu’une fine partie de mon métier, mes principales compétences sont la gestion de projet et la programmation (des milliers de lignes de codes).

Mes tâches les plus récurrentes sont :

  • L’accompagnement
  • Le conseil
  • Le webdesign (mais de façon limitée !)
  • La programmation web
  • Le développement de site web

 

Comment se déroule une journée de travail type ?

8h30 : Je me lève et me prépare.

9h30 : Je consulte mes mails et organise ma journée en fonction de ma liste des tâches.

10h00 : Je me mets réellement au travail, c’est à ce moment-là où je ferme ma messagerie pour faire un premier sprint et rester concentrer jusqu’à la pause déjeuner.

11h30 : je craque dans mon sprint, regarde mes mails et mange un twix.

12/13h : pause déjeuner.

14h/15h : Je consulte rapidement mes mails avant de reprendre le travail.

18h00 : j’arrête de travailler pour consulter mes nouveaux mails.

18h30 : je coupe l’ordinateur pour profiter de ma soirée.

 

Tes outils de prédilection ? Quelles sont tes compétences ? Tes projets fétiches ?

Je n’ai qu’un seul outil de prédilection : Iceweasel (mon navigateur) ! C’est avec lui que je peux parcourir le www et trouver toutes les réponses à mes questions, c’est aussi grâce à lui que j’ai appris à programmer. Mes compétences s’articulent principalement autour de la gestion de projet et la programmation web, je fais également un peu de webdesign et du référencement naturel. Vous pouvez d’ailleurs voir un ensemble de toutes ces compétences sur librosophia.com.

 

Le web, un secteur en constante évolution ! Comment t’y prends-tu pour rester à la page ?

Ma solution miracle c’est que je ne travaille pour personne le lundi !

Le lundi est bloqué pour faire de la veille technologique et avancer sur mes projets personnels. Ainsi, je reste constamment à la page et je prends le temps de faire des « tests » sur différentes stratégies de communication numérique que je pourrai ensuite proposer à mes clients.

 

Pourquoi travailles-tu avec Marion ?

Car c’est un coup de foudre professionnel, on se complète réellement et je lui fais 100 % confiance. Ancienne collègue de travail, nous avons pu trouver un équilibre entre nos différentes compétences et affiner notre méthode de travail pour être un maximum efficaces.

 

Comment organisez-vous votre travail en équipe ? En quoi êtes-vous complémentaires ?

Tellement complémentaire que tu as prédis ma réponse à la question précédente. Nous avons certaine compétences en commun (référencement naturel, intégration, stratégie de communication) et chacun un domaine ou l’on excelle (design pour Marion et programmation pour moi). L’équation gagnante à mon sens.

 

Comment définirais-tu ton travail, ta relation au client, ton implication dans tes projets ?

Je n’accepte que les projets auxquels je crois et où je vais prendre du plaisir. Mes clients sont des collaborateurs avant tout, car je pars du principe que je fais partie de leurs équipes (avant d’être le simple prestataire). Cet état d’esprit m’encourage à être attentif à leurs besoins et de faire leurs projets comme si c’était le mien.

 

Un message à faire passer ?

Nous n’avons jamais le temps de bien faire les choses, par contre nous prenons le temps de les réparer. Mon objectif – avec Weclain – est d’inverser la courbe, car je pense que l’important n’est pas d’avancer sans s’assurer d’être dans le bon sens.

Amicalement,

Référencement de votre site, ce que je vous propose

On me pose souvent la question (pendant la phase pré-projet d’analyse des besoins du client), sur les actions que je mets en place pour optimiser le référencement des sites que je livre.

Voici donc des éléments de réponse.

Les bonnes pratiques que j’applique sur votre site

– Premièrement, et puisque c’est mon coeur de métier et ma valeur ajoutée, je m’applique à réaliser un site ergonomique, orienté vers l’utilisateur (UX design), avec une navigation optimisée, et un design clair et beau. C’est très important, puisque cela permet d’une part de capter vos internautes, et d’autre part cela permet de les aider à avancer dans votre site, à y naviguer, et bien évidemment à y rester (on diminue le taux de rebond, on optimise les conversions).

– Ensuite, je mets en place tout ce que l’on appelle SEO “on-page” : je choisis un template adapté et optimisé, que je personnalise et améliore. C’est à dire que la structure du code doit être bien pensée, propre, pour aider Google à analyser vos pages, et à les référencer.

J’optimise avec des mots clés pertinents (ceux sur lesquels vous souhaitez être positionnée) les titres de pages (balise title principale, celle qui apparait dans l’onglet de page du navigateur) et les titres et sous titres contenus dans les pages (balise H1, H2, H3, etc).

Wordpress seo by yoast

Via un module que j’installe systématiquement (je travaille généralement avec Yoast SEO, le plus utilisé par la communauté WordPress), j’optimise aussi les balises meta description (ce sont celles qui apparaissent dans les résultats de Google) :

Images intégrées 1

Ces balises n’impactent pas forcément directement votre référencement, donc inutile d’y placer une pléthore de mots clés. Non, le but dans cette courte description est d’attirer votre internaute, lui donner envie de cliquer sur votre lien, plutôt que celui du dessus ou du dessous !
Lorsque je vous livre votre site internet (si vous avez choisi de l’administrer vous-même), vous aurez accès à ce module, et pourrez optimiser vous même le titre de page et la méta description, qui apparaissent donc dans les snippets (résultats Google, comme expliqué plus haut).

– Il est aussi important d’optimiser le poids des images et la vitesse du site. Je retravaille donc les images pour les alléger, le code est structuré de telle sorte que tous les scripts soient chargés après le contenu important (le plus possible), et d’autres astuces de ce genre sont mises en place afin d’optimiser votre site au maximum.

google analytics

– Je crée un fichier sitemap.xml (fichier qui liste toutes les pages du site, dynamiquement), et je le soumets à Google (cela permet d’avoir toutes vos pages indexées), je crée un compte Google Analytics + Webmaster Tools pour contrôler les statistiques de votre site, ainsi que les éventuelles erreurs ou optimisations.

– Et enfin, j’optimise la partie “partage” de votre site, en intégrant les balises nécessaires pour Facebook (balises og :, qui permettent d’optimiser l’affichage des éléments partagés via Facebook), et en installant un module de partage sur les réseaux sociaux. Les réseaux sociaux sont sélectionnés en fonction de votre activité sur ces derniers, mais aussi en fonction de leur pertinence par rapport à votre secteur d’activité et à votre cible (grand public, business, etc).

(liste non exhaustive…)

 

D’autres optimisations à mettre en place

Pour résumer le tout, je me charge vraiment de la partie dite technique du référencement.

Pour tout ce qui concerne le choix de vos mots clés, la rédaction de vos textes, l’optimisation de vos contenus, etc… il faut dans le meilleur des cas faire appel à un rédacteur web, dont c’est le coeur de métier (ou le faire vous même de façon très sérieuse).

Gardez bien en tête que le pilier principal d’un bon référencement aujourd’hui, est le CONTENU. Des textes fournis et étoffés, optimisés, mais surtout écrit par vous pour vos internautes. Pas de secret…

Si ce n’est pas votre fort et que vous ne vous sentez pas l’âme d’un écrivain, je vous propose de contacter une de mes partenaires, rédactrice web et consultante en communication digitale :

Lucie Laval, contentactic.com.

rédactrice web et consultante en communication digitale

N’oubliez pas, il ne faut absolument pas passer à côté de la qualité de vos contenus si vous souhaitez être bien référencé.

 

reseaux sociaux

Pour être bien référencé, il faut aussi penser à être actif sur les réseaux sociaux (partager vos produits, parler de vous, de votre actualités, de vos clients, etc…).
C’est pour cela qu’il est aussi intéressant dans la plupart des cas, d’avoir une partie Actualités/Blog sur un site. Cela vous permet de proposer des contenus optimisés assez régulièrement, de mettre votre site à jour (Google apprécie cela), et également de les déléguer sur les réseaux sociaux, puis que les gens les relayent, parlent de vous, etc… Et c’est là le second pilier d’un bon référencement : la NOTORIÉTÉ.

 

N’hésitez pas à me contacter pour avoir plus de détails sur le travail de référencement que je mets en place dans mes créations web !

Les expressions en agence !

Petit article Humour : Histoire de se divertir un peu, mais aussi pour s’informer ! Voici quelques infographies assez sympas qui proposent de petites traductions pour certaines expressions qu’on peut entendre en agence de com’ (et ailleurs !) ^^

Que veut vraiment dire une “deadline” ? “Si tu la dépasses, t’es mort.” Une demande “ASAP” ? “Bouge-toi les fesses…” Et j’en passe !

Deadline From scratch Dans la boucle ASAP Dans ton scope Prends le lead FYI

Les astuces 2016 pour votre référencement

On le sait, le maître mot est “contenu” ! Il faut un contenu original et attractif pour attirer des utilisateurs, et pour permettre à son site internet d’être bien positionné dans les moteurs de recherche (#bonjourGoogle). Alors que toutes les entreprises investissent dans leur marketing numérique, et donc dans la création de contenu attractif, il se pourrait bien que d’autres sujets attirent encore plus les moteurs en 2016. Je parle entre autres de la convivialité des sites web : l’expérience utilisateur (UX design).

Voici donc un petit top 5 des tendances SEO à suivre cette année pour rester dans les clous !

 

pensez mobile pour référencement seo

1 – Pensez mobile !

Eh oui, on ne passera plus à côté, le référencement mobile devient une des priorités. Le web “desktop” et le web mobile ne feront plus qu’un d’ici quelques temps, votre site se doit d’être pensé pour la consultation sur mobile (responsive design). Un site qui ne s’adapte pas à la résolution des appareils mobiles ? Une police trop petite ? Une image trop lourde à charger ? Pour Google, ce n’est pas sérieux, et ce site est “out” illico-presto !

Le critère de « mobile friendly » deviendra une condition sinequanone pour qu’un site soit simplement référencé.

 

contenu haute qualite referencement

2 – Focalisez-vous sur du contenu haute qualité :

Avant, on tournait tous les textes d’une page autour d’un même mot-clé pour le répéter encore et encore, et lui donner du poids. Ce n’est clairement plus ce qu’il faut faire aujourd’hui. Place aux contenus pertinents, qui répondront mieux à une recherche intuitive. Qu’est-ce que je veux dire par là ? Il ne s’agira plus de travailler un mot clé, mais une intention. N’oubliez pas, l’utilisateur est au centre du référencement. S’il recherche “quelle est la meilleure cafetière ?”, le but n’est pas de lui fournir un texte de 50 lignes qui décrit ce qu’est une cafetière, avec x répétitions du mot cafetière. Non, mais par contre il sera bien plus intéressé par un texte qui compare quelques marques, identifie les différentes attentes ou besoins par rapport au produit, et propose un ou deux sites pour trouver la cafetière idéale.

Vous avez compris ? Vos contenus doivent être rédigés pour votre internaute. C’est le contenu utile pour les utilisateurs qui sera bien positionné par Google.

 

plus de contenu et d'interaction

3 – Plus de contenu, et plus d’interaction :

L’utilisateur veut un contenu qui s’adapte à lui, et qui réagit à ses actions. Les moteurs de recherche valoriseront un site qui propose un contenu interactif et qui offre une expérience fluide à ses visiteurs. Par exemple, proposez un système de recherche avancée, où l’internaute pose une question quelconque : “Vendez-vous des livres ?”,  et est directement renvoyé sur la page concernée qui répondra à ses attentes. Cela l’incitera à l’action, et permettra de mettre en place un process de fidélisation. C’est ça l’interaction !

En plus de cela, il faudra dire adieu aux textes trop courts, dupliqués ou sans intérêt. Maintenant, Google veut un vrai contenu, bien écrit, intéressant et long. Il se pourrait qu’un contenu soit considéré comme pertinent qu‘à partir de 1200 mots… Alors à vos plumes ! Et ce n’est pas tout, dernière petite astuce : votre texte sera mieux considéré s’il est accompagné de formes diverses de contenus. J’entends par là, images, infographies, vidéos. Plus votre contenu sera diversifié, et mieux il sera classé !

 

referencement local

4 – Votre référencement local, vous y prêtez attention ?

Vous devriez en tout cas ! Le référencement local prend de plus en plus d’ampleur, et voit vraiment tout son intérêt avec l’utilisation croissante des mobiles (donc je vous renvoie à mon point n°1 !). Les utilisateurs cherchent de plus en plus des enseignes à/de proximité, et Google l’a compris. Prenez donc la peine  d’intégrer des informations locales sur votre site web, comme une Google Map, une page dédiée à votre activité locale… Grâce à la géo-localisation, les recherches localisées deviennent de plus en plus courantes, et les résultats de recherche en tiennent de plus en plus compte. D’ailleurs, l’algorithme Pigeon de Google, qui sert à afficher les résultats locaux (géolocalisés) de type ‘restaurant Paris’ ou ‘hôtel Marseille’ sur le moteur de recherche, nous montre clairement que l’emplacement géographique prend une place importante dans le positionnement d’un site.

 

performances site

5 – Autre sujet important, le temps de chargement :

Ce point conclut un peu l’article puisqu’il rejoint les points précédents. Pour offrir une expérience agréable et fluide à l’utilisateur, il faut également mettre l’accent sur les performances de votre site. Pour optimiser l’affichage de votre site sur mobile, il faut faire attention à son temps de chargement. Le temps de chargement de votre site web est un point essentiel pour l’expérience utilisateur, et il va impacter votre taux de conversion ou votre taux de rebond. N’hésitez donc pas à utiliser Google Page Speed pour voir combien de temps met votre site web à se charger. Vous pourrez ainsi par la suite optimiser votre site pour améliorer ses performances et influer sur votre référencement.

Tendances des logos pour 2016

Comme chaque année, les experts design étudient les tendances graphiques qui vont marquer les prochains mois : webdesign, typographies, couleurs,….

Voici une infographie très intéressante réalisée par la plateforme Creads qui nous montre les tendances des logos pour 2016.

On retiendra ces quelques idées :

  • Le noir est la couleur la plus utilisée, avec le bleu, le vert, le rouge et le gris.
  • Les logos sont en général bicolores,  et pensés en flat design.
  • A la mode : les logos pictographiques, en transparence ou en fil de fer.
  • On aime les logos avec une typographie épurée et sans serif.

Vous avez en projet la création d’une entreprise ? Ou vous souhaitez redonner un coup de jeune à votre marque ? N’hésitez surtout pas à me contacter, je vous proposerais plusieurs pistes graphiques en fonction de votre charte et de vos goûts, et nous créerons ensemble votre nouveau logo !

Tendances logos 2016