Cómo hacer un esquema de sitio web

Una vez que el sitio web de su empresa evoluciona más allá de un diagrama de sitio básico, puede comenzar a tomar decisiones sobre lo que sucede en cada página. Un esquema del sitio web, o wireframe, presenta las tuercas y los pernos de la funcionalidad de la página sin incorporar los elementos de diseño, esquemas de color, estilos de tipo o elementos interactivos en sí mismos. Piense en el esquema como un plano de planta y la página terminada como una habitación amueblada. En lugar de volver a pintar las paredes y reorganizar o reemplazar los muebles para cambiar la forma en que se unen sus páginas, puede planificar su espacio en línea usando cuadros y marcadores de posición que establecen cómo funcionan las páginas de su sitio.

1.

Enumere los elementos recurrentes que aparecerán en sus páginas. Estos incluyen elementos como su logotipo, navegación del sitio, áreas de fotos, áreas de texto, encabezados, pies de página y barras laterales.

2.

Dibuje un diagrama que muestre los tamaños relativos de los elementos de la página y sus posiciones verticales y horizontales. Puede dibujar este diagrama en papel, procesarlo en un programa de ilustración o de edición de imágenes, o armarlo usando una aplicación de cableado en línea.

3.

Cree un diagrama de página para cada tipo de página que requiera su sitio web. Su página de inicio puede presentar un subconjunto diferente de elementos de la página que un producto o página de servicio, página de contacto o blog.

4.

Use el texto de marcador de posición para indicar dónde aparece la verborrea. Es posible que desee elegir entre las fuentes serif y sans serif, pero un esquema no es el lugar para experimentos y demostraciones de tipo de letra.

5.

Anota tus wireframes con notas sobre cómo funcionan los elementos o dónde se vinculan. Agregue íconos que enlazan con sitios o servicios externos, incluidos RSS, Twitter, Facebook y sitios asociados o fabricantes.

6.

Haga circular sus wireframes para su revisión, discusión y aprobación, enmendándolos según sea necesario. Cuando llega al punto en el que sus esquemas incluyen todos los elementos recurrentes que requieren sus páginas reales, y la posición relativa y el tamaño de los elementos se ajustan a las necesidades de su sitio web, puede avanzar más allá de la etapa de alámbrico.

Consejos

• Los esquemas de sitios web suelen preceder a las maquetas y prototipos en el proceso de diseño. Las maquetas muestran esquemas de color, estilos de letra y otros detalles de diseño en los formularios que realmente está considerando implementar. Los prototipos avanzan más allá de las maquetas a los ejemplares con formato ajustado que muestran la apariencia real de la página.
• Si planea crear una versión móvil, así como una versión basada en navegador, de su sitio, es posible que necesite crear esquemas para más de un flujo de diseño.
• Si dibuja sus esquemas a mano, use bolígrafos o lápices de colores para enfatizar áreas específicas de los diseños de página que tienen más importancia en el proceso de diseño o desarrollo. Por ejemplo, puede seleccionar un color específico para representar los módulos a codificar por un individuo específico. Estos colores indican elementos de planificación, no opciones de diseño.

Advertencia

• Si desarrolla sus esquemas en una herramienta de diseño de sitios web y crea CSS para sus wireframes, evite convertir la fase esquemática del desarrollo de sitios en un ejercicio de diseño. Los wireframes transmiten características, no estilo.