Principios de Diseño

Transcripción

1 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 Quesada

2 Principios de Diseño Proximidad Alineación Repetición Contraste

3 Proximidad Mostrar la estructura del diseño

4 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 no deben estar juntos.

5 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.

6 Ejemplo de proximidad Galdiolas Begonias Chinas Rosas Lilas Pensamientos Anturios Abono Tierra Piedra Galdiolas Begonias Chinas Rosas Lilas Pensamientos Anturios Abono Tierra Piedra 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.

7 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.

8 Alineación Crear relaciones entre los elementos

9 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.

10 Ejemplo de alineación Plan Plan de de trabajo trabajo Para Para Empresa Empresa Organizada Organizada S.A. S.A. Por Por Gabriela Gabriela Torres Torres de de marzo marzo del del Plan Plan de de trabajo trabajo Para Para Empresa Empresa Organizada Organizada S.A. S.A. Por Por Gabriela Gabriela Torres Torres de de marzo marzo del del Plan Plan de de trabajo trabajo Para Para Empresa Empresa Organizada Organizada S.A. S.A. Por Por Gabriela Gabriela Torres Torres de de marzo marzo del del 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.

11 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.

12 Ejemplo de alineación Pablo Pablo Neruda Neruda Poemas Poemas en en español español e italiano italiano La La más más completa completa edición edición disponible disponible del del gran gran poeta poeta chileno chileno Pablo Neruda Poemas Poemas en en español español e e italiano italiano La más completa edición disponible del gran poeta chileno Pablo Neruda Poemas Poemas en en español español e e italiano italiano La más completa edición disponible del gran poeta chileno Aburrido Dos alineaciones diferentes que NO combinan Dos alineaciones diferentes que Sí combinan porque están conectadas.

13 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.

14 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.

15 Repetición Generar sentido de unidad y consistencia

16 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.

17 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.

18 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).

19 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.

20 Contraste Establecer jerarquías y llamar la atención

21 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.

22 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 las formas en que se creó el contraste.

23 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.

24 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.