Comment concevoir un site web ?

Avant de commencer

Que vous souhaitiez créer votre site par vous même, trouver une personne pour vous accompagner ou spécialiste du web, il est important d’avoir un certain nombre d’informations préparées en vue de faciliter le travail.

De manière générale, les éléments importants préparer sont les suivants :

le nom de l’entreprise;
la personne à contacter;
la présentation du site :
- la présentation de l’entreprise,
- de quel type de site s’agira-t-il ? (site vitrine, blog, etc.)
la présentation du marché :
- quel est la cible ?
- à qui s’adressera le site internet ?
- quels sont les acteurices du secteur ?
l’identité graphique est-elle définie :
- le logo existe-t-il ?
- Quels sont les jeux de couleurs ?
- Quelles sont les typographies ?
- quelle ambiance souhait-on transmettre ?
- quels sites sont inspirants ? Pourquoi ?
l’arborescence imaginée du site

note: En tant que spécialiste du web, le rendez-vous initial est un élément important dans l’estimation de la charge de travail et la constitution du devis.

Réaliser un tableau d’inspiration

Le mood board est une solution permettant de montrer, en amont d’un projet, sous forme de tableau graphique, les inspirations de celui-ci : sites, illustrations, coupures de journaux, couleurs, typographies, etc.

note: le but est de créer un tableau favorisant l’inspirations avant la réalisation de la charte graphique.

conseil: le moodboard peut prendre une forme numérique aussi bien que physique (collage, etc.)

Concevoir sa charte graphique

La charte graphique est un document contenant l’ensemble des règles d’utilisations des éléments qui constituent l’image d’une marque. Son objectif est de permettre de garder une cohérence entre les différents supports (site, flyer, etc.).

note: la charte graphique est un élément important qui facilite grandement le travail des développaires web.

exemple : charte graphique d’Arte pour le print

La charte graphique se compose généralement :

du logo,
des typographies,
des palettes de couleurs,
des icones.

Voyons cela ensemble.

Le logo

Le logo est l’identité de l’entreprise. Dans une charte graphique, on le représente sous différents formats, tailles et contexte d’utilisation (document, impression, courriel, etc.).

À minima, le logo doit être représenté dans les formats suivants :

couleur,
noir et blanc,
noir sur blanc,
blanc sur noir.

conseil: Il ne faut pas hésiter à préciser, pour chaque format son contexte d’utilisation (impression, web, courriel, etc.).

Les typographies

Comme pour le logo, la charte graphique documente le cadre d’utilisation des typographie.

À minima, la charte graphique doit présenter les informations suivantes :

le nom de la typographie
une table des caractères (liste des lettres et chiffre)
le lien de téléchargement
son contexte d’utilisation (titres, textes, etc.)

note: Il n’est pas conseillé de dépasser deux typographies différentes: l’une pour le titre, l’autre pour le texte

attention: avant de faire le choix d’une typographie, il est imporant de vérifier les éléments suivants :

le poids de la typographie
la licence de la typographie

Familles typographique

Il existe 3 grandes formes de typographique :

serif (avec empatement)
sans serif (ou sans empatement)
monospace (à chasse fixe)

En typographie, il existe une classification qui documente 11 grandes familles : le classification Vox-Atypi.

note: chaque police de caractère à une connotation, une incidence sur le ressenti de celleux qui la lisent et sur l’image donnée pas la marque.

Palette de couleurs

Chaque couleur possède une signification implicite qui aura une influence sur les personnes qui la percevront.

Pour les couleurs, la charte graphique doit présenter :

la couleur,
son code RVB (rouge, vert, bleu),
son code hexadecial,
son code CMJN (cyan, magenta, jaune, noir)

Ces informations permettent aux spécialistes de connaitre la couleur à utiliser

Exemple :

Indigo

RVB
- rouge: 166
- vert: 47
- bleu: 167
CMJN
- cyan: 1
- magenta: 72
- jaune: 0
- noir: 35
Hexadécimal: #a62fa7

Signification des couleurs

Tableau présentant les différentes couleurs, à quoi elles sont associées et leur connotation (positives et négatives)
couleur	associations	connotations positives	connotations négatives
bleu	océan, ciel	sagesse, sérénité, vérité	mélancolie
jaune	sable, soleil	fête, joie, chaleur	traîtrise, mensonge, tromperie
rouge	sang, feu	amour, passion, chaleur	colère, interdiction, danger
vert	végétaux	espérance, chance	échec, infortune
orange	fruits	créativité, communication	kitch
violet	végétaux, fleurs	rêve, délicatesse, paix	mélancolie, solitude
marron	terre, arbres, aliments	nature, douceur, neutralité	saleté
or	lingots d’or	richesse, fortune, fécondité
noir	nuit	élégance, simplicité, sobriété	mort, deuil, tristesse
blanc	neige, lumière	pureté, innocence
gris	acier, béton	calme, douceur	tristesse, monotonie
rose	fleurs	romantisme, bonheur, tendresse

note: De manière générale, il n’est pas conseillé de dépasser deux couleurs principales.

important: l’association entre la couleur d’un texte et la couleur d’un fond doit respecter certaines règles de contraste :

4.5:1 pour les textes sans effet de gras dont la est taille inférieure ou égale à 24 pixels,
4.5:1 pour les textes avec un effet de gras dont la est taille inférieure ou égale à 18,5 pixels,
3:1 pour les textes sans effet de gras dont la est taille supérieur ou égale à 24 pixels,
3:1 pour les textes avec un effet de gras dont la est taille supérieur ou égale à 18 pixels,

Le maillage interne du site web

Anticiper l’arborescence du site et l’accès aux futurs contenu permet d’avoir une vision globale de celui-ci.

L’objectif est de :

s’assurer que les contenus importants ne sont pas trop profonds dans le site et ne demandent pas beaucoup de clics,
pourvoir guider au mieux les internautes dans leur visite du site,
garantir un référencement naturel optimal.

astuce: pour réaliser son maillage interne de façon ludique, il existe un kit de cartes nommé website Deck

Prototyper son site

Le prototype ou wireframe est une représentation schématisée des différentes interfaces. Il permet de définir les différents emplacement des zones textes, images, menu, etc. constituant la page.

Prototyper son site apporte les avantage suivants :

s’assurer de la satisfaction des interfaces par la clientèle,
simuler le fonctionnement du site selon les attentes de la clientèle,
permettre d’avoir une première idée du temps et du coût de production du site.

Astuce: commencer ses prototypes sur papier est une premiere étape interessante.

Maquetter son site

La maquette graphique est une représentation visuelle, respectueuse de la charte graphique, d’une page web. elle permet donc de représenter, fidèlement, et sous forme d’image ce à quoi ressembleront les différentes page du site.