lun.

08

sept.

2014

Conseil design n°5 : La check-list du webdesigner

Nous l'avons vu tout au long de cette semaine, la qualité d'un site internet dépend de son caractère unique et de sa cohérence : ces deux aspects doivent en faire une plateforme facile à découvrir et à utiliser. C’est ainsi que le webdesign prend tout son sens car, en plus de communiquer votre univers, il facilite la vie de vos utilisateurs et favorise l’achat.  Pour terminer cette série d'articles utiles sur le webdesign et vous aider à finaliser votre site, Siham Belouadheh, Marketing Manager Europe chez 99designs nous révèle ses secrets. Enfin, nous mettons à votre disposition une check-list pratique à télécharger, qui vous aidera à suivre votre progression.

Comprendre votre webdesign

Pour comprendre l’efficacité de votre webdesign, il suffit de vous poser quelques questions simples :

 

  • Voulez-vous un site internet simple qui se charge rapidement, ou préférez-vous un site très stylisé qui prendra un peu plus de temps à charger ?
  • Votre clientèle cible vous impose-t-elle des contraintes d’une manière ou d’une autre ? Par exemple, vous oblige-t-elle à utiliser des caractères de grande taille ?
  • Sur une échelle de 1 à 10, où se situent vos utilisateurs en ce qui concerne leurs connaissances internet ?

 

Une fois que vous aurez analysé les besoins et les goûts de votre clientèle-cible, vous aurez une meilleure idée du webdesign le plus adapté pour votre site ainsi que du contenu à mettre en avant. Le contenu est la raison même pour laquelle les utilisateurs se rendent sur le site, sa présentation doit donc être soignée.

Trouver l'équilibre entre esthétique et fonctionnalité

Alors que vous commencez à travailler sur l'aspect esthétique du site (le thème général, la structure de navigation, etc.), n'oubliez pas de penser à son ergonomie ! Demandez-vous si le design que vous avez choisi amène les internautes à rester sur votre site ou les pousse à en partir.

 

Une barre de navigation claire et simple est un moyen efficace pour inciter les visiteurs à continuer d’explorer votre site.

Site à la navigation trop chargée
Site à la navigation trop chargée
Site contenant un nombre de menus idéal
Site contenant un nombre de menus idéal

L'emplacement de la barre de navigation est également un élément déterminant pour l'ergonomie de votre site. Elle peut se situer à gauche ou en haut de page, mais évitez de la placer à droite. Le sens de lecture naturel de l’œil scanne le contenu de la gauche vers la droite. Il est donc peu naturel de devoir lire un menu à droite. 

Toujours plus de fonctionnalités

Vous n'allez pas vous marier avec la/le premier(e) venu(e) sur des critères de beauté ! Certains le font peut-être, mais tôt ou tard, nous avons tous besoin d'une relation moins superficielle. Il en va de même pour la conception de votre site internet.

 

Avant de choisir les photos que vous allez utiliser, vous devez créer ou choisir une structure cohérente.

 

Le style journalistique à trois colonnes est très connu pour de bonnes raisons : il facilite la navigation et la lecture. Ce type de structure fournit une excellente base pour les éléments graphiques que vous ajouterez par la suite. Il est important de se concentrer particulièrement sur les éléments décrits ci-dessous.

L’en-tête : 

Il est essentiel pour la bonne ergonomie du site. Un en-tête réussi comprend tous les éléments importants, à savoir le logo, les menus de navigation... de façon claire et unie.

La navigation : 

Elle doit porter sur l’expérience utilisateur. Une navigation de qualité permet aux visiteurs d’explorer les différentes pages du site grâce à des liens hypertextes.

Le pied de page (footer) :

Il inclut généralement les mentions légales ainsi que des liens de navigation supplémentaires, d'importance secondaire.

L’arrière-plan :

Il peut simplement s’agir d’une image ou d’une couleur. Avec l’expérience, vous apprendrez à maîtriser certaines techniques permettant de mieux l'adapter à la mise en page générale, en ajoutant de la texture à l’image d’arrière-plan par exemple.

Les nouveaux designs Jimdo permettent de personnaliser l'ensemble des points mentionnés ci-dessus
Les nouveaux designs Jimdo permettent de personnaliser l'ensemble des points mentionnés ci-dessus

