Blog Visuelle

Actualité



A l'aube d'un changement...


Visuelle en mode formation

C'est fait, je me réconcillie avec la conception web !

Ne jamais dire jamais... C'est mon coté Geek qui refait suface.


C'est une remise en question personnelle sur l'impact environnemental de mon métier qui est à l'issue de ce retour aux sources.


Depuis juin, je suis suis baignée dans le code avec pour commencer le Javascript, histoire de comprendre un peu plus le coté obscur de la force.


Je suis passée par Bootstrap, afin de me mettre un peu dans le jus des Framework et maintenant je passe à Vue.Js pour approcher les Webb app.


Mais je ne m'arrête pas là, j'ai décidé de relever le défi, d'offrir des services en communication Visuelle à moindre impact pour l'environnement, la suite très bientôt : Visuelle en mode PWA !



Le passage à 2019 est déjà bien entamé
...l’occasion de faire le bilan de 2018.

Fin 2017, j’ai quitté professionnellement ma zone de confort.
2018 fut l’opportunité d’exploiter ce nouvel espace !
Sortir du cadre m’a permis…

  • de faire des rencontres tout azimut
  • d’exploiter de nouvelles compétences
  • d’apprendre à accepter les compliments
  • de prendre de l’assurance
  • de prendre du temps pour moi
  • d’oser et d’improviser !

Prendre le large m’a été plus bénéfique que jamais et je suis fier de moi ;-)


Ce que j’attends « de moi » pour 2019 ?
De pouvoir approfondir et mettre en pratique les connaissances en SEO, Design Thinking/ expérience utilisateur.
De continuer à m’enrichir et continuer à progresser vers de nouveaux horizons encore plus prometteurs ! Et surtout de partager toutes ses expériences, d’en faire profiter mon entourage, mes collègues et mes clients !



Déjà deux mois...

Hé oui, le temps passe vite! C'est que depuis septembre, j'ai intégré l'asbl Aidants Proches à Belgrade, un remplacement de 4 mois.

J'ai très vite intégré l'équipe, chose aisée quand on rencontre une équipe bienveillante ! :-)
Le temps d'un coach de 3 jours avec la graphiste pour me mettre toutes les cartes en main et me voici chargée des projets de communication de l'ASBL et ses trois Antennes.

Mon quotidien ?

  • Reprendre les projets de brochures, flyers en cours, y apporter quelques modifications et envoyer le tout à l'impression.
  • Me plonger dans le template "Jupiter" de Wordpress qui m'a été imposé, pour créer le nouveau site internet de l'asbl. Un défi de taille, après ma première et précédente expérience Wordpress avec le thème "AVADA" pour l'asbl de la MDA d'Amay.
    Jupiter, un template qui m'a donné du fil à retordre, il a beau être en Wordpress, l'approche est tout de même différente. J'ai du prendre du recul et plonger dans l'abysse de ce thème pour dépasser le stress de la "page blanche".
  • Les publications Facebook sont aussi une tâche dans mon planning, une tâche que j'apprécie, où je constate l'importance de travailler le visuel des publications. C'est un fait : l'impact du visuel passe avant la lecture.


15 jours après… Où en est le référencement de Visuelle.be ?

Une belle surprise…

Ou un résultat d'optimisation ?


Comme je suis une acharnée et une convaincue que tout est possible quand on s’en donne les moyens. J’ai continué à parcourir le net à la recherche d’infos pour améliorer le référencement de mon site AMP.

Cette fois, je me suis penchée sur …

Le fameux fichier :

.htaccess 👹 HAHAHA...

  • ✔ Intégrer la notion d‘expiration des fichiers

    • => une bonne technique pour limiter les requêtes

  • ✔ Ajouter le cache-contrôle

    • => un complément du précédent

  • ✔ Sécuriser le fichier .htaccess

    • => un bon réflexe
Adresse de références : developers.google.com

J’ai personnalisé :

Les pages ERROR 404 et 500


Une façon de soigner les détails et de rassurer l'utilisateur, est d'habiller les pages que le serveur affiche lors d'une erreur d'accès.


Et le contenu dans tout ça ?

Le Storystelling


J’ai modifié le contenu de ma page d’accueil en essayant d’appliquer la technique du storytelling.

Comme toutes ces modifications, donnent déjà du résultat après 15 jours

Il suffit de continuer dans ma lancée et d’appliquer tout cela à l’ensemble du site !



Surprise du weekend : visuelle.be disparait de Google... 😬

