webdesigner pro

Comment devenir un web-designer professionnel (étape par étape) !

Publié par | Catégories : Création de sites - Design graphique

Dernière mise à jour : 30 septembre 2016

Dans cet article, je vais vous parler des erreurs que la plupart des webmasters et webdesigners commissent dans la création du thème de leurs sites web.

Je vais parler du choix de couleurs et comment les bien choisir, qui peuvent donner de l'inspiration aux visiteurs de votre site dès la première seconde. Je vais vous parler sur la couleur secrète, que seuls les professionnels connaissent !

Pour savoir ces astuces, lisez bien et attentivement cet article !

web designer professionnel

Comment peut-on savoir si un design est professionnel ou non ?

Pour mieux comprendre, je vais utiliser deux images différentes, la première est un exemple d'un site-web qui n'est pas professionnel, dans la deuxième image, une impression d'écran d'un site-web professionnel.

NON-Professionnel

Voici une impression d'écran d'un site-web que j'ai trouvé en cherchant dans le moteur de recherche Google, seulement pour ne pas parler d'un site d'un webmaster que j'ai choisi cet exemplaire.

Comme vous remarquez, le design est plein de couleurs, un mélange entre le jaune, rouge, vert, marron, rose...

En effet toutes les couleurs ! Les fonts non respectés, pas de logo, pas de respects ! Un design qui n'est pas fait pour le WEB.

worstweb

Source : Google images, bad design.

Professionnel

Le design professionnel, c'est le design qui vous inspire, qui rend le monde autour de vous, plus agréable !

Le professionnel n'utilise que trois couleurs au maximum (une couleur de base + autre couleur secondaire + la couleur secrète dont je vais vous parler dans la suite de cet article).

themepro

Un zoom :

themepro2

Dans ce qui suit, je vais vous parler les astuces que chaque web-designer débutant doit utiliser pour développer et développer son niveau dans le web-design et pourquoi pas se classer parmi les meilleurs concepteurs de sites web dans le monde !

Regardez & inspirez !

Regardez comment les autres concepteurs de sites Web (web-designers) créent leurs sites et inspirez vous en regardant plusieurs exemplaires, notez comment une zone de menu ou le contenu est présenté et ensuite utiliser ces connaissances dans vos créations.

Apprenez bien L'HTML et le CSS !

Vous aurez besoin d'acquérir des compétences en XHTML (Extensible Hypertext Markup Language) et CSS (Cascading style sheet).

Fondamentalement, tous les sites Web sont écrits dans une combinaison de ces deux langues. Un bon endroit pour commencer leur apprentissage est à W3Schools ou bien par la catégorie WEBMASTERING dans ce site-web. Les bons livres à ce sujet sont également utiles.

Et pour ceux qui veulent créer des sites Web dynamiques en utilisant PHP et MySQL. Je leur dis que ces technologies vous permettent de créer un site qui ne vous obligent pas à prendre des décisions individuelles des pages HTML, mais cela vous permet d'utiliser des modèles pour afficher plusieurs pages dans le même design.

Cependant, je vous conseil de débuter avec un script CMS, comme WordPress utilisé par ce Blog.

Travaillez en locale puis publiez sur Internet !

Installer un serveur web sur votre ordinateur afin que vous puissiez travailler sur des scripts en local sans connexion Internet.

Je vous recommande d'installer le Wamp Server, voici un tutoriel que j'avais créé sur ce programme : http://www.easytutoriel.com/comment-creer-un-serveur-local-php-mysql.

Le choix des couleurs et la couleur secrete !

Comment choisir de bons couleurs, selon le thème de votre site

Les chercheurs conviennent que les couleurs influencent grandement l'état ​​d'esprit de l'homme. La palette de couleurs que vous utilisez sur votre site web peut inciter le visiteur à s'engager dans le but de votre site (à faire un achat ou une demande de vos services) ou à quitter votre site-web sans revenir.

Même si elles ne sont pas au courant, vos visiteurs seront grandement influencés dans leur décision de continuer à naviguer sur votre site ou de le quitter à cause de la mauvaise sélection de couleurs et d'autres éléments visuels affichés.

Voici la différence dans une image :

bienpasbien

La couleur que vous regardez par tout, alors que vous ne la connaissez pas !

