Las 3 C de las interfaces de usuario: color, contraste y contenido

Hay un viejo modelo de negocios que viven muchos estrategas de negocios: las 3 C. Es un recordatorio para centrarse en la empresa, los clientes y la competencia . Muchas pequeñas empresas y sitios web también usan este modelo. Pero para los diseñadores, las tres C son un poco diferentes.

Al crear interfaces de usuario, debe centrarse en el color, el contraste y el contenido. Estos tres elementos son la base del buen diseño. Pero cada uno es un poco más complejo de lo que parece desde la superficie. Aquí le mostramos cómo pensar e incorporar las tres C de las interfaces de usuario en sus proyectos de diseño.

Explore los recursos de diseño

Color

El color es uno de los elementos visuales más obvios para la mayoría de los usuarios. Tanto los diseñadores como los no diseñadores pueden hablar sobre el color y si un cierto tono o paleta les atrae.

El color puede crear conexiones emocionales distintas por sí solo, sin otros efectos. Puede entregar una muestra de color o chip a casi cualquier persona y obtener una reacción sobre el color que sea visible. También es un elemento de diseño divertido, ya que las preferencias personales y de diseño tienden a cambiar con el tiempo casi universalmente.

El color puede hacer o deshacer un diseño por muchas razones, pero principalmente hace muchas cosas y proporciona tantas señales visuales al usuario simultáneamente que no puede ignorarlo.

Impactos de color:

• Usabilidad y legibilidad
• Reconocimiento de marca y conciencia
• Donde los usuarios miran e interactúan
• Organización y flujo de usuarios
• Éxito general del diseño.

Usa el color para crear:

• Navegación clara y comprensible.
• Interacciones intuitivas
• Un estado de ánimo para el proyecto.
• Crea fuertes llamados a la acción o elementos utilizables
• Establezca un sentido de lo que trata el diseño, como realidad versus fantasía

Todo esto puede parecer una tarea difícil para algo tan simple como una mezcla de rojo, verde y azul.

Entonces, ¿por dónde empiezas? Podría decirse que las variables más importantes cuando se trata de color es crear una paleta que sea atractiva para los usuarios y que explique de qué se trata el diseño (como la marca y el estado de ánimo). Por ejemplo, un sitio web para Coca-Cola que usara el azul como color dominante en lugar de rojo sería irritante para los usuarios.

Una paleta de colores sólidos se basa en los principios de la teoría del color.

Una paleta de colores sólidos se basa en los principios de la teoría del color. No necesita más que un par de colores para que funcione. Dos o tres colores y una buena biblioteca de variaciones más claras y oscuras son suficientes. Mockplus recomienda la regla 6: 3: 1: elija tres colores para una paleta, incluido un color dominante que se usa el 60 por ciento del tiempo, un color secundario que se usa el 30 por ciento del tiempo y un color de acento que puede estar en el resto 10 por ciento del diseño. La regla se basa en la proporción áurea, un pilar de la teoría del diseño y puede ser un gran punto de partida.

Aquí hay una regla más para crear paletas de colores en las interfaces de usuario: comience con blanco y negro. Si el diseño se puede usar sin color, probablemente funcionará una vez que se agregue el color. El contorno en blanco y negro también le da una buena idea de cómo elegir colores con suficiente contraste (la segunda C) para mejorar la usabilidad.

Contraste

El contraste crea una distinción entre elementos. Ayuda a crear jerarquía visual, escalabilidad y contribuye a lo fácil que es entender algo rápidamente. Los elementos con un fuerte contraste facilitan que el usuario mire de una cosa a otra, creando un patrón visual natural y un flujo de usuario.

La razón por la que el contraste es tan importante para el diseño de la interfaz de usuario es que es parte de todo lo que haces. La forma de crear contraste varía según el tipo de elemento de efecto visual involucrado.

Puede establecer contraste con:

• Color
• Talla
• Dirección
• Espacio
• Forma

Un elemento clave de las pautas de accesibilidad es el contraste porque garantiza que los usuarios puedan distinguir un elemento de otro en el diseño. El Proyecto A11Y, que tiene como objetivo facilitar la accesibilidad web, tiene esta recomendación: comience con el contraste de color utilizando colores de diferentes segmentos de la rueda de colores o colores contrastantes. Recuerde que los colores complementarios, opuestos en la rueda de colores, proporcionan el máximo contraste.

El mismo concepto se aplica a la creación de contraste entre otros elementos también. Elija tipos de letra de diferentes familias o use tamaños dramáticamente diferentes para ayudar a los usuarios a leer las palabras rápidamente.

En resumen, la idea detrás del contraste es que los opuestos se atraen.

Use signos direccionales, flechas o imágenes con movimiento para ayudar al usuario a mirar en una determinada dirección, luego voltee la señal direccional para obtener aún más contraste.

La diferencia entre espacios reducidos y abiertos crea mucho contraste. Si quieres asegurarte de que tu texto sea fácil de ver y leer, dale un poco más de espacio para llamar la atención.

En resumen, la idea detrás del contraste es que los opuestos se atraen. Los elementos que aparentemente son diferentes en realidad pueden trabajar juntos para que ambos sean fáciles de ver de un vistazo.

Para saber si el contraste funciona de la manera que desea, piense en un par de factores cuando observe los elementos en la pantalla:

• Legibilidad: ¿Todas las palabras e imágenes son fáciles de ver y leer?
• Claridad: ¿Es fácil distinguir un elemento de otro?
• Accesibilidad: ¿Funciona para la mayor cantidad de personas posible?
• Medio ambiente: ¿Pueden los usuarios ver y comprender el diseño en los lugares donde se utilizará?

Contenido

La última de las tres C es contenido. El diseño de la interfaz de usuario solo puede ser tan bueno como la información que contiene. El contenido incluye todo, desde imágenes hasta texto, ilustraciones e iconos, logotipos y marcas. El contenido también incluye videos y cada parte de la copia, desde la mensajería completa o la narrativa hasta las publicaciones de blog y pequeños fragmentos de micro-copia.

Solo tener contenido no es suficiente. Tienes que tener contenido estelar.

Todos estos elementos se unen para contar la historia de lo que hace que su diseño e interfaz de usuario sean especiales. ¿Por qué los usuarios deberían darle su tiempo en lugar de hacer otra cosa?

Y solo tener contenido no es suficiente. Tienes que tener contenido estelar. Contenido de alta resolución. Contenido de alto valor. Su contenido tiene que ser mejor / más grande / más especial que contenido similar que compita por la atención de los usuarios.

Puede ser una tarea difícil, pero la mayoría de los diseñadores pueden crear este contenido siendo fieles a sí mismos y a su marca y mensajes. Apégate a lo que eres y a lo que sabes. Los usuarios verán esta autenticidad y, con suerte, la valorarán pasando tiempo con su diseño.

Conclusión

Ahora que está armado con las tres antiguas C de negocios (empresa, clientes y competidores) y tres C de diseño de interfaz de usuario (color, contraste y contenido), tiene las herramientas y el conocimiento para crear un proyecto de diseño fuera de este mundo bueno. (O al menos altamente utilizable).

Al trabajar ambas estrategias en proyectos de diseño, se ve obligado a pensar en cómo crear algo que beneficie al propietario del sitio web y al usuario. Estás creando no solo para que el diseño sea hermoso, sino también para que sea funcional.

Nota: Todos los ejemplos en este artículo son de la Galería Design Shack. Asegúrate de mirar a tu alrededor; Está lleno de gran trabajo e inspiración.