Ça y est, vous êtes décidé, vous allez réaliser votre site vous-même et êtes miraculeusement tombé sur Open Element, logiciel gratuit et performant.

De deux choses l'une, soit vous avez des connaissances en graphisme et suivez de près l'évolution du design des sites web, soit vous êtes un néo-créateur lambda mais néanmoins motivé.

C'est à monsieur ou madame Lambda que je m'adresse.

Combien de fois sur ce forum, un utilisateur enthousiaste nous présente sa toute nouvelle création pour avis (ou question technique) et on se rend compte que le design est totalement démodé et/ou peu attirant.

Et on n'ose pas lui dire !

Ce qu'il ne faut plus faire (synthèse de ce que j'ai trouvé sur le net) :

1) Trop de couleurs et de polices :

C’est une question de mode qui date de presque 20 ans déjà. À cette époque, on exploitait au maximum la couleur, et l’on cherchait à attirer l’œil du chaland par des couleurs ou des polices qui cassaient avec le reste, assurant l’impact. Maintenant, avec le développement de l’offre sur Internet, on considère que trop de couleurs et trop de différentes polices fatiguent l’œil et donnent une sensation de chaos : bienvenue dans l’ère du minimalisme.

Ça ne veut pas dire que tout doit se ressembler, ou être noir ou blanc ! Mais simplement qu’il faut choisir votre identité visuelle avec soin. Respectez ces quelques principes : pas plus de 3 couleurs pour tout le site et seulement 2 polices suffisent, une pour les titres et une autre pour le texte.

Edit : Dans certains cas et si c'est bien pensé, justifié et maîtrisé, le "multicolor" peut se concevoir.

2) Les animations et les sons:

Il est préférable de ne pas les utiliser car trop de son ou d’animation rebutent, distraient les visiteurs et donnent l'impression que le site est dépassé.

Exit les gadgets des sites web pionniers: les textes qui défilent ou clignotent, les gifs animés et la musique qui démarre à l'ouverture de votre page ainsi que le « splash screen » ou le flash intro (page d'accueil sans info sauf choisir la langue) c’est un clic en trop qui peut décourager parfois les clients d’entrer dans votre site

Les seules animations qui se font encore beaucoup sont les diaporamas.

3) Les colonnes, les cadres de textes en nombre, les barres de menu verticales:

Ces colonnes et cadres (souvent mal alignés) qui noient le client sous l’information ne servent qu’à le distraire et l’éloigner de l’information essentielle voire le faire fuir.

Maintenant, la tendance est plutôt au minimalisme. Posez-vous la question : ai-je besoin de tous les éléments de mon menu vertical ? Vous pouvez rapatrier les éléments fondamentaux (panier, recherche, compte, newsletter) en haut à droite de votre page, et dédier des pages spécifiques (via liens ou pages) vers les autres éléments.

Essayez alors de focaliser le contenu de votre barre de menu principale vers les pages vers lesquelles vous souhaitez orienter votre visiteur en priorité quitte à créer des sous-menus pour les informations plus secondaires.

4) Les longs textes descriptifs :

Le plus souvent les internautes ne lisent pas tout ce qu’il y a écrit sur votre site. Vous avez seulement 3 secondes pour capter l’attention d’un visiteur, vous devez donc rendre votre site plus sobre. Cela ne veut surtout pas dire qu’il faut enlever vos descriptions : SEO (le référencement naturel) oblige, vous devez constamment travailler des textes uniques et complets, mais vous devez structurer votre contenu.

Sachez trouver un équilibre entre les images et le texte pour ne pas faire fuir vos clients potentiels. Vous pouvez structurer votre texte avec des paragraphes ou présenter vos informations par onglets.

Bien entendu une orthographe impeccable est capitale.


5) Les images bas de gamme :

-----

Que vous commenciez un nouveau site ou actualisiez l'ancien, vous avez 2 options incontournables: le site web mobile ou le site web responsive design.