La raison ne pouvait résulter que de mon ajout d'un "site map" pour les images de la page Marketing de mon site. J'avais pourtant testé dans la "search console" qui ne m'avait pas décelé d'erreurs... Le sang ne fait qu'un tour dans ces moments là ...💀

Retour à la source du problème

  • ✔ Erreur xml constatée avec l'outil goo.gl/2gD1LM

    • Du coup, j'ai étudié le XML et apporté les corrections en m'aidant de sitemaps.org

Solution :

  • 1) Une page "sitemap.xml" liste les pages "sitemap.xml".

  • 2) Une seconde liste les pages html de mon site.

  • 3) Les suivantes, listent les contenus (images) de chaque page.


  • ✔ Validation des fichiers xml avec goo.gl/2gD1LM


🤞 Croisons les doigts...
J'attends impatiemment l'indexation de Google pour valider et continuer dans ma lancée !


Quand le SEO vous prend jusqu’aux tripes

Si vous avez suivi mon actu, vous savez que j’ai décidé de me remettre au Web en me plongeant dans le coté obscur de l’«AMP ».

Pourquoi pas faire simple? Un CMS et le tour était joué ? 🤪

Oui, mais j’aime m’en mettre partout et comprendre la face cachée, rentrer dans ce code qui me fascine et arriver à en déceler les méandres. Puis on apprend des erreurs et pas de la simplicité. Mon site monté à « l’arrache », je dois l’avouer, maintenant est décortiqué et exploré dans tous les sens. Je m’imprègne et apprend sur le tas. Je tente de répondre aux impératifs pour arriver au top du référencement avec un site AMP. Et pour pimenter le tout, j’ai dû démarrer avec un site dont l’hébergement avait été magistralement piraté. 😈
Mmmm ! Ça c’est du sport ! J’aime ça 🤓 👍

Un petit topo du Schmilblick pour ce 10 août :


Il reste à...

  • ➤ Optimiser les images

    J’ai commencé par la page « marketing » hier en implémentant mon code avec l’attribut « srcset » et décliné les images pour les formats 1280/ 640/ 480/ 320 /160 et aujourd’hui je les retrouve déjà référencées sur google. Prochaine étape sera d’y ajouter le format webp !

  • ➤ Utiliser le cache serveur et donner la priorité aux contenus visibles

    Sont des choses que je dois voir avec mon hébergeur.

  • ➤ Il faut encore et toujours améliorer le contenu

    J’ai déjà remis en ordre des H1, H2, H3, mais il serait bien d’encore plus exploiter l’html au service du SEO. Je pense que je m’en sort pas trop mal finalement, non ?

    Si quelqu'un a des trucs, astuces et envie de partager, je suis toute ouïe !
    (*) en moyenne




Référencement suite...

Je ne comprenais pas pourquoi je n'aboutissais pas dans mon référencement...
Puis ce fut clair 😀💡

Ce sont les conséquences du piratage de mon hébergeur 😬
Et voici le petit "truc" qui m'a permis de comprendre :

Ajouter "site:" devant votre URL dans le navigateur ("site:https://WWW.VOTRE.URL"), permet de vérifier les pages indexées de votre site Internet.

Et là à ma grande surprise 98 URL indexées dans le moteur de recherche Google qui n'ont strictement rien avoir avec mon site Internet mais avaient bien comme URL de départ "visuelle.be".

Je me suis donc dirigée vers la page "Search console" (https://www.google.com/webmasters/tools/removals) de Google pour supprimer toutes ces indexations inutiles qui nuisent à mon référecement.

J'espère enfin arriver à bout du schmilblik et pouvoir renfin avancer dans mon référencement de manière optimale ! La suite dans le prochain épisode !


Petite envie de partager…



Toujours à l’affût d’en connaître davantage, je découvre au fil de mes formations, un tas d'infos utiles. Et pourquoi ne pas les transmettre ?

3 url à garder sous la main lors de la conception d’un site Internet :

✔ Tester l’empreinte écologique de son site Internet

L’Eco-index est un outil communautaire qui permet d’évaluer la performance environnementale de votre site Internet par rapport à plusieurs facteurs.
C’est par ici ➡ https://www.ecoindex.fr/

✔ Que cherchent les internautes ?

Un outil très utile pour évaluer la popularité de mots clés entre eux et suivant la localité.
C’est par ici ➡ https://trends.google.fr/

✔ Dans le même esprit…

Un outil qui permet de voir quelles sont les recherches effectuées par les internautes sur un sujet donné.
C’est par ici ➡ https://answerthepublic.com/



Un flip book en HTML5

Pour postuler à la ville de Huy, j'ai du réaliser un portfolio en pdf.
Je cherchais à en faire un flip book, mais tout est payant ou avec des contraintes de publicités ou de temps. Il est simple de l'exporter en swf, mais c'est remplacer un problème par un autre... Puis, j'ai découvert le site Turn.js

C'est magique et compatible en plus ! Un peu de modifications dans le code et je viens de réaliser mon portfolio een HTML5 !

Et si je ne décroche pas le poste, au moins, je n'aurai pas perdu mon temps !
C'est par ici : Portfolio. Merci à la communauté GitHub !



Petite mise à jour HTML5


Autodidacte, j'ai décidé de vérifier mes compétences en HTML5 en m'inscrivant à la formation de Technifutur, histoire de m'assurer que mes pendules sont à l'heure.
Je termine le quatrième module haut la main ! :-)