Malheureusement, les débutants dans ce domaine, ne la connaissent pas. Alors qu'ils commencent par six couleurs différentes pour faire le design de leurs sites, alors qu'ils se croient qu'en mettant le plus grand nombre de couleurs on peut atteindre notre but, c'est de créer un design, ou bien un site avec un design très professionnel ! C'est qu'en éliminant cette couleur, vous aurez moins de possibilités pour que votre design soit professionnel !

C'est la couleur qu'on trouve dans plusieurs site-web professionnel (Google, Youtube, Bing, Dailymotion..).

Eh oui ! C'est la couleur qui se trouve dans ce site-web (EasyTutoriel.com), la couleur grise clair, ou bien la couleur grise en général !

A mon avis, j'ai passé plus de quatre ans dans le domaine du web-design sans que je puisse connaître cette couleur, même si je la regardais plusieurs fois dans la journée !

Un web-design professionnel, doit sans aucun doute se baser sur cette couleur.

Bref, la couleur Gris est la couleur qui fait la différence entre un design professionnel et un design fait par un amateur.

Voici l'effet de la couleur grise dans une image en tant qu'arrière-plan :

grissansgris

La pratique, c'est le plus important !

Créez votre site-web, pratiquez les divers astuces et tutoriels que j'ai posté dans ce site-web !

Si vous rencontrez des problèmes en ce qui concerne le web-design, n'hésitez pas à me contacter par ce formulaire de contact.

Personnellement, je ne savais pas il y a longtemps ce que signifie la balise <html> !
Je ne savais jamais comment le web agit !
Mais avec la volonté et la curiosité, je suis devenu un Web-designer professionnel.


Et vous ? Comment vous êtes devenus des web-designers ?

Avez-vous des conseils pour les débutants dans ce domaine ?

Et pour ceux qui débutent dans ce domaine, avez-vous des questions ?


Soufiane - EasyTutoriel.com

Soufiane - Easytutoriel.com


L'auteur :

Soufiane est un jeune informaticien et spécialiste en web-design, connait pas mal de choses du monde informatique. Ce passionné aime aider les gens à innover et à en savoir plus du monde informatique...

