Toute entreprise a besoin d’un site web, et qui dit site web dit design de site web. Mais étant donné que vous vous apprêtez à lire un article sur les différentes façons d’en créer un, vous savez probablement déjà cela.

modern science website design
Design réalisé par 2ché pour sparkingmatt

Se servir d’internet est une tâche plutôt facile, en revanche, on ne se rend pas forcément compte de la difficulté à concevoir, construire et intégrer un site web. Il doit être esthétiquement plaisant, mais il doit aussi être facile d’utilisation. On doit pouvoir le trouver facilement sur Google, et il doit inciter les visiteurs à devenir client… Comment s’y prendre au juste ?
Le petit guide que nous avons compilé dans cet article vous aidera à chacune des étapes de la création de votre site web :

Ce qu’il faut savoir avant de commencer

Apprenez qui est qui dans le monde du design de site web et du développement

web design with grid of diverse faces
Réalisé par Mike Barnes

Quand on a besoin d’un logo pour son entreprise, il est assez simple de faire appel à un graphiste et d’obtenir un produit fini de qualité. Mais ce n’est pas forcément le cas avec les sites internet. S’il existe des individus et des agences capables de créer un site web du début à la fin, il est plus courant de devoir faire appel à plusieurs personnes pour parvenir au résultat final escompté. Voici quelques uns des professionnels avec lesquels vous pourrez être en contact au cours de cette aventure :

Designers Web : il s’agit de graphistes spécialisés en design de sites web. Ils traduisent vos idées en une (superbe) maquette montrant à quoi ressemblera votre futur site internet. Ces maquettes sont généralement faites sur Photoshop ou autre logiciel de design graphique.

Designers UX (expérience utilisateur) et designers UI (interface utilisateur) : ces graphistes-là se concentrent sur l’impact du design sur les utilisateurs. Ils vous aideront par exemple à placer les différents boutons de votre site web pour que les visiteurs cliquent davantage, ou encore à structurer la navigation pour qu’elle soit aussi fluide que possible. (Les designers UX et UI ne font pas exactement la même chose, ce que cet article explique très bien.) Le travail du designer web et celui du designer UX/UI se rejoignent souvent, et si vous avez un petit budget, il ne devrait pas être trop difficile de trouver un freelance offrant ces deux compétences.

Développeurs Web (également appelés codeurs) : ce sont de vrais magiciens capables de parler le langage des ordinateurs. Ainsi, le développeur donnera vie à la (superbe) maquette créée par votre graphiste en la codant, de sorte à ce qu’elle puisse être mise en ligne. Pour compliquer encore les choses, il existe plusieurs langages informatiques, et la plupart des développeurs n’en parlent qu’un ou deux.

Développeurs Front-end : ils sont spécialisés dans tout ce que nous voyons à l’écran en nous rendant sur un site web, c’est-à-dire les images, le texte, les animations, les menus déroulants, la mise en page, etc.

Développeurs Back-end : ces développeurs-là travaillent sur ce qu’il se passe derrière l’écran et qui est nécessaire pour communiquer avec une base de données. (Si vous avez un panier d’achats par exemple, ou encore des profils utilisateurs, vous aurez besoin d’une base de données.)

Référencement, stratégie de contenu, et copywriting sont également des domaines pour lesquels vous pourriez envisager de faire appel à des professionnels pour construire votre site web. Ils peuvent vous aider à déterminer ce dont vous avez besoin pour attirer les bons clients (sur les moteurs de recherche) et les convaincre de faire leurs achats chez vous.

Domaine et hébergement

Tout comme vous le feriez si vous ouvriez un magasin avec pignon sur rue, la première chose dont vous aurez besoin pour créer votre site web c’est d’un emplacement.

switch data center
Lorsqu’on souscrit à un hébergement web, on loue de l’espace dans un centre de données, comme celui que l’on voit ici, situé dans le Nevada. Via switch.com.

Web hosting : il s’agit du serveur, ou encore de l’espace physique où sont rangées toutes les données de votre site web (images, textes et base de données). Vous pouvez acheter votre propre serveur et le mettre dans votre bureau/maison/garage, mais la grande majorité des gens et des entreprises préfère louer cet espace à une société tierce. L’hébergement (c’est-à-dire votre loyer) coûte généralement entre 5 et 20€ par mois, mais les prix peuvent monter rapidement si vous avez énormément de données à stocker. Voici une liste d’entreprises d’hébergement recommandables, mais n’hésitez pas à en parler à votre développeur avant de souscrire à quoi que ce soit, car il/elle pourra peut-être vous faire profiter de prix avantageux.

