Breve introducción al mundo del diseño gráfico, pensado principalmente para la web, concretamente, enfocado a quien se introduce en el mundo del front-end sin conocimientos de artes visuales

1. Di seño (web) pa ra no di señadores

3. • Pensada para personal informático
• Sin formación artística
• Preparándose para afrontar trabajos de
front-end

4. • Para quien esté a punto de encargar su
nueva web
• Para quien quiera iniciarse en el mundo
del diseño
• O para cualquier persona que sienta
curiosidad por el tema

5. • El diseño no es cuestión de gusto
• Ni siquiera de buen gusto

6. • Funcionamiento de nuestro cerebro
(Gestalt)
• Imitación de la naturaleza (brillos y
sombras, número áureo…)
• Convenciones culturales (tipografía,
iluminación…)
• Resolver problemas

7. • Es muy difícil de definir, de manera genérica:
• El diseño se define como el proceso previo de
configuración mental, "pre-figuración", en la
búsqueda de una solución en cualquier campo.
Wikipedia
• Design may be described as creativity deployed to
a specific end
George Cox
• Más detalles (Bill Moggridge “What is design”):
http://www.youtube.com/watch?v=cOx_Zx95hxM

8. • Todas las definiciones hacen referencia a
“buscar soluciones”, “alcanzar objetivos”,
“fin específico” …
• En definitiva: el gusto del [buen] diseñador
no tiene nada que ver en el proceso

9. • ¿Confiarías en el sitio web de un banco
que utilizase tipografía Comic Sans?
• ¿Y en una guardería que utilizase Una
tipografía muy seria y antigua para su sitio web?

10. • Puede ser que a un/a diseñador/a le
guste mucho el color rosa, pero ¿sería
recomendable utilizarlo en la web de un
bufete de abogados?
• ¿Y si el bufete está especializado en
temas de discriminación sexual?

11. • Como se desprende de los ejemplos,
para diseñar [bien] no sólo hay que dejar
de lado nuestros gustos (¡¡¡y los del
cliente!!!)
• Hay que priorizar el objetivo de lo
diseñado
• «The device must explain itself», Donald
Norman, The design of everyday things

12. • Probablemente no dispongas de
formación visual
• Muchos aspectos son de sentido común,
pero es difícil darse cuenta hasta que
alguien te las explica
• CSS, Javascript, Photoshop, Fireworks o
Illustrator son relativamente sencillos de
aprender, los aspectos visuales no tanto

14. • Lo que se reúne a continuación es una
colección relativamente organizada de
principios generales de diseño
• Ni están todos ni se tratan en profundidad
• Por ello, esta presentación sólo supone un
primer y somero acercamiento al tema
• Para continuar se recomendará algún
material
• La investigación por parte del lector resulta
más que recomendable

15. • Es una corriente de psicología surgida en
Alemania a principios del siglo XX
• Estudió la percepción del cerebro
humano a través de la visión
• Basándose en experimentos enunciaron
una serie de principios conocidos como
leyes o principios gestálticos sobre los
que se sustenta gran parte de la teoría
de las artes visuales (pintura, fotografía…)

16. Nuestra mente agrupa los elementos
similares en una entidad. La semejanza
depende de la forma, el tamaño, el color y
otros aspectos visuales de los elementos.

17. Cuando las partes de una totalidad reciben
un mismo estímulo, se unen formando
grupos en el sentido de la mínima distancia.
Esta ordenación se produce de modo
automático y, sólo por una resistencia del
perceptor, o por otra ley contradictoria,
puede anularse esta lectura

18. Las imágenes simétricas son percibidas
como iguales, como un solo elemento, en
la distancia.

19. Implica que los elementos que parecen
construir un patrón o un flujo en la misma
dirección se perciben como una figura.

20. Cuando miramos una figura la percibimos
de la manera mas simple posible

21. Establece el hecho de que el cerebro no
puede interpretar un objeto como figura o
fondo al mismo tiempo. Depende de la
percepción del objeto será la imagen a
observar.

22. Las líneas que circundan una superficie
son, en iguales circunstancias, captadas
más fácilmente como unidad o figura, que
aquellas otras que se unen entre sí. Las
circunferencias, cuadriláteros o triángulos
producen el efecto de cerramiento

