Diseño (web) para no d iseñadores

• Pensada para personal informático

• Sin formación artística

• Preparándose para afrontar trabajos de front-end

• 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

• El diseño no es cuestión de gusto

• Ni siquiera de buen gusto

• Funcionamiento de nuestro cerebro (Gestalt)

• Imitación de la naturaleza (brillos y sombras, número áureo…)

• Convenciones culturales (tipografía, iluminación…)

• Resolver problemas

• 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

• 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

• ¿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?

• 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?

• 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

• 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

• 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

• 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…)

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.

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

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

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

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

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.

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

• 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

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

• http://psicopsi.com/PERCEPCION-1

• http://leyes-psicologia-gestalt.blogspot.com.es/

• 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

• 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

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

• 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)

• 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)

• 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

• 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

• Convención tipográfica del siglo… ¡XVI!

• Si la aprovechamos, lograremos una relación agradable entre tamaños debido a la costumbre adquirida

• 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

• http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography

• Y sobre todo en:

• http://webtypography.net

• 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

• 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

• 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

• 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º)

• 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º)

• Gama monocromática:

– Mismo tono

– Distinta saturación

o luminancia/valor

(HSL o HSV)

• http://0to255.com

• Colores complementarios:

– 180º de giro en la rueda de color

– El “opuesto”

– Muy frecuente en la naturaleza. P. ej.: naranja-azul en atardeceres

• Tríadas de colores:

– En teoría 120º de giro en la rueda de color

– ¡Como los colores primarios!

• Cuartetos de colores:

– En teoría 90º de giro en la rueda de color

– Una especie de doble complementario

• 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

• 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…

• 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

• 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

• 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

• http://0to255.com

• http://www.colourlovers.com/palettes

• http://kuler.adobe.com

• http://colorschemedesigner.com

• 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

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

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

• Botones y elementos de formulario

• Elementos con los que interactuar

• ¿Cuál de estos botones es “pulsable” y cuál está ya pulsado?

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

• ¿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?

• 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”

• 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

• 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)

• 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

• 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

• 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

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

• 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

• 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

• http://www.thegridsystem.org

• http://960.gs

• http://www.blueprintcss.org/

• http://foundation.zurb.com/

• http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

• 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

• 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

• 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

• 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)

• 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

«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

• 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