Le nom de votre domaine c’est ce que les gens devront taper dans la barre d’URL de leur navigateur pour se rendre sur votre site (par exemple, 99designs.com). En général, on choisit le nom de son entreprise. Pour obtenir un domaine, vous devez vous inscrire sur un site spécialisé. Vous devrez également vous acquitter de 10€/an environ, de sorte à conserver le domaine en question. La plupart des services d’hébergement offre également la possibilité d’acheter un nom de domaine, et c’est souvent l’option la plus simple à mettre en place.

Enfin, il faudra que le nom de votre domaine redirige vers votre serveur, c’est-à-dire que lorsque quelqu’un tapera le nom de votre domaine dans leur navigateur, ce dernier ira chercher votre serveur dans ses entrepôts pour trouver la bonne image et le bon texte à afficher. Si ce processus n’est pas compliqué, il peut porter à confusion. Vous pouvez tenter de faire tout cela vous-même, mais vous avez tout à gagner à demander à votre développeur web de s’en charger pour vous.

Structure et contenu

Personne ne va écrire votre contenu pour vous et prendre des photos de vos produits pour vous. En tout cas, ni votre graphiste ni votre développeur ne le fera. Vous devrez fournir tout le contenu qui doit figurer sur votre site, mais aussi décider de sa structure générale.

animation website
Réalisé par Gil Fadilana

Pour la structure, déterminez le nombre de pages dont vous avez besoin. Généralement, cela inclut :

  • Page d’accueil
  • Page À Propos et/ou page de contact
  • Blog
  • Répertoire produit
  • Pages produits individuelles
  • Termes et conditions
  • Galeries
  • Landing pages/pages promotionnelles

Chacune de ces catégories de pages devra être pensée et construite, et chacune devra avoir son propre contenu. Vous n’avez pas forcément besoin de finaliser votre contenu à ce stade, mais vous devez en revanche avoir une bonne idée de ce dont il s’agira, ainsi que de la manière dont vous allez l’obtenir. Vous aurez peut-être besoin de prévoir du temps pour rédiger différents textes (ou engager quelqu’un pour le faire à votre place), ou encore faire appel à un photographe pour prendre tous vos produits en photo, etc. C’est vous qui devez fournir tous les visuels de votre site (logos, photos, etc.), bien que votre graphiste pourra probablement vous aider à trouver des images stocks, si nécessaire.

Qu’est-ce qu’une image stock et comment bien s’en servir ->

Conseil de pro : votre graphiste ( surtout s’il a de l’expérience en UX/UI) aura peut-être de bonnes idées pour votre contenu et pour la structure de votre site. Prenez la peine d’en parler avec lui dès le début du processus.

Fonctionnalités

Lorsque quelqu’un se rend sur votre site web, que voulez-vous qu’il se passe ? Souhaitez-vous que l’internaute trouve simplement vos coordonnées et vos heures d’ouverture ? Ou qu’il ait accès à une boutique en ligne ? Son but principal doit-il être de lire les articles de votre blog pour s’informer ou apprendre quelque chose ? Doit-il pouvoir remplir un formulaire pour recevoir un devis ? Ou encore créer un profil utilisateur ?

Les fonctionnalités dont vous avez besoin vont déterminer la manière dont votre site sera développé et qui pourra le développer. Elles détermineront également le prix que tout cela vous coûtera. Il est donc essentiel de savoir précisément de quoi vous avez besoin afin d’obtenir un devis réaliste.

CMS

Docly dashboard
CMS personnalisé pour Dolcy par SpoonLancer

Un CMS (content management system) est une base de données ainsi qu’une application web. Pour faire simple, un CMS permet à ses utilisateurs (vous et vos employés) de charger du contenu sur les différents endroits de votre site. Si vous voulez être capable d’éditer régulièrement du texte ou de changer vos photos et que vous ne savez pas coder vous-même, vous aurez besoin d’un CMS.

Il existe beaucoup d’excellentes options disponibles (WordPress pour les blogs, Shopify pour les sites d’e-commerce, Six pour les profils, etc.). Mais si vous avez besoin de fonctionnalités avancés (si vous espérez créer le prochain Facebook, Uber, ou 99designs, par exemple), vous devrez faire faire un CMS sur mesure.

Comment faire créer votre site web —

Modèles

Les sites web permettant de créer soi-même son propre site internet ont énormément gagné en popularité ces dix dernières années, et vous avez probablement entendu parler de sites comme Squarespace, Shopify, Wix et Weebly. Chacun de ces sites a sa propre spécialité (Shopify ne fait que des sites de e-commerce, par exemple) et ses propres modèles.

