Apprends à parler le même langage que ton web designer

Un dictionnaire des termes les plus courants pour mieux se comprendre.

Engager un(e) webdesigner c’est souvent mettre les pieds en terre inconnue.

En tant que client(e) tu as à peu près en tête ce que tu veux:  Un site qui fonctionne bien, qui soit facile d’utilisation, qui parle à tes clients en renvoyant un univers qui inspire, donne confiance et te permette de promouvoir ses services.

Bien souvent tu as une vue globale, une idée d’ensemble et utilises des mots en rapport à ton activité. Mais quand il s’agit de transposer cela sur un plan technique avec les contraintes que la technologie suppose je  sens mes clientes frustrées soit de ne pas comprendre mes requêtes soit de ne pas savoir comment exprimer plus clairement leurs besoins.

La création d’un site internet bien pensé, passe par plusieurs étapes.

Je vais donc récapituler ici les différents domaines qui sont en lien avec la conception d’un site en te proposant cela sous la forme d’un petit lexique.

Comme ça la prochaine fois que ton/ta web designer te parlera de “x chose”, tu pourras prendre un air entendu et pro en montrant que tu vois tout à fait de quoi il/elle parle. 😉

Côté technique

HÉBERGEUR

L’hébergeur c’est l’endroit où ton site va être logé.

C’est là que tous les fichiers qui constituent ton site vont être stockés. L’hébergeur met une certaine technologie en place qui va permettre à ton site de vivre sa vie et d’évoluer avec le temps.

Les webdesigners ont tendance à privilégier un hébergement de qualité pour que le site soit mieux protégé, plus rapide, qu’il ne subisse pas de coupure. C’est donc un élément fondamental à prendre en compte lorsqu’on crée son site. Tu n’aimerais pas construire ta maison sur un terrain marécageux non?

Personnellement je recommande WP serveur * pour leur professionnalisme.

*lien affilié

FTP

Ton/ta webdesigner va te demander des codes FTP (souvent un hôte, un identifiant et un mot de passe). Ces codes sont primordiaux car c’est grâce à eux que ton/ta webdesigner va pouvoir installer WordPress sur ton hébergement et gérer les fichiers que toi tu ne vois pas depuis l’interface WordPress (les fichiers php par exemple). Ce sont donc des infos essentielles pour qu’il/elle puisse travailler sur ton site.

DNS

Si ton nom de domaine n’est pas au même endroit que ton hébergement il est probable que dans le cours d’une conversation ton/ta web designer te dise: “ok pas de soucis, je vais me charger de paramétrer les DNS”. Et là tu acquiesces face à son discours qui semble une évidence tout en te demandant intérieurement “mais WTF** de quoi il/elle parle??”.

Les DNS ce sont des infos relatives au nom de domaine. Pour simplifier, ton/ta web designer va devoir rattacher ton nom de domaine qui se trouve à un endroit à ton site qui se trouve à un autre endroit. Pour ça il/elle va paramétrer quelques informations (adresses IP). Donc en général il/elle aura besoin des identifiants de l’endroit où tu as acheté le nom de domaine pour procéder à ces changements.

Côté code

HTML

C’est le code de base de tout site internet. Il contient ton contenu textuel, tes images, vidéos mais sans le style. Sans le CSS ton site ne serait qu’une longue page de code.

CSS

C’est ce qui apporte le style de ton site. Le CSS va définir la largeur, la hauteur, la position, la couleur, certains effets (boutons qui changent de couleur quand on passe la souris par exemple) de ton contenu. Le CSS et le HTML forment une équipe indissociable. C’est « the dream team » par excellence.

PHP

C’est un langage informatique qui permet d’apporter des fonctionnalités avancées à ton site. Les fichiers de WordPress sont codés en php. Le php c’est ce qui va par exemple dire à ton site : affiche moi ce bandeau instagram en bas de chaque page, ou encore, si la page d’accueil est cochée comme statique, n’affiche pas le blog.

C’est un peu une super intelligence cachée qui permet à ton site de faire telle ou telle action.

Côté WordPress

UN PLUGIN/UNE EXTENSION

