Como diseñador, intento dedicar el menor tiempo posible a tareas de gestión de proyectos porque prefiero centrarme en cosas más creativas.
Me encanta pasar horas creando paletas de colores preciosas, pero una vez que tengo una que me convence, no quiero perder el tiempo peleándome con muestras en una herramienta de diseño.
Afortunadamente, Webflow ofrece un sinfín de funciones que agilizan la gestión de proyectos y paletas de colores; solo tienes que saber dónde buscar. Puedes usar muestras globales para cambiar los colores en cualquier lugar donde aparezcan en tu diseño, todo a la vez. Además, el comprobador de contraste integrado muestra claramente si los colores del texto cumplen con las directrices de accesibilidad según el color de fondo.
Sigue leyendo para descubrir cinco consejos que te ayudarán a gestionar las combinaciones de colores en Webflow y a ahorrar tiempo, para que puedas concentrarte en las tareas que más disfrutas.
1. Añade muestras de color desde el principio
Cuando empecé a diseñar sitios web, tenía la mala costumbre de esperar demasiado para crear una paleta de colores. Es fácil pasar por alto este paso cuando tienes una idea de diseño que te apetece probar o una fecha de entrega que se acerca. Pero hacer un esfuerzo consciente por fijar tus muestras de color al principio puede ahorrarte muchísimo tiempo de edición más adelante y ayudarte a mantener todo el proyecto organizado.
Si diseñas un sitio web para un cliente, te recomiendo elegir una paleta de colores preliminar antes o al mismo tiempo que revisas los wireframes. Por supuesto, puedes hacer cambios si es necesario, pero tener una buena base facilita todo el proceso de diseño y ayuda a garantizar que tú y tu cliente estéis en sintonía. Si trabajas con una marca consolidada, probablemente ya tengan una paleta de colores de marca con la que trabajar.
Cómo añadir tu paleta de colores al diseñador de Webflow
Cuando estés listo para sumergirte en el Diseñador de Webflow, abre el panel de Estilo a la derecha y desplázate hacia abajo hasta la sección "Backgrounds" para localizar el selector de color (puedes acceder a él haciendo clic en el cuadrado junto a "Color").
Añade muestras a tu paleta de diseño web haciendo clic en el icono "+" en la parte inferior del selector de color. Esto abrirá un menú desplegable adicional donde podrás nombrar tu muestra de color. Cuando estés satisfecho con el nombre y el color, haz clic en "Create".
Hay varias formas de ajustar o seleccionar colores en el selector de color:
- Haz clic y desliza el cursor por el plano de color
- Usa los deslizadores de tono y transparencia debajo del plano de color
- Introduce el código HEX del tono que quieras
- Ajusta manualmente los campos de entrada HSB (Tono, Saturación, Brillo) o RGB (Rojo, Verde, Azul) y A (Alfa) (si haces clic en "H S B" cambiará a "R G B" y si vuelves a hacer clic, volverá a cambiar)
- Pega una captura de pantalla o imagen de tu paleta de colores en el lienzo de Webflow y utiliza la herramienta cuentagotas (es una extensión de Chrome)
La herramienta cuentagotas es muy útil si quieres extraer un tono de un logotipo u otro recurso de marca.
2. Añade colores extra a tu paleta
Me resulta útil crear conscientemente una paleta de colores un poco más amplia de lo que creo que necesitaré, para no tener que buscar otro color que combine con el resto del diseño a mitad del proyecto. Añadir algunos tonos extra desde el principio puede darte más libertad creativa cuando estés "en racha" trabajando en un diseño.
¿Cuántos colores debería tener un sitio web?
Muchos diseñadores te hablarán de la regla 60-30-10 cuando les preguntes cuántos colores necesitas para un sitio web. Algunos incluso te dirán específicamente que te limites a tres. Según esta regla, el 60% de tu sitio web debería ser de un color (el principal), el 30% de un color que complemente al primero y el 10% restante debería ser tu color de acento. Aquí tienes un ejemplo de la regla 60-30-10 en acción con la plantilla para sitios web de conferencias Conzai.
El diseño de Conzai que aparece arriba consiste principalmente en negro (aproximadamente el 60%), un 30% de blanco y un 10% de color de acento, el verde (estas son estimaciones, no porcentajes exactos). La regla 60-30-10 es muy útil porque, como puedes ver, suele dar resultados llamativos. Pero he visto muchos diseños que se saltan esta regla o incluso la rompen por completo y se ven increíbles.
El sitio web de Blue Paprika es un gran ejemplo. En él aparecen al menos nueve tonos diferentes. En la captura de pantalla anterior podemos ver que el blanco es el color principal, el negro es un color de acento y aproximadamente el 30% restante es un degradado o una mezcla de al menos siete colores distintos. También podrías adaptar la regla 60-30-10 usando un color para el 60% de tu sitio, otro para el 30% y dividiendo el 10% restante en tres colores análogos o incluso cuatro colores tetrádicos.
3. Incluye tintes y sombras
Muchos sitios web aprovechan los esquemas de color monocromáticos (compuestos por tintes, sombras y tonos) hasta cierto punto. Puedes usar sombras, tintes y tonos para ampliar tu paleta sin preocuparte demasiado por si los colores chocan entre sí. Tener a mano estas variaciones también facilita crear profundidad o aumentar el contraste mientras diseñas diferentes elementos.
Así es como puedes añadir tintes, sombras y tonos a tu esquema de color en el selector de color de Webflow. Supongamos que estás diseñando un sitio web para un cliente cuyos colores de marca son azul oscuro, blanco y dorado oscuro. Para añadir tintes, solo tienes que aumentar la cantidad de blanco, o brillo, que se añade al color. Para añadir sombras a cualquiera de estos colores, debes añadir negro al color, o aumentar la oscuridad. Los tonos se crean añadiendo gris.
Añade tintes en el diseñador de Webflow moviendo el selector por el plano de color hacia la esquina superior izquierda, acercándote cada vez más al blanco (o al código HEX #ffffff). Añadir tintes al azul oscuro te dará diferentes matices de azul claro. Como no puedes añadir más blanco al blanco absoluto, no es posible añadir tintes al blanco.
Para añadir sombras, mueve el selector directamente hacia la parte inferior del plano de color (hacia el código HEX #000000). También puedes añadir sombras moviendo el selector por el plano de color hacia el centro a la izquierda (o hacia los tonos grises entre el blanco y el negro).
El esquema de color resultante podría verse como la imagen de arriba, dependiendo de cuántas sombras y tintes quieras incluir en tu paleta.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
4. Usa muestras globales para facilitar los cambios
Mientras que las muestras de color típicas facilitan añadir un color a un elemento específico de una página, las muestras globales te permiten cambiar un color en cualquier lugar donde exista en tu sitio (siempre que esté vinculado a esa muestra) en cuestión de segundos. Esto ahorra muchísimo tiempo si tienes un cliente al que le gusta ver diferentes opciones o que está pasando por un cambio de imagen y modificando los colores de su marca. También es muy práctico si trabajas a partir de una plantilla.
Para experimentar tú mismo la versatilidad de las muestras globales, abre la plantilla para sitios web Fitnesso en el diseñador de Webflow. Haz clic en el botón "Online Coaching" de la página de inicio y luego haz clic en el cuadrado azul oscuro bajo la sección "Backgrounds" en el panel de estilo; esto abrirá la paleta de colores.
Haz clic en el icono del "lápiz" en la esquina inferior derecha del selector de color para editar esa muestra. A medida que cambies el color, deberías ver cómo cambia cada instancia de ese color en toda la plantilla, no solo el fondo del botón "Online Coaching".
Puedes desvincular un elemento de una muestra global para cambiar el color solo de ese elemento sin afectar al resto de tu diseño haciendo clic en el icono de "enlace roto" (situado en la parte inferior derecha del selector de color, junto al icono del "lápiz"). Si decides que quieres volver a conectar ese elemento a una muestra global, solo tienes que hacer clic en esa muestra de color en tu paleta guardada.
5. Comprueba el contraste para garantizar la accesibilidad e inclusión
Una de las funciones más geniales del Webflow Designer es el comprobador de contraste integrado, que facilita verificar la accesibilidad y la inclusión.
El contraste influye enormemente en cómo las personas con discapacidad visual perciben tu diseño web. La relación de contraste recomendada para el texto depende del tamaño y el grosor de la fuente. Y si tus elecciones de color no siguen las Pautas de Accesibilidad para el Contenido Web, es posible que algunas personas no puedan leer o interactuar plenamente con ciertas partes de tu sitio.
Puedes comprobar fácilmente si los encabezados, párrafos y otros textos tienen una relación de contraste adecuada en el selector de color de Webflow. Abre el selector de color en la sección "Tipografía" del panel de Estilo. Justo encima de tu paleta de colores, verás una puntuación de relación de contraste.
Si tu relación de contraste no cumple con las recomendaciones establecidas por las WCAG, verás un indicador que dice "Fail" (Fallo). Haz clic en el icono del "ojo" a la derecha de tu puntuación de contraste para activar o desactivar dos líneas en el plano de color. Estas líneas indican dónde tendría que situarse tu selector de color para cumplir con la puntuación mínima recomendada o alcanzar una puntuación mejorada. Puedes obtener más información sobre cómo se genera esta puntuación y por qué es importante en esta guía de Webflow University.
Más consejos de gestión de proyectos de diseño web
¿Buscas más estrategias para la gestión de proyectos en Webflow? Webflow University es un recurso fantástico para aprender a aprovechar el potencial del Webflow Designer; no dejes de echar un vistazo a estos artículos del blog:
