Hay un viejo modelo de negocio que muchos estrategas de negocios viven en las 3 Cs. Es un recordatorio para centrarse en el empresa, clientes y competidores. Muchas pequeñas empresas y sitios web también utilizan 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. A continuación, se explica cómo pensar e incorporar las tres C de las interfaces de usuario en sus proyectos 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 que no son diseñadores pueden hablar sobre el color y si les atrae un cierto tono o paleta.
El color puede crear distintas conexiones emocionales completamente por sí mismo, sin otros efectos. Puede entregar una muestra de color o un chip a casi cualquier persona y obtener una reacción sobre cualquier 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 de manera casi universal.
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 del 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 llamadas a la acción o elementos utilizables.
- Establecer un sentido de qué 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 utiliza el azul como un color dominante en lugar de rojo sería discordante 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 necesitas más que un par de colores para que funcione. De dos a 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 está arraigada 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: comenzar con blanco y negro. Si el diseño se puede usar sin color, es probable que funcione 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 facilidad de uso.
Contraste
El contraste crea una distinción entre los elementos. Ayuda a crear una jerarquía visual, capacidad de escaneo y contribuye a lo fácil que es comprender algo rápidamente. Los elementos con fuerte contraste facilitan que el usuario mire de una cosa a otra, creando un patrón visual natural y un flujo de usuarios.
La razón por la que el contraste es tan importante para el diseño de la interfaz de usuario es que forma parte de todo lo que hace. La forma en que crea el contraste varía según el tipo de elemento del efecto visual involucrado.
Puedes establecer contraste con:
- Color
- tamaño
- Dirección
- Espacio
- Forma
Un elemento clave de las pautas de accesibilidad es el contraste porque asegura que los usuarios puedan distinguir un elemento de otro en el diseño. El Proyecto A11Y, cuyo objetivo es facilitar el acceso a la web, tiene esta recomendación: comenzar con el contraste de color utilizando colores de diferentes segmentos de la rueda de colores o colores de contraste. 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 dramáticamente diferentes tamaños 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 señales direccionales, flechas o imágenes con movimiento para ayudar a obligar al usuario a mirar en cierta dirección, luego gire la señal direccional para obtener aún más contraste.
La diferencia entre espacios reducidos y espacios 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 pueden realmente funcionar juntos, de modo que ambos sean fáciles de ver de un vistazo.
Para saber si el contraste funciona de la manera que usted pretende, piense en un par de factores cuando mire los elementos en la pantalla:
- Facilidad de lectura: ¿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 tantas personas como sea posible?
- Ambiente: ¿Pueden los usuarios ver y entender el diseño en los lugares donde se utilizará?
Contenido
La última de las tres C es el contenido. El diseño de la interfaz de usuario solo puede ser tan bueno como la información contenida en él. El contenido incluye todo, desde imágenes hasta texto, ilustraciones e iconos, logotipos y marcas. El contenido también incluye video y cada fragmento de copia, desde la mensajería completa o la narrativa hasta las publicaciones del blog y pequeños fragmentos de microcopia.
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 y su 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 debe ser mejor / más grande / más especial que el contenido similar que compite por la atención de los usuarios.
Eso puede ser una tarea difícil, pero la mayoría de los diseñadores pueden crear este contenido siendo fieles a sí mismos, a su marca y a sus mensajes. Apégate a lo que eres y 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 del negocio (compañía, clientes y competidores) y las tres C del diseño de la interfaz de usuario (color, contraste y contenido), tiene las herramientas y el conocimiento para crear un proyecto de diseño que está 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. Usted está 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 de Design Shack. Asegúrate de echar un vistazo alrededor; Está lleno de gran trabajo e inspiración.