Diseño web equilibrado

Presentación del tema: "Diseño web equilibrado"— Transcripción de la presentación:

1 Diseño web equilibrado

2 Diseño Web Equilibrado
Podemos definir el diseño de una composición gráfica como la adecuación de distintos elementos gráficos previamente seleccionados dentro de un espacio visual, combinándolos de tal forma que todos ellos puedan aportar un significado a la misma, consiguiendo el conjunto transmitir un mensaje claro al espectador.  Diseño Web Equilibrado

3 Diseño Web Equilibrado
El diseño gráfico ha de tener en cuenta los aspectos psicológicos de la percepción humana y las significaciones culturales que pueden tener ciertos elementos, eligiendo éstos de forma que cada uno de ellos tenga un porqué en la composición y buscando un equilibrio lógico entre las sensaciones visuales y la información ofrecida.  Diseño Web Equilibrado

4 Diseño Web Equilibrado
No existe un método mágico que consiga una composición exitosa, pero sí que existen una reglas básicas de diseño que facilitan la transmisión de un mensaje por medio de una composición gráfica de forma efectiva.  Diseño Web Equilibrado

5 Diseño Web Equilibrado
No existe un método mágico que consiga una composición exitosa, pero sí que existen una reglas básicas de diseño que facilitan la transmisión de un mensaje por medio de una composición gráfica de forma efectiva. Proporciones, escalas, contrastes, agrupaciones, reticulados, alineaciones, simetrías, equilibrio entre contenidos y jerarquía visual. Diseño Web Equilibrado

6 Diseño Web Equilibrado: Las proporciones
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.  Diseño Web Equilibrado: Las proporciones

7 Diseño Web Equilibrado: Las proporciones
En el caso de una página web, los tamaños posibles son muy pocos, generalmente dos (800x600 y 1024x768 píxeles). Diseño Web Equilibrado: Las proporciones

8 Diseño Web Equilibrado: Las proporciones

9 Diseño Web Equilibrado: Las proporciones
Indudablemente, la forma más directa de marcar proporciones es mediante el tamaño relativo de los elementos. Los elementos más grandes, altos o anchos tienen una carga visual superior a los más pequeños, cortos o finos, creando zonas de atracción más intensas.  Diseño Web Equilibrado: Las proporciones

10 Diseño Web Equilibrado: Las proporciones
También podemos delimitar proporciones mediante el color, con el que podemos definir distintas áreas tonales útiles para distribuir de forma adecuada toda la información gráfica. En este sentido, los colores puros y saturados tienen un mayor peso visual que los secundarios neutros, y estos mayor que los terciarios poco saturados.  Diseño Web Equilibrado: Las proporciones

11 Diseño Web Equilibrado: Las proporciones
Otra técnica para definir proporciones es el uso de agrupaciones de elementos y la correcta distribución de estas en la pantalla, lo que nos va a permitir estructurar de una forma u otra la composición.  Diseño Web Equilibrado: Las proporciones

12 Diseño Web Equilibrado: Las proporciones
Las formas regulares tienen menor peso que las irregulares. Las formas alargadas y angulares alargan el campo de visión, creando zonas dominantes. Diseño Web Equilibrado: Las proporciones

13 Diseño Web Equilibrado: Las proporciones
No importan los elementos usados en una composición deberemos siempre buscar unas proporciones adecuadas entre ellos, el objetivo es que cada uno cumpla su papel comunicativo de forma adecuada. Diseño Web Equilibrado: Las proporciones

14 Diseño Web Equilibrado: La Escala
En el caso del diseño web, el tamaño del área de trabajo es fijo, pero si que deberemos establecer una escala de trabajo adecuada para dimensionar los elementos de nuestra página.  Diseño Web Equilibrado: La Escala

15 Diseño Web Equilibrado: La Escala
La regla Aurea  Diseño Web Equilibrado: La Escala

16 Diseño Web Equilibrado: La Escala
La regla Le Cobusier Diseño Web Equilibrado: La Escala

17 Diseño Web Equilibrado: La Escala
En Diseño Web, el logotipo debe tener un tamaño relativo adecuado a la página, los sistemas de navegación (menús) deben ser lo suficientemente grandes como para ser vistos y manejados con facilidad, pero no tanto que resten importancia al contenido informativo de la página, Diseño Web Equilibrado: La Escala

18 Diseño Web Equilibrado: La Escala

19 Diseño Web Equilibrado: La Escala

20 Diseño Web Equilibrado: La Escala

21 Diseño Web Equilibrado: Contraste
El contraste permite resaltar el peso visual, lo podemos conseguir por medio de diversos medios: tonos, colores, contornos y escala Diseño Web Equilibrado: Contraste

22 Diseño Web Equilibrado: Contraste

23 Diseño Web Equilibrado: Contraste

24 Diseño Web Equilibrado: Contraste

25 Diseño Web Equilibrado: Agrupación
El ser humano, tanto pos su carácter racional como por herencia cultural, tiende a organizar los elementos que percibe en torno a conjuntos significativos organizados. Esta inclinación a agrupar elementos relacionados en un factor que influye de forma notoria en la percepción que tenemos de nuestro entorno, de lo que vemos alrededor nuestro.  Diseño Web Equilibrado: Agrupación

26 Diseño Web Equilibrado: Agrupación
Las composiciones gráficas no escapan a esta tendencia, por lo que una correcta agrupación de sus elementos les otorga un carácter lógico, racional, que aumenta su valor comunicativo.  La agrupación de nuestros elementos gráficos y textuales puede basarse en diferentes criterios:  Proximidad: Tendemos a agrupar aquellos objetos que están próximos, cercanos entre sí. Semejanza: Tendemos a agrupar los elementos iguales o parecidos. Continuidad: Nuestra mente tiende a agrupar aquellos elementos que tienen una continuidad significativa. Simetría: Tendemos a agrupar los elementos para que aparezcan ordenados formando figuras conocidas. Diseño Web Equilibrado: Agrupación

27 Diseño Web Equilibrado: Agrupación

28 Diseño Web Equilibrado: reticulado
Cómo armonizar los bloques de contenido que formarán la composición del diseño. Una composición gráfica debe ser equilibrada no sólo en contenidos, sino también visualmente, hasta tal punto que podemos decir que el orden en la disposición espacial de los elementos de la misma es uno de los factores más importantes para su éxito.  Diseño Web Equilibrado: reticulado

29 Diseño Web Equilibrado: reticulado

30 Diseño Web Equilibrado: Alineación
Si bien las alineaciones son imprescindibles, pueden originar monotonía visual si se siguen a rajatabla, al producir páginas demasiado cuadriculadas y artificiosas. Por ello, es bueno introducir algunos elementos que, sin romper el reticulado y las alineaciones básicas, introduzcan un poco de variedad visual, de frescura en el diseño. Buscar el equilibrio entre alineaciones y elementos que las rompan es una de las tareas principales del diseñador de páginas web. Diseño Web Equilibrado: Alineación

31

32

33 Diseño web equilibrado