Cómo diseñar un prototipo de página web

Un prototipo de página web combina los wireframes de páginas web individuales en una visión cruda del sitio centrado exclusivamente en el diseño de página de prueba y sistemas de navegación. La creación de un prototipo no es más que la creación de un sitio web básico con vínculos de trabajo, pero no hay elementos de diseño como combinación de colores o imágenes. Esto permite que un equipo de la web para ajustar el diseño de un diseño coherente en todo el sitio que es a la vez funcional y atractivo.

Abrir un programa de software o programa en línea para la creación de wireframes y prototipos. Un programa de edición de fotos va a trabajar para crear su prototipo a partir de cero, pero puede ser más lento.

Arrastrar y soltar, cuadrados y rectángulos de color claro del tamaño adecuado para representar las diferentes secciones de la página web, como el logotipo, menús de navegación y el cuerpo principal. Utilizar un solo color en diferentes tonos, como el gris, para ayudar a enfocar sobre el formato y no el esquema de color.

Repita el paso 2 para cada página web en su sitio web. Incluir manchas para todos los elementos de navegación y menús.

Escribir el código HTML para todas las páginas de su sitio web utilizando un editor HTML, basando el diseño en las plantillas que ha creado en los pasos 1 a 3. Uso de software de diseño web, tales como Adobe Dreamweaver, para crear sus páginas si usted no sabe HTML. Dejar de fondos e imágenes. Reemplazar con diferente color gris luz fondos o cajas y la etiqueta con etiquetas tales como "Logo" o "Encabezamiento" para mostrar lo que debe ir allí.

Escribir todo el texto relevante en las páginas. Optar por escribir una frase o párrafo Resumen indique el objeto de la página para la creación de prototipos más rápido. Consulte esta declaración de propósito cuando se necesita para determinar qué tan bien funciona una página en el sitio web de diseño actual.

Previsualizar su prototipo en línea y poner a prueba los sistemas de navegación, enlaces y menús. Tomar notas de las secciones para cambiar o páginas que no están funcionando. Compruebe que las páginas utilizan el mismo esquema de navegación y diseño en todas partes.

Consejos

• comprobar Sitepoint.com recomienda OmniGraffle y Axure RP Pro para wireframing y prototipos. Otra opción es lápiz, un libre de Mozilla Firefox.
• comprobar Diseño W-borde recomienda la elaboración de sus páginas de prototipo en papel, si tiene problemas para obtener el código HTML para mirar a la derecha o desea una forma rápida de jugar con diferentes ideas de diseño.

referencias

• enlazar Sitepoint: 16 Herramientas de diseño para la creación de prototipos y Wireframing
• enlazar Diseño W de punta: Desarrollo de un prototipo de sitio web