Aide S'inscrire

10 conseils designs pour un site professionnel

Vous avez créé vous-même votre site et vous en êtes satisfait ? Mais vous aimeriez qu'il ait l'air un peu plus professionnel... C'est parfois plus simple qu'il n'y paraît ! Avec un peu de savoir-faire et quelques astuces, vous pouvez utiliser les techniques des designers professionnels, et donner ainsi rapidement à votre site web un aspect plus pro. Il suffit parfois de peu pour rendre votre site plus lisible pour vos lecteurs.

 

Découvrez tout de suite nos 10 conseils en matière de design !


1. Choisissez 1 ou 2 accents de couleurs, et conservez-les

Vous pouvez utiliser toutes les couleurs que vous souhaitez sur votre site Jimdo. Mais vous n'avez pas besoin d'une palette de couleurs très étendue pour obtenir de bons résultats. Ce que beaucoup de designers font, c'est de choisir seulement quelques couleurs et de les conserver tout au long de votre site web.

 

Les sites au design professionnel ont souvent une prédominance de blanc, des textes noirs et une ou deux couleurs qui ressortent. Voici un exemple de site Jimdo qui suit cette approche :

www.edition-noto.de
www.edition-noto.de

Où utiliser ces accents de couleurs sur votre site ? Par exemple, dans vos :

  • Titres
  • Liens
  • Navigation
  • Boutons
  • Traits de séparation

Et quelle couleur choisir ? Une couleur déjà présente dans votre logo, ou votre image d'arrière-plan peut être une bonne idée. A ce sujet, notre article sur la signification des couleurs sur un site web pourra vous être utile.

 

Si vous vous décidez pour une couleur un peu franche ou osée, utilisez des couleurs assez discrètes sur le reste de votre site, comme le blanc, le noir ou le gris.

2. Sélectionnez 2 ou 3 polices de caractères

Les bons designers savent comment trouver l'équilibre entre des polices de caractère classiques et très faciles à lire, et d'autres plus originales. Vous verrez que souvent, ils utilisent une police qui sort du lot pour leurs titres par exemple. Mais ce sont les polices lisibles comme Open Sans qui l'emportent en ce qui concerne le corps de leur site.

Parfois ils utilisent une troisième police complémentaire pour les menus de la navigation, mais celle-ci doit rester simple et lisible. 

www.edition-noto.de
www.edition-noto.de

3. Investissez dans un logo

Si vous réfléchissez sérieusement à rendre votre site plus professionnel, le logo est très bien pour commencer. Il donnera tout de suite l'impression à vos visiteurs que votre entreprise est établie et sérieuse. Et cela donnera aussi le ton pour les couleurs et les polices que vous utiliserez sur votre site.

 

Nous vous conseillons de faire appel à un professionnel, plutôt que de créer votre logo vous-même. Un professionnel pourra concevoir pour vous quelque chose de très créatif et de qualité afin que vous puissiez l'utiliser dans différents contextes, pas uniquement sur votre site web. N'hésitez pas à contacter notre partenaire 99designs, expert dans la création de logo.

www.newmanslayer.com
www.newmanslayer.com

4. Utilisez l'espace blanc

Si vous vous y connaissez un peu en web design, vous avez certainement déjà entendu le terme “espace blanc”. Ce terme fait référence à l'espace autour de vos éléments. Cela ne veut pas dire que cet espace doit forcément être blanc, mais simplement vide : en effet il est important de laisser respirer les éléments sur votre site, et de ne pas trop remplir vos pages de contenus.

 

Les sites web avec beaucoup d'espace blanc sont plus simples à lire pour les visiteurs. Cela donne des sites plus ordonnés, élégants et sophistiqués - et aide les visiteurs à trouver ce qu'ils cherchent.

 

Ce site Jimdo montrt bien comment utiliser l'espace “blanc” ou vide :

www.mwiduch.jimdo.com
www.mwiduch.jimdo.com

Comment mettre plus d'espace blanc sur votre site web ? Vous pouvez utiliser les éléments Colonnes et Espacement. Utiliser l'espacement pour ajouter verticalement de l'espace entre les différents modules de votre site et ainsi aérer votre contenu. Et pour ajouter de l'espace sur les côtés d'un élément, utilisez les colonnes et laissez certaines colonnes vides.

5. N'utilisez pas trop de texte

