Menú

Principios de Diseño

Basado en el libro de Robin Williams“The Non-Designers Design Book”

(El libro de diseño para no-diseñadores)

Prof. Enrique Vílchez Quesadaevqm@costarricense.cr

Menú

Principios de Diseño

• Proximidad

• Alineación

• Repetición

• Contraste

Menú

ProximidadMostrar la estructura del diseño

Menú

Proximidad

• Objetos que estén relacionados deben agruparse. Cuando varios elementos están agrupados, se percibe como una unidad y no como objetos aislados.

• Esto ayuda a organizar la información, reduce el desorden y le da al lector una estructura.

• Elementos que no estén relacionados nodeben estar juntos.

Menú

Ejemplo de proximidad

• No se aplica el principio de proximidad, todos los elementos están dispersos.

• El ojo viaja en todas direcciones para leer las cinco partes que la componen.

• Está claro dónde se comienza a leer la tarjeta y qué dirección sigue la lectura.

• Los elementos relacionados se agrupan dos unidades para facilitar la lectura.

Menú

Ejemplo de proximidad

GaldiolasBegoniasChinasRosasLilasPensamientosAnturiosAbonoTierraPiedra

GaldiolasBegoniasChinasRosasLilasPensamientosAnturios

AbonoTierraPiedra

• Observe cuánto 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 cómo se mueven los ojos para recorrer el contenido en pantalla. Asegúrese de que haya un comienzo y un final en el recorrido.

• El propósito básico de la proximidad es organizar la información y proveer una estructura.

• Separese de la pantalla y cuente cuántos grupos de elementos puede ver.

Menú

AlineaciónCrear relaciones entre los elementos

Menú

Alineación

• Nada debe ser colocado en la página de forma arbitraria. Cada elemento debe tener alguna conexión visual con otro elemento en la página.

• Esto crea un diseño claro, limpio y sofisticado.

Menú

Ejemplo de alineación

• 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 relación entre ellos y le da una apariencia más ordenada y elegante. La alineación crea una línea invisible que conecta el encabezado con el pie.

Plan de trabajoPara

Empresa Organizada S.A.

Por Gabriela Torres

20 de marzo del 2005

Plan de trabajoPara

Empresa Organizada S.A.

Por Gabriela Torres

20 de marzo del 2005

Plan de trabajoParaEmpresa Organizada S.A.

Por Gabriela Torres20 de marzo del 2005

Plan de trabajoParaEmpresa Organizada S.A.

Por Gabriela Torres20 de marzo del 2005

Plan de trabajoPara

Empresa Organizada S.A.

Por Gabriela Torres

20 de marzo del 2005

Plan de trabajoPara

Empresa Organizada S.A.

Por Gabriela Torres

20 de marzo del 2005

Menú

Alineación centrada

• La alineación centrada es la más usada por los principiantes en diseño, porque se siente segura y confortable. No crea desequilibrio.

• Sin embargo, la alineación centrada crea un diseño formal, ordinario, estático y simplemente aburrido.

• Analice diseños que le parezcan atractivos y probablemente no estarán centrados.

• Practique alinear sus diseños a la izquierda o a la derecha. Rompa la monotonía!

• Si aún quiere centrar su diseño, hágalo obvio y enfatícelo con otros elementos de diseño.

Menú

Ejemplo de alineación

Pablo NerudaPoemas en español

e italianoLa más completa edición disponible

del gran poeta chileno

Pablo NerudaPoemas en español

e italianoLa más completa edición disponible

del gran poeta chileno

Pablo NerudaPoemas en español e italiano

Pablo NerudaPoemas en español e italiano

La más completa edición disponible

del gran poeta chileno

Dos alineaciones diferentes que NO combinan

Pablo NerudaPoemas en español e italiano

Pablo NerudaPoemas en español e italiano

La más completa

edición disponible

del gran poeta chileno

Dos alineaciones diferentes que Sícombinan porque están conectadas.

Aburrido

Menú

Problemas de alineación

• Títulos y subtítulos centrados junto con párrafos indentados.

• Imágenes que no coinciden con los márgenes del texto.

