Comment concevoir un prototype de page web

Un prototype de site combine les wireframes des pages Web individuelles en un aperçu brut du site axé uniquement sur la mise en page de test et les systèmes de navigation. Création d`un prototype est la simple création d`un site Web de base avec des liens de travail, mais pas d`éléments de conception tels que des couleurs ou des images. Cela permet à une équipe Web pour adapter la mise en page pour une conception cohérente dans l`ensemble du site qui est à la fois fonctionnel et attrayant.

Ouvrez un programme logiciel ou programme en ligne pour la création de prototypes et wireframes. Un programme de retouche photo fonctionnera pour créer votre prototype à partir de zéro, mais peut-être plus de temps.

Glisser-déposer de taille appropriée, des carrés de couleur claire et des rectangles pour représenter les différentes sections de votre page Web, comme le logo, les menus de navigation et le corps principal. Utiliser une seule couleur dans différentes nuances, telles que le gris, pour aider à mettre l`accent sur la mise en page et non schéma de couleurs.

Répétez l`étape 2 pour chaque page Web sur votre site. Inclure des points pour tous les éléments de navigation et les menus.

Ecrire le code HTML pour toutes les pages de votre site Web en utilisant un éditeur HTML, baser la conception sur les modèles créés dans les étapes 1 à 3. Utilisez un logiciel de conception de sites Web, tels que Adobe Dreamweaver, pour créer vos pages si vous ne connaissez pas HTML. Laissez de fonds et les images. Remplacer par une couleur différente gris lumineux ou des boîtes et des balises telles que "Logo" ou "Entête" pour montrer ce qui devrait y aller.

Tapez tout texte pertinent dans les pages. Choisissez d`écrire une phrase sommaire ou du paragraphe indiquant l`objet de la page pour le prototypage rapide. Reportez-vous à cette déclaration de fin lorsque vous avez besoin de déterminer la qualité des opérations de page dans la disposition actuelle du site.

Aperçu de votre prototype en ligne et tester le système de navigation, des liens et des menus. Prenez des notes de sections ou de modifier les pages qui ne fonctionnent pas. Vérifiez que vos pages utilisent le même système de navigation et de mise en page tout au long.

Conseils

• vérifier Sitepoint.com recommande OmniGraffle et Axure RP Pro pour wireframing et prototypage. Une autre option est Crayon, un libre Mozilla Firefox add-on.
• vérifier Conception W-bord recommande dessin vos pages prototypes sur papier si vous avez des problèmes pour obtenir le code HTML pour regarder à droite ou si vous voulez un moyen rapide de jouer avec des idées différentes de mise en page.

Les références

• lien Sitepoint: 16 Outils de conception pour le prototypage et Wireframing
• lien Conception W-bord: Développer un site Web Prototype