23. • Desde el punto de vista biológico, el
propio sistema nervioso se ha ido
formando por el condicionamiento del
mundo exterior
• Esto puede alterar la percepción

24. Podemos predecir objetivamente
cómo interpretarán otros el diseño

25. • http://psicopsi.com/PERCEPCION-1
• http://leyes-psicologia-
gestalt.blogspot.com.es/

26. • Convenciones heredadas a menudo de los copistas
de monasterios medievales
• «Web design is 95% typography» Oliver Reichenstein,
http://informationarchitects.net/blog/the-web-is-all-
about-typography-period/
• El 95% de la información que se proporciona en la
web es a través de lenguaje escrito
• Optimizar la tipografía supone optimizar la legibilidad,
la accesibilidad y la experiencia de usuario
(usabilidad)
• Tratar el texto como interfaz de usuario, facilitando la
lectura

27. • El espacio entre letras debe ser menor
que la separación de palabras (OBVIO)
• La separación entre líneas debe ser
mayor que entre palabras (No tan obvio,
pero igual de importante)
• No se puede concebir una buena CSS
sin line-heights, porque los valores por
defecto no son suficientes

28. http://informationarchitects.net/blog/responsive-typography-the-basics/

29. • Tener en cuenta el tiempo de carga de la
fuente (no usar demasiadas)
• Cuidado con las fuentes que se utilizan:
no siempre se podrán usar y es difícil
encontrar una gratuita y buena
• Fijarse sobre todo en:
– Kerning
– Optimización para pantallas (ocupan menos
espacio)

30. • Encabezados: Admiten tipografías más
complejas
• Texto corrido: Tipografías simples, que no
cansen y faciliten la lectura
(especialmente cuanto más largos sean
los textos)

31. • Debe intentar mantenerse alineada la
parte izquierda del texto para facilitar el
salto de línea
• Los editores más populares (Word) lo
hacen mal y han establecido un mal
hábito
• Evitar indentado de listas (ul, ol y dl)
• Evitarlo también en citas
• Ejemplo: esta presentación :-D

32. • Izquierda: óptimo, permite recuperar fácilmente el
principio de la línea siguiente
• Justificado: muy estético al formar líneas rectas a
ambos lados, pero el tamaño de los espacios es
irregular, dificultando la lectura, especialmente en el
caso de problemas como dislexia (accesibilidad).
Nunca en columnas estrechas
• Centrado: encabezados o efecto decorativo
• Derecha: textos breves, gran efecto decorativo, pero
dificulta la recuperación del principio de línea

33. • Convención tipográfica del siglo… ¡XVI!
• Si la aprovechamos, lograremos una
relación agradable entre tamaños debido
a la costumbre adquirida

34. • Resaltar algunas partes de un texto
facilita la lectura
• Pero es importante no resaltarlo todo
• Listas, subrayados, cursivas, negritas…
Mejor usarlas con moderación
• Tampoco es bueno (y se ve) incluir todos
los formatos en un solo título.
Contraejemplo:
TÍTULO MALO DE EJEMPLO

36. • http://www.markboulton.co.uk/journal/co
mments/five-simple-steps-to-better-
typography
• Y sobre todo en:
• http://webtypography.net

37. • Factor psicológico y, a menudo, ambiguo
y subjetivo
• Uno de los errores más frecuentes es
utilizar una gama “por gusto” y no por su
aportación a la transmisión del mensaje
• El otro es que el cliente obligue a utilizar
un determinado color por idéntico motivo

38. • Existen muchos métodos (RGB, Hex, HSV,
HSL…)
• Los más intuitivos: HSL (Hue – Saturation
– Luminance) y HSV (Hue – Saturation –
Value)
• Tono
• Saturación
• Valor

39. • Los distintos tonos del espectro visible desde
el 0 (rojo) hasta el 360 (violeta) uniendo los
extremos
• Las transiciones de un color a otro son
progresivas. P. ej.: del azul al amarillo se pasa
por el verde

40. • RGB: Red Green Blue
• Se llaman aditivos porque entre sí se
suman (cuanto más valor hay de un
color, más claro es)
• Típicos de medios digitales
• Homogéneamente repartidos por el
círculo cromático (120º)

