Si vous souhaitez concevoir et créer des pages Web, ce processus sera beaucoup plus facile si vous planifiez à l'avance. Dans la phase de planification, le concepteur et le client peuvent travailler ensemble pour trouver un format et une mise en page adaptés à leurs besoins. Le processus de planification affecte le style ou le style du site, on pourrait dire que c'est l'aspect le plus important de la conception Web, surtout si c'est à des fins commerciales.
Étape
Partie 1 sur 4: Création de la structure de base
Étape 1. Déterminez la fonction du site Web
Si vous créez un site personnel, vous connaissez probablement déjà la réponse. Cependant, si vous créez un site pour une autre organisation, entreprise ou personne, vous devez savoir ce qu'ils veulent et les fonctionnalités du site. Tout ce que vous spécifiez ici prendra effet lorsque la page Web sera terminée.
- Le site Web nécessite-t-il Storefront ? Faut-il faire des commentaires d'utilisateurs ? L'utilisateur devra-t-il créer un compte plus tard ? L'article du site Web est-il orienté? Ou orienté image ? Toutes ces questions et d'autres vous aideront dans la conception et la conception du site.
- Ce processus de planification peut être intégré à un dessin, surtout s'il s'agit d'une grande entreprise et que de nombreuses personnes sont impliquées dans la création de ce projet.
Étape 2. Créez un diagramme de plan de site (plan du site)
Un diagramme de plan de site est similaire à un organigramme, montrant comment les utilisateurs passent d'une page à l'autre. Vous n'avez pas besoin d'une page Web à ce stade, juste un flux général de concepts. Vous pouvez utiliser un programme informatique pour créer des diagrammes ou dessiner les vôtres sur papier. Utilisez ce diagramme pour illustrer les concepts d'arrangement hiérarchique et de connectivité de page Web.
Étape 3. Essayez la méthode de rédaction de cartes
Une méthode populaire de développement Web en groupe consiste à utiliser un certain nombre de cartes pour connaître les attentes de chacun. Prenez un certain nombre de fiches et notez le contenu de base d'une page Web sur chacune d'elles individuellement. Disposez ces cartes avec votre équipe pour trouver le meilleur concept. Cette méthode peut être utilisée lorsque vous collaborez avec d'autres sur la création de pages Web.
Étape 4. Utilisez du papier et un tableau d'affichage ou un tableau blanc
Il s'agit d'une méthode de planification originale sur un petit budget, vous pouvez rapidement supprimer ou déplacer du contenu et modifier le flux. Dessinez votre conception Web sur du papier, puis connectez les papiers avec du fil ou tracez des lignes au tableau. Cette méthode est très appropriée pour une utilisation dans les sessions de brainstorming.
Étape 5. Créez un inventaire de contenu
En fait, il a tendance à être plus approprié à utiliser dans la refonte des sites Web que dans les nouvelles conceptions Web. Insérez chaque élément de contenu ou page Web terminé dans une feuille de calcul. Notez l'objectif de chaque élément de contenu ou page, en utilisant cette liste pour déterminer ce qu'il faut supprimer et ce qu'il faut conserver. Vous pouvez simplifier la structure du Web et simplifier le processus de refonte plus tard.
Partie 2 sur 4: Création d'un plan HTML de base
Étape 1. Créez une structure filaire pour établir la hiérarchie des pages Web
Le modèle HTML de base est le modèle du site que vous allez créer, en utilisant uniquement les balises les plus élémentaires et des exemples de contenu (blocs/modèles). Ce framework répond à la question « Qu'est-ce qui est visible sur le web et où ? La mise en forme et le style ne sont pas requis dans la création de ce plan.
- Vous pouvez voir la structure et l'organigramme du contenu avec un aperçu de base avant de choisir un paramètre de style.
- Les modèles HTML de base ne sont pas statiques comme les fichiers PDF ou les images, vous pouvez rapidement parcourir des exemples de contenu pour créer de nouvelles structures.
- Le cadre de base est interactif, ce qui profite à la fois aux développeurs Web et aux clients. Étant donné que ce framework de base est écrit avec un code HTML simple, vous pouvez toujours le parcourir et savoir comment fonctionne la commutation de page Web. Cela ne peut pas être fait avec PDF.
Étape 2. Essayez la méthode de la boîte grise
Bloquez ou mettez en surbrillance le contenu de votre page Web dans Grey Box, le contenu le plus important se trouve en haut. Triez le contenu dans une colonne. Par exemple, si la page est « À propos de l'entreprise », les informations détaillées sur l'entreprise sont en haut, suivies d'une liste du personnel, puis des informations de contact, etc.
Cela n'inclut pas les en-têtes et les pieds de page. Grey Box est une représentation visuelle du contenu qui apparaîtra sur le Web
Étape 3. Essayez un programme de création de contour de base
Il existe divers programmes que vous pouvez utiliser dans le processus de création d'un framework Web de base. La quantité de code de programmation Web (langage) que vous devez maîtriser est différente pour chaque programme. Certains des programmes qui sont très populaires incluent:
- Laboratoire de modèles. Ce site est dédié au « design atomique », chaque contenu est considéré comme une « molécule » qui compose une page web plus grande.
- Tableaux de bord. Cette page Web fournit des services de planification et de cadrage basés sur le Web. Ces sites sont payants et nécessitent un abonnement, mais vous pouvez créer rapidement des frameworks Web sans avoir à maîtriser beaucoup de code de programmation Web.
- Filaire. Wirefy est un autre site qui propose un « design atomique ». Les développeurs Web peuvent obtenir l'outil gratuitement.
Étape 4. Utilisez un balisage HTML simple
Un bon modèle de base se convertira facilement au site d'origine. Ne pensez pas trop au style Web pendant le processus de création de ce modèle. Utilisez un balisage qui peut être facilement compris et modifié.
Un cadre de base simple est bien mieux. Le but de la création d'un balisage est de construire une structure. L'apparence visuelle peut être ajustée ultérieurement avec CSS et un balisage avancé
Étape 5. Créez un plan de base pour chaque page Web
Vous pourriez être tenté d'assimiler chaque page Web à un plan de base. En fait, cela ne fera que rendre votre site simple et ennuyeux. Créez un contour différent pour chaque page, vous comprendrez que chaque page a besoin de son propre design.
Partie 3 sur 4: Création de contenu
Étape 1. Préparez le contenu avant de créer une page Web
Vous trouverez beaucoup plus facile de prévisualiser votre vue Web si vous avez déjà du contenu réel au lieu d'utiliser des exemples ou des espaces réservés. Vous n'avez pas besoin d'avoir trop de contenu, mais votre maquette sera bien meilleure si vous utilisez une copie de l'image d'origine.
Vous n'êtes pas obligé d'avoir tout le matériel de l'article, mais au moins il devrait avoir un titre réel
Étape 2. N'oubliez pas qu'un excellent contenu n'est pas que du texte
Internet est beaucoup plus complexe qu'une simple page Web de texte. Vous avez besoin d'une variété de contenus différents afin de créer un excellent site Web pour attirer et inviter des visiteurs. Par exemple:
- Photo.
- Voix.
- Vidéos.
- Transmission Web ou flux Web (Twitter)
- Intégration Facebook
- RSS
- Flux Web
Étape 3. Demandez de l'aide à un photographe professionnel
Si vous souhaitez inclure des photos sur votre site, la première impression que vous obtiendrez de votre site Web sera bien meilleure s'il est rempli de photographies professionnelles. Une bonne photo vaut plus que vingt photos de mauvaise qualité.
Recherchez un jeune diplômé de l'art de la photographie comme une solution moins chère qu'un photographe professionnel qui est dans le métier depuis longtemps
Étape 4. Rédigez des articles de qualité
Le contenu écrit sur la page Web déterminera le montant de votre trafic Web. Bien que vous n'ayez pas trop à vous soucier de la création de contenu dans ce processus de conception, cela ne fait pas de mal de commencer à y penser car vous aurez également besoin de contenu régulièrement une fois que votre site sera opérationnel.
En plus du contenu de l'article, il existe du matériel écrit que vous devez également avoir dans le processus de compilation d'une page Web. Par exemple, les coordonnées, le nom de l'entreprise ou tout autre élément qui sera utilisé plusieurs fois sur le site
Partie 4 sur 4: Transformer les concepts en sites Web
Étape 1. Disposez les éléments de base
Cette disposition des éléments s'applique à chaque page de votre site, comme les en-têtes, les notes de bas de page et les menus de navigation. Configurez-le dans un style très simple afin que vous puissiez vérifier à quoi ressemblent toutes les pages. Ceci est particulièrement utile lorsque vous progressez dans le processus de mise en page Web.
Ne vous inquiétez pas trop des détails, essayez de prévisualiser (prévisualiser) à quoi ressemble l'en-tête
Étape 2. Créez une mise en page simple
Commencez par déplacer la position de l'horloge de la colonne de contour de base à l'emplacement réel sur la page. Par exemple, vous pouvez déplacer l'exemple de menu de navigation vers la gauche de la page et la liste des titres vers la droite.
Continuez à expérimenter avec des mises en page Web pour plusieurs pages, avant de passer à l'étape suivante. Permettez aux autres d'y jeter un coup d'œil pour voir si la mise en page que vous créez est vivante
Étape 3. Créez une maquette
Utilisez un programme comme Photoshop pour créer des maquettes ou des exemples de pages de votre site Web. Utilisez la mise en page que vous avez compilée comme guide. Vous pouvez créer des maquettes plus rapidement et obtenir les résultats souhaités avec un programme de traitement d'image. Les résultats de ces images peuvent ensuite être utilisés comme référence dans le processus d'écriture du code de programmation Web.
Mettez le contenu réel dans la maquette pour lui donner une belle apparence
Étape 4. Remplacez l'exemple de concept par le contenu d'origine
Ajoutez du contenu et des éléments aux pages Web. Ne vous inquiétez pas des paramètres de style Web pour le moment, empilez simplement tout au bon endroit. Cela vous aidera à revoir les modifications de style Web que vous apporterez plus tard.
Étape 5. Créez un guide de style Web
Il est très important de maintenir un mélange de styles, en particulier pour les grands sites. Si le site est destiné à des fins commerciales et a déjà sa propre marque ou son propre style, cela doit être intégré dans la conception du site. Éléments à prendre en compte lors de la création d'un guide de style de page Web:
- La navigation
- Note de tête
- Paragraphe
- Caractère italique
- Caractère audacieux
- Liens (actif, inactif, survol)
- Utilisation des images
- Icône
- Bouton
- liste
Étape 6. Appliquez le style Web
Une fois que vous avez trouvé le bon style et le bon design, mettez-le en œuvre. CSS est l'un des moyens les plus simples d'implémenter des styles sur une page Web ou sur le site. Consultez les instructions suivantes pour mieux comprendre les détails de l'utilisation de CSS.