Pour fêter mes 20 années d'infographie, j'ai créé un compte Pinterest, vous pourrez y consulter mes réalisations au fil du temps - C'est par ici.


Aie.. référencement en dégradation !


Comme quoi il faut être hyper vigilant !!!
Quelques semaines hors ligne et ...
Retour à la case "départ" au niveau de mon référencement.. Snif..
Va falloir mettre les bouchées doubles !!
On ne peut pas se dédoubler ? Ca m'aiderait.. ;-)
Résultat des dégats en référence au 18 décembre :

Visibilité avec les mots clés :

  • « infographiste freelance liège »
    1ère page, 2éme position (firefox) > 2éme page 3éme position
  • « infographiste freelance liège »
    1ère page, 5éme position (GoogleChrome) > 1ère page, 8éme position
  • « infographiste liège », « graphiste freelance »
    sur la 4éme page (firefox/chrome) > 4ème page, 8éme position
  • « infographiste freelance »
    sur la 6éme page (firefox/GoogleChrome) > 5ème page 9éme position
  • « webdesigner liège »
    sur la 8éme page (firefox) > 10éme page.
  • « webdesigner liège »
    sur la 9éme page (GoogleChrome) > 10éme page.
Y a plus qu'à...

Tout autre chose...
Hé... Hé... Bientôt 20 ans d'infographie derrière moi...
Hum... Hum... On va mijoter ça...


Oufti.. Le printemps est déjà là !

Dans l'idée de relever de nouveaux défis, remarquant qu’avec l’explosion des médias numériques et de leur utilisation accrue, il existe une assimilation certaine entre les postes tel que : graphiste, infographiste, copywriter, community manager, etc.
Le job du chargé de communication ne m'a plus paru si éloigné du mien.

Après quelques interviews, éffectivement, on me confirma que les deux se confondaient dans certains cas.

Pleine de conviction, me voilà à la porte du Centre culturel d’Engis, mon CV à la main !

Ma surprise, quand j’apprends que ma candidature est retenue. Une immersion totale, après 3 jours de coaching par la Chargée de Communication, journaliste de surcroit.

Me voilà lancée pour un stage de remplacement d’un mois ! Un défi de taille et l'interdiction de jouer des atouts de graphiste.

Sobriété de rigueur. Un mois où j’ai pu aborder ce métier très différent du mien : Rédaction de Communiqués de Presse, suivi de la presse, suivi de l'agenda des évènements, sponsoring, gestion de la mise à jour du site, gestion d’évènements et publications Facebook, reportages photos,…

Un super défi, relevé avec succès et une conclusion à tirer : Il est fou d’assimiler ces deux métiers.


Design Thinking/ Design de service

Formation de 2 journées au Design Thinking/ Design de service.

Mais Quésako ?
Repenser sa manière d'approcher un projet, mettre l'utilisateur final en amont de la solution.

Axer son projet sur "le plaisir de l'utilisateur" et non pas s'obstiner à trouver une solution qu'on a "imaginé" pouvoir donner du plaisir à l'utilisateur.

Plus qu'un simple contact avec l'utilisateur, une vrai immersion, le surprendre dans son quotidien afin de le faire réagir sur des cas réels, en bref... Mieux définir ses besoins.

Définir de vrais profils utilisateurs (Personas) qui aideront à donner de véritables réponses, pour ensuite prototyper sommairement des solutions qu'on ira tester avec l'utilisateur.

Une approche vivante, dynamique avec de belles surprises pour apporter des résultats probants.

En bref... Le design thinking conjugue empathie, créativité et rationalité.

Une formation designinnovation.be