41. • CMY(K): Cian, Magenta, Yellow (Black)
• Sustractivos porque absorben la luz cuya
frecuencia es distinta a su color (el negro
la absorbe toda)
• Típicos de medios impresos
• Homogéneamente repartidos por el
círculo cromático (120º)

42. • Gama monocromática:
– Mismo tono
– Distinta saturación
o luminancia/valor
(HSL o HSV)
• http://0to255.com

43. • Colores complementarios:
– 180º de giro en la rueda de color
– El “opuesto”
– Muy frecuente en la naturaleza. P. ej.:
naranja-azul en atardeceres

44. • Tríadas de colores:
– En teoría 120º de giro en la rueda de color
– ¡Como los colores primarios!

45. • Cuartetos de colores:
– En teoría 90º de giro en la rueda de color
– Una especie de doble complementario

46. • En realidad ninguno es tan exacto
• Siempre hay que ajustar el tono un poco
• Por no hablar de los otros parámetros
• Pero sirve de guía para empezar

47. • Cada color tiene connotaciones culturales
(más objetivas) y personales (basadas en la
experiencia de cada uno)
• Pueden utilizarse esas connotaciones para
reforzar el mensaje general del diseño
• Algunos ejemplos:
– Rojo: pasión, peligro, calidez, fuego, sangre…
– Azul: agua, frío, seriedad, confianza, tranquilidad…
– Verde: esperanza, bosque, ecología, relajante…

48. • RGB: es la suma de todos los colores =
máxima luminosidad
• CMYK: reflexión de toda la luz recibida
• Representa la pureza, alegría, paz, pulcritud
• En algunas culturas tiene connotaciones
luctuosas
• Puede ser muy importante para mantener
un diseño “limpio”, mediante grandes áreas
blancas de fondo

49. • RGB: es la ausencia de color
• CMYK: absorción de toda la luz recibida
• Oscuridad, dolor, formalidad, solemnidad,
tristeza
• Resalta la viveza de otros colores
próximos a él, por eso se utiliza en
marcos para fotos

50. • RGB: misma cantidad de cada color
• Neutralidad, ayuda a reforzar el mensaje
de los otros colores
• Casi nunca se usa “puro”, sino sutilmente
virado a otro color. P. ej.: si un diseño
resulta muy frío puede hacerse el fondo
de un gris claro cálido (en lugar de
blanco) para compensarlo

51. • http://0to255.com
• http://www.colourlovers.com/palettes
• http://kuler.adobe.com
• http://colorschemedesigner.com

52. • Convención cultural + Imitación de la
naturaleza
• Permiten sintetizar 3D en 2D, revelando
volúmenes
• También es posible utilizar otras técnicas
como la perspectiva

53. • Lo más frecuente es que la luz llegue de
la parte superior izquierda

54. • A partir de cierta época, autores como
Velázquez empezaron a romper con
dicha convención (P. ej.: Las Meninas)

55. • Botones y elementos de formulario
• Elementos con los que interactuar
• ¿Cuál de estos botones es “pulsable” y
cuál está ya pulsado?

56. • Es un círculo representado en 2D, pero
los brillos y las sombras nos permiten
“reconocer” una esfera

57. • ¿Por qué se dice que la ropa negra
“adelgaza”?
• ¿Y por qué se recomienda no utilizar
colores brillantes como el amarillo o el
naranja para disimular los kilos de más?

58. • Todos los brillos y sombras de la página
tienen que ser coherentes entre sí
• Si no encontraremos raro el diseño, como
que “falla algo”

59. • El diseño tiende a imitar en muchos
aspectos a la naturaleza
• Un ejemplo es el número áureo
• El comportamiento de las sombras en
animaciones
• Combinaciones de colores frecuentes

60. • Representa una proporción en la división
de un objeto tal como sigue:
• a+b/a = a/b
• Aprox.: 1,62
• Estudiado por Euclides (c. 300 – 265 aC)

61. • Su presencia en la naturaleza es constante:
– La relación entre la distancia entre las espiras
del interior espiralado de cualquier caracol o de
cefalópodos como el nautilus
– Disposición de los pétalos de las flores
– Distribución de las hojas en un tallo
– Relación entre las nervaduras de las hojas de
los árboles
– Relación entre el grosor del tronco y el de las
ramas principales
– Altura del ombligo

