Una vez que se ha terminado el trabajo en la estructura, ya se
cuenta con los insumos suficientes como para avanzar hacia la generación del
diseño visual de las pantallas del sitio, momento en que se utilizarán todos
los insumos que se han ido generando en las etapas anteriores.
Para ello la recomendación es trabajar en cuatro etapas
sucesivas e incrementales, que se describen a continuación:
- Diseño de las Estructuras de Páginas: Esta etapa considera la generación de dibujos o diagramas lineales (wireframes) que describen los componentes de cada una de las pantallas del sitio, con el objetivo de verificar la ubicación de cada uno de ellos. Lo ideal es que estos dibujos no contengan ningún elemento gráfico o visual concreto, sino que sólo incluyan líneas y bloques que representen objetos de contenido. El uso de estos diagramas o wireframes permite centrar la discusión sobre cada pantalla en la funcionalidad de la página.
- Un elemento que se debe considerar junto con estos dibujos de estructura, es que en las pantallas que representen transacciones, se debe incluir un diagrama de flujo sencillo, mediante el cual se ejemplifique cuáles son las interacciones posibles y sus resultados.
- Bocetos de Diseño: Esta etapa consiste en la generación de dibujos digitales acabados de la forma que tendrán las páginas principales del sitio que se desarrolla, considerando como tales la Portada, Portada de Sección y Página de despliegue de contenidos.
- Borradores de Página: Una vez que se ha aprobado la etapa anterior, se toman los bocetos de diseño que hayan sido aprobados y se genera un prototipo (páginas clickeables). La intención de esta etapa es usar el diseño de pantalla que se ha creado, contando con enlaces reales que permitan ver la forma de usar sus atributos (cada enlace tiene los estados de Enlace, Flotante, Activo y Visitado) y revisar la forma en que se despliegan las páginas que se van a desarrollar. Adicionalmente, en esta etapa será posible hacer la comprobación efectiva del peso de las páginas una vez construidas y se podrán optimizar los elementos que queden fuera de norma por peso o tamaño.
- Maqueta Web: Es la etapa final y consiste en generar todo el sitio en tecnología HTML utilizando imágenes y contenidos reales. En el caso de un sitio estático, esta etapa corresponderá a la construcción del sitio. En el caso de un sitio dinámico, las páginas que se generen permitirán que el diseñador genere las plantillas de trabajo y el desarrollador de software las utilice como elementos para introducir la programación que sea necesaria para la creación del sitio.