wix templates
Une sélection de modèles disponibles sur Wix

Avantages :

  • Option la moins chère
  • Tous ces modèles sont des CMS qui vous permettront de contrôler le contenu de votre site

Inconvénients :

  • Vous êtes limité par les modèles et les quelques options de personnalisation proposées (ce qui signifie que votre site ressemblera à celui de beaucoup d’autres, et que vous n’aurez pas une grande marge de manoeuvre en ce qui concerne les fonctionnalités)

Engagez des freelances pour une solution personnalisée

interior design website
Design de site web personnalisé réalisé par Mike Barnes pour Designs Direct

Si vous voulez avoir plus de contrôle sur le look et les fonctionnalités de votre site, la meilleure option est de faire appel à un graphiste freelance. Il sera capable de créer exactement ce que vous recherchez. Cela vous demandera en revanche d’être davantage impliqué dans le processus.

Nous vous recommandons de consulter notre répertoire de graphistes pour trouver un professionnel capable de créer le style qui vous plaît. Vous pouvez également lancer un concours de design graphique : nous vous aidons à rédiger votre brief créatif puis, une fois en ligne, les graphistes de notre communauté internationale vous soumettent leurs propositions de design. Après une période d’échange avec eux, vous désignez le design qui vous plaît le plus comme gagnant.

N’oubliez pas qu’il vous faudra sûrement faire appel à un graphiste et à un développeur pour mener à bien votre projet. Voyez avec votre graphiste dès le début s’il peut également coder. Sinon, il faudra prendre en compte ce coût là en plus dans votre budget.

Avantages :

  • Vous obtenez exactement l’aspect et les fonctionnalités que vous souhaitez
  • Les prix sont raisonnables (mais dépendent bien sûr du graphiste que vous choisissez et de ce que vous lui demandez de faire)

Inconvénients :

  • Vous serez peut-être contraint de faire appel à plusieurs professionnels (designer web, designer UX/UI, développeur)
  • Requiert plus de temps et d’énergie de votre part

Engagez des designers freelances pour une solution hybride

Si vous voulez un design sur mesure, mais ne voulez pas investir beaucoup de temps dans le processus de création, vous avez de la chance, il existe une solution pour vous ! Vous pouvez tout à fait commencer avec un modèle générique et le personnaliser ensuite.

wedding video wordpress design
Un design de thème WordPress réalisé par vyncadq pour Nick Eilerman Films

L’une des solutions les plus populaires dans cette catégorie consiste à passer par la plateforme WordPress. Bien que ce site était au début dédié aux blogs, WordPress est rapidement devenu le CMS le plus réputé sur internet (à l’origine d’environ 30% de tous les sites web). Vous pouvez personnaliser les modèles disponibles (il en existe des milliers), mais vous pouvez aussi créer le votre de toute pièce, en faisant ainsi la parfaite solution hybride.

Vous pouvez engager un graphiste spécialisé en modèles WordPress pour qu’il vous fasse un superbe design, unique, et qui reposera néanmoins sur WordPress pour gérer la base de données back-end.

Notez que ceci est également possible avec d’autres plateformes (notamment sur Shopify et Squarespace). Dans tous les cas, sachez que vous devrez faire coder votre site. Renseignez-vous auprès de votre désigner au préalable.

Avantages :

  • Vous permet d’avoir les fonctionnalités plus avancées de WordPress ou Shopify à moindre coût
  • Vous obtiendrez un design créé sur mesure pour votre marque

Inconvénients :

  • Vous devrez probablement toujours faire appel à un graphiste et à un développeur

Faites appel à une agence pour une solution clés-en-main personnalisée

Buhv designs portfolio
Buhv est une agence de design web basée à Denver

Les agences de design et de développement sont de vraies expertes dans leur domaine. Non seulement elles seront capables de vous aider à prendre les bonnes décisions, mais elles pourront également prendre la totalité de la création de votre site internet en charge. Bien sûr, cela a un prix. C’est une bonne solution pour les entreprises aux besoins complexes, ainsi que pour ceux qui n’ont pas vraiment de problème de budget.

Avantages :

  • Moins de problèmes : vous travaillez avec des experts qui vous guideront tout au long du processus

Inconvénients :

  • Le prix sera probablement élevé

Comment créer votre site web en 7 étapes

1. Déterminez vos besoins et engagez un designer

Vous avez votre nom de domaine ? Vous savez de quelles fonctionnalités vous avez besoin ? Vous avez compté le nombre de pages qui figureront sur votre site ? Vous savez où trouver le contenu qui sera présent sur votre site ?