62. • Además, su presencia en el arte viene de
muy antiguo:
– Pirámide de Gizeh
– Partenón en Atenas
– Sinfonías de Mozart y Beethoven
• Nos hemos acostumbrado a esta
proporción y nos gusta
• ¡Aprovechémoslo en nuestros diseños!
• P. Ej.: proporción menú/contenidos

63. • Es muy frecuente en fotografía
• Se divide el encuadre en una matriz 3x3
• Los puntos de cruce de las líneas
verticales y horizontales son puntos de
especial interés, se suelen situar
elementos en ellos
• También para colocar el horizonte
• Tampoco se tiene que aplicar
milimétricamente

64. http://www.flickr.com/photos/genista/15875927

65. • Al utilizar sombras y brillos imitábamos la
naturaleza
• Es importante tener en cuenta la física de
la luz también al animar un objeto
iluminado/sombreado:
– Cuanto más próximo está al fondo la sombra
es más definida y oscura (entra menos luz)
– Cuanto más lejos está del fondo la sombra
será más difusa y clara
Click Click

66. • Estructuras formadas por ejes que delimitan
celdas y sus separaciones
• Es una herencia de los medios impresos
(convención cultural)
• En cada celda pueden encajarse elementos
(texto, vídeos, fotos,…)
• Modular: Facilita la composición y la vuelve
más flexible
• Organiza el sitio creando ritmo visual
• Muy presente en periódicos

68. • http://www.thegridsystem.org
• http://960.gs
• http://www.blueprintcss.org/
• http://foundation.zurb.com/
• http://twitter.github.com/bootstrap/scaffol
ding.html#gridSystem

69. • Cohesión: utiliza la misma solución para el
mismo problema a lo largo de todo el
sitio web
• Sutileza: el usuario no es tonto y es
capaz de percibir matices incluso aunque
parezca no darse cuenta
• Muchísimas cosas que no caben en esta
humilde presentación

71. • Como se ha visto la tarea de diseñar para la
web no tiene nada de aleatorio, ni mucho
menos de buen gusto
• Es algo muy complejo y consiste más en
utilizar las herramientas vistas (y otras
muchas) para resolver los problemas que
se plantean (demasiada información, poca
información, qué elementos resaltar, etc.)
que en una especie de ejercicio intuitivo-
místico por parte del diseñador, como suele
creerse

72. • Aunque un diseñador muy experimentado
trabaje de manera más intuitiva, sus
decisiones están basadas en los
fundamentos que hemos visto
• Si no entiendes algo o el prototipo te
parece incompleto ¡pregunta al diseñador!
(por ejemplo, el interlineado de los títulos)
• No siempre será posible (y menos al
principio) esquivar la tentación de tomar una
decisión basándonos en nuestro propio
gusto

73. • Muchas veces el cliente nos impondrá
criterios subjetivos
• Como profesional, es tu obligación moral
informarle si consideras que alguno de
ellos va en perjuicio del mensaje del
diseño
• En última instancia es él/ella quien debe
decidir (y, desgraciadamente, no siempre
se hace de manera razonada)

74. • La combinación de las reglas
• Las herramientas vistas son un medio
pero no un fin en sí mismas: una vez
dominadas las normas es el momento
de romperlas
• Existen muchos aspectos que no marca
ninguna regla y casi ninguna regla aplica
siempre

75. «Un diseñador sabe que ha alcanzado la
perfección no cuando ya no tiene nada
más que añadir, sino cuando ya no le
queda nada más que quitar»
Antoine de Saint-Exupery

76. • http://www.slideshare.net/Wolfr/design-for-
developersonlineversionlong
• https://speakerdeck.com/u/cleer/p/design-for-programmers
• https://speakerdeck.com/u/pstahl/p/rhythm-and-flow
• https://speakerdeck.com/u/brendanjdawes/p/escaping-flatland
• https://speakerdeck.com/u/3eighteenmedia/p/color-psychology
• https://speakerdeck.com/u/thoughtmerchant/p/the-grid-
typography-for-developers
• https://speakerdeck.com/u/franciscogouveia/p/design-principles
• http://boagworld.com/design/where-are-my-rounded-corners/
• http://www.markboulton.co.uk/journal/comments/five-simple-
steps-to-better-typography
• http://jimsaw.com/design/gestalt.html