Comment planifier un site Web?
Il sera beaucoup plus facile de voir à quoi ressemble le style de votre site Web si vous avez votre contenu réel plutôt que des espaces réservés.
Si vous souhaitez concevoir et créer un site Web, vous trouverez cela beaucoup plus facile si vous passez du temps à le planifier. La phase de planification permet au développeur et au client de travailler ensemble jusqu'à ce qu'ils trouvent un format et une mise en page qui correspondent à leurs besoins. Le processus de planification influence les choix de style du site et est sans doute l'aspect le plus important de la conception de sites Web, en particulier pour les entreprises.
Partie 1 sur 4: créer la structure sous-jacente
- 1Déterminer la fonctionnalité du site. Si vous créez le site pour vous-même, vous connaissez probablement déjà la réponse à cette question. Si vous créez le site pour une autre personne, entreprise ou organisation, vous devrez savoir ce qu'ils attendent du site et de ses fonctionnalités. Tout ce que vous décidez ici aura un impact sur le site Web final.
- A-t-il besoin d'une vitrine? Avez-vous besoin de commentaires d'utilisateurs? Les utilisateurs devront-ils créer des comptes? Est-ce orienté article? Orienté image? Toutes ces questions et bien d'autres contribueront à éclairer la conception et la structure du site.
- Cela peut être un processus de longue haleine, en particulier pour les grandes entreprises avec beaucoup de personnes impliquées dans le projet.
- 2Créez un diagramme de plan de site. Un diagramme de plan de site est comme un organigramme et montre comment les utilisateurs passent d'une page à l'autre. Vous n'avez même pas besoin de pages à ce stade, juste d'un flux général de concepts. Vous pouvez utiliser un programme informatique pour créer un diagramme ou le dessiner vous-même sur une feuille de papier. Utilisez le diagramme de plan de site pour montrer comment vous envisagez la hiérarchie et la connectivité des pages Web.
- 3Essayez de trier les cartes. Une méthode populaire pour un groupe consiste à utiliser une pile de cartes pour déterminer l'approche idéale de chacun. Prenez une pile de fiches et écrivez le contenu de base d'une seule page sur chacune. Demandez à votre équipe d'organiser les cartes de la manière qu'elle juge la plus utile. C'est mieux pour les situations où vous collaborez avec d'autres pour créer un site.
- 4Utilisez du papier et un tableau d'affichage ou un tableau blanc. Il s'agit de la méthode de planification originale à petit budget et vous permet d'effacer ou de déplacer rapidement du contenu et de le réacheminer. Dessinez le motif sur des morceaux de papier et reliez-les avec de la ficelle, ou dessinez le contour sur un tableau blanc. Idéal pour les séances de brainstorming.
- 5Faites un inventaire du contenu. Ceci est plus orienté vers les refontes que les nouveaux sites. Saisissez chacun de vos éléments de contenu ou pages existantes dans une feuille de calcul. Prenez des notes sur le but de chacun et utilisez cette liste pour déterminer ce qui va et ce qui reste. Cela aidera à réduire la graisse et à simplifier le processus de refonte.
Si vous souhaitez concevoir et créer un site Web, vous trouverez cela beaucoup plus facile si vous passez du temps à le planifier.
Partie 2 sur 4: faire un wireframe HTML
- 1Faites un wireframe pour aider à solidifier la hiérarchie. Un wireframe HTML est un squelette de votre futur site, n'utilisant que les balises et les blocs les plus élémentaires pour représenter le contenu. Il répond à la question «Qu'est-ce qui se passe à l'écran et où?» La mise en forme et le style sont complètement ignorés dans un wireframe.
- Le wireframe vous permet de voir la structure et le flux du contenu avant de vous engager dans des choix de style.
- Les wireframes HTML ne sont pas statiques comme les PDF ou les images, et vous permettent de déplacer rapidement des blocs de contenu pour créer une nouvelle structure.
- Un wireframe est interactif, ce qui profite à la fois au développeur et au client. Étant donné que le wireframe est écrit en HTML simple, vous pouvez toujours le parcourir et avoir une idée du fonctionnement du déplacement entre les pages. C'est quelque chose qui ne peut pas être exprimé à travers un concept PDF.
- 2Essayez la méthode de la boîte grise. Bloquez le contenu de votre page dans des cases grises, avec le contenu le plus important en haut. Les blocs sont organisés dans une seule colonne, avec le contenu le plus important de la page en haut. Par exemple, si la page est la page À propos de l'entreprise, les détails de l'entreprise peuvent figurer en haut, suivis d'une liste du personnel, suivies des informations de contact, etc.
- Cela n'inclut pas l'en-tête et le pied de page. Les cases grises sont simplement une représentation visuelle du contenu qui sera trouvé sur la page.
- 3Essayez un programme de charpente métallique. Il existe plusieurs programmes qui peuvent vous aider avec le processus de wireframing. La quantité de connaissances en codage requises varie d'un programme à l'autre. Certains des programmes les plus populaires incluent:
- Laboratoire de modèles. Ce site est spécialisé dans la "conception atomique", où chaque élément de contenu est considéré comme une "molécule" qui constitue la plus grande page.
- Tableaux de bord. Il s'agit d'un service de planification de sites Web et de wireframing. Il nécessite un abonnement payant mais vous permet de créer rapidement des wireframes sans trop vous soucier du codage.
- Filaire. Wirefy est un autre système de "conception atomique". Les outils sont disponibles gratuitement pour les développeurs.
- 4Utilisez un balisage HTML simple. Un bon wireframe peut facilement être converti en site réel plus tard. Ne vous inquiétez pas du tout du style pendant le processus de wireframing. Au lieu de cela, utilisez un balisage qui peut être facilement compris et échangé avec peu d'effort.
- Moins c'est plus avec un wireframe. Le but est simplement de construire la structure. Les visuels peuvent être ajustés ultérieurement avec CSS et un balisage avancé.
- 5Créez un wireframe pour chaque page de votre site. Il peut être tentant de créer un seul wireframe et de dire «Cool, je peux l'appliquer à chaque page et je vais bien». En réalité, cela conduira à un site générique et ennuyeux. Prenez le temps de wireframe chaque page, et vous constaterez bientôt que chaque page a ses propres besoins organisationnels.
Si le site est destiné à une entreprise qui possède déjà une image de marque visuelle, celle-ci doit être intégrée à la conception du site.
Partie 3 sur 4: créer du contenu
- 1Préparez du contenu avant de commencer à créer le site Web. Il sera beaucoup plus facile de voir à quoi ressemble le style de votre site Web si vous avez votre contenu réel plutôt que des espaces réservés. Vous n'avez pas besoin de trop de contenu, mais il sera beaucoup mieux dans les maquettes si vous avez des copies et des images originales.
- Vous n'avez pas nécessairement besoin du corps d'un article, mais vous devriez au moins avoir de vrais titres.
- 2N'oubliez pas qu'un bon contenu est plus que du texte. L'Internet est bien plus que de simples sites Web de texte. Afin de vous démarquer dans votre créneau, vous aurez besoin d'une variété de types de contenu différents pour attirer et fidéliser les visiteurs. Quelques contenus possibles à retenir:
- Des photos.
- l'audio
- Vidéo
- Flux (Twitter)
- Intégration Facebook
- RSS
- Flux de contenu
- 3Faites appel à un photographe professionnel. Si vous incluez des photos sur votre site, vos premières impressions seront bien meilleures avec une photographie professionnelle. Une seule bonne photo vaut plus que vingt mauvaises.
- Recherchez des diplômés récents en photographie d'art pour des solutions moins chères que les professionnels de longue date.
- 4Rédigez des articles de qualité. Le contenu écrit sur votre page déterminera la grande quantité de votre trafic Web. Bien que vous n'ayez pas trop à vous soucier de la création de contenu à ce stade du processus de conception, cela ne fait pas de mal de commencer à y penser, car vous aurez besoin de contenu régulièrement une fois le site en ligne.
- Au-delà du contenu de l'article, il y a des éléments écrits que vous aurez très probablement au cours du processus de construction du site Web. Cela peut inclure des informations de contact, des noms d'entreprise ou tout autre élément qui sera utilisé à plusieurs endroits sur le site.
Au-delà du contenu de l'article, il y a des éléments écrits que vous aurez très probablement au cours du processus de construction du site Web.
Partie 4 sur 4: transformer le concept en site
- 1Éléments globaux de style. Ce sont les éléments visibles sur chaque page de votre site, tels que l'en-tête, le pied de page et le menu de navigation. Créez un style très basique afin que vous puissiez voir à quoi ressembleront toutes vos pages avec elles en place. Cela vous sera très utile lorsque vous avancerez dans le processus de mise en page.
- Ne vous inquiétez pas trop des détails, mais essayez de vous rapprocher un peu de l'apparence finale des en-têtes.
- 2Créez une mise en page de base. Commencez à déplacer les horloges de votre wireframe hors de la colonne unique et dans leurs emplacements généraux sur la page. Par exemple, vous pouvez déplacer le bloc de navigation vers la gauche de la page et une liste de titres vers la droite.
- Continuez à expérimenter les mises en page pendant quelques pages avant de continuer. Laissez les autres les tester pour voir s'ils se sentent organiques.
- 3Créer une maquette. Utilisez un programme comme Photoshop pour créer une maquette de quelques pages de votre site. Utilisez la mise en page que vous avez choisie comme guide. Vous pouvez travailler beaucoup plus rapidement dans un programme d'édition d'images et obtenir tout exactement comme vous le souhaitez. Cela vous permettra d'utiliser ces images comme références lorsque viendra le temps de coder réellement.
- Incluez du contenu réel dans la maquette pour vous assurer que tout va bien ensemble.
- 4Remplacez vos blocs par du contenu. Commencez à ajouter votre contenu et vos éléments à la page. Ne vous souciez pas encore du style, placez tout simplement au bon endroit. Cela vous aidera à savoir si vos changements de style vont fonctionner.
- 5Créer un guide de style. Ceci est essentiel pour maintenir un style cohérent, en particulier pour les grands sites. Si le site est destiné à une entreprise qui possède déjà une image de marque visuelle, celle-ci doit être intégrée à la conception du site. Éléments à considérer potentiellement dans un guide de style:
- La navigation
- En-têtes (<h1>, <h2>, etc.)
- Paragraphes
- Italique
- Audacieux
- Liens (actifs, inactifs, flottants)
- Utilisation de l'image
- Icônes
- Boutons
- Listes
- 6Appliquez votre style. Une fois que vous avez décidé du style et du design du site, il est temps de commencer à le mettre en œuvre. CSS est l'un des moyens les plus simples d'implémenter le style sur une page ou sur l'ensemble du site. Consultez ce guide pour plus de détails sur l'utilisation de CSS.
Lisez aussi: Comment se lancer dans la conception Web?
