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

Contrast Checker

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

1. Elegir un máximo de 3 colores donde predomine 1
2. Usar el color en nuestro beneficio, destacando las llamadas a la acción para indicar al usuario sus opciones
3. Jerarquizar contenidos gracias al uso de colores primario y secundario

Color

Herramientas

1. CC Color Wheel de Adobe
2. BrandColors
3. ColorHexa
4. ColorHunt
5. Paletton
6. Palettr
7. ColourLovers

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:

1. No más de tres familias diferentes de fuente
2. Al menos una Serif y otra Sans Serif

Tipografía

Herramientas

1. Google Fonts
2. Font Squirrel

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