📚 Introducción al desarrollo web: HTML y CSS (2/2)
🗂️ Cómo se define la presentación de los elementos de una página web
📖 El uso del color: Diseñando con color
⭐ Aspectos clave
Debes ver el vídeo El uso del color: Diseñando con color en el que se habla del uso del color en el diseño web y se muestran algunas herramientas que ayudan a crear colores y combinar colores entre sí mediante la creación de paletas de colores.
📝 Transcripción
Hola, bienvenido a este vídeo donde hablaremos sobre el uso del color en el diseño web, y algunas herramientas.
Mi nombre es Marina Gutiérrez, me dedico al diseño gráfico y web. Puedes contactarme en este mail o a través de mi página web.
En los vídeos anteriores, pudimos ver como se inician los estudios del color, y como la teoría consigue descifrar su anatomía. También hemos visto a grandes rasgos algunas de los significados que se le atribuyen a algunos colores según la sicología del color.
Ahora que ya sabemos algo más sobre el color, podemos empezar a diseñar usándolo sin miedo y con ganas. ¿Te animas a empezar?
Encontrar los colores adecuados para tu proyecto dependerá entre otras cosas de algunos factores tales como la temática de la web, la imagen corporativa, la estrategia comunicativa, las jerarquías del contenido, las tendencias actuales, la influencia cultural, la accesibilidad y legibilidad.
Para tu diseño necesitarás crear una paleta de colores con los que trabajar, deberás hacer pruebas y descartar las opciones que no se ajusten al diseño o que no sean viables. Es una cuestión de elegir y combinar con un poco de mimo.
El buen uso del color nos servirá, como ya sabemos, para crear un impacto emocional, para enfocar al usuario hacia un elemento concreto en la página, para facilitar la lectura, transmitir el mensaje de una forma impactante y directa, o mejorar la accesibilidad y la navegación.
En el uso del color hay un rango de colores que se podría denominar "justo" para aplicar en diseño, y sería, siempre utilizar entre 3 y 5 colores.
Para trabajar con el color existen múltiples herramientas que te facilitarán el trabajo y la documentación. A continuación te explicaré como funcionan algunas de estas herramientas.
Lo primero que debes hacer es establecer un color principal, y a partir de ahí debes buscar las combinaciones adecuadas y definir, por ejemplo, dos colores más para crear tu grupo de colores básico.
En tus combinaciones tienes que cuidar muy bien aspectos como el balance, intentando darle peso al color adecuado e intentando equilibrar el uso de cada color con respecto a la composición, siempre habrá un color que domine sobre los otros.
Te recomiendo que pruebes primero con tres colores e intentes combinarlos dentro de sus gamas y matices de distintas maneras, así podrás ver el efecto final que puede tener una página con un color o con otro.
Una vez elegidos los colores y las tonalidades que usarás, puedes hacer pruebas para comprobar cuál será la combinación que mejor cuadra con tu diseño y en que medida le darás protagonismo a cada color.
Elegir una paleta de color adecuada es parte importante dentro del diseño de una web, así que no lo tomes a la ligera, y verás los resultados muy pronto. Recuerda que el color en el diseño sí importa.
Existen muchas herramientas para trabajar en tus diseños con el color y con las paletas. Elegir la apropiada depende de ti y de cómo te guste trabajar. Aquí te muestro algunas con las que puedes empezar.
La inspiración es lo primero que tenemos que buscar, por eso es bueno investigar en las últimas tendencias y también en paginas especializadas que hablan de color. En ellas encontrarás desde tendencias hasta paletas de color para inspirarte.
La mayoría ofrece búsquedas específicas con filtros muy potentes, son un excelente lugar para empezar un proyecto de diseño.
Para buscar, crear y combinar los colores que formarán tu paleta, puedes usar alguno de estos enlaces. Te ofrecen la posibilidad de combinar colores y obtener fusiones o gamas entre ellos, y verificar si son efectivos dentro del diseño. Aquí encontrarás herramientas para crear colores o encontrar el que necesitas para tu paleta básica.
También existen herramientas mas completas que trabajan el color, y aquí hay un par que te pueden ser de utilidad.
Aquí te sugiero dos interfaces que te permiten encontrar un color y crear una paleta completa. Este tipo de herramientas generalmente te ofrecen el circulo cromático para que elijas un color y puedas combinarlo. Te calcula las distintas armonías, te sugiere el balance de colores, así podrás ver el peso y la presencia de cada uno.
Algunas de estas herraminetas te permiten exportarlo también como archivos de Photoshop y de Illustrator. Cuando elijas tus colores obtendrás una paleta con todos los códigos y referencias de los colores elegidos.
Para gestionar, probar y encontrar paletas de color ya creadas, puedes probar con alguno de estos enlaces. Existen múltiples opciones en la red para encontrar la inspiración que necesitas para hallar los colores de tu paleta. Aquí te sugiero algunos enlaces para poder empezar.
COLORD tiene una interfaz muy agradable y sin tanta publicidad como el resto de las aplicaciones. Es muy completa ya que cuenta con muchas herramientas distintas para gestionar paletas: desde inspiración en paletas aportadas por otros usuarios hasta el cálculo preciso de tonalidades de colores específicos. Puedes crear colores, paletas, degradados o hallar el ADN del color de una imagen....
Aquí tienes más enlaces con más herramientas de gestión de paletas de color. También existen utilidades concretas para averiguar colores usados en otras webs a partir de imágenes.
Con PALETTE GENERATOR tienes la opción de agregar una URL donde esté alojada una imagen, y calculará el mapa de colores predominantes que contiene esa imagen.
PICTALOUS también te ofrece las mismas opciones sólo que aquí puedes subir una imagen desde tu disco duro y averiguar el ADN de esa imagen. Además te sugiere paletas afines para combinar esos mismos colores que ha hallado.
Si lo que quieres es hallar la paleta usada en una página web concreta, aquí tienes dos enlaces donde te ofrecen esa posibilidad.
Finalmente, te sugiero que también tengas siempre a mano algún glosario u hoja de referencia para colores web o HTML para facilitar el trabajo de programación posterior. Aquí encontrarás muchas referencias y tablas muy útiles para programar una vez que hayas concluido tu diseño.
A continuación te dejo aquí unos enlaces más para profundizar en el tema del color y su uso en diseño web.
Muchas gracias por tu atención.
¡Hasta luego!