Déjà 19 commentaires ! { Ajouter le vôtre ? }

  • Dream dit :

    Bonjour,
    Super l’article, beaucoup de choses à apprendre et à répandre à tout le monde, ça c’est sur.
    Cordialement,

    Web admin de https://oshun-beauty.com/

  • Aurelie dit :

    Super article! Je suis professionnelle sans le savoir, car j’ai appliqué d’instinct ces principes (dominante grise + 2 couleurs) au design de mon blog…

  • jean-pascal dit :

    vraiment je manque de mots pour qulifier la qualité et la perfection de votre travail…tout simplement je manque de mots….en un seul mot je dirai M. Soufiane SABIRI, c’est tout simplement remarquable ton site en générale et en particulier tes tuto…j’aime…Merci et j’aimerais que vous ajoutiez encore d’autres tuto encore plus attractifs pour un débutant….vraiment j’aime…bonne continuation M. le WEB DESIGNER Soufiane peax et lov and unity :)

  • John Will dit :

    Actually this is very great tutorial.
    I was fonf of it.
    Thanks for sharing.

  • vovo dit :

    Bonjour, je viens de lire cette article, et je ne comprend pas bien la différence dans votre image « Bien, Pas bien » dans la paragraphe : « Le choix des couleurs et la couleur secrete ! »

    Merci d’avance. :wink:

  • Rxmain dit :

    Merci pour ce tutoriel.

    Pour répondre aux trois questions finales:
    Âgé de mes 15ans, j’ai découvert le web-design grâce à un stage dans l’infographie il y a un an.

    Je maîtrise le xHTML & le CSS, mais en apprentissage du jQuery, Php & SQL.

    C’est en parcourant des blog en ce genre que j’en apprends d’avantage à l’aide de professionnels.

    Merci.

  • AHMEDI dit :

    Merci bien pour les tuto.

    Si c est possible de faire des tuto avec des vedio .

    karim salutation .

  • aaronnapster dit :

    bonjour SABIRI merci bien pour cette remarque de couleur donc je pense que moi aussi je début professionnel car c est ma couleur préféré(gris claire) merci une fois de plus… :woot:

  • Oniesta dit :

    Salut Sofiane!

    Vow Vow Vow!!!!!!très impressionnante, quelle merveille ce site!
    Merci Sofiane pour ce tuto, et tes commentaires, il va m’aidé énormement.

    Milles MERCI.

    • Soufiane Sabiri dit :

      Bonjour Oniesta,
      Vraiment vous m’avez impréssioné avec vos commentaires !
      Ca va m’aider à écrire des nouvelles articles plus clairs et plus professionnels :)
      Merci encore une fois pour vos commentaire Oniesta !
      Amicalement,
      Soufiane

  • Soufiane Sabiri dit :

    Bonsoir,
    Je suis tout-à-fait avec vous !
    Merci pour le site-web, je le trouve plus facile à utiliser que Adobe kuler ^^
    Amicalement,
    Soufiane

  • rick44 de formations-sur-internet.com dit :

    Bonjour Soufiane,

    Merci pour cette leçon de design et je viens de voir que tu as mis cette technique lorsque tu as fait le logo de mon blog.

    Pour ceux qui désirent voir le travail de Soufiane et la mise en application au niveau de la couleur grise c’est par ici > http://formations-sur-internet.com/

    Amicalement,

    Rick44

    • Soufiane dit :

      Bonjour Richard,
      Vous savez ? La plus part des gens ne connaissent pas que la couleur gris a un effet incroyable dans le web-design, et qu’on peut avec la couleur gris et autre couleur seulement (2 couleurs) créer un site-web très professionnel !
      Cordialement, Soufiane

  • Jom dit :

    Merci pour ce bon article bien rédigé.

    J’aimerais seulement ajouter une plus value en ce qui concerne le choix des couleurs. La société Adobe propose sur leur site quelques applications qui aident et donnent des propositions de couleurs plutôt harmonieuses entre elles, notamment, l’application « Contrast-A » qui te laisse le choix de la couleur du texte en plus de celle de l’arrière plan pour te donner une note ou plutôt une appréciation de 4 conditions qui doivent être remplies. La deuxième application s’appelle Kuler que vous pouvez y accéder directement via ce site http://kuler.adobe.com/, cette application contient plein de palette de couleur que vous pouvez utiliser en plus qu’elle contient une mini application qui vous oriente vers le bon choix des couleur; en choisissant une couleur, l’application vous donne automatiquement 4 couleurs qui vont avec. Vous pouvez consultez cette mini application via le même site en choisissant dans le menu a gauche « Create ».

    Vous pouvez télécharger la première application par ici : http://www.adobe.com/cfusion/marketplace/…
    La deuxième par là : http://www.adobe.com/products/kuler/ en choisissant dans le menu a droite « Get the Kuler desktop ».

    Voilà voilou ! Bonne continuation Soufiane :)

    • Soufiane dit :

      Bonsoir,
      Voici le premier commentaire dans ce Blog qui dépasse les 25 lignes :) !!!!
      Je me suis reboosté grâce à votre commentaire de qualité Jom !
      En ce qui concerne la palette de couleurs, je trouve l’application kuler très puissante ! C’est un info. de plus pour les web designers professionnels, ceux qui cherchent des palettes prêts pour décorer en professionnalisme leurs design et leurs sites web en général.
      Et j’aime bien le « Voilà voilou » ^^
      Merci pour votre commentaire Jom, faites de beaux rêves !
      Amicalement, Soufiane.

  • Maryse - L'Araignée tricote le Web dit :

    Bonjour,

    C’est vrai que le gris fait très professionnel, et c’est bien de se limiter à trois couleurs, sinon ça fait trop chargé.

    Tu pourrais aussi parler de comment disposer les éléments dans un design web pour inciter le visiteur à regarder où on veut et à lire nos texte au lieu de se laisser distraire par toutes sortes de gadgets en périphérie.

    Maryse

    • Soufiane dit :

      Bonjour Maryse,
      Je suis totalement avec vous ! Je vais parler de ça dans un autre article, avec des images et pourquoi pas une vidéo pour mieux comprendre !
      Et n’oubliez pas que la couleur gris, c’est la clé du professionnalisme !
      Soufiane

  • Amine dit :

    j’aime bien l’idée.
    bonne continuation

  • J-AO dit :

    j’aime ;)

  • Publier un commentaire :

    xD oO ^_^ =] =) ;-( ;) :| :woot: :whistle: :sleep: :sick: :police: :p :o :ninja: :mm: :love: :lol: :kiss: :hmm: :evil: :bandit: :angel: :alien: :D :) :( 8)