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 [email protected]
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.