On dit normalement extension en français mais beaucoup (moi incluse..mea culpa) ont pris l’habitude d’utiliser l’anglais « plugin ».

Un plugin est un petit “programme” que tu vas ajouter à WordPress pour apporter de nouvelles fonctionnalités. Ex: une galerie de médias, un portfolio, un système de cache, un système pour le SEO, la sécurité etc.

Bien qu’il soit tentant d’en ajouter encore et encore puisque les possibilités semblent infinies, ton/ta webdesigner te recommandera de ne pas trop en ajouter pour ne pas alourdir ton site, le ralentir. En outre certains plugins entre eux peuvent générer des conflits et amener des erreurs sur ton site.

UN WIDGET

C’est un petit module qu’on ajoute en général dans sa sidebar (barre latérale à côté du blog). Mais pour ceux qui connaissent le framework Genesis, ces modules peuvent aussi être ajouté sur la page d’accueil car de nombreux thèmes proposent des pages d’accueil “widgetisées”. Cela les rend plus flexible et permet de faire évoluer le contenu.

WordPress propose en natif un peu plus d’une dizaine de widgets mais certains plugins peuvent en faire apparaître d’autres.

Parmi les widgets les plus connus: les archives, les articles les plus populaires ou les plus récents etc.

UN THÈME

Un thème c’est à la base un groupe de fichiers qui renferment du code. Ces fichiers vont travailler ensemble pour former l’interface graphique de ton site. Son design en quelque sorte.

Des couleurs, des polices, des paramètres de mise en page seront déjà prédéfinis dans ton thème.

Il est essentiel de choisir un thème qui soit en accord avec ton projet et tes besoins. Il ne faut pas foncer tête baisser lorsqu’on achète un thème, il faut vraiment étudier ce qu’il permet, comment il est maintenu, et essayer de savoir s’il est bien codé.

Lecture annexe: 10 thèmes WordPress pour ton small business

LE FOOTER/PIED DE PAGE & LE HEADER / L’ENTÊTE

Là encore l’anglais peut prendre parfois le dessus.

L’entête c’est l’endroit où en général on trouve le menu de ton site avec les onglets de navigation et ton logo, une bannière ou/et tes réseaux sociaux. C’est un élément qu’on peut personnaliser à part. Il ne peut pas être modifié à l’intérieur d’une page. On le retrouve sur toutes les pages de ton site.

C’est le même principe pour le footer sauf que ce dernier est soit minimaliste et comporte le copyright, le nom du web designer, les conditions générales etc. soit accueille des zones de widgets qui permettent d’ajouter des informations supplémentaires. Le footer est le même sur toutes les pages également.

LA SIDEBAR / BARRE LATÉRALE

C’est l’espace qu’on trouve à droite de ton blog et dans laquelle on ajoute souvent sa photo, sa Newsletter, des images partenaires, les articles populaires etc.

Une nouvelle tendance tend à les faire disparaître pour que le lecteur se focalise uniquement sur ton contenu. Chaque cas est particulier et cela dépend de la stratégie que tu souhaites adopter.

Personnellement je préfère sans, cela fait plus fluide et lisible et de toute façon sur version mobile ta sidebar est bien souvent reléguée en dessous de ton article qui s’affiche alors en pleine page.

Côté Design

BRANDING / IDENTITÉ VISUELLE

L’identité visuelle ce n’est pas juste un logo, c’est tout ce qui rappelle ta marque aussi bien sur ton site que sur tes réseaux, tes cartes de visites, les pubs que tu fais etc.

Ton identité visuelle est le coeur de ton business, elle dégage ton univers, retranscrit tes valeurs, et te rend unique et reconnaissable.

Il est important de la penser en prenant en compte ton audience et tes objectifs et pas seulement tes goûts personnels. C’est une erreur que beaucoup font malheureusement.

MOODBOARD / PLANCHE D’INSPIRATION

La planche d’inspiration va servir de base à ton identité visuelle. Elle va collecter différents éléments qui te parlent et résonnent en toi et va former les ingrédients de départ qui permettront à ton designer de penser ton identité.

