 definición del 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  wwwgobiernodechilecl manualdenormasgraficas  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  areas guía web perfil profesional jefe de proyecto diseñador desarrollador frontend arquitecto de información gestión de proyecto arquitectura de información usabilidad y diseño accesibilidad encontrabilidad ciclos del proyecto nuevo sitio rediseño select rating darle 15 darle 25 darle 35 darle 45 darle 55 no votes yet definición de un sitio web 