Diseño Aplicado a la Web

1. Diseño Aplicado a la Web La composición

2. La composición • Lo más importante en la composición “es el mensaje”. Es trabajo del diseñador buscar la máxima eficacia comunicativa, transmitiendo ese mensaje por medio de una composición que impacte visualmente al espectador y le haga receptivo. • Sin una disposición adecuada de las formas, colores y agrupaciones, sin un equilibrio global en la composición, el mensaje no llegará de forma adecuada al espectador. • En el diseño de páginas web, se debe considerar de igual manera la composición la que estará sujeta a las limitaciones que impone este formato y modificarlas para adaptarlas a la interactividad y a las posibilidades multimedia del mismo.

4. El diseño equilibrado • Las proporciones • La escala • El contraste • Las agrupaciones • La reticula • Las alineaciones • La simetría • Equilibrio entre contenidos

5. Las proporciones • A la hora de comenzar una composición, lo primero que debemos saber es el tamaño que va a tener ésta. • En el caso de una página web, los tamaños posibles son muy pocos, generalmente dos (800x600 y 1024x768 píxeles), pero es de suma importancia decidir para cuál de ellos se va a trabajar, ya que, aunque es posible diseñar una página para que sea compatible con ambas resoluciones, tan solo en una de ellas se visualizará tal y como la diseñemos.

6. El segundo paso será elegir los elementos gráficos y textuales que usaremos en la composición. Esta elección se debe basar en variables como la persona o empresa que desea transmitir el mensaje, el propio mensaje, el tipo de espectadores destinatarios de la composición y las características funcionales y comunicativas de cada elemento.

7. Definir qué partes del área de diseño deben estar ocupadas por elementos y qué partes van a quedar vacíos, sin contenido alguno. • Empezaremos a situar entonces los elementos en escena, como si fueran actores de nuestra particular obra de teatro, combinándolos de diferentes formas hasta que obtengamos un resultado satisfactorio. Tener en cuenta que cada elemento visual tiene una función determinada dentro de la composición.

8. La información visual que aporta un elemento puede cambiar según lo hagan las propiedades del mismo, como su tamaño, forma o color, pero sobre todo su proporción, el peso visual que tenga en el total de la composición. Por agrupaciones

9. La escala • Es decir, las propiedades de un elemento visual no son absolutas, sino relativas, ya que dependen de las del resto de elementos que le acompañan en la composición. • La proporción relativa entre elementos debe ser equilibrada, lo que implica el uso de una escala correcta en la composición. Las escalas son utilizadas de esta forma en planos y mapas, para conseguir representar los objetos reales lo más correctamente posible, con las proporciones adecuadas entre ellos.

10. El contraste • El contraste es el efecto que permite resaltar el peso visual de uno o más elementos o zonas de una composición mediante la oposición o diferencia apreciable entre ellas, permitiéndonos atraer la atención de espectador hacia ellos . • El contraste puede conseguir se a través de diferentes oposiciones entre elementos : • Contraste de tonos • Contraste de colores • Contraste de contornos • Contraste de escala*

11. Las agrupaciones • Las agrupaciones son muy útiles y del todo necesarias, sobre todo en: • elementos similares o de funcionalidad análoga, como componentes de menús de navegación, iconos, datos relacionados, botoneras, formularios,etc. • La agrupación de nuestros elementos gráficos y textuales puede basarse en diferentes criterios: • Proximidad: que están próximos, cercanos entre sí. • Semejanza: elementos iguales o parecidos. • Continuidad: tienen una continuidad significativa. • Simetría: aparezcan ordenados formando figuras conocidas.

12. La retícula • En el caso concreto de una página web, el diseñador puede perfectamente distribuir en pantalla una serie de rectángulos que representen las zonas que va a tener la página. Si la distribución sigue un reticulado acorde y las zonas están ubicadas con lógica, la página que resulte de ello tiene un 50% de posibilidades de resultar correcta. • Esta estructura lógica creada con el reticulado debe mantenerse luego en todas las páginas que forman el sitio web, proporcionando con ello consistencia y homogeneidad al mismo.

13. Las alineaciones • Definiendo “la alineación” como la colocación de elementos gráficos y textuales según una línea dada, que generalmente será horizontal o vertical. • Todo lo hablado se acentúa si el soporte es una página web, ya que la forma del monitor y de la ventana del navegador impulsa el uso de contornos rectangulares, que únicamente se consiguen con alineaciones prefectas. • La alineaciones horizontales son imprescindibles para conseguir un diseño en niveles estables, ya que las líneas horizontales aportan equilibrio, estas alineaciones se definirán desde los bordes superiores de los bloques. • En cuanto a las verticales, la alineación más común es la izquierda, ya que es la normal en los libros y demás soportes textuales, estando nuestra vista educada para tratar con ella. • Las alineaciones centradas son poco comunes, salvo en el caso de tablas de datos con columnas. • En cuanto a las alineaciones a la derecha, son poco frecuentes, ya que crean tensiones visuales en la mayoría de los casos.

14. La simetría • El diseño simétrico sugiere estabilidad, equilibrio, resultando estético, ordenado, atractivo y agradable de contemplar. Por el contrario, el asimétrico muestra irregularidad, desigualdad en las formas y desequilibrio. • En el caso de una página web, la concepción simétrica de la misma comienza con el reticulado elegido, ya que va a ser el que defina la distribución básica de elementos en ella. Hay que tender entonces a diseñar un reticulado lo más simétrico posible.

15. Equilibrio entre contenidos • Para ello es imprescindible mantener en nuestra obra gráfica una correcta organización espacial de contenidos gráficos y textuales, así como unas cantidades adecuadas de cada uno de ellos. • Los componentes gráficos aportan a la composición sensaciones visuales por medio de formas, colores y contrastes, mientras que los textos suministran información, mensajes, aunque esto no quiere decir que estas funcionalidades sean excluyentes, ya que los gráficos pueden aportar información y los textos formas y colores (de hecho, la Tipografía es una herramienta de diseño excelente).