• Elementos centrados que no se conectan con nada más.

• Cuide la alineación vertical tanto como la horizontal.

Menú

Resumen de alineación

• Nada debe colocarse en la página de forma arbitraria. Todo elemento debe conectarse visualmente con algo más.

• Cree unidad al conectar los elementos separados con líneas invisibles a través de la alineación.

• El objetivo principal de la alineación es crear relaciones entre los elementos del diseño y ordenarlos.

• Evite usar más de una forma de alineación en el diseño.

• Evite a toda costa los diseños centrados.

Menú

RepeticiónGenerar sentido de unidad y

consistencia

Menú

Repetición

• Repita elementos visuales del diseño a lo largo de su proyecto. Puede repetir colores, formas, texturas, relaciones espaciales, grosores de línea, conceptos gráficos, etcétera.

• Esto ayuda a desarrollar la organización y fortalece el sentido de unidad y continuidad.

Menú

Ejemplos de repetición

• En este documento:– Todas las páginas tienen el mismo diseño– Las ilustraciones que se usan como ejemplo llevan

el mismo formato– Los colores del fondo se repiten en el botón

“menu” al final de la página, en las líneas y en las flechas de las ilustraciones

– Todas las secciones tienen una “portada” igual.– A lo largo de toda la presentación se utiliza la

misma tipografía.

Menú

Cómo conseguir la repetición

• Busque un tema para su diseño y, según su tema, elija una paleta limitada de colores y reutilícelos a lo largo de su proyecto.

• NO cambie el tipo de letra constantemente. Elija una para textos largos y otra diferente para los títulos. Dos son suficientes.

• Si tiene un logo o una imagen principal trate de utilizar algún elemento o forma de esta imagen dentro de su diseño, puede ser un óvalo, un tipo de letra, un color.

• Si le da un tratamiento especial a las imágenes, haga algo sencillo con ellas, pero repítalo en todas (ej: fotos blanco y negro, o marcos alrededor, bordes redondeados, pies de foto, etc).

Menú

Resumen de repetición

• La repetición ayuda a “amarrar” diferentes partes del proyecto al presentar elementos que les son comunes.

• La repetición es útil en diseños de una página o pantalla, pero es fundamental en diseños más complejos.

• El propósito de la repetición es de dar unidad.• Trate de utilizar uno de esos elementos repetitivos en

parte del diseño y hágalo de forma que sea obvio.• Evite repetir tanto un elemento que se vuelva

molesto, tome en cuenta el contraste.

Menú

ContrasteEstablecer jerarquías y llamar la

atención

Menú

Contraste

• La idea detrás del concepto “contraste” es eliminar elementos que son meramente similares. Si los elementos no son los mismos en cuanto a color, fuente, tamaño, grosor, etc; entonces hagalos realmente diferentes.

• El contraste es a menudo la atracción visual más importante en la página. Es lo que atrae la atención del usuario.

Menú

Ejemplo de contraste

• El boletín de la derecha seguramente le llamará más la atención. Observe las diferencias respecto al de la izquierda. Analice lasformas 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 más del diseño.

• Es indispensable el contraste entre el texto y el fondo.• Cree contraste con la dirección del texto o los

elementos, por ejemplo columnas verticales y un título fuerte horizontal.

• Utilice tipografías diferentes para los títulos y el contenido y elíjalas que sean muy diferentes.

• Si no logra ver a simple vista que es importante en el diseño, haga el elemento más importante el doble del tamaño normal y el elemento menos importante a la mitad del tamaño.

Menú

Resumen de contraste

• El contraste llama la atención.• El contraste crea jerarquías y por ende ayuda a

organizar la información y mostrar su estructura.• Si utiliza dos fuentes diferentes hágalas realmente

diferentes.• Es relativamente fácil y muy divertido generar

contraste en un diseño. Utilice colores contrastantes, tipografías, líneas, tamaños, casi cualquier elemento del diseño se puede utilizar para crear contraste.

• Pero si va a crear contraste no se conforme con pequeñas diferencias, lleve su diseño a los extremos.