Presentation1
- 2. • Podemos definir el diseño gráfico como el proceso de programar, proyectar, coordinar, seleccionar y organizar una serie de elementos para producir objetos visuales destinados a comunicar mensajes específicos a grupos determinados. • El diseño gráfico busca transmitir las ideas esenciales del mensaje de forma clara y directa, usando para ello diferentes elementos gráficos que den forma al mensaje y lo hagan fácilmente entendible
- 3. Formas básicas en diseño gráfico
- 4. • El lenguaje visual a través de grafismos puede descomponerse en entidades básicas, cada una de las cuales tiene por sí misma un significado propio, pero que unidas de diferentes formas pueden constituir elementos comunicativos distintos. • Las formas básicas del diseño gráfico son pocas: el punto, la línea y el contorno. Pero son la materia prima de toda la información visual que aporta una composición. • Cada una de ellas posee un conjunto de características propias que las modifican y condicionan, entre las que destacan:
- 5. Forma • Definida por disposición geométrica. La forma de una zona o contorno va a permitirnos reconocerlas como representaciones de objetos reales o imaginarios.
- 6. Dirección • Proyección plana o espacial de una forma, continuación imaginaria de la misma aún después de su finalización física. Puede ser horizontal, vertical o inclinada en diferentes grados.
- 7. Color • Tal vez las más importante y evidente, puede imprimir un fuerte carácter y dinamismo a los elementos a los que se aplica. Toda forma o zona tendrá en general dos colores diferentes, el de su contorno y el de su parte interna, pudiendo aplicarse tanto colores puros como degradados de colores.
- 8. Textura • Modificación o variación de la superficie de los materiales, sirve para expresar visualmente las sensaciones obtenidas mediante el sentido del tacto o para representar un material dado. La textura está relacionada con la composición de una sustancia a través de variaciones diminutas en la superficie del material, y se consigue en una composición gráfica mediante la repetición de luces y sombras o de motivos iguales o similares.
- 9. Escala • Tamaño relativo de una zona respecto a las demás y al total de la obra. Los diferentes tamaños de las diferentes zonas modifican y definen las propiedades de cada una de ellas.
- 10. Dimensión • Capacidad tridimensional de un elemento o zona. La dimensión sólo existe en el espacio real tridimensional, pero se puede simular en una composición gráfica plana mediante técnicas de perspectiva, sombreado o superposición. También, mediante el uso de fotografías, que introducen espacios tridimensionales en la composición.
- 11. Movimiento • Propiedad muy importante, que aporta connotaciones de dinamismo y fuerza. En las obras gráficas puras no existe movimiento real, pero sí se encuentra implícito en ciertos elementos y se puede conseguir con ciertas técnicas que engañan al ojo humano (diseño cinético, pintura cinética) o representando elementos que sí lo tienen en el mundo real.
- 12. • En las páginas web podemos introducir animaciones gráficas que aportan sensaciones de movimiento mucho mayores, como animaciones Flash, gifs animados, capas dinámicas, elementos de vídeo, etc.
- 13. El diseño equilibrado. Las proporciones
- 14. • A la hora de comenzar una composición, lo primero que debemos saber es el tamaño que va a tener ésta. • Si el soporte final de nuestro grafismo va a ser el papel, podremos diseñar para una gran variedad de tamaños, desde los más pequeños, hasta los más grandes (posters, carteles para vayas publicitarias), aunque casi siempre diseñaremos en alguno de los formatos DIN. • 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.
- 15. • 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. • Debemos definir qué partes del área de diseño deben estar ocupadas por elementos y qué partes van a quedar vacíos, sin contenido alguno. Si dejamos muchos espacios vacíos la composición puede resultar descordinada, ya que será difícil establecer relaciones globales entre los elementos o entre los grupos de ellos. Pero si el número de componentes es elevado, podemos obtener una obra sobrecargada, difícil de entender, en la que no se distingue con claridad qué es cada cosa y cuál es el mensaje que quiere transmitir.
- 16. 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.
- 17. • 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.
- 18. • También podemos delimitar proporciones en un grafismo 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.
- 19. • Otra técnica para definir proporciones es el uso de agrupaciones de elementos y la correcta distribución de estas en el escenario, lo que nos va a permitir estructurar de una forma u otra la composición.
- 20. • Las formas regulares tienen menor peso que las irregulares.
- 21. • Las formas alargadas y angulares alargan el campo de visión, creando zonas dominantes.
- 22. • Sean cuales sean lo elementos usados en una composición deberemos siempre buscar unas proporciones adecuadas entre ellos, con objeto de que cada uno cumpla su papel comunicativo de forma adecuada.
- 23. El diseño equilibrado La escala
- 24. • Se entiende por escala la relación entre las proporciones de los elementos visuales de una composición. • El concepto de escala no se refiere sólo a la relación entre tamaños de dos o más elementos, sino también a la relación entre colores, formas, etc.
- 25. • El color de una forma es brillante o apagado según el color del fondo sobre el que se encuentra. • 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.
- 26. • 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. • Así, 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, etc.
- 27. • Un error muy común es el de los iconos, que deben ser suficientemente grandes como para que no pierden sus rasgos diferenciadores ni su zona activa si actúan como enlaces, pero nunca tanto que destaquen en exceso, sobre todo si van acompañados de un texto explicativo.
- 28. El diseño equilibrado El contraste
- 29. • El contraste permite resaltar el peso visual, lo podemos conseguir por medio de diversos medios: tonos, colores, contornos y escala.
- 30. • El contraste puede conseguirse a través de diferentes oposiciones entre elementos:
- 31. Contraste de tonos • Se obtiene contraste entre elementos que poseen tonos (claridad-oscuridad) opuestos. En este caso, el mayor peso lo tendrá el elemento más oscuro, destacando el más claro sobre él con más intensidad cuanto mayor sea la diferencia tonal.
- 32. • Conforme se disminuye la tonalidad del elemento más oscuro el contraste va perdiendo intensidad, siendo necesario redimensionarlo si queremos mantener el mismo contraste.
- 33. Contraste de colores • Dos elementos con colores complementarios se refuerzan entre sí, al igual que un color cálido y otro frío.
- 34. • El contraste creado entre dos colores será mayor cuanto más alejados estén en el círculo cromático. Los colores opuestos contrastan mucho, mientras que los análogos apenas lo hacen, perdiendo importancia visual ambos.
- 35. • Este efecto se puede usar para dar mayor dimensión o sensación de proximidad a un elemento en una composición, situándolo sobre un color que contraste con él. • Este tipo de contraste es especialmente indicado para los contenidos textuales, en los que debe primar la facilidad de lectura. Lo ideal será el texto negro sobre fondo blanco, ya que es el que más contraste crea (contraste de tono). Pero en ciertos elementos, en los que este juego de colores no sea posible, habrá que buscar siempre un texto cálido sobre un fondo frío o viceversa.
- 36. Contraste de contornos • Los contornos irregulares destacan de forma importante sobre los regulares o reconocibles. • Este tipo de contrastes es adecuado para dirigir la atención del usuario a ciertos elementos de una composición o página web, como botones importantes, banners publicitarios, etc. No obstante, hay que ser comedidos en su uso, sobre todo si se combinan con otros tipos de contraste, ya que pueden ser un foco de atracción visual demasiado potente. Además, crean mucha tensión en el espacio que les rodea.
- 37. Contraste de escala • Es el producido por el uso de elementos a diferentes escalas de las normales o de proporciones irreales, consiguiéndose el contraste por negación de la percepción aprendida. • Este sistema de contraste no es muy usado en las páginas web, donde se busca siempre la escala adecuada, pero sí es frecuente en fotografía y pintura, consiguiendo atraer la atención del espectador de forma muy efectiva.
- 38. El diseño equilibrado Las agrupaciones
- 39. • 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. • 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.
- 40. • 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.
- 42. • En el caso concreto de las páginas web, las agrupaciones son muy útiles y del todo necesarias, sobre todo en lo que respecta a elementos similares o de funcionalidad análoga, como componentes de menús de navegación, iconos, datos relacionados, botoneras, etc.
- 43. • Las agrupaciones también son muy útiles en casos de formularios o fichas de muchos campos, siendo muy conveniente dividir estos en grupos de información análoga, separando luego cada grupo de los demás mediante franjas horizontales o verticales en blanco. • Con ello, el formulario no sólo gana en belleza visual, sino que además resulta más claro, lógico y fácil de completar por el usuario.
- 45. El diseño equilibrado El reticulado
- 46. • 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
- 47. • Un reticulado o rejilla es un sistema de referencia formado por diferentes líneas horizontales y verticales que marcan la ubicación de elementos y zonas en una composición gráfica, líneas que no tienen porqué tener una representación real (no tienen porqué formar parte del grafismo), pero sí mental. Son las guías imaginarias sobre las que vamos a ir colocando los elementos, la espina dorsal de un composición gráfica.
- 49. • Mediante el reticulado, el diseñador va situando con armonía los bloques de contenido que formarán la composición: zonas principales y secundarias, títulos y subtítulos, bloques de texto, fotografías, ilustraciones, gráficos, sistemas de navegación, botones, iconos, etc, dando con ello un estilo propio visualmente lógico a la misma. • 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.
- 51. El diseño equilibrado Las simetrías
- 52. • Una forma o imagen es simétrica cuando un eje central la puede dividir en dos parte iguales y opuestas entre sí. Este concepto, aplicado a una composición gráfica puede aplicarse tanto a los propios elementos individuales de la misma como a su totalidad. En este caso, obtener una simetría exacta puede resultar difícil (incluso inconveniente), pero sí que podemos buscar una simetría de bloques y espaciados en nuestra rejilla.
- 53. • 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. • Pequeñas variaciones en la distribución simétrica dan ese toque de ruptura que hace su contemplación más amena y natural.
- 54. • Una forma aceptada de romper el esquema simétrico de una página es crear bloques descompensados visualmente. • Otra técnica es el uso de un único menú lateral de navegación, que descompensa el peso visual hacia la zona en la que se encuentra.
- 56. • De la misma forma, cuando trabajamos con formularios en muy importante diseñarlos de tal forma que el aire que quede entre los diferentes elementos que lo formen sea simétrico, creando un total claro y armonioso.
- 57. El diseño equilibrado. El equilibrio entre contenidos
- 58. • 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.
- 59. • Las composiciones formadas por muchos elementos gráficos y poco o ningún contenido textual pueden crear rechazo en aquellos espectadores que buscan el contenido sustancial
- 60. • En el lado contrario, las composiciones en las que se introduce un contenido eminentemente textual, con poco o ningún contenido gráfico, suelen ser rechazadas por el espectador, que encuentra tremendamente aburrida y tediosa
- 61. • En el caso de las páginas web, los tipos de contenidos a ofrecer aumentan considerablemente respecto a los de una composición sobre papel ya que podemos incluir en ellas no sólo gráficos y textos, sino también sonidos, animaciones, vídeo
- 62. El diseño equilibrado. La jerarquía visual
- 63. • En toda composición gráfica se debe crear una jerarquía visual adecuada, con objeto de que los elementos más importantes de la misma se muestren debidamente acentuados. • Mediante un adecuado diseño se puede establecer un camino visual que conduzca el ojo del espectador y le vaya mostrando la información contenida en la composición de forma organizada, lógica y fiable, que dirija su percepción por la ruta más idónea
- 65. • En los países occidentales leemos los documentos de izquierda a derecha y desde la parte superior a la inferior, forma de proceder se ha extendido a todas aquellas actividades en las que necesitamos visualizar algo.
- 67. • Otro sistema de establecer una jerarquía en los contenidos es el uso de colores. Podemos enfatizar ciertas zonas de la composición usando en ellas colores primarios muy saturados, que atraen de forma irresistible la atención de los espectadores, teniendo siempre cuidado de que los textos en ellas contenidos contrasten de forma clara con el fondo, para que pueden ser leídos con comodidad. • Para las zonas de segundo orden podemos usar colores menos saturados, secundarios o terciarios, siendo una buena opción aquellos presentes en la naturaleza, ya que son más naturales y mejor aceptados por los espectadores. • Por último, las zonas menos importantes podemos no colorearlas o hacerlo muy sutilmente, para que no atraigan en exceso la mirada.
- 69. Teoría del color
- 71. Modelos de color • Los colores obtenidos directamente naturalmente por descomposición de la luz solar o artificialmente mediante focos emisores de luz de una longitud de onda determinada se denominan colores aditivos.