Comment construire un site Web pour un nouveau produit (et comment nous l'avons fait) |

Si vous n'avez pas encore de brief créatif, commencez ici. Un brief créatif explique exactement comment vous envisagez de parler de votre produit ou de votre entreprise. Il définit le ton de la voix de votre marque, votre palette de couleurs, votre déclaration de valeur, et bien plus encore. Votre dossier de création définit la manière dont votre site Web communiquera avec les clients.

Vous avez peut-être déjà rédigé un brouillon créatif si vous avez suivi le processus de développement du logo. Si oui, vous pouvez simplement réutiliser cela pour votre site Web. Si vous n'avez pas encore développé de brief créatif, le moment est venu d'en créer un.

Heureusement, j'ai déjà écrit un article détaillé qui vous apprend comment le faire, ce qui inclut des exemples du brief créatif d'Outpost, donc vous pouvez voir comment nous avons construit le nôtre. Donc, si vous avez besoin de travailler sur votre dossier créatif, consultez mon article sur la façon dont nous avons développé notre logo et son brief créatif et revenez ici quand vous êtes prêt.

Créer un sitemap

Avec votre brief créatif À la main, vous commencerez à travailler sur votre sitemap. Un sitemap est simplement un aperçu qui énumère toutes les pages (y compris leurs buts et objectifs) que vous prévoyez d'inclure sur votre site.

Voici le plan du site que nous avons développé pour Outpost:

1. 1. Accueil : et un «appel à l'action» pour vous inscrire à un essai gratuit. Liens secondaires vers d'autres pages qui décrivent les fonctionnalités
   2. Présentation des fonctionnalités : un aperçu de toutes les fonctionnalités avec des liens vers des pages de caractéristiques détaillées
      1. Détail des fonctionnalités de la fonction A: Détails de la fonction A.
      2. Caractéristique B: Détails de la fonctionnalité B.
      3. Répéter pour toutes les fonctionnalités

• Tarification: Détails des plans de tarification et des liens pour vous inscrire à un essai gratuit.
• Clients: Profils des clients qui réussissent
• À propos de nous: Aperçu de qui nous sommes, de notre mission et de notre historique
• Contactez-nous: Coordonnées, horaires, lieu.
• Emplois: Une liste de nos offres d'emploi actuelles
• Déclaration de confidentialité: Politique de confidentialité d'Outpost
• Blog: Page d'accueil du blog qui répertorie les articles récents.
• Blog Post: Il y aura plusieurs articles de blog.
• Centre d'aide: Notre centre d'aide sera alimenté par Zendesk.

Bien sûr, votre site sera probablement très différent du sitemap d'Outpost. Si vous êtes un restaurant, par exemple, vous aurez probablement une page ou deux pour les menus et une page pour les réservations. Si vous construisez une boutique en ligne, vous aurez probablement beaucoup de pages de produits différentes.

Vos documents de sitemap, du mieux que vous pouvez, ce que vous pensez que votre site inclura. Ce petit peu de planification rendra la planification et le développement du site beaucoup plus faciles, donc ça vaut la peine d'investir à ce stade précoce.

Écrivez votre copie avant la conception

Vous allez penser que je n'ai pas pas l'ordre ici. Ne devriez-vous pas concevoir votre site Web avant de penser aux mots que vous allez mettre sur la page?

En fait, la meilleure approche consiste à faire des choses en arrière et à penser à la copie de votre site cette copie. Pourquoi? Parce que ce que vous voulez communiquer à vos clients est beaucoup plus important que la conception finale de votre site. Bien sûr, le design est important et vous voulez avoir un site qui a l'air bien, mais si vous ne pouvez pas communiquer vos messages clés à vos utilisateurs, un bon design ne fera pas la différence.

Rédaction de votre copie d'abord vous aide également, vous et les concepteurs potentiels, à comprendre ce que chaque page essaie de communiquer. Cela se traduit par une meilleure conception qui renforce votre messagerie. Même si vous construisez votre site vous-même avec un outil comme Squarespace, sachez ce que chaque page doit dire avant de choisir un design qui vous fera gagner beaucoup de temps.

Vous devez affiner votre copie pour vous assurer que tout va bien, mais ce sera plus facile que d'essayer d'écrire une copie pour un dessin qui n'a pas été créé pour votre messagerie.

Pour votre page d'accueil, vous aurez probablement besoin d'un titre décrit exactement ce que vous faites - votre proposition de valeur clé pour vos clients. Cela sera suivi d'une description courte et détaillée de ce que votre entreprise fait.

Voici le titre et la description détaillée d'Outpost, le produit que nous sommes en train de construire:

Rationalisez votre messagerie partagée

Suivez, collaborez, et répondez aux messages envoyés à des adresses email génériques, comme support @ ou info @.

De là, la copie que vous allez inclure sur votre page d'accueil va vraiment être déterminée par le type d'entreprise que vous êtes, qui vos clients sont, et ce que vous devez communiquer

Pour Outpost, nous devons communiquer les principales caractéristiques et les avantages de notre produit et encourager les clients potentiels à en apprendre davantage. Nous voulons également parler de notre équipe de service à la clientèle et de leur qualité.

Mais ce n'est peut-être pas la bonne configuration pour votre page d'accueil. Si vous êtes un restaurant, peut-être que vous voulez avoir des liens vers vos menus ou des informations sur l'obtention d'une réservation. Chaque entreprise est différente, alors déterminez ce que vous avez besoin de dire et écrivez-le.

Ne vous inquiétez pas de commencer avec une page blanche, cependant. Au lieu de cela, venez avec une liste de vos sites Web préférés dans votre secteur et pensez à ce que vous aimez et n'aimez pas sur chaque site. Quel type de navigation utilisent-ils? Quelles pages incluent-elles? Quel genre d'images utilisent-ils? Vous n'avez pas besoin de réinventer la roue, et l'utilisation d'un site favori comme point de départ est une excellente façon de commencer.

Un dernier conseil: Moins est généralement plus. Ne soyez pas tenté d'écrire des paragraphes sans fin de copie pour votre site Web (sauf si c'est ce que vos clients attendent!). Si vous prêtez attention à la façon dont vous utilisez les sites Web, vous constaterez que vous parcourez souvent le texte, sans lire tous les mots. Parce que c'est comme ça que la plupart des gens lisent en ligne au lieu de lire chaque mot, gardez votre exemplaire court et précis.

