Oscar Bustos
Frontend Developer & UX/UI Designer
Principios de diseño
Óscar Bustos
Frontend Developer & UI/UX Designer
Introducción
A continuación vamos a desgranar los diferentes componentes que definen el diseño.
Color
No solo mejora la estética sino que funciona eficazmente tanto para destacar y organizar elementos
Color
El número de colores debe ser limitado. Se ha demostrado que el ojo humano puede procesar de un único vistazo hasta cinco colores, dependiendo de la complejidad del diseño
Aunque siempre debemos tender a la simplificación.
Color
En ocasiones el color resulta un buen recurso para reforzar el significado de un elemento de la interfaz (Ej. mensajes del sistema)
Color
Color
En el caso de que el color no se asocie de forma natural, podemos utilizar leyendas que asocien el color al propio elemento
Color
La teoría sobre la percepción del color nos dice que en general debemos de evitar la combinación de colores incompatibles (rojo, verde, azul y amarillo) ya que nos arriesgamos de inhibir su visibilidad
Color
Contraste
El contraste debe ser lo suficientemente eficiente para que la legibilidad sea óptima. Para ello podemos utilizar diferentes herramientas que nos dirán el nivel de acierto
Color
¿Cómo escoger nuestros colores?
Depende de lo que queramos transmitir
Color
Rojo
Utiliza el rojo para llamar la atención o crear expectación. El rojo puede ser bueno para la comida, moda, entretenimiento, deportes, marketing, servicios de emergencia y seguros de salud.
Color
Rojo
No lo utilices demasiado, ya que puede saturar demasiado. Tampoco está recomendado para artículos de lujo, elementos relacionados con la naturaleza o páginas profesionales.
Muchas veces está asociado a la idea de !peligro!
Color
Rojo
Color
Amarillo
Se asocia a competitividad, felicidad, alegría, optimismo y juventud aunque tiene connotaciones negativas como la cobardía, engaño y la vulgaridad
Utilizalo para dar sensación de felicidad! Aunque es un color que cansa mucho la vista y dependiendo del tono muy agresivo a la vista
Color
Amarillo
Color
Naranja
Es un color enérgico asociado a la diversión, el calor, la felicidad, emoción y entusiasmo aunque también puede comunicar cautela.
Utilizalo para llamadas a la acción, ventas u otro contenido que quieras que llame la atención. Cuidado porque también puede ser algo cargante. No abuses de él.
Color
Naranja
Color
Verde
Tiene un efecto armónico, se asocia a la salud, naturaleza, bienestar, dinero, calma, paz...
Es el color que mejor procesan nuestros ojos. Utilízalo para crear un efecto relajante o de calma. Es una gran opción para ciencia, turismo, medicina, medioambiente, sostenibilidad, etc.
En cambio no es muy apropiado para bienes de lujo, tecnología o adolescentes
Color
Verde
Color
Azul
Se asocia a calidad, calma, seriedad, sabiduria, productividad, juventud.
Suele asociarse a grandes empresas o bancos. Es bueno para temas de salud, tecnología, salud, política y servicios públicos.
No hay que abusar de el porque puede parecer frio y poco atractivo
Color
Azul
Color
Morado
Se asocia a la realeza y puede transmitir creatividad, imaginación, autoridad, riqueza, sabiduría, misterio...
Utilizalo para dar sensación de lujo y riqueza, los tonos más claros se asocian a felicidad y romance. También combina con productos de belleza, salud, espiritualidad.
Es un color relajante porque lo que no se recomienda para llamadas a la acción
Color
Morado
Color
Negro
Se asocia a la sofisticación, elegancia, autoridad, poder, fuerza e inteligencia, aunque también está asociado a la muerte, el misterio, la maldad y la rebelión.
Demasiado negro puede resultar cargante y puede que su uso incomode al usuario por sus connotaciones negativas
Color
Negro
Color
Blanco
Se asocia a la pureza, limpieza, felicidad, sinceridad y seguridad.
Es una buena opción para páginas relacionadas con la salud, tecnología y ciencia. Si se emplea con negro, oro y plata también se asocia a lujo.
Color
Blanco
Color
Blanco
Hay que hacer un buen uso del blanco para destacar las acciones.
También es bueno dejar espacios en blanco para que la vista del usuario descanse.
Es muy útil para dejar que cada composición respire
Color
- Elegir un máximo de 3 colores donde predomine 1
- Usar el color en nuestro beneficio, destacando las llamadas a la acción para indicar al usuario sus opciones
- Jerarquizar contenidos gracias al uso de colores primario y secundario
Color
Herramientas
Tipografía
La elección de la tipografía es sumamente importante ya que con ella vamos a transmitir nuestra personalidad al usuario
Tipografía
Serif
Sans Serif
Script
Monospace
Tipografía
Serif
Se perciben más tradicionales, series, institucionales o corporativas.
Son fáciles de leer en textos largos gracias a los remates, por lo que son apropiadas para grandes grupos de texto
Tipografía
Sans Serif
También se les conoce como etruscas o de palo seco. Se asocian a la tipografía más comercial. Son perfectas para textos cortos y grandes.
Transmiten modernidad, seguridad, alegría y minimalismo
Tipografía
Script
Simulan un estilo caligráfico y se utilizan para dar un efecto creativo.
Tipografía
Monospace
Suelen utilizarse para representar código. Podemos verla en entornos de desarrollo y en interacciones de comandos.
Como su nombre indica todos sus caracteres ocupan el mismo espacio
Tipografía
Para un proyecto web se recomienda:
- No más de tres familias diferentes de fuente
- Al menos una Serif y otra Sans Serif
Tipografía
Herramientas
Estética
Un diseño estético se percibe como más fácil de usar
Estética
No existen métodos infalibles pero si hay ciertos conceptos relacionados que podemos aplicar
Estética
Proporción Áurea
Es un número algebraico irracional cuyo valor es 1,61803.
Esta proporción la encontramos en muchas formas geométricas de la naturaleza y su efecto positivo se ha aplicado durante siglos en la arquitectura y en el arte
Estética
Proporción Áurea
Estética
Balance
Es el concepto que busca igualar la tensión balanceado es percibido como más estético y transmite armonía
Estética
Balance
Una forma de lograr un diseño balanceado es a través de la simetría, en la que los elementos a cada lado del eje central tienen el mismo peso visual.
Estética
Estética
Espacio en blanco
Al diseñar tenemos tendencia natural a ocupar todo el espacio.
Esto hace que incremente la complejidad, la carga visual y cognitiva del usuario
Estética
Espacio en blanco
El espacio en blanco o espacio negativo se refiere al espacio y márgenes entre los elementos de la interfaz.
Esto facilita al usuario diferenciar visualmente elementos o grupos de elementos. Permite una exploración más calmada e incrementa la simplicidad, elegancia y apariencia estética
Estética
Espacio en blanco
Gestalt
En una interfaz visualmente usable los elementos están organizados, relacionados y agrupados de forma lógica e inmediatamente reconocible.
Gestalt
La teoría Gestalt surge en Alemania en el siglo XX y establece una serie de leyes o principios.
Veamos las que más relevancia tienen a la hora de crear una buen diseño de interfaz
Gestalt
Ley de proximidad
Los elementos próximos entre sí, y distanciados del resto, son percibidos conjuntamente.
Gestalt
Ley de similitud
Los elementos que comparten características visuales (forma, color, tamaño, orientación, textura) tienden a ser agrupados perceptualmente.
Percibimos como un mismo grupo los elementos de la barra de herramientas por la ley de proximidad y la de región común.
Además, entre los elementos que forman la barra de herramientas diferenciamos automáticamente entre dos grupos en base a la ley de similitud: aquellos que están seleccionados (color verde) y los que no
Gestalt
Ley de cierre
Nuestra mente tiende a completar formas inacabadas.
Gestalt
Ley de simetría
Los formas asimétricas son percibidas más dificultosamente y como incompletas.
Gestalt
Ley de continuación
La atención visual tiende a seguir instintivamente la dirección espacial de los elementos. Cuanto más suaves sean los cambios de dirección más fácilmente serán percibidos y agrupados conjuntamente los elementos.
Gestalt
Ley de destino común
Los elementos que se mueven hacia un mismo destino o una misma dirección son agrupados perceptualmente.
Gestalt
Ley de región común
Elementos ubicados dentro de una misma región cerrada son percibidos como agrupados.
En el sitio web de apple.com podemos de forma automática agrupar visualmente conjuntos de elementos relacionados porque se organizan claramente en cajas o regiones.
Gestalt
Ley de conexión
Elementos conectados por otros elementos (como líneas) son percibidos como una misma unidad.
Gestalt
Relación figura-fondo
Hace referencia a que nuestro cerebro procesa cada objeto como figura o como fondo, pero nunca como ambos al mismo tiempo.
Gestalt
Estas leyes nos sirven de guía sobre cómo comunicar visualmente las relaciones o agrupaciones entre elementos.
Cuantas más leyes se utilicen conjuntamente para relacionar elementos, más fácilmente serán percibidos por el usuario
Prototipado
Es la fase más temprana del diseño y consta de diferentes etapas
Prototipado
Sketch
Se realiza con papel y lápiz y es un primer paso para esbozar cómo será la arquitectura de la información
Nos servirá como una primera lluvia de ideas acerca de la solución gráfica
Prototipado
Sketch
En esta fase también tendríamos que establecer las diferentes página que vamos a necesitar diseñar
Prototipado
Wireframe
En esta fase trasladaremos nuestros bocetos a un entorno digital.
Estos diseños carecen de tipografías y colores, aunque representan la jerarquía de la información y deja claro cómo el usuario realiza la solución de sus tareas
Prototipado
Wireframe
Para llevar a cabo esta tarea vamos a trabajar con Balsamiq
Diseño
En esta fase llevaremos a cabo la parte de diseño.
Para ello llevaremos a cabo todo lo que hemos recopilado en la fase de prototipado y aplicaremos los elementos gráficos que hemos elegido para nuestro proyecto
Diseño
Para ello podemos utilizar el programa con el que más cómodos nos encontremos.
El resultado será una serie de archivos de imágenes que enlazaremos en inVision
Inspírate
Art of the Menu - Dribbble - Mindsparkle Mag - Data Viz- Project - Minimalissimo - Behance - Designmattaz
- Typewolf - siteInspire - BP&O - Awwwards - Save - Designspiration - Dezeen - Font Review Journal - typo/graphic posters - Fonts In Use - Pinterest - Moodboard — Tobias Van Schneider - Say hi to inspiration - 165 best Tumblrs for- Designers - ueno.design - Land-book - Neu für Sie - W I S -IM NOT WORDY - Fubiz - b-nj-m-n - Visuelle - Pttnrs - The Logo Design Archive - MinimalMonday - MoMA Design - Studio - Hover States - A Movie Poster A Day - ColorClai - Swiss Style Color Picker - LOL Color - Appealing
Recursos
https://icons8.com/
Q&A
oscar.bustos@live.u-tad.com
Principios de diseño
-old-Principios de diseño
By Oscar Bustos
-old-Principios de diseño
Principios de diseño
- 168
