DISEÑO VISUAL

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.

El ideal es que se dibujen diagramas con todas las pantallas que tendrá el sitio, ya que de esta manera será posible que diseñadores y desarrolladores tengan un documento concreto de trabajo, a través del cual resuelvan todas las dudas de los elementos que componen esta página. Si bien este trabajo es largo y puede resultar tedioso, su ventaja es que ningún elemento en las páginas queda puesto al azar sino que responde a necesidades puntuales que se han detectado y que se resuelven por esta vía.

Lo ideal es que estos dibujos no contengan ningún elemento gráfico o visual concreto (como logos, viñetas o fotos), sino que sólo incluyan líneas y bloques que representen objetos de contenido. En este nivel de desarrollo conceptual de la estructura de páginas, el uso de estos diagramas o wireframes permite centrar la discusión sobre cada pantalla en la funcionalidad y no en temas más subjetivos como colores o calidad de los elementos de diseño en la página.

No obstante lo anterior, hay ocasiones en las que es posible desarrollar diagramas o wireframes que contengan elementos o recursos visuales, esto dependerá de la madurez del equipo y las contrapartes que esten trabajando en el proyecto y estos elementos visuales se presenten unicamente como referencias cuyo objetivo sea describir con mayor claridad el sentido de las funcionalidades y objetos presentes en el wireframe.

[D] Figura 3: Estructura de páginas (Wireframe).

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. Naturalmente se deberá incluir las pantallas correspondientes cuando sea adecuado.

[D] Figura 4: Diagrama de Flujo.

Gracias a estos diagramas en combinación con las páginas, tanto diseñadores como desarrolladores podrán tener claro cuál es el trabajo que deben realizar en cada una de las áreas del sitio que se estén generando.

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.

[D] Figura 5: Boceto de diseño.

Para desarrollar los elementos gráficos se utilizan como insumos los dibujos de estructura que se han generado en la etapa anterior.La idea es que en esta etapa se trabaje en software gráfico para facilitar el proceso de corrección, ya que habitualmente habrá mucha interacción con los usuarios.Los elementos que se deben tener presentes en esta etapa, son los siguientes:

Imagen Corporativa de la institución:

se deben seguir los lineamientos de uso de colores, textos y otros elementos definidos para la entidad.

Imagen Corporativa del Gobierno:

se deben seguir los lineamientos indicados por el Gobierno de Chile en este aspecto.

Criterios de Usabilidad:

se deben tener en cuenta los criterios de usabilidad, accesibilidad y la normativa vigente.

Más información sobre la imagen corporativa del Gobieno en: www.gobiernodechile.cl/manual-de-normas-graficas/

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) mediante el cual se pueda comprobar directamente la forma en que se desempeñan, cuando se les aplica la tecnología HTML de construcción de páginas web.

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 (figuras 6, 7 y 8) .

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.

Es importante considerar que todas las tareas y actividades incluidas en esta etapa pueden ser abordadas por un diseñador que tenga experiencia en diseño web. Esto debe ser parte de los requerimientos solicitados a las empresas proveedoras de este tipo de servicios.

[D] Figura 6: Borrador de Portada.

[D] Figura 7: Borrador Segundo Nivel.

[D] Figura 8: Borrador Tercer Nivel.

Otras consideraciones del Diseño Visual

Referencias

Tomado de http://www.guiadigital.gob.cl/articulo/definicion-del-diseno-visual