Personnellement j’invite mes clientes à utiliser Pinterest pour regrouper des images inspirantes mais je leur fais se poser différentes questions pour les amener à avoir un regard critique sur les épingles qu’elles choisissent et non à agir sur un coup de tête.

LA BRANDBOARD / PLANCHE DE STYLE OU GUIDE DE STYLE

Une fois que ton identité est conçue, ton designer te fournira une planche qui fait figurer tous les éléments de ta marque: ton logo, une variation simplifiée de ce dernier, tes couleurs avec leur code, tes polices, les motifs utilisés et d’autres éléments graphiques s’il y en a.

Ce sera ton guide, tu pourras t’y référer chaque fois que tu voudras créer quelque chose pour ta marque. Cela t’aidera à être cohérent dans tes choix.

MOCKUP

Ton/ta webdesigner te fera sûrement parvenir un mockup entier ou partiel de ton site. C’est une représentation, réalisée en général sous photoshop, du look qu’aura ton site . Il s’agit d’une image qui permet facilement de faire des changements avant de passer au développement. Faire certains changements lorsque le site est en développement peut  en effet être plus fastidieux. Cela permet de gagner du temps et de donner une idée concrète au client du résultat attendu.

WHITESPACE / ESPACE BLANC

Comme son nom l’indique bêtement, c’est un espace blanc. Un/une bon(ne) webdesigner insistera toujours pour que ton site comporte de l’espace entre les éléments du design. On ne veut pas que ton site soit difficile à lire ou fasse mal aux yeux si tout se colle et se touche et donne la sensation de fouillis. En apportant l’espace nécessaire on créée de l’équilibre sur la page et donc une meilleure expérience de lecture pour le visiteur.

MISE EN PAGE

Sûrement l’une des choses que j’ai le plus de mal à expliquer concrètement aux personnes qui souhaitent un site.

Une mise en page c’est la façon dont tu vas positionner tes éléments (images, vidéos, textes..) sur une page. Or j’oserais dire que c’est un “art” à part entière.

Pour faire un parallèle, les personnes qui doivent créer une affiche publicitaire ou des flyers vont devoir imaginer une mise en page pour que le message, l’idée colle au design. L’oeil doit percevoir quelque chose de fluide et de marquant. L’idée et le visuel doivent ne faire qu’un.

Sur un site la mise en page ne consiste pas à mettre des éléments les uns en dessous des autres et puis basta!

Il faut penser à l’information que l’on veut mettre en valeur, au comportement du visiteur, aux actions qu’on veut qu’il fasse, il faut aussi lui donner envie de lire, attirer son regard.

Imaginer une mise en page demande d’étudier l’activité de son client, de comprendre ses problématiques et ses besoins et de retranscrire cela visuellement ET stratégiquement. C’est un travail à part entière et c’est sûrement l’une des choses qui me passionne le plus dans mon métier.

Pour voir un exemple concret et compare ces deux pages: ici on a pas le même degré de personnalisation ni le même nombre d’heure de travail pour obtenir ces deux pages.

DESIGN FULLWIDTH / PLEINE PAGE

Un site conçu avec un design pleine page verra la mise en page aller d’un bord à l’autre de l’écran en opposition avec un design « boxed » « en boîte » où on a l’impression d’avoir un encadré autour de sa page.

JPEG / PNG

Une image Jpeg est plutôt réservée aux photos. Elle est moins lourde et prend donc moins de place en terme de poids. Par contre elle aura un fond blanc, aussi si tu veux mettre par exemple ton logo sur ton site à un endroit où le fond n’est pas blanc, un contour blanc apparaitra autour de ton image ce qui n’est pas esthétique. Il est donc nécessaire de fournir à ton webdesigner certains éléments en Png. Là, le fond sera transparent on pourra donc l’intégrer sans problème.

Le png est souvent réservé aux images qui comportent du texte ou des illustrations.

Y a t’il d’autres termes qui te posent problème et que tu aimerais que j’ajoute à cette liste? N’hésite pas à m’en faire part dans les commentaires.


Besoin de confier ton site à un professionnel?

Rencontrons nous pour discuter de ton projet !

Laissez un commentaire





Scroll Up
61 Partages
Enregistrer41
Tweetez
Partagez19
Partagez1