Depuis plusieurs années, l’utilisation croissante des mobiles et tablettes a révolutionné l'usage d'internet. L’époque où les internautes n'utilisaient qu'un simple ordinateur est révolue. L’internaute est hyper connecté : 1 personne sur 3 visite des sites internet via son téléphone mobile ou sa tablette (particulièrement en voyage).

Un site qui n’est pas adapté s’affiche de la même façon sur un mobile /tablette que sur un écran d’ordinateur. Problème : la surface d’affichage est bien moins grande ! Le contenu devient donc trop petit pour être lisible et le client doit zoomer et faire défiler le contenu horizontalement et verticalement afin de pouvoir le lire en entier. Il est aussi possible que certains contenus ne s’affichent pas du tout. Imaginez que vous cherchiez une information. Si le site est illisible vous vous découragerez rapidement… Ces manipulations désagréables incitent votre visiteur à aller voir ailleurs.

Depuis avril 2015 Google a annoncé l’optimisation du site web pour les mobiles serait un critère de référencement !

C'est quoi un site web responsive ou mobile ?

Un site responsive s’adapte à la taille de l’écran sur lequel il est consulté : il pourra être aussi bien lu sur ordinateur, tablette ou mobile. Le contenu est réorganisé et lisible de façon à ne pas avoir besoin de zoomer.

Le site web mobile se distingue du site web responsive car il est conçu uniquement pour les téléphones. Indépendant du site web de base dans lequel un code permet au navigateur de détecter automatiquement le support utilisé et donc la « version » de site web à charger.

Plus de détails ici !

Maintenant que vous êtes convaincus, apprenez !

Vous trouverez sous l'onglet « Tutoriaux utilisateurs » les Tutos de Larsène dont le célèbre Chouette c'est responsive et ceux de Brolysan dont Le tutoriel du modèle responsive d'OE

Edit : La nouvelle version d'OE 1.55 intègre beaucoup d'aides diverses à la création d'un site responsive, bientôt le nouveau tuto de Brolysan :

Ce qui se fait  en design:

Le Flat design

Très présent depuis 2013. Si on traduit littéralement le terme , on pourrait avoir une phrase du genre « Design à Plat ». Le Flat Design est un style de design web excluant tous détails superflus de la création. Il se caractérise par des aplats de couleurs sobres mais actuelles et dont l’organisation de la typographie créée la structure du contenu. Le Flat design est un style minimaliste, extrêmement clair et épuré. « Less is more » prend ici tout son sens.

A contrario des années passées où les designers appliquaient à profusion le style « Web2.0 glossy ». Ce style était caractérisé par des ombres portées, des bizotages/estampages et autres effets photoshop voués à montrer les capacités techniques des créatifs. Aujourd’hui, la tendance web se rapproche de plus en plus au design print. Il se caractérise donc par des aplats de couleurs, des contrastes forts pour la lisibilité, des icônes minimalistes, des typographies et un contenu en « grille ». Priorité au contenu et à la hiérarchisation des informations.

Fondamentalement, ces 2 techniques sont faites pour s’entendre et vont aussi de pair ! Le design responsive est créé à la base sur une grille, qui permet de repositionner les éléments suivant le support sur lequel il est lu, est donc forcément en corrélation avec ce système d’aplats de couleurs.

Le visual design

En quelques mots, c’est l’idée qu’une image vaut mieux que 1000 mots, et c’est LA tendance web du moment.

On voit déjà depuis un bon moment de belles grandes images envahir les sites Web. Idéales pour littéralement en mettre plein la vue aux visiteurs, elles servent à positionner votre site, à transmettre vos valeurs et mettre vos visiteurs dans une ambiance représentative de ce que vous promouvez.

Aujourd’hui, les images passent avant le texte, au moins sur la page d’accueil. On en dit tout autant en mettant en scène son discours pour qu’il soit plus attractif et digeste !

Je répète, il ne faut pas effacer vos textes et descriptions, car Google y reste extrêmement sensible, et vos visiteurs, une fois séduits par vos photos, valideront leur choix grâce aux descriptions exhaustives que vous leur proposez, mais la première chose qu’ils doivent voir c’est une image, et une image cohérente et attirante.

L’image, au cœur du design web.