Optimisation de vos images

Les images animées sont le meilleur moyen pour détourner l’attention des visiteurs du contenu tout en augmentant le délai de chargement du site. Si vous devez absolument inclure des images animées, faites-le avec parcimonie.

 

Pour garder un temps de chargement au plus bas, assurez-vous que la taille des images que vous utilisez soit raisonnable. Pour diminuer la taille des images, vous pouvez par exemple réduire la taille des fichiers avec des logiciels photo simples comme Paint, ou pixlr.com. Voici les formats de fichier image les plus courants sur le web :

GIF

un format permettant de créer des images animées comme celle ci-dessous. Les images GIF peuvent être compressées sans perdre en qualité.

JPEG

un format pour photo permettant de compresser fortement une image : son poids diminue, et son temps de chargement aussi ! Ce format est donc idéal pour les e-mails et bannières. La taille et la définition peuvent être entièrement contrôlées. Attention cependant à ne pas trop compresser, pour ne pas trop abimer vos images.

PNG

un format pour photo qui compresse moins vos images que le JPEG, mais qui fait également moins de compromis sur la qualité de définition après compression. Il permet également de laisser certaines zones transparentes. C’est le format optimal pour le web, suivi du JPEG, qui permet une plus grande compression.

Choix d'une police de caractère appropriée

N’oubliez pas que le design que vous créez est destiné à un écran, et ne sera pas imprimé ! Vous devez donc repenser votre façon d’utiliser les polices : avec ou sans empattement ?

 

Les lettres sérif ont par définition des empattements à leurs extrémités. Cette spécificité fait qu’en petite taille, les polices sérif apparaissent « brouillonnes » et pixélisées. Les polices sans sérif en revanche sont plus claires et aérées : parfait pour une utilisation web !

Contrairement aux règles en vigueur dans l’imprimerie, les webdesigners optent généralement pour les polices sans sérif pour le texte principal, tandis que les polices sérif sont plutôt utilisées pour les titres.

Choix de menu de polices Jimdo
Choix de menu de polices Jimdo

Il est important de ne recourir qu’à deux ou trois polices et que celles-ci soient largement répandues. Les familles de polices telles que Verdana ou Helvetica sont plus sûres.

Voilà pour l’essentiel du webdesign !

N’hésitez pas à laisser un commentaire ci-dessous pour partager vos conseils et astuces.

Et en bonus : La check-list Jimdo !

Pour que vous puissiez vous rappeler les étapes importantes et réaliser ponctuellement un petit lifting de votre site, voici la check-list Jimdo ! À imprimer et à utiliser sans modération !

Télécharger la check-list Jimdo
La checklist Jimdo.pdf
Document Adobe Acrobat 910.2 KB

Profitez d'une offre exclusive sur 99designs.fr en démarrant votre projet graphique (logo, webdesign, illustration...) aujourd'hui.
Cliquez ici pour recevoir 25€ de réduction et un pack d'options d'un valeur de 75€.
Si vous avez des questions, n'hésitez pas à contacter l'équipe support 99designs.



Siham Belouadheh,

Marketing Manager Europe chez 99designs 

Ces articles peuvent aussi vous intéresser :


Écrire commentaire