Des Liens :
Design enjeu
IDEO (CEO de l'agence de créativité).



Language "Metapost"
Découverte du language "Metapost" au cours du workshop META-FIG proposé par le collectif OSP
(https://osp.kitchen ).

MetaPost est un langage qui génère des fichiers PostScript (EPS).

Une journée enrichissante, un pas de plus vers le "svg" et une approche toute différente des polices de caractères.

Merci aux organisateurs ( FIG. et Wallonie Design ) pour leur super accueil. Et vivement l'installation de Metapost pour me lancer.

FIG. Festival à Liège jusqu'au 04/02/2018 - Plus d'infos
Plus d'infos sur le language ici

Hourra! 1, 2, 3 Marques!
Heureuse surprise de voir l'enseigne "Un, deux, trois, marques" en plein coeur de Huy !

Rencontre avec cette jeune femme dynamique en 2016 pour la conception de son logo, dont j'avoue l'accouchement fut un peu douloureux. Pour un résultat final qui traduit tout le pep's de cette entrepreneuse.

Au départ, une vente en ligne de vêtements de seconde main de qualité via une page facebook, un site Internet et aujourd'hui une boutique héphémère au coeur de Huy !

Encore "bravo!" à Marjorie et beaucoup de succès pour son entreprise !
Un petit tour sur son site

News pour La MDA
Au bout de 5 semaines passées au sein de l'équipe de la MDA :



Au départ, la demande était de donner un coup de jeune au website fait en Joomla!

Après réflexion, c'est un remaniement total qui fut d'application tant au niveau du contenu que graphiquement et l'utilisation de Wordpress m'a été vivement conseillé.
Puis, tant qu'on y était.. Un nouveau logo pour l'ASBL ?
Je me suis donc plongée dans Wordpress et la législation des ASBL.

L'objectif que je me suis fixé : rendre le logo plus attractif au niveau de son public cible (ASBL Sportives/ autres ASBL et ADF), j'avais carte banche, je me suis lancée.

Pour le website, j'ai aussi misé sur l'accessibilité.
Rendre abordable tous ces termes fiscaux et juridiques. Inviter les ASBL et associations à devenir membre pour accéder aux conseils du juriste et services de La MDA. Les illustrations viennent ponctuer le tout, j'ai voulu qu'elle soient dynamiques, accorcheuses.

Un mois de travail comme webdesigner pour une ASBL qui a le mérite d'exister et j'espère que le site sera un média actif pour leur communication à venir (www.mdaamay.be).

Résultat en référencement
2 novembre 2017, mise en ligne du site www.visuelle.be, format responsive validé AMP.
Nous voici le 18 décembre et le référencement porte déjà ses fruits.

Visibilité avec les mots clés :
« infographiste freelance liège » 1er page, 2éme position (firefox).
« infographiste freelance liège » 1er page, 5éme position (GoogleChrome).
« infographiste liège », « graphiste freelance » sur la 4éme page (firefox/chrome).
« infographiste freelance » sur la 6éme page (firefox/GoogleChrome).
« webdesigner liège » sur la 8éme page (firefox).
« webdesigner liège » sur la 9éme page (GoogleChrome).

Petite astuce : préferez le site de validation AMP suivant : https://validator.ampproject.org

SVG & site dédié AMP !
Un retour à l'origine de mon parcours de graphiste, "l'animation" qui me semblait qu'un vague souvenir, me revient avec un intérêt, tout récent, pour la conception d'un site "responsive".
Après la découverte du format #AMP, ma curiosité s'est étendue au "#SVG", "#WEBP", "#CSS3", "#HTML5" avec l'opportunité d'animer les images vectorielles et les textes.

D'abord un peu fastidieux, l'AMP étant assez limité et les documentations moins nombreuses en français. Mais très vite, je découvre :
J'ai encore beaucoup à apprendre, mais j'ai déjà commencé à implanter le format d'image #WEBP pour la page visuelle.be/marketing.html afin d'alléger l'affichage sur Chrome et Opera. Et intégré quelques petites touches d'animations sur www.visuelle.be que je vais peaufiner dès que le temps me le permet. Mon prochain défi est d'intégrer un formulaire de contact !

Empathie, graphiste maîtrise!
Savoir se mettre dans la peau du client est essentiel dans le job du graphiste, cette faculté est développée généralement par l'écoute et l'attention, mais quand on a un surdosage d'empathie, c'est tous nos sens qui sont à l'affut. On se met véritablement "dans la peau du client".

Bien évidemment, il faut que le client soit prêt à faire la "connexion" avec vous, s'il ne dévoile pas son jeu, il va fausser les pistes.

Par expérience, vous ne me contredirez sans doute pas, les clients les plus empressés, sont souvent ceux dont l'idée est la moins précise, ils veulent un projet et vous avez "carte blanche".

Ça commence mal ! Le graphiste se dit : "génial !", mais dès qu'il se met à la tâche, les questions fusent dans tous les sens et comme tout est possible : Quelle direction prendre ?

Quand on est dans l'empathie, on se laisse littéralement partir dans le flux que le client vous renvoie et si le client ne dévoile pas les bonnes cartes, voilà le projet sans fin qui commence. On fait des projets dans tous les styles et plus on développe et plus le client s'y perd. Simplement par ce qu'il ne sait pas ce qu'il veut.

Très vite, je me suis rendue compte de ce problème et j'ai établi en 2001 un modèle de fiche à compléter par le client pour mieux cibler ses attentes et optimiser le temps.

J'ai continué à utiliser ce questionnaire et il s'est avéré très efficace, il me permet de mieux cibler le profil du client. Rien de sorcier, des questions simples qui permettent au client de définir, en amont du projet, ses envies, ses besoins, les contraintes imposées.

J'avoue que parfois, il m'arrive d'oublier de fournir cette fiche et je peux vous assurer que je m'en mords les doigts !

Car une idée doit être précisée avant d'être développée graphiquement. J'amène le client à réfléchir et à dresser les piliers qui vont structurer son projet.

Du coup rencontrer le client n'est plus une nécessité, plus de soucis d'horaire, sauf cas exceptionnel,

mes contacts se font par e-mail et téléphone. Pratique quand on travaille en bonne partie après journée !

C'est certain, rencontrer le client en personne amène une convivialité, mais cela n'est pas primordial. Le but premier est de satisfaire le client et optimiser son temps c'est lui faire aussi gagner de l'argent ! Un résultat gagnant pour les deux parties !


Visuelle se AMP"ise"
Je me pensais "larguée", mon parcours professionnel m'ayant un peu éloigné de la conception de sites internet et le responsive Webdesign me donnait l'impression d'une grande complexité dans ses adaptations mobile/ pc/ tablette.

Il faut dire que l'adaptation aux différents navigateurs, était déjà un défi de taille dans le passé, ajouter les interfaces mobile/ pc/ tablette à tout cela, ne me donnait pas l'envie de m'y attaquer.

J'ai travaillé en collaboration avec des programmeurs, ce qui laisse tout de même plus de répits au graphiste (l'intégration html ne me dérange pas, mais je préfère me consacrer aux illustrations et aux mises en page ou je peux laisser libre-cours à ma créativité), cette solution me convenait très bien.

Début septembre, participer aux modules de l'Atelier Digital de Google (Liège), m'a donné une vision objective de la situation actuelle au niveau du web et de son développement.

Autodidacte, freelance, je ne bénéficie pas de communication d'échanges qu'on peut développer dans une agence et mon travail en tant que chargé de la communication dans un secteur fermé ne m'aide pas dans cette voie.

Bien que curieuse par nature, je garde toujours un oeil sur l'évolution, j'ai eu très tôt le réflexe de créer un compte Google+ et Google business à mes clients, consciente que si Google offre ce type de service, ce n'est pas anodin.

Internet reste toute de même un bon nid d'informations. Je supervise les pages Facebook, Twitter, Google+ en étant attentive également au développement du SEO. J'hésitais beaucoup sur la façon de remettre mon site à jour et puis j'ai entendu parler de AMP.

Le cordonnier étant toujours le plus mal chaussé, les techniques du web évoluant à une telle vitesse, je me suis dit EUREKA ! Voici la solution pour me remettre dans le bain.

J'ai lu, du pour et du contre, je pense qu'il faut à un moment prendre la vague et voir ou elle nous emmène (sans toutefois ne pas se laisser emporter par les flots).

Une bonne façon de me remettre dans le codage, je n'ai rien inventé, je suis partie d'un modèle que j'ai personnalisé en y appliquant ma charte graphique. Cela m'a permis de découvrir AMP, l'intégration des images SVG, de tester les données structurées, toutes des nouveautés pour moi.

Mon site est dès à présent à prendre comme un bouillon de culture, mis à jour perpétuellement : je vais le tester dans tous les sens, y étudier le référencement (SEO), l'analyse de l'expérience utilisateur (UX) et l'interface utilisateur(UI) et sans doute encore bien d'autre découvertes..

Et tout cela dans un but commun entre un épanouissement naturel dans un secteur qui me plait et l'opportunité de partager mon expérience avec mes futurs clients ou partenaires professionnels !