Combien de textes vos visiteurs sont-ils disposés à lire ? La réponse est : peu. Le temps d'attention en ligne est plutôt court et les gens veulent trouver l'information dont ils ont besoin tout de suite. S'ils ne peuvent pas la trouver, ils iront ailleurs. Si un visiteur vient sur votre site et voit uniquement de grands blocs de textes sur toute la largeur de votre page, il sera découragé et n'aura pas envie d'aller plus loin.

 

La première étape est de prioriser les informations et de supprimer tout ce qui n'est pas essentiel. Pouvez-vous faire passer votre message en un paragraphe plutôt que deux ?  Pouvez-vous éliminer certaines pages de votre site pour raccourcir votre menu de navigation ?

 

Une fois que vous avez fait un peu de tri, insérez des images et des titres, et entourez votre texte d'espace vide. Enfin, utilisez des colonnes pour structurer vos textes.

Pour en savoir plus, lisez notre article : Ecrire pour internet - 6 conseils pratiques.

www.happykidspre-school.com
www.happykidspre-school.com

6. Utilisez des icônes

Les icônes sont un bon moyen d'ajouter des visuels à votre site sans faire appel à un designer.

 

Vous les verrez souvent sur des réalisées par des professionnels du design. Elles structurent le texte, ajoutent de la couleur à votre site et renforcent les informations qui se trouvent dans vos textes.

www.authea.de
www.authea.de

Il existe de nombreux sites qui proposent des icônes gratuites, et vous pouvez même en personnaliser les couleurs pour qu'elles correspondent à votre site. Consultez cet article de blog pour trouver des icônes gratuites pour votre site.

 

Une fois que vous avez trouvé des icônes, chargez-les dans un élément Image. Et n'hésitez pas à utiliser des colonnes pour bien les aligner les unes à côté des autres.

7. Alignez soigneusement vos contenus

Pour avoir un rendu professionnel, il est important de prendre le temps de vous assurer que tout est soigneusement aligné sur votre site web. Cela demande un peu d'effort mais c'est nécessaire pour avoir un site clair et soigné.

 

L'arme secrète en matière d'alignement, c'est l'élément Colonnes. Utilisez-les pour placer vos différents éléments côte à côte.

www.nopierdastuslibros.com
www.nopierdastuslibros.com

Un autre secret de site au design de pro : n'ayez pas peur de raccourcir les textes afin qu'ils s'intègrent exactement à l'endroit souhaité. Dans l'exemple ci-dessus, le texte de chaque colonne a la même longueur, ce qui fait que chaque colonne a la même longueur également. 

 

Un dernier conseil en matière d'alignement : alignez vos blocs de texte à gauche plutôt qu'au centre. Il peut être tentant de centrer vos textes car vous avez centré tout le reste - comme vos titres ou icônes par exemple - mais il est plus facile de lire des textes qui ont une marge à gauche (comme les textes d'un roman ou d'un journal). Cela donne aussi un rendu plus soigné car vos lignes de texte ne seront pas irrégulières comme elles le seraient si vous les centriez.

8. Investissez dans de bonnes photos

Les photos ont un impact énorme sur votre site. C'est souvent ce qui va faire la différence. En général, les designers choisissent des photos de bonne qualité et qui ont un style similaire. Puis ils les recadrent afin qu'elles aient la même taille et des proportions identiques avant de les charger sur leur site. Ainsi, les photos seront bien alignées les unes à côté des autres.

www.ilonavandenbergh.be
www.ilonavandenbergh.be

Si vous avez du mal à trouver des photos de qualité, jetez un oeil à notre rubrique d'aide, nous y avons listé plusieurs banques d'images modernes et de qualité.

 

Une fois que vous avez trouvé les bonnes photos, il est utile de passer un peu de temps à les retoucher et recadrer, en utilisant PhotoShop ou un programme gratuit comme Pixlr. Par exemple si vous savez que vous voulez trois images en rang, recadrez-les à la même taille. Puis chargez-les dans un élément Colonne, et elles s'aligneront parfaitement.

 

Si vous voulez aller plus loin, lisez nos 7 conseils de pro pour optimiser vos images

9. Développez un design cohérent et utilisez-le sur chaque page

Dans tous ces conseils il est question d'une chose : la cohérence. Vous pouvez également appliquer ce principe au design de votre site. Par exemple si vous commencez vos pages A propos avec un grand titre, un trait de séparation et un élément Espacement de 20 px, assurez-vous alors de faire la même chose sur toutes vos pages. 

 

Essayez d'utiliser un design similaire sur chaque page, avec des photos d'une taille équivalente et la même position pour vos différents boutons.

