Création d'un plan de site HTML5 et CSS3 - les mannequins

Souvent, le travail initial sur un site majeur consiste à créer un plan pour la conception du site HTML5 et CSS3. Faire cette étape tôt vous aide à voir la véritable portée du projet. Un plan de site est un aperçu d'un site Web. Normalement, il est dessiné en tant que graphique hiérarchique.

Imaginez que l'on vous demande d'aider à concevoir un site Web pour un département universitaire dans une grande université. La première question est: "Que voulez-vous sur le site? "Ecrivez tout.

Demandez à votre client ce qu'il veut. Après tous les participants suggèrent tout ce qu'ils pensent que leur site a besoin, les chasser de la pièce. En utilisant uniquement du papier et un crayon, créez une esquisse plus organisée en fonction de la façon dont vous pensez que l'information devrait être organisée.

Comment créer un aperçu du site

Gardez ces suggestions à l'esprit lors de la création d'un diagramme d'aperçu du site:

• Utilisez la Loi des Sept. Cette loi suggère que les gens ne peuvent généralement pas gérer plus de sept choix à la fois. Essayez de ne pas avoir plus de sept principaux segments d'information à tous les niveaux. Chacun d'eux peut être séparé en sept morceaux, et chacun d'eux peut avoir sept morceaux.

• Identifiez les points communs. Pendant que vous regardez les données, des regroupements généraux apparaissent. Dans l'exemple de l'université, vous pouviez facilement voir que vous aviez beaucoup de données de cours, d'informations sur les diplômes, d'informations sur le corps professoral et de recherche.

• Essayez d'attribuer chaque sujet à un groupe. Ceci est une forme de normalisation des données ici. Cette structure de données n'est pas nécessairement formelle, mais elle pourrait l'être.

• Arrangez une hiérarchie. Regroupez les sujets du plus général au plus spécifique. Par exemple, le terme information de cours est très large. N100 est un cours spécifique, et il peut comporter plusieurs sections (date spécifique, heure et combinaisons d'instructeurs). Ainsi, il est logique de regrouper les sections sous N100 et de regrouper N100 sous les cours.

• Fournissez des données représentatives. Toutes les informations ne sont pas nécessaires ici. Le but est d'avoir suffisamment de données pour que vous puissiez voir les relations entre les données.

• Gardez à l'esprit que ce diagramme ne pas représente la conception du site. Le but de ce type de diagramme est de voir comment les données elles-mêmes s'emboîtent. Bien sûr, ce diagramme a tendance à informer la mise en page et la structure du menu, mais ce n'est pas obligatoire.

• Chaque boîte n'est pas une page. Peut-être, mais ce n'est pas obligatoire. Plus tard dans le processus, vous pouvez décider comment organiser les parties du site.

Construire ce type de diagramme de site est absolument essentiel pour les sites plus importants, sinon vous ne saisirez jamais vraiment la portée du projet.Est-ce que les principales parties prenantes l'examinent pour voir si elles reflètent fidèlement les renseignements que vous essayez de transmettre?

Comment créer le diagramme de site

Le diagramme de site est une version plus spécifique de l'aperçu du site. À ce stade, vous vous engagez sur les pages particulières que vous voulez dans le système et sur leur relation organisationnelle.

Le diagramme de site est un peu différent de la vue d'ensemble pour les raisons suivantes:

• Chaque boîte représente une page. Vous devez maintenant prendre des décisions sur l'organisation des pages. Déterminez à quel niveau de l'aperçu vous avez des pages séparées. Par exemple, sont toutes les sections de cours sur une page, ou toutes les sections de N100? Chaque section de chaque cours a-t-elle une page différente? Ces décisions vous aideront à déterminer les technologies à utiliser pour construire la page.

• Le diagramme de site n'a toujours pas besoin de toutes les pages. Si vous avez 30 classes, vous n'avez pas besoin de rendre compte de chacune d'entre elles si vous savez où elles vont et si elles ont toutes le même but et la même conception.

• La structure de navigation doit être claire. La hiérarchie devrait vous donner une structure de navigation claire. (Bien sûr, vous pouvez, et vous devriez souvent, ajouter une structure de navigation secondaire.)

• Nommez chaque case. Chaque page devrait avoir un nom. Ces noms de boîte se traduisent en titres de page et vous aident à former un système de titres unifié. Cet arrangement est utile pour votre système de navigation.

• Identifiez la disposition générale de chaque boîte. Généralement, un site utilise seulement quelques mises en page. Vous avez une disposition standard pour la plupart des pages. Souvent, la page d'accueil a une disposition différente (pour les nouvelles et les informations de navigation). Vous pouvez également avoir des mises en page spécialisées. Par exemple, les pages de faculté ont toutes une disposition spécifique avec une image proéminente. Ne pas planifier la mise en page ici - il suffit de l'identifier.

• Triez la commande. Si l'ordre des pages est important, le diagramme du site est l'endroit où il faut travailler.

L'objectif de cette partie du processus de planification de site est de bien comprendre ce que chaque page nécessite. Cette information devrait vous aider à compléter les étapes de conception des données et de conception visuelle. Le diagramme de site est un document absolument critique. Après l'avoir approuvé, imprimez-le et collez-le sur votre moniteur. C'est votre carte pour le reste du projet.