Principios de Diseo

Basado en el libro de Robin Williams The Non-Designers Design Book (El libro de diseo para no-diseadores)

Prof. Enrique Vlchez Quesada evqm@costarricense.cr

Men

Principios de Diseo
Proximidad Alineacin Repeticin Contraste

Men

Proximidad
Mostrar la estructura del diseo

Men

Proximidad
Objetos que estn relacionados deben agruparse. Cuando varios elementos estn agrupados, se percibe como una unidad y no como objetos aislados. Esto ayuda a organizar la informacin, reduce el desorden y le da al lector una estructura. Elementos que no estn relacionados no deben estar juntos.
Men

Ejemplo de proximidad
No se aplica el principio de proximidad, todos los elementos estn dispersos. El ojo viaja en todas direcciones para leer las cinco partes que la componen. Est claro dnde se comienza a leer la tarjeta y qu direccin sigue la lectura. Los elementos relacionados se agrupan dos unidades para facilitar la lectura.

Men

Ejemplo de proximidad
Galdiolas Begonias Chinas Rosas Lilas Pensamientos Anturios Abono Tierra Piedra Galdiolas Begonias Chinas Rosas Lilas Pensamientos Anturios Abono Tierra Piedra

Observe cunto puede cambiar un grupo de palabras al insertar un espacio en medio. La primera lista se percibe como una unidad, en la segunda se ven dos partes diferenciadas y asumimos que corresponden a elementos diferentes.
Men

Resumen de proximidad
Elementos cercanos se perciben como una unidad. Examine cmo se mueven los ojos para recorrer el contenido en pantalla. Asegrese de que haya un comienzo y un final en el recorrido. El propsito bsico de la proximidad es organizar la informacin y proveer una estructura. Separese de la pantalla y cuente cuntos grupos de elementos puede ver.

Men

Alineacin
Crear relaciones entre los elementos

Men

Alineacin
Nada debe ser colocado en la pgina de forma arbitraria. Cada elemento debe tener alguna conexin visual con otro elemento en la pgina. Esto crea un diseo claro, limpio y sofisticado.

Men

Ejemplo de alineacin
Plan de trabajo Plan de trabajo Para Para Empresa Organizada S.A. Empresa Organizada S.A. Plan de trabajo Plan de trabajo Para Para Empresa Organizada S.A. Empresa Organizada S.A. Por Por Gabriela Torres Gabriela Torres 20 de marzo del 2005 20 de marzo del 2005 Por Por Gabriela Torres Gabriela Torres 20 de marzo del 2005 20 de marzo del 2005 Por Gabriela Torres Por Gabriela Torres 20 de marzo del 2005 20 de marzo del 2005 Plan de trabajo Plan de trabajo Para Para Empresa Organizada S.A. . Empresa Organizada S.A

En este ejemplo, al agrupar los elementos relacionados se provee estructura y orden. Al alinear los elementos hacia la izquierda se crea de nuevo una relacin entre ellos y le da una apariencia ms ordenada y elegante. La alineacin crea una lnea invisible que conecta el encabezado con el pie.
Men

Alineacin centrada
La alineacin centrada es la ms usada por los principiantes en diseo, porque se siente segura y confortable. No crea desequilibrio. Sin embargo, la alineacin centrada crea un diseo formal, ordinario, esttico y simplemente aburrido. Analice diseos que le parezcan atractivos y probablemente no estarn centrados. Practique alinear sus diseos a la izquierda o a la derecha. Rompa la monotona! Si an quiere centrar su diseo, hgalo obvio y enfatcelo con otros elementos de diseo.
Men

Ejemplo de alineacin
Pablo Neruda Pablo Neruda
Pablo Neruda Pablo Neruda Poemas en espaol Poemas en espaol eeitaliano italiano La ms completa La ms completa edicin disponible edicin disponible del gran poeta chileno del gran poeta chileno
Poemas Poemas en espaol en espaol ee italiano italiano

Pablo Pablo Neruda Neruda

Poemas Poemas en espaol en espaol ee italiano italiano

La ms completa edicin disponible del gran poeta chileno

La ms completa edicin disponible del gran poeta chileno

Aburrido

Dos alineaciones diferentes que NO combinan

Dos alineaciones diferentes que S combinan porque estn conectadas.