Commentaires : 27
  • #1

    tangram-channel (vendredi, 12 septembre 2014 10:10)

    Bonne idée cette checklist, à méditer.

  • #2

    Erika (vendredi, 12 septembre 2014 10:20)

    merci pour tous ces conseils !!

  • #3

    joailettes35 (vendredi, 12 septembre 2014 12:36)

    Merci pour tous ces conseils.
    Petite question : j'ai positionné sur ma page d'accueil des photos "en mosaïque" - y a t-il une solution pour les centrer sur la page ?
    Bonne continuation dans les évolutions

  • #4

    joailettes35 (vendredi, 12 septembre 2014 12:52)

    Nouvelle question : avec DUBLIN, j'ai changé le Design pour avoir une barre de navigation à gauche OK
    Comment faire avec ce Design pour que la colonne de navigation soit toujours de la même long que le corps du site ? Y a t-il un code à modifier dans ce template ? Merci de votre réponse

  • #5

    Équipe Jimdo (vendredi, 12 septembre 2014 14:12)

    Bonjour @joaillettes35, la solution pour centrer vos photos est d'utiliser le module colonne :) Ainsi vous pourrez placer la galerie photo dans la colonne de droite et régler la taille pour centrer le tout comme vous le souhaitez. Facile et pratique !
    En ce qui concerne la longueur de la navigation, vous ne pouvez pas la régler automatiquement selon la longueur du corps du site. Que souhaitez-vous obtenir exactement ? N'hésitez pas à contacter le support pour vous aider plus précisément. Il est plus simple de traiter ce genre de question par email ;) Bon week-end.

  • #6

    jeremy renault (vendredi, 12 septembre 2014 23:38)

    Merci Jimdo :-)

  • #7

    olivier de Béchevel (samedi, 13 septembre 2014 05:08)

    Bonjour à toute l'équipe et merci pour tous ces conseils!

  • #8

    Fleurs et Déco du bassin d'Arcachon (samedi, 13 septembre 2014 07:30)

    Merci bonne journéé

  • #9

    pasapas-savigny (samedi, 13 septembre 2014 21:00)

    Que de bons conseils ! .... Il va me falloir maintenant reprendre mes 4 sites à tête reposée pour une mise en application !

  • #10

    Brigitte Britavit (dimanche, 14 septembre 2014 09:32)

    Design Cairo, version bleu-gris foncé
    J'ai des difficultés d'affichage des sripts html (issus du site france-voyage.com). Ci-dessous 2 cas:

    1) Pas lisible: l'écriture étant en noir sur le fond foncé, ce n'est pas très lisible par l'internaute
    <script type="text/javascript" charset="utf-8" src=
    "http://www.france-voyage.com/scripts/proprietaires/appreciations.php?id=30157&amp;lang=fr&amp;nb=4&amp;details=sans&amp;lienajout=bas&amp;lienplus=avec&amp;fonts=arial">
    </script>
    2) les infos-bulles n'apparaissent pas (ou seulement une partie en bas d'écran)
    <script type="text/javascript" charset="utf-8" src="http://www.france-voyage.com/scripts/pro/calendrier.php?id=32200&amp;lang=fr&amp;width=3&amp;height=4&amp;mode=ds&amp;fonts=arial">
    </script>
    Cela m'embêterait d'avoir à changer de design et de tout recommencer (couleurs textes....)
    Merci pour votre réactivité et votre réponse à ma précédente question sur la flèche haut de page.

  • #11

    Équipe Jimdo (lundi, 15 septembre 2014 09:03)

    Bonjour Brigitte Britavit, bravo pour la refonte de votre site en tous les cas ! Il est trés beau ! En ce qui concerne les problèmes d'affichage, pourriez-vous renvoyer votre email au support svp afin que l'équipe regarde cela de plus près ? En effet, il est difficile de traiter de ces questions là via les commentaires de blog. Merci. Nous vous répondons dès réception.Bonne journée.

  • #12

    Brigitte Britavit (lundi, 15 septembre 2014 12:37)

    merci pour les compliments, c'est vos nouveaux design qui sont beaux tout d'abord!

  • #13

    cyclosdijon (vendredi, 19 septembre 2014 20:37)

    Super sympa votre site un GRAND MERCI

  • #14

    Marielle (samedi, 27 septembre 2014 08:13)

    Bonjour et merci pour ces nouveaux visuels. Cela change beaucoup ; le site est mis plus en valeur ; c'est clair et aéré.

    Merci pour les explications faciles à mettre en pratique surtout lorsqu'il y a 2 sites à reprendre.

    Bravo à vous tous.

  • #15

    abdelk (lundi, 06 octobre 2014 21:50)

    merci et bon contenu

  • #16

    pinsaguelautrement (mercredi, 22 octobre 2014 11:02)

    Bonjour Jimdo et merci pour cette nouvelle interface. Effectivement elle est beaucoup plus plaisante à travailler.
    Deux questions :
    - je souhaite mettre des menus déroulants de façon à avoir une vision et une accessibilité beaucoup plus facile des sous-menus
    - Je souhaite également intégrer une pétition. Avez-vous une solution ? Je pensais intégrer un widget mais je n'ai rien trouvé ou mal cherché sur la toile.
    Merci par avance pour tous vos conseils !
    Cordialement,

  • #17

    Équipe Jimdo (mercredi, 22 octobre 2014 11:26)

    Bonjour @pinsaguelautrement,

    et merci pour votre retour !

    Si vous souhaitez utiliser des menus déroulants, choisissez un design avec menu déroulant, pour vous aider à les identifier plus facilement, nous avons créé cette page d'aide en ligne :
    http://aide.jimdo.com/mise-en-page/index-des-designs/

    Concernant une pétition, pourquoi ne pas utiliser notre élément livre d'or ? Les signataires peuvent laisser leur adresse e-mail et éventuellement un message par exemple. Sinon, il doit probablement exister quelque par un widget permettant de réaliser cette fonction et de l'intégrer via l'élément widget HTML. Un simple formulaire Google par exemple ?

    Cordialement,

    Jérémie

  • #18

    pinsaguelautrement (mercredi, 22 octobre 2014 11:34)

    Rebonjour !
    Désolée encore une demande... Certaines de mes pages ne sont pas très lisibles étant donné l'image de fond. Serait-il possible de superposer un voile transparent de couleur afin de rendre l'écriture lisible ?
    Merci beaucoup par avance pour votre réponse !

  • #19

    pinsaguelautrement (mercredi, 22 octobre 2014 12:54)

    Merci beaucoup pour votre réponse rapide ! Le problème c'est que le site est déjà en ligne et commence tout juste à prendre un peu d'importance. Etant donné le domaine traité, changer le style maintenant risque de déstabiliser le public. Une autre solution possible ?

  • #20

    Équipe Jimdo (mercredi, 22 octobre 2014 16:51)

    Re-bonjour,

    Il est possible de choisir la couleur du corps de page de votre site avec les nouveaux designs le nouvel éditeur de style, mais pas avec l'ancien.

    Ensuite, il existe des styles très similaires à celui que vous utilisez actuellement et qui ne devraient pas poser de problèmes à vos visiteurs. Cela n'a en outre aucune influence sur votre SEO.

    Pour plus de détails, merci de vous adresse directement à notre service de support : http://aide.jimdo.com/contact/

    Bonne fin de journée !

    Jérémie

  • #21

    bDom (lundi, 27 octobre 2014 09:42)

    à signaler également que le format PNG (et GIF, plutôt destiné aux logos/marques) permet d'avoir un fond transparent. Ce que ne permet pas le JPEG

    J'utilise cette particularité sur mes sites et sites amis
    ✔ www.bdom.info
    ✔ www.lacaseboischeri.com
    ✔ www.mapetiteentreprise.mobi

    bDom

  • #22

    Équipe Jimdo (lundi, 27 octobre 2014 14:03)

    Bonjour @bDom ,

    Merci, vous avez raison, cette précision devrait figurer dans l'article, je vais le modifier dès maintenant.

    Cordialement,

    Jérémie

  • #23

    Simon@Incenteev (vendredi, 21 novembre 2014 12:49)

    Votre check-list est extra, on est heureux de pouvoir la télécharger ! Votre article nous apporte beaucoup d'information utile. Je le recommande fortement.

  • #24

    peggycmedium (jeudi, 11 décembre 2014 17:20)

    bonjour je ne peux mettre aucune entete car aucune de mes images n est adapte,
    l' image se retrouve toujours au milieu comme un petit carré

  • #25

    mangalovelive (dimanche, 14 décembre 2014 13:26)

    Merci grâce a vous je vais pouvoir finir mon site. Mais sa bloc un moment quand je veux rajouter des articles. C'est normal ?

  • #26

    A World Fimo (samedi, 04 juillet 2015 11:28)

    Bonjour, je cherche à avoir ce design : http://mangalovelive.jimdo.com/
    Pouvez-vous m'aider ?
    S'il vous plaît !

  • #27

    L'Équipe Jimdo (lundi, 06 juillet 2015 20:24)

    Bonjour @A World Fimo,

    Il s'agit malheureusement d'un ancien design, qui ne fait plus partie de notre catalogue. Nous l'avons remplacé par de nouveaux designs plus modernes ! Vous trouverez surement votre bonheur à l'aide de notre index des designs : http://aide.jimdo.com/mise-en-page/index-des-designs/

    Cordialement,

    l'équipe Jimdo !