Enfin, assurez-vous d'utiliser des lettres capitales de la même manière sur toutes vos pages. Par exemple, tous les menus de votre navigation doivent commencer par une lettre majuscule comme Accueil, A propos, Boutique, Contacts plutôt que Accueil, a propos, Boutique, Contact. Faites la même chose pour vos titres et boutons.

www.ungermusic.de
www.ungermusic.de

10. Choisissez la bonne image d'arrière-plan

Pour bien utiliser la fonction Arrière-plan sur votre site, vous devez d'abord imaginer comment votre texte et votre logo apparaîtront par-dessus votre image de fond. Par exemple, si votre logo et votre texte de header sont centrés, c'est une bonne idée de vous assurer que l'élément principal de votre image d'arrière-plan n'est pas lui aussi centré, car il sera alors bloqué par le logo et le texte.

 

Dans l'exemple ci-dessous, voyez comment la photographe de mariage Alina Atzler a choisi des superbes images d'arrière-plan dont le sujet se trouve sur le côté, ainsi cela n'interfère pas avec le logo placé au centre.

www.alina-atzler.de
www.alina-atzler.de

Pour éviter ce genre de problème, vous pouvez aussi choisir une image plus abstraite - comme une image de paysage par exemple. Pensez à vérifier que les textes de votre site sont bien lisibles sur les photos d'arrière-plan. Et n'oubliez pas que vous pouvez régler à tout moment la couleur de police dans l'éditeur de style.

 

 

Pour résumer en quelques mots les conseils de cet article :

Soignez vos pages.

N'utilisez pas trop d'éléments et de contenus sur votre site. 

Et ce que vous utilisez sur votre site, utilisez-le de manière constante d'une page à l'autre.

 

A bientôt !

Mathilde Kurtz

Rédactrice web


Écrire commentaire

Commentaires : 9
  • #1

    nsongola (mercredi, 23 mars 2016 07:59)

    Merci pour se cite que vous aves inventé.

  • #2

    TangramChannel (mercredi, 23 mars 2016 08:16)

    Et comme ça tous les sites se ressembleront... ;)

  • #3

    Azarnait (vendredi, 25 mars 2016 16:31)

    j'aimerais savoir comment faire pour vendre de la musique par téléchargement de mon site Jimdo,et combien ça va me coûte autre chose j'avais un nom de domaine jimdo. comment il faut faire pour le reprendre ?

  • #4

    sottana (mardi, 29 mars 2016 12:08)

    Bonjour,
    Nous sommes une petite association, je crée le site, le BLOG me pose soucis, c'est moche et brouillon qui peut m'aider ???
    D'avance merci
    Une maman débordée ;)

  • #5

    Mance (mardi, 29 mars 2016 15:28)

    Bonjour ! Ca serait super si vous pouviez développer la fonctionnalité de pouvoir proposer à nos clients sur le E-shop différentes options de livraisons et donc différents montants de frais de port ;) Ca manque véritablement !
    Très bonne journée

  • #6

    abdellouahabselka@yahoo.fr (jeudi, 07 avril 2016 12:43)

    Bonjour l'équipe Jimdo
    Je tiens à vous remercier pour votre agréable faire-play.
    Bien cordialement à vious

  • #7

    Émile Reich (jeudi, 07 avril 2016 15:42)

    Bonjour,
    Merci pour votre site.
    Bien que ne répondant pas exactement à ce que je souhaitais faire, je n'ai pas eu le courage de recréer de toutes pièces un nouveau site (ce que j'avais déjà fait auparavant) et vous m'avez permis de faire simplement une plateforme pour l'information que je souhaitais apporter.

  • #8

    Rodolphe (mercredi, 06 juillet 2016 16:00)

    Merci pour cet article. Intéressant. Récemment, j'ai changé l'esthétique de mon site internet voyant qu'il n'était pas assez moderne et fluide.

    Cela étant, concernant le "5. N'utilisez pas trop de texte" ; pour mon site en grande majorité composé de chroniques et d'interviews, l'écriture, le texte est au centre de chacun de mes articles c'est bien normal. De la même façon qu'il n'aurait jamais fallu faire passer une réforme de l’orthographe destiné à relever le niveau de l'élève en baissant celui de la langue Française, on ne va pas se passer d'écrire pour les internautes...

  • #9

    Web Design (vendredi, 19 août 2016 14:22)

    Quoi de neuf, après avoir lu ce post remarquable que je suis trop heureux de partager mon expérience ici avec copains.