Super ! Il est temps de faire appel à un graphiste. Pour trouver le professionnel qui conviendra le mieux à votre demande, il vous faudra passer en revue un certain nombre de portfolios. Pensez à la personnalité de votre marque et voyez si le style de tel ou tel graphiste convient. Il est généralement bon de chercher des graphistes qui ont déjà de l’expérience dans votre secteur d’activité, ou dans le type de sites dont vous avez besoin. Si vous êtes photographe, cherchez des graphistes qui ont déjà créé des galeries d’images. Si vous vendez des produits de grande consommation, cherchez des graphistes qui ont l’habitude de créer des plateformes d’e-commerce.

Voici quelques-uns de nos designers web préférés :

Designers Experts
5.0
( 161 )
  • Création application mobile
  • Création de page web
  • Autre site web ou application mobile
  • Création de landing page
  • Autre design
  • Image de Couverture Facebook
  • Bannière publicitaire
  • Création de logo
  • carte postale, flyer ou print
  • Icône ou bouton
  • Couverture de livre
  • Création d'un thème Wordpress personnalisé
  • Autocollant
  • Papeterie
  • Réseaux Sociaux
  • Packaging produit
  • Tasse ou mug
  • Signalétique
  • Etiquette produit
  • Autre vêtement ou article promotionnel
  • Application et site web
  • Menu
  • illustration ou graphismes
  • Bannière flash
  • E-mail
  • Vêtement ou accessoire
  • Carte de visite
  • Logo & pack identité de marque
Designers Experts
5.0
( 45 )
  • Création de page web
  • Création d'un thème Wordpress personnalisé
  • Création application mobile
  • Autre site web ou application mobile
  • Création de landing page
Designers Experts
5.0
( 46 )
  • Création de page web
  • Création d'un thème Wordpress personnalisé
  • Autre design
  • Création de landing page
  • Etiquette produit
  • carte postale, flyer ou print
  • Autre site web ou application mobile
  • Carte de visite
  • E-mail
  • Signalétique
  • Packaging produit
  • Design packaging ou imprimé
  • Modèles Powerpoint
  • Autre graphisme
  • Création application mobile
  • Image de Couverture Facebook
  • Bannière publicitaire

2. Commencez le maquettage

99designs wireframe
Maquettage pour l’outil de recherche de designers de 99designs

Vous n’envisageriez pas de traverser l’Europe en voiture sans emporter une carte avec vous, n’est-ce pas ? Eh bien n’envisagez pas de créer un site web sans maquettes fonctionnelles, souvent appelées wireframes. Il s’agit tout simplement des “plans” de votre site web, qui indiqueront où se trouvent votre navigation, vos images, vos boutons CTA, etc.

Commencer par les wireframes simplifiera le reste du processus. Vous pourrez discuter avec votre graphiste de la structure de votre site, et faire les changements nécessaires sur des plans simples dès le départ, au lieu de les faire plus tard, sur des maquettes Photoshop complexes. Cela permet d’économiser de l’argent et du temps, tant pour vous que pour votre graphiste.

Faites ces maquettes pour toutes les pages principales de votre site (par exemple votre page d’accueil, votre page produits, vos articles de blog, etc.).

Si vous faites faire un design sur mesure à partir d’un modèle, vous n’échapperez pas à cette règle. Commencez par les wireframes. Assurez-vous simplement que votre graphiste connaisse bien les contraintes liées au modèle en question.

3. Concevez le visuel et l’apparence

Votre site web est la vitrine en ligne de votre entreprise. En tant que telle, les choix graphiques que vous faites (de la police aux couleurs) doivent être faits en fonction de l’identité de votre marque. Si vous avez un guide de style pour votre marque, partagez-le avec votre graphiste. Si vous n’en avez pas, fournissez-lui :

  • Votre logo
  • Les couleurs de votre marque (avec les codes hex exacts, si possible)
  • Une liste de polices
  • Toute autre information concernant l’esthétique de votre marque (“fun et amusante”, “sombre et luxueuse”, etc.)

Vous pouvez également lui fournir deux ou trois exemples de sites web qui vous plaisent, mais choisissez-les avec attention et accompagnez vos choix d’une simple phrase expliquant pourquoi tel ou tel site vous plaît. Ces informations lui permettront d’avancer dans la bonne direction. Il commencera à travailler sur la page que vous lui avez indiqué comme étant la plus importante (pour beaucoup, il s’agit de la page d’accueil, mais ce n’est pas toujours le cas non plus).