Développer un fil de fer

Un fil de fer est une présentation approximative de votre site Web. Ce n'est pas vraiment un design, exactement. C'est un document qui montre à peu près où les choses iront sur la page, sans se soucier de la couleur ou d'autres graphiques.

Si vous travaillez avec un concepteur pour construire votre site Web, ils produiront un wireframe pour vous dans le cadre du procédé de design. Si vous construisez votre site Web seul, en utilisant un service comme Squarespace ou Shopify, vous pouvez facilement créer un fil de fer par vous-même.

Ne soyez pas intimidé par cette étape. Vous n'avez pas besoin d'outils spéciaux pour créer une structure filaire. Un bloc de papier et un stylo suffit pour dessiner chaque page de votre site. Rappelez-vous, vous ne «concevez» pas et un fil de fer ne doit pas être joli. Il suffit de communiquer ce qui se passe sur une page.

Si vous avez besoin d'inspiration, consultez d'autres sites que vous aimez et regardez comment ils structurent les informations sur chaque page. C'est très bien d'emprunter des mises en page d'autres sites et de trouver l'inspiration pour votre propre site.

Si vous n'utilisez pas le stylo et le papier, vous pouvez utiliser PowerPoint ou Keynote pour créer des wireframes. Il y a aussi des outils de wireframing dédiés comme Balsamiq qui facilitent le processus.

J'ai inclus la structure de la page d'accueil d'Outpost ci-dessous afin que vous puissiez avoir une idée de ce à quoi ressemble un wireframe. Vous pouvez également regarder la copie que nous avons créée à l'étape précédente et un croquis d'une idée pour un élément graphique que nous voulons créer.