Men

Problemas de alineacin
Ttulos y subttulos centrados junto con prrafos indentados. Imgenes que no coinciden con los mrgenes del texto. Elementos centrados que no se conectan con nada ms. Cuide la alineacin vertical tanto como la horizontal.

Men

Resumen de alineacin
Nada debe colocarse en la pgina de forma arbitraria. Todo elemento debe conectarse visualmente con algo ms. Cree unidad al conectar los elementos separados con lneas invisibles a travs de la alineacin. El objetivo principal de la alineacin es crear relaciones entre los elementos del diseo y ordenarlos. Evite usar ms de una forma de alineacin en el diseo. Evite a toda costa los diseos centrados.
Men

Repeticin
Generar sentido de unidad y consistencia

Men

Repeticin
Repita elementos visuales del diseo a lo largo de su proyecto. Puede repetir colores, formas, texturas, relaciones espaciales, grosores de lnea, conceptos grficos, etctera. Esto ayuda a desarrollar la organizacin y fortalece el sentido de unidad y continuidad.

Men

Ejemplos de repeticin
En este documento:
Todas las pginas tienen el mismo diseo Las ilustraciones que se usan como ejemplo llevan el mismo formato Los colores del fondo se repiten en el botn menu al final de la pgina, en las lneas y en las flechas de las ilustraciones Todas las secciones tienen una portada igual. A lo largo de toda la presentacin se utiliza la misma tipografa.
Men

Cmo conseguir la repeticin

Busque un tema para su diseo y, segn su tema, elija una paleta limitada de colores y reutilcelos a lo largo de su proyecto. NO cambie el tipo de letra constantemente. Elija una para textos largos y otra diferente para los ttulos. Dos son suficientes. Si tiene un logo o una imagen principal trate de utilizar algn elemento o forma de esta imagen dentro de su diseo, puede ser un valo, un tipo de letra, un color. Si le da un tratamiento especial a las imgenes, haga algo sencillo con ellas, pero reptalo en todas (ej: fotos blanco y negro, o marcos alrededor, bordes redondeados, pies de foto, etc).
Men

Resumen de repeticin
La repeticin ayuda a amarrar diferentes partes del proyecto al presentar elementos que les son comunes. La repeticin es til en diseos de una pgina o pantalla, pero es fundamental en diseos ms complejos. El propsito de la repeticin es de dar unidad. Trate de utilizar uno de esos elementos repetitivos en parte del diseo y hgalo de forma que sea obvio. Evite repetir tanto un elemento que se vuelva molesto, tome en cuenta el contraste.
Men

Contraste
Establecer jerarquas y llamar la atencin

Men

Contraste
La idea detrs del concepto contraste es eliminar elementos que son meramente similares. Si los elementos no son los mismos en cuanto a color, fuente, tamao, grosor, etc; entonces hagalos realmente diferentes. El contraste es a menudo la atraccin visual ms importante en la pgina. Es lo que atrae la atencin del usuario.
Men

Ejemplo de contraste

El boletn de la derecha seguramente le llamar ms la atencin. Observe las diferencias respecto al de la izquierda. Analice las formas en que se cre el contraste.
Men

Consejos para el contraste

Establezca diferencias marcadas entre unos elementos y otros.Elija un solo elemento como punto focal. Utilice el espacio en blanco como un elemento ms del diseo. Es indispensable el contraste entre el texto y el fondo. Cree contraste con la direccin del texto o los elementos, por ejemplo columnas verticales y un ttulo fuerte horizontal. Utilice tipografas diferentes para los ttulos y el contenido y eljalas que sean muy diferentes. Si no logra ver a simple vista que es importante en el diseo, haga el elemento ms importante el doble del tamao normal y el elemento menos importante a la mitad del tamao. Men

Resumen de contraste
El contraste llama la atencin. El contraste crea jerarquas y por ende ayuda a organizar la informacin y mostrar su estructura. Si utiliza dos fuentes diferentes hgalas realmente diferentes. Es relativamente fcil y muy divertido generar contraste en un diseo. Utilice colores contrastantes, tipografas, lneas, tamaos, casi cualquier elemento del diseo se puede utilizar para crear contraste. Pero si va a crear contraste no se conforme con pequeas diferencias, lleve su diseo a los extremos.
Men