Lorsque votre graphiste vous présentera son premier jet, ce sera à vous de lui faire des commentaires. Notez votre première réaction “viscérale” au design, mais ne lui en faites pas part tout de suite. Donnez-vous 24h pour y réfléchir à tête reposée et pour demander l’avis de votre entourage. Lorsque vous répondrez finalement à votre graphiste, soyez clair et précis.

En fonction de ce que vous aurez convenu, vous devrez peut-être faire plusieurs allers-retours de ce type avant d’arriver au design final.

Comment faire des retours constructifs à votre graphiste ->

4. Créez des modèles pour toutes les pages

Une fois que vous avez déterminé le look de votre page principale, et en considérant que vous avez bien réalisé tous les wireframes pour chaque type de page, la suite devrait être assez simple. Il y aura deux ou trois choses à ajuster au fur et à mesure, mais à ce stade-là de la collaboration, votre designer et vous-même devriez être sur la même longueur d’onde, ce qui facilitera la communication.

Aussi, si votre graphiste ne prend pas en charge le développement de votre site, c’est également à ce moment-là qu’il vous faudra demander les fichiers graphiques à votre designer (en général au format Adobe Photoshop, mais on voit de plus en plus de fichiers Sketch), afin de les fournir à votre développeur.

5. Travaillez avec un développeur pour encoder votre design

sailing web design
Réalisé par arosto pour Agency X

Lorsque vous chercherez un développeur, faites particulièrement attention à la fonctionnalité. Il faut que vous puissiez dire à votre développeur ce que vous voulez, et qu’il soit capable d’expliquer de manière claire et sans jargon trop compliqué comment il va s’y prendre pour mettre cela en place.

Si vous avez besoin d’un CMS, demandez-lui bien de vous dire la plateforme dont il se sert ou de vous montrer comment vous pourrez modifier vous-même le contenu de votre site web par la suite.

S’il ne vous pose pas beaucoup de questions, ce n’est pas bon signe et cela signifie peut-être qu’il ne réfléchit pas entièrement à toutes les étapes nécessaires à votre projet.

Tout comme avec les graphistes, après l’avoir briefé, votre développeur créera un prototype. Ce premier brouillon servira de base à un aller-retour entre vous et lui jusqu’à ce que vous arriviez à un produit fini.

6. Remplissez tous les contenus

educational web design
Tout ce texte “lorem ipsum” doit être remplacé par du vrai contenu ! Réalisé par MercClass pour Logo

Votre site web est maintenant prêt et il est temps d’y ajouter votre contenu. Selon vos objectifs, il sera peut-être judicieux d’engager un spécialiste du référencement pour vous aider à augmenter votre classement grâce à votre texte, ou encore un photographe, pour vous aider à donner envie aux visiteurs d’acheter vos produits.

7. Faites des tests utilisateurs

Avant d’officialiser le lancement de votre site web, prenez le temps de le faire circuler à votre entourage. Écoutez leurs remarques et posez-leur des questions. Faites attention à ne pas prendre leur retours de manière trop personnelle. Ma philosophie, en ce qui concerne le feedback, c’est que si deux personnes qui ne se sont pas parlées me font la même remarque, il y a probablement quelque chose à creuser.

Faites tous les ajustements nécessaires et lancez enfin votre site web !

Prêt à créer le site web idéal pour votre entreprise ?

Créer un site web est aussi gratifiant qu’intimidant. Il y a beaucoup de choses à garder à l’esprit (et pour certains, de nombreuses compétences à acquérir en cours de route). Mais si vous vous y prenez bien, le produit final vous aidera à développer votre entreprise comme jamais.

illustrated website
Prêt à vous lancer dans votre projet de design web ? Réalisé par SpoonLancer

Pour finir, j’ajouterai qu’un site web n’est jamais vraiment terminé. C’est un projet en constante évolution. Si vous en êtes au tout début de cette aventure et que vous avez choisi de passer par un site avec des modèles, vous vous rendrez peut-être compte dans un an ou deux que cette solution ne vous suffit plus. Et c’est très bien comme ça, vous pourrez faire appel à un graphiste à ce moment-là. Ou vous vous rendrez alors peut-être compte qu’il est temps d’entreprendre une refonte entière de votre identité de marque, car votre clientèle a changé. Ou que les avancées technologiques vous obligeront à repenser votre plateforme (en ce moment tout doit être “adaptatif”, mais allez savoir ce qu’il en sera dans 5 ans). Pour l’heure, lancez vous, tout simplement!

Besoin d'un nouveau site web parfait pour votre entreprise ?
Faites appel à nos graphistes pour créer le site internet idéal pour votre société.