# data[].attributes.body
Aquí nos adentraremos en el maravilloso mundo de las tipografías. En él podéis encontrar la explicación de qué son, además de sus variantes y usos.

# data[].attributes.attachment_link.readable_text
Resulta imposible no tener un contacto directo constante con tipografías. Nos acompañan en todo momento, ya que forman parte de nuestra rutina diaria. Hablamos por tanto de un elemento visual casi omnipresente del que podemos hacer uso desde el diseño gráfico .

Además, las tipografías son una herramienta clave a la hora de diseñar la identidad de marca o branding de un proyecto. Junto con el logo, la paleta de colores y otros recursos, forman parte del branding visual que diseñamos estratégicamente para reforzar el mensaje que queremos enviar desde la empresa.

En este artículo voy a profundizar en el concepto de la tipografía. Aprenderás qué es una familia tipográfica y conocerás sus variables, así como los 4 grandes grupos de tipografías que existen teniendo en cuenta su forma. Además, al final del artículo te listo las 6 webs a las que más recurro cuando necesito encontrar la mejor tipografía para el diseño de un proyecto o marca.

Índice de contenido

¿Qué es una tipografía?

La palabra tipografía proviene de dos términos griegos: "typos" que significa golpe, marca o forma, y "graphia" que significa cualidad de escribir.

Podemos definir la tipografía como "el arte de diseñar las letras". Se denomina así a la disciplina que estudia la representación gráfica de las letras para que el lenguaje escrito sea efectivo.

Al mismo tiempo, denominamos también tipografía a la escritura con un conjunto de caracteres alfanuméricos, elaborados previamente y que cuentan con un estilo y una serie de características en común.

Toda la familia de caracteres se ha diseñado siguiendo unas mismas pautas y estilo. Posteriormente se han incluido en un archivo contenedor con formato (Microsoft y ) o (Apple).

Gracias a estos archivos podremos incluir las tipografías en nuestro catálogo tipográfico, que nos permitirá usarlas desde cualquier programa de edición de textos (o imágenes) o programas de diseño desde nuestro ordenador. Podremos incluir estos diseños de letras en nuestras creatividades y composiciones, sin necesidad de diseñarlas una y otra vez.

No debemos confundir la técnica de la tipografía con el Lettering "el arte de dibujar las letras" o la Caligrafía "el arte de escribir las letras". Aunque cuenten con similitud, estas 3 técnicas difieren en cómo conciben y abordan la creación de las letras.

Al autor de la tipografía lo denominamos tipógrafo.

Al igual que ocurre con las formas, los colores o las imágenes, las tipografías también pueden llegar a evocarnos conceptos o emociones. A esto se le denomina psicología tipográfica o personalidad de la tipografía.

La personalidad tipográfica nos puede ayudar a transmitir aún más con la identidad visual de la marca. Por ejemplo, si queremos que la empresa se muestre moderna y cercana, podemos recurrir a una tipografía de palo seco. Si quizás la preferimos más tradicional y seria, una tipografía con serifa podría ser una mejor opción.

Tipos de Tipografías

Sin profundizar demasiado dentro de cada categoría de tipografías, lo cierto es que podemos clasificar a las fuentes tipográficas por su morfología en 4 grandes grupos:

Con serifa (romanas)

Sin serifa (palo seco)

Cursivas (manuscritas)

Decorativas (exposición)

Vamos a conocerlas una por una para que puedas aprender a diferenciarlas por su forma.

Tipografías con serifa (romanas)

Las tipografías con serifa son aquellas que cuentan con remates o terminales, que son esos pequeños adornos ubicados en los extremos de los trazos de los caracteres.

Las tipografías Serif suelen ser concebidas como serias y tradicionales. Cuentan con un aire académico o institucional. Son tipografías idóneas para párrafos o textos largos, ya que los pequeños terminales o serifas contribuyen a que se cree una línea imaginaria bajo el texto que facilita mucho lectura a nuestro ojo.

Algunos ejemplos de fuentes tipográficas Serif son: Times New Roman, Garamond o Book Antigua.

Y recuerda dentro de las tipografías con serifa, podemos incluir también las tipografías egipcias o Slab Serif.

Tipografías sin serifa (de palo seco)

Las tipografías sin serifa o de palo seco (sans serif) se caracterizan por la ausencia de remates y terminales. Se diseñan sin serifas. Sus trazos apenas presentan contrastes.

Las tipografías Sans Serif suelen asociarse con la tipografía comercial, ya que ofrecen un resultado muy bueno para la impresión de titulares o poco texto, en carteles y publicidad. Este estilo de fuente evoca modernidad, seguridad, neutralidad y minimalismo.

Aunque este tipo de fuente tipográfica no cuente con la línea invisible que consiguen las tipografías Serif para los textos largos, es muy recurrida también para textos en pantalla y textos en tamaños pequeños. Gracias precisamente a la ausencia de terminales y remates, esta tipografía puede resultar más legible en textos de pequeño tamaño que su hermana mayor.

Algunos ejemplos de tipografías San Serif son: Futura, Helvética, Arial, Gotham o Avenir.

Tipografías cursiva (manuscritas)

Las tipografías cursivas, también se denominan como script o manuscritas. Son tipografías que representan o imitan la caligrafía a mano, por lo que en ocasiones también se les puede denominar como tipografías caligráficas.

Generalmente este tipo de tipografías cuentan con una tendencia itálica o cursiva claro. Las letras se ligan entre sí y encontramos curvas más pronunciadas que en las tipografías con serifa o de palo seco.

Como se ligan con la caligrafía, cuentan con una personalidad algo más humana y cercana. Algunas tipografías cursivas podrían ser Beckham Script o Parisienne.

Tipografías decorativas (exposición)

También se les denomina como tipografías display. Están consideradas como tipografías divertidas, más desenfadadas, pero pueden transmitir una gran variedad de sensaciones.

Cuentan un carácter y personalidad muy fuerte. Desde el punto de vista de la psicología tipográfica son transgresoras y contribuyen a llamar más la atención. No obstante, la legibilidad que se puede obtener con este tipo de fuentes es algo más pobre.

Dentro de este conjunto de decorativas entrarían las tipografías cuyas características no se ajustan a los tres conjuntos anteriores. Suelen crearse para fines específicos donde la legibilidad no se tiene demasiado en cuenta. Como por ejemplo en el branding de producto en el sector de la alimentación. Son muy expresivas y suelen contar con atributos más temáticos.

Eso sí, definitivamente no son tipografías idóneas para párrafos de texto.

Pueden llegar a transmitir falta de cuidado o desinterés en el diseño. Por eso, piénsate bien cuando utilizar este tipo de fuentes tipográficas.

¿Qué es una familia tipográfica?

Una familia tipográfica es un conjunto de caracteres, alfabéticos o no, que cuentan con unas características comunes en su estructura y en su estilo. Esto nos permite identificarlas como una misma familia.

Los miembros que integran una misma familia tipográfica se parecen entre sí, pero cuentan con algunos rasgos propios como variaciones de peso, inclinación y proporción. Esto lo voy a aclarar con más detalle en el siguiente punto.

Existen multitud de familias tipográficas. Originalmente surgieron con la creación de la imprenta pero otras han ido apareciendo como resultado de la digitalización de todo el proceso de diseño de tipografías.

Por ejemplo, las familias Gotham, Futura o Swift son algunas de mis familias tipográficas favoritas. Las uso con bastante frecuencia.

Las variables tipográficas y las versalitas

Las variables tipográficas son las opciones que podemos encontrar dentro de una misma familia tipográfica. Son modificaciones de la morfología de la tipografía, es decir de su forma. Actúan sobre el grosor (tono) del trazo, el ancho o proporción del carácter y la inclinación del eje vertical de los caracteres de una misma familia tipográfica.

Gracias a estas variables tipográficas vamos a poder establecer una jerarquía visual en nuestras composiciones. También nos ayudan a satisfacer las necesidades que nos pueden surgir a la hora de comunicar visualmente con tipografías.

El peso como variable tipográfica

La variable de peso, denominada también como variable de grosor o tono, afecta directamente al trazo de los caracteres. Se modifica la relación entre el ancho del trazo y los espacios vacíos dentro de cada signo tipográfico.

La tipografía bold o negrita presenta un grosor de trazo mayor, mientras que la tipografía light presenta un grosor del trazo menor.

La proporción como variable tipográfica

La variable de ancho o proporción afecta directamente a la estructura de los caracteres. Hace referencia a la modificación del ancho de la letra. En principio el trazo no varía.

Las tipografías condensadas y expandidas son tipografías que han sido diseñadas desde cero, al igual que las regulares. Por eso tampoco debemos deformar la escala de nuestras tipografías si necesitamos condensadas o expandidas.

Ten en cuenta que la variación de tamaño en sentido vertical no se considera como variable tipográfica, ya que se corresponde con una simple modificación del cuerpo tipográfico.

La inclinación como variable tipográfica

La variable tipográfica de inclinación modifica el eje de los caracteres. Hace referencia al ángulo de inclinación de la tipografía. Cambia la estructura y se altera el ritmo. La inclinación del eje vertical puede variar según el diseño de la familia tipográfica pero generalmente se encuentra entre los 8 y los 16º de inclinación.

Dentro de la variable tipográfica de inclinación vamos a poder reconocer dos tipos. Las oblicuas y las itálicas.

Las tipografías con variable oblicua cuenta con la misma morfología que la tipografía regular. Tan sólo cuenta con el eje inclinado. En cambio las tipografías con variable itálica presentan además una morfología propia con algunas reminiscencias a la caligrafía.

Tipografías versalitas

Tras la descripción de las variables tipográficas, es buen momento para mencionar también a las tipografías versalitas. Estas tipografías cuentan con alfabetos que mantienen la altura de caja alta (mayúsculas) a la misma altura que las de caja baja (minúsculas).

Las versalitas son tipografías que pueden ser de gran utilidad si por ejemplo lo necesitamos por valor estético.

Por lo tanto, después de conocer las variables tipográficas por peso, inclinación o proporción, ten en cuenta lo siguiente. Si necesitamos acudir a una tipografía negrita, condensada o itálica recuerda escoger siempre la variable tipográfica. Por favor, evita hacerlo digitalmente con software que modifique la tipografía.

6 webs donde encontrar la mejor tipografía para tu marca

En ocasiones encontrar una tipografía acertada se nos puede resistir. Aquí os dejamos una serie de webs donde podréis encontrar miles de tipografías gratuitas o de pago.

Google Fonts
Se trata de una página bastante básica, pero que incluye un enorme catálogo de tipografías que podemos utilizar de forma gratuita. Muchas de sus fuentes se pueden asemejar a otras tipografías de uso privado, como por ejemplo la tipografíaMontserrat, que se asemeja mucho a la Gotham. Esta herramienta de Google puede ser realmente útil, sin embargo al estar tan al alcance, muchas de sus tipografías han sido bastante utilizadas ya. El único problema con el que nos podemos encontrar es que algunas tipografías pueden no estar del todo perfectas y requieren que les metamos algo de mano para nuestros diseños.No obstante, Google Fonts sigue siendo una opción ideal para quien no se pueda permitir adquirir una tipografía de pago.No te pierdas nuestro artículo: Google Fonts: Qué es y las 10 mejores tipografías gratuitas

Myfonts
Myfonts es la web de tipografías comerciales más popular de Internet. En este portal podemos encontrar tipografías de cualquier estilo para nuestros diseños, tanto editoriales como web.Todas las tipografías son de pago. La plataforma cuenta con una sección denominada What's New, donde publican ofertas especiales y nuevas incorporaciones a su colección. Por otro lado, si hay alguna tipografía que te gustaría localizar, y cuentas con un texto escrito en ella, visita la sección What The Font.

Latinotype
Este estudio tipográfico está formado por creadores de Latinoamérica. No cuenta con muchas tipografías, pero podeos encontrar algunas realmente buenas, como laNeogrotesk, a precios muy económicos.

Good Type Foundry
Esta página web cuenta con un catálogo bastante variado de tipografías de alta calidad, aunque no es muy extenso.

Family Type
Otra web bastante interesante que cuenta con tipografías bien definidas y trabajadas. Además, su página puede resultarte muy divertida. Te entretendrás mientras buscas la fuente que más te convenga. El equipo de Familytype son los responsables de otro original proyecto denominadoUniversal Sans, que merece la pena conocer. Bajo esta página web podremos ir creando una tipografía Sans a nuestro gusto, cambiando detalles como el grosor, los terminales, las serifas, etc.

Se trata de un catálogo gratuito de fuentes, que se centra mayormente en tipografía contemporánea. Se trata de una plataforma que se estrenó hace bastante poco y donde los tipógrafos pueden enviar también sus tipografías.

¿Cómo instalar una tipografía en nuestro ordenador?

Todo sistema operativo cuenta con una serie de tipografías preinstaladas por defecto, pero siempre podremos incluir nuevas familias tipográficas con las que trabajar.

Para usuarios Windows

Para instalar una tipografía en el sistema operativo de Windows, debemos acceder a la carpeta Mi PC > C* > Windows > Fonts, donde volcaremos los ficheros de las tipografías. Al abrir esta carpeta, podremos consultar todas las tipografías que se encuentran instaladas en nuestro ordenador. Para instalar las nuevas tipografías en nuestro equipo, tan solo necesitamos arrastrar ficheros a esta carpeta.

Para usuarios macOS

Para los usuarios de Apple es un poco más fácil. Basta con hacer doble clic sobre el fichero de la tipografía que queremos instalar, y el programa Catálogo Tipográfico se abrirá para guiarnos en el proceso. Además, desde este programa podemos consultar las tipografías instaladas, así como desactivar algunas, para evitar que carguen en nuestra memoria RAM, si por ejemplo, ya sabemos que no las vamos a utilizar por un tiempo.

¡Esperamos que os haya gustado el artículo!
Anímate y cuéntanos cuáles son las tipografías que más utilizas en tus diseños en nuestros comentarios.

Recuerda, la manipulación de las tipografías debes realizarla siempre con cuidado y respetando la morfología tipográfica. Ya que las tipografías son el resultado final de un extenso y complejo proceso de diseño por parte del tipógrafo.

Jaime P. Llasera

Soy Ingeniero informático, diseñador gráfico y desde hace más de 13 años ayudo a otras empresas a trabajar en su identidad corporativa.
YouTube

# data[].attributes.attachment_link.title
Tipografías: Qué son, los diferentes tipos y sus variables tipográficas

# data[].attributes.attachment_link.description
Resulta imposible no tener un contacto directo constante con tipografías. Nos acompañan en todo momento, ya que forman parte de nuestra rutina diaria. Hablamos por tanto de un elemento visual casi omnipresente del que podemos hacer uso desde el diseño gráfico .

# data[].attributes.body
Aquí tenéis como combinar varias tipografías para vuestros proyectos.

# data[].attributes.attachment_link.title
💡 7 Elementos visuales del DISEÑO GRÁFICO

# data[].attributes.body
Elementos y principios del diseño que de manera objetiva nos ayudarán a crear nuestros prototipos.

# data[].attributes.attachment_link.title
20 elementos y principios del diseño que debes saber

# data[].attributes.attachment_link.description
Todo lo que necesitas saber sobre la teoría del diseño... fácil de entender, con tips e imágenes.

# data[].attributes.body
Enlaces a tutoriales y artículos para profundizar en las herramientas de prototipado de Figma, para estudiantes que quieran aprender más.

# data[].attributes.attachment_link.title
Figma for Beginners tutorial (4 parts) – Figma Help Center

# data[].attributes.attachment_link.description
Learn the basics by designing a social media app in Figma. We’ll teach you about the fundamental tools you’ll use, how to create…

# data[].attributes.body
Participar en un juego en línea que refuerza conceptos de UX/UI y prototipado.

# data[].attributes.attachment_link.readable_text
Successful designers routinely upskill and reskill to reinforce fundamentals used across tools, projects, and disciplines. However, finding extra time for learning during the workweek isn't easy. Fortunately, online gaming is a fun and educational way for UI/UX designers to sharpen their skills and acquire new ones. Through interactive and immersive (and often free) online gaming experiences, you can hone technical skills such as alignment, typography, and color theory.

In addition to learning new design techniques, I've found that playing online games puts me in a lighter mood, boosts my creativity, and helps me make better use of core design principles. Whenever I have spare time or I'm facing a stubborn design problem, I play one of these games and come away with a fresh perspective.

Enhance Your Sense of Alignment

Alignment is a fundamental design principle that guides visual composition and supports usability and readability.

It's Centred That is great for training your sense of alignment and helping you catch spacing mistakes quickly. The objective is to determine whether a dot is centered inside a shape. It's a simple concept, but the game is challenging because the dots are often placed agonizingly close to center. The game builds compositional awareness by forcing you to consider geometry and find reference points in overlapping and adjacent shapes.

Expand Your Typeface Design Knowledge

Understanding the nuances of typefaces can help designers establish visual hierarchy, ensure text is legible, and better communicate the meaning of copy.

The game I shot the serif tests how fast you can recognize serif fonts. To start, you're presented with two letters, one of which is a serif font, and are required to "shoot the serif" by clicking on it before you run out of time. As you progress, you're shown more and more letters simultaneously, making it harder to find and shoot the different serif styles.

This game will keep you on your toes! I play it every week, and I'm always surprised by how challenging it is after a few rounds.

Typewar is another typeface trainer, one that challenges your ability to identify different typefaces. In each round, you're shown a glyph and must choose the correct typeface name from a pair of options. You gain or lose points for how you answer the question, and the amount of points awarded at the end depends on how many other players answered the same question correctly. The instant feedback, real-time statistics, and exposure to little-known fonts will motivate you to keep learning.

Improve Your Eye for Kerning

One way to improve the readability of digital text is to ensure effective kerning, or the spacing between characters. Kerning often flies under designers' radar because it's predefined in each typeface's font files. But it's helpful to know how to adjust kerning when the relationship between characters seems off, or if you need to create a bespoke logotype or font for a clien t.

Kern Type helps you fine-tune your kerning skills by testing your ability to correctly space letters within words. For every word you kern, you receive a score out of 100 and the option to toggle between three views: your spacing, the optimal spacing, and a combination of both for comparison.

I keep going back to this game because it's hard to score 100, and it reminds me that there's always room to improve.

Upgrade Your Color Game

By updgrading your color skills, you can make smarter and more meaningful decisions across a spectrum of design projects and disciplines. Color is a game that challenges you to identify hues and saturation, as well as complementary, analogous, triadic, and tetradic color pairings. The interface shows an interactive color wheel with a highlighted color in the center. You must determine the color (or colors) inside the color wheel in 10 seconds or less, a task that grows in difficulty as you attempt to match colors for triadic and tetradic color schemes.

Refine Your Vector Technique

Vector-based tools such as Figma, Sketch, and Adobe Illustrator allow designers to create digital graphics that scale without losing quality-unlike pixel images, which lose resolution as they increase in size. But drawing and manipulating vector shapes and curves can be a tricky process.

The Boolean Game teaches you about Boolean operations that are used to quickly construct and modify 2D shapes in vector-based design tools. In the game, you are shown a shape to replicate. After a few seconds, the shape transforms into an outline. On the left of the screen are several shapes that you can drag into the outline to reproduce the final shape. At the bottom of the screen are four Boolean operations: union, subtract, intersect, and difference. Clicking the Continue button triggers a step-by-step animation that shows you how to merge the shapes using the chosen Boolean operation. When an incorrect operation is chosen, this animation helps you visualize your mistakes.

Shape Type is another vector game to try. In it, the player is presented with a letter that needs to be reshaped into its correct form by dragging different anchor points and given a similarity score out of 100. Like Kern Type, you can also toggle between three views to compare your result to the original shape. In addition to refining your vector drawing abilities, Shape Type is a great way to get an up-close look at the anatomical elements of different typefaces.

One last game that will help you boost your vector skills is The Bézier Game, which helps you create more precise graphics using the pen tool. Intro tutorials explain how to use controls, such as alt and shift, to position anchor points and manipulate Bézier handles. The game teaches you how to draw simple geometric shapes along with more complex shapes, such as a heart and a car, with as few anchor points, or nodes, as possible. To keep things interesting, you get a certain number of nodes for each level, and the game keeps a running tally of the nodes you don't use.

I like this game because it helps me visualize the relationship between anchor point placement and bezier handle angles, leading to smoother lines and curves.

Brush Up On Basic Coding

Whether for career development or collaboration with developers, understanding the basics of HTML and CSS makes a designer a considerable asset to multidisciplinary teams. Moreover, front-end programming knowledge helps designers temper their ideas with realistic parameters.

Flexbox Froggy breaks down the basics of coding step by step. It teaches CSS flexbox, a CSS3 web layout model that makes UI component positioning easier by enabling alignment control, spacing, and wrapping elements on webpages with just one or two lines of code.

In the game, you help a mischievous frog and his pals hop across the screen by writing lines of CSS code. At each level, a mini tutorial above the code editor describes the different commands you can use. As you write the code on the left side of the screen, the corresponding changes occur on the right. If the frog reaches the lilypad, the code is correct.

Boost Your UI/UX Knowledge

Online games can also help designers improve their UI/UX knowledge and create frictionless experiences that increase conversion rates and ROI.

Can't Unsee enriches your overall UI/UX abilities by testing your knowledge of design concepts, such as hierarchy, contrast, alignment, typography, and component styling. The screen shows two design components and asks you to select the more user-friendly option. Components may look identical to the untrained eye, but an expert designer should be able to tell them apart by noticing small differences between the elements, such as misaligned text or uneven padding.

Make the Most of Online Design Games

I'm often amazed by how fast the design industry evolves. Sometimes, the pressure to keep pace with new tools and techniques can feel overwhelming and stifle my creativity. I do my best design work when I approach problems with a childlike spirit, which is why I enjoy these games so much: They allow me to learn and practice while maintaining a sense of play and wonder.

Whether you're looking to reskill, upskill, or learn a new UI/UX technique, online design games can help you test and grow your artistic and technical chops. As Pablo Picasso once said, "I am always doing that which I cannot do, in order that I may learn how to do it."

# data[].attributes.attachment_link.title
Sharpen Your Skills With Fun Online Games for Designers | Toptal®

# data[].attributes.attachment_link.description
Online design games are perfect for practicing tricky tools and techniques, boosting core UI/UX skills, and keeping pace with a rapidly evolving industry.

# data[].attributes.body
En este en enlace nos adentramos en el mundo del color. Dónde aprenderéis además de qué es el color, a como usarlo y crear paletas para nuestros proyectos.

# data[].attributes.attachment_link.readable_text
¿Qué es la teoría del color? ¿Por qué hay una teoría sobre ellos? Los colores son parte esencial del mundo y, sin darnos cuenta, nuestro subconsciente puede recibir mensajes a través de ellos. Entonces, ¿cuáles son los efectos psicológicos de los colores?

Cambiar sutilmente la tonalidad del color puede evocar reacciones totalmente distintas. Conocer qué es la teoría del color nos ayudará a entender las propiedades de los colores y el significado de los colores, de esta forma, sabremos qué color utilizar para transmitir nuestro mensaje correctamente.

Por otro lado, crear una armonía de color es un proceso que no solo requiere de gusto y criterio, sino, también, de ciertos conocimientos; entre ellos, el más importante es la teoría del color. Pues, sin ella, ¡tus creaciones tendrán menos impacto de lo esperado!

En este artículo, recogeremos todos los conceptos básicos de la teoría del color. Además, te mostraremos todo sobre el círculo cromático y las combinaciones de color para que sepas cómo aplicar la teoría del color en diferentes campos, como en el maquillaje, en el diseño gráfico y en el diseño de interiores.

Entonces, ¿estás listo para descubrir qué es la teoría del color y todo lo que interviene en ella? ¡Sigue leyendo!

¿Qué es el color?

Antes de ahondar en lo que es la teoría del color, debemos responder qué es el color, ¿no te parece? En esta oportunidad, iremos desde lo más básico hasta lo específico y, al final del artículo, serás todo un experto.

Entonces, ¿cómo se define un color? La Real Academia Española presenta la definición de color como una "sensación producida por los rayos luminosos que impresionan los órganos visuales y que depende de la longitud de onda".

Isaac Newton, físico y matemático inglés, en 1665, estableció la teoría física del color, la cual define el color como una combinación de luz y oscuridad, siendo el negro puro correspondiente al valor cero, como la ausencia de luz y el blanco puro como el valor máximo de luminosidad.

A parte del color blanco y del color negro puro, todos los otros colores se componen por una variedad de gris. Más adelante, conocerás más sobre las combinaciones de colores, ¡todo a su tiempo!

Ahora que ya sabes qué es el color, es momento de responder la pregunta central de esta nota: ¿qué es la teoría del color? ¡Nos vemos en el siguiente apartado!

Imagen: Astronomia.com

¿Qué es la teoría del color?

Entonces, para definir en qué consiste la teoría del color, en pocas palabras, podemos decir que esta comprende las reglas básicas que determinan cómo combinar los colores para obtener el efecto deseado.

Pero, ¿cuál es la importancia de la teoría del color? ¿Para qué sirve la teoría del color? Básicamente, para saber cuál es el poder del color en nuestra mente y para entender cómo componer armonías de colores, pues esto es esencial para las comunicaciones, el diseño y el arte, ya que el color que se escoja tendrá efectos determinados.

Al conocer qué es la teoría del color, podrás aprovechar los beneficios que te ofrece cada uno para poder acercarte a tus clientes actuales y potenciales; ya que, como verás más adelante, los colores son importantes para dar a entender el mensaje en sí.

Imagen: pantone

Propiedades del color

Según Archi Palettes, sitio web dedicado al estudio al estudio y a la enseñanza del color en las artes plásticas y visuales, las propiedades del color "son las distintas cualidades que nos permiten diferenciar y definir colores".

Estas cualidades se resumen en 3 categorías: tono, saturación y valor. A continuación, te las describimos.

1. Tono | Hue

En primer lugar, cuando hablamos de la tonalidad del color, matiz o tinte nos referimos a un color puro; es decir, un pigmento sin negro o blanco. En otras palabras, el tono identifica a todos los colores que conforman el espectro visible, por ejemplo, el rojo, el amarillo, el azul y el verde.

2. Saturación | Saturation

En relación a la teoría del color, la saturación es sinónimo de la pureza del color o pigmento. Mientras menos pigmento tiene un color, se va desaturando, ya que va perdiendo su pureza. Existen tres formas para desaturar un color: añadiendo color blanco, añadiendo color negro o mezclándolo con su color complementario.

3. Valor | Value

El valor, brillo o luminosidad de un color te indica la intensidad del estímulo luminoso; es decir, sabrás si el color es oscuro o claro en un rango de negro a blanco. Puedes regular la luminosidad del color de la siguiente manera: añadiendo blanco, para volverlo más luminoso, o añadiendo negro, para lograr el efecto contrario.

Imagen: propiedades del color

Imagen: Pinterest

Círculo cromático

La rueda de color o el círculo cromático es uno de los principales elementos de lo que es la teoría del color. Se trata de una representación circular organizada de los colores.

El círculo cromático permite identificar la paleta de colores primarios y sus derivados: los colores secundarios y terciarios;así como las diferentes características de los colores que ayudan a organizar la rueda del color.

A continuación, te explicaremos los conceptos relacionados al círculo cromático.

Para empezar, existen 2 grandes grupos de colores: los colores cromáticos y los colores acromáticos.

Colores cromáticos

Se trata de todos los elementos de la rueda de color, los cuales se pueden dividir en dos partes: los colores cálidos y los colores fríos.

➤ Colores cálidos: son los colores que contienen más amarillo en su composición. Entre ellos, resaltan el rojo, el anaranjado y el mismo amarillo. Para tener algunos ejemplos de los colores cálidos podemos pensar en un atardecer, en el fuego y en las hojas en el otoño.

➤ Colores fríos: son los colores que contienen más azul en su composición. Entre ellos, resaltan el verde, violeta y el mismo azul. Para tener algunos ejemplos de los colores fríos, podemos pensar en el anochecer o en un glaciar.

Por otro lado, ¿qué hay de los colores neutros en la teoría del color? Estos son los colores que contienen igual cantidad de colores cálidos y fríos en su mezcla. Por ejemplo, el color marrón, es un color neutro por excelencia, ya que este se logra a través de la mezcla de los colores primarios por igual cantidad. También, se pueden considerar sus derivados, tales como el beige y los colores piel.

Colores acromáticos

En este grupo podemos encontrar tres colores: el negro, el blanco y el gris, pues están conformados solamente por un grado de luz u oscuridad.

Imagen: colores cromáticos

Imagen: colores neutros

2. Colores primarios, secundarios y terciarios

Los colores primarios se refieren a los colores base que forman parte de la rueda cromática; es decir, los que no se pueden obtener por la mezcla de ningún color. Entonces, ¿cuáles son los colores primarios? La paleta de los colores primarios está conformada por el rojo, el amarillo y el azul en el modelo tradicional.

Los colores secundarios son los que se forman de la combinación de dos colores primarios: el anaranjado, el verde y el violeta. Finalmente, los colores terciarios son la mezcla de un color primario con uno secundario adyacente.

3. Gradaciones cromáticas

Ahora, respondamos lo siguiente qué son las gradaciones cromáticas. Las gradaciones cromáticas o escalas cromáticas en la teoría del color se refieren al uso del blanco y el negro sobre un tono para obtener una sucesión de colores. Estas pueden ser escalas monocromáticas -de un mismo color- o escalas acromáticas -de grises-.

Como has podido ver hasta aquí, el círculo cromático comprende diversas categorías de colores. Estas te ayudarán a comprender los términos que te explicaremos más adelante. ¡No las pierdas de vista!

Imagen: Escalas cromáticas

Armonías de colores

¿Buscabas métodos de composición de colores? Con lo aprendido acerca del círculo cromático, podemos crear distintos esquemas de colores basándonos en las armonías de color, las cuales producen un efecto estético.

En lo que es la teoría del color, las combinaciones de color adecuadas generan una sensación de calma y equilibrio en el ojo del espectador.

1. Paleta monocromática

Esta armonía de color se basa en el uso de un solo color: su saturación y los rangos de sus propios matices y sombras. Se trata de una de las combinaciones de color más simple y armoniosa.

2. Paleta de colores análogos

En esta armonía de color se utilizan tres o más colores ubicados adyacentemente en la rueda del color. Como en el esquema anterior, es importante escoger un color predominante.

3. Paleta de colores complementarios

Esta armonía de color utiliza los colores opuestos en el círculo cromático, los cuales pueden estar en sus versiones cálidas, frías, saturadas, desaturadas o terrosas.

4. Paleta de colores complementarios divididos

Se trata de una variación de los colores complementarios. Para este tipo de armonía de color, se toma un color de base y los dos adyacentes al color directamente opuesto.

5. Paleta de colores triádicos o triada de colores

Esta armonía de color consta de 3 colores que forman un triangulo equilatero en el círculo cromático. El uso de estos colores crea un efecto muy atractivo, similar, aunque menor, al contraste que genera la combinación complementaria.

6. Paleta de colores cuadrada

Esta armonía de color utiliza 4 colores que forman un cuadrado en la rueda del color. La combinación de color cuadrada se utiliza cuando se desea obtener un estilo muy dinámico.

7. Paleta de colores tetrádicos o dobles complementarios

Finalmente, tenemos la combinación de color por complementarios doble, la cual incluye 2 pares de colores complementarios. Este es el esquema más difícil para armonizar; por ello, es importante elegir el color adecuado como predominante para evitar que la combinación se vea desequilibrada.

Ahora que conoces más sobre la teoría del color y sus armonías, te será más sencillo crear combinaciones para tus proyectos futuros. ¿Cuál crees que será tu favorita?

Imagen: Armonías de colores

Acordes cromáticos

Para seguir profundizando tus conocimientos con respecto a lo que es la teoría del color, es hora de conocer qué es un acorde cromático.

En pocas palabras, un acorde cromático es un conjunto de colores predeterminados y ordenados de una forma específica que están asociados con un efecto visual o con una emoción en particular por la impresión que generan. El color principal es el que presenta mayor influencia en el acorde cromático; sin embargo, el conjunto de colores es el que determinará el efecto.

Este concepto de la teoría del color es muy utilizado en el marketing, en el diseño de interiores, en el diseño gráfico y en el diseño web. Asimismo, está estrechamente relacionado con el concepto de la armonía del color, el cual estudiamos líneas arriba.

Imagen: Medium

Contrastes de color

Para lograr un diseño equilibrado, el contraste entre elementos es un aspecto importante a la hora de componer. Se trata de un fenómeno con el que se diferencian los colores en su interacción.

Para que comprendas mejor este tema, te presentaremos los 7 contrastes de color delimitados en la teoría del color de Johannes Itten, profesor de la escuela Bauhaus, destacada entidad alemana enfocada en la arquitectura, diseño y arte.

1. Contraste por color en sí mismo

Para empezar, el primer contraste hace referencia a la combinación de los colores saturados. El grado máximo de tensión recae sobre los colores amarillo, magenta y cian, pues su pureza es alta y producirán mayor contraste cuando se combinen.

2. Contraste por luminosidad

Por otro lado, este contraste de color resulta de la tensión máxima que ocurre entre el blanco y el negro. En este caso, podemos encontrar una amplia gama de grises, así como diferentes grados de colores.

3. Contraste por temperatura

Este tipo de contraste hace referencia a la combinación entre los colores cálidos y los colores fríos con sus respectivos colores contrarios. Por ejemplo, para lograr un tono cálido, puedes añadir colores rojos o amarillos a tu mezcla; por otro lado, si quieres lograr un tono oscuro, puedes añadir azules o blancos al color base.

4. Contraste por complementarios

En este caso, se trata de combinar dos colores complementarios que están enfrentados en la rueda de color. Al combinarlos, podrás visualizar el color de forma clara, aunque violenta, debido a la saturación de los mismos.

Si quieres generar armonía en cualquiera de las combinaciones, lo ideal es mantener un color puro mientras al otro se le añade blanco o negro.

5. Contraste simultáneo

El quinto tipo de los contrastes de colores hace referencia al contraste que se genera al poner dos colores juntos. Por ejemplo, si colocas un elemento amarillo sobre un fondo gris, este último se verá ligeramente violeta.

6. Contraste cualitativo o por saturación

En este caso, el contraste ocurre al combinar un color puro saturado como el amarillo con un neutro como el gris o marrón. Lo que ocurre aquí es que los tonos saturados se perciben como más vivos y los desaturados se vuelven más apagados.

7. Contraste cuantitativo o por cantidad

El contraste por cantidad recae sobre las proporciones en las que juntamos los colores, pues al ajustar las dimensiones de cada uno podemos lograr armonizarlos para transmitir lo que deseamos. Este punto es clave para elaborar composiciones de diseño o marketing en general.

Imagen: Contraste por simultaneidad

Psicología del color

Siguiendo con lo que es la teoría del color, es importante detallar qué es la psicología del color. Esta hace referencia a cuando los colores son utilizados como una herramienta para invocar reacciones en las personas.

Para ello, es importante saber cuáles son los significados de los colores de tu público objetivo, puesto que, los colores pueden transmitir sensaciones diferentes dependiendo de la cultura. Asimismo, la experiencia personal puede llegar a influir en cómo percibimos los colores.

Por ejemplo, usualmente los colores fríos se suelen asociar con la serenidad, pasividad, sentimentalismo, amplitud y lejanía. Mientras que los colores cálidos se relacionan con la fuerza, la alegría y el movimiento.

Entonces, para ahondar más en este tema, comencemos por detallar la psicología del color según dos destacadas figuras, Johanne Goethe y Max Luscher.

1. Teoría del color de Goethe

A lo largo de la historia, se han propuesto diferentes teorías del color en la psicología. Una de las más famosas es la del Triángulo de Goethe.

En 1810, el poeta alemán se dedicó a estudiar los colores desde el punto de vista de la percepción para así, establecer una relación entre los colores y algunos estados de ánimo. Asimismo, propuso que esta teoría era un modelo de la mente humana.

El autor creó un triángulo analítico de colores y estableció 5 combinaciones que corresponden a 5 personalidades: lúcido, serio, melancólico, poderoso y sereno.

Esta distribución se formó en base a los atributos asociados a los colores según el autor:

➤ Teoría del color rojo: este color transmite pasión y excitación a través de su intensidad. Inspira a conductas impulsivas y de gran energía. Además, se relaciona con la dignidad y gracia.

➤ Teoría del color amarillo: el color amarillo se asocia con el sol y la luz, por ende, transmite optimismo, vida y alegría. Asimismo, inspira a tener más energía.

➤ Teoría del color azul: el color azul, al relacionarse al cielo y al mar, transmite tranquilidad y calma. Además, aporta una sensación de libertad. Por otro lado, también transmite pasividad y reposo.

➤ Teoría del color anaranjado: este color se asocia a la bondad, felicidad, sociabilidad y diversión pues, se relaciona a la niñez. Es el tono que representa a la energía.

➤ Teoría del color verde: el color verde se asocia con la naturaleza, por ende, tiene una relación con la esperanza, la vida y la sensación de respirar aire puro. Asimismo, es un tono reconfortante y de equilibrio.

➤ Teoría del color violeta: finalmente, el color violeta se asociaba con un sentimiento de melancolía, misterio, madurez y experiencia. De la misma manera, se asociaba a la realeza y suntuosidad.

Imagen: Triángulo de Goethe

Imagen: Rueda del color de Goethe

1. Teoría del color de Lüscher

Otra teoría del color famosa en el área de la psicología es la de Max Lüscher, quien propuso un sistema con cuatro colores primarios para definir los aspectos psicológicos de diferentes tonos en 1927.

Lüscher dividió los colores primarios en 2 categorías: los colores heterónomos -el amarillo y el azul que representa la luz y la oscuridad respectivamente- y los colores autónomos -el rojo y el verde que representan el ataque-defensa del organismo-.

Esta teoría del color toma en cuenta una paleta de colores y significados que están vigentes hasta la actualidad.

➤ Teoría del color negro: como atributos positivos, al color negro se le asocia con la sofisticación, la elegancia, la seguridad, la eficacia y la sutileza. En cuanto a los negativos, se le relaciona con la opresión, la frialdad, la amenaza, el abandono, el miedo y la negación.

➤ Teoría del color gris: como aspectos positivos, se le asocia con la neutralidad y la imparcialidad. Por otro lado, en lo negativo, se asocia a la inseguridad, la depresión, la falta de energía y la ausencia.

➤ Teoría del color marrón: en cuanto a las cualidades positivas, este color se relaciona a la seriedad, la calidez, la naturaleza, la practicidad, la confianza, la sociabilidad y el apoyo. En relación a los aspectos negativos, se le asocia con la falta de humor y de sofisticación.

➤ Teoría del color rojo: como atributos positivos, a este color se le asocia el valor, la fuerza, la calidez, la energía, la iniciativa, la estimulación y la emoción. Sin embargo, en los aspectos negativos, se le asocia con el desafío, la agresión, el impacto y la tensión.

➤ Teoría del color amarillo: como aspectos positivos, al color amarillo se le atribuye el optimismo, el autoestima, la extroversión, la amistad y la creatividad. Mientras que, por el lado negativo, se le asocia con la irracionalidad, el miedo, la fragilidad, la depresión, la angustia y el suicidio. Asimismo, se le relaciona a las expectativas.

➤ Teoría del color azul: como cualidades positivas, a este tono se le asocia a la inteligencia, la comunicación, la verdad, la serenidad, la lógica, la reflexión y la calma. Por otro lado, en lo negativo, se asocia a la frialdad, la reserva, la falta de emociones y a la hostilidad. Además, el color azul se relaciona a los sentimientos, por lo tanto también a las relaciones sentimentales (amistad o conyugal).

➤ Teoría del color verde: como atributos positivos, al verde se le asocia con la armonía, la frescura, la voluntad, la seguridad, la conciencia, el equilibrio, la paz y el autocontrol. Por otra parte, hablando de lo negativo, se le asocia con el aburrimiento, el estancamiento, la falta de fuerza e la inervación.

➤ Teoría del color violeta: finalmente, el color violeta se asocia con aspectos positivos como la espiritualidad, la visión, el lujo, la autenticidad y la calidad. Mientras que, por el lado negativo, se le asocia con la introversión, la decadencia, la irresponsabilidad, la inmadurez y la inferioridad.

Imagen: Scribd

3. Psicología del color en el arte y diseño

La concepción de los colores puede variar según el contexto, las características del público y las tendencias de cada año. Por ejemplo, de acuerdo a las tendencias de color para el 2021, los colores suaves, calmantes y relajantes son los de mayor relevancia, ¿lo sabías?

La elección de colores para un diseño puede influir en la atención, la ansiedad, la relajación y la respuesta emocional del consumidor. Las personas son capaces de reconocer más sentimientos que colores; por esto, múltiples sensaciones se asocian a un mismo color.

De acuerdo con Sebastián Santafe, profesor del curso de teoría del color desde cero, "el color tiene tanto poder que puede influir en cómo nos sentimos en el momento, ya que dependiendo de cual sea, este puede transmitirnos alegría, calma, rabia, tristeza, esperanza y muchas emociones más".

A continuación, te contamos cuáles son los significados de los colores en el arte y diseño.

➤ Significado del color negro: transmite elegancia, nobleza, sofisticación y misterio. También,es autoritario y puede invocar emociones fuertes.

➤ Significado del color blanco: implica inocencia y pureza, así como evoca sentimientos de igualdad. Además, nos ayuda en momentos de estrés y a seguir adelante,

➤ Significado del color gris: el gris es el color idóneo para representar neutralidad. Utilizado de manera sutil puede transmitir elegancia y lujo. Si se abusa de este, se puede generar tristeza y melancolía.

➤ Significado del color amarillo: este color se relaciona con la creatividad y la inteligencia. Suele representar luz y calidez. Asimismo, en el diseño se utiliza para atraer la atención sobre todo de la juventud.

➤ Significado del color anaranjado: el color naranja representa un tono cálido y dinámico. Utilizándolo en pequeñas dosis, actúa como estimulante, pero, si se utiliza en grandes cantidades, puede ser muy agresivo.

➤ Significado del color azul: el color azul es el color más frío de la paleta. Suele simbolizar frescura y serenidad. También, se le asocia con la inteligencia, emociones profundas, amistad, optimismo y fidelidad. Si es azul claro transmite pureza.

➤ Significado del color marrón: es el color de la tierra, por ello, transmite equilibrio y comodidad. De la misma forma, puede evocar a una apariencia masculina.

➤ Significado del color rojo: es el color que transmite mayor intensidad. Asimismo, se usa como referencia para la pasión. Los diseñadores lo suelen utilizar para llamar la atención sobre un elemento específico. Sin embargo, debe usarse cuidadosamente la excitación que transmite puede cansar el ojo del espectador.

➤ Significado del color verde: este color se relaciona con la naturaleza y la vegetación. Además, transmite calma y equilibrio. Usualmente, se utiliza para el marketing de productos ecológicos.

➤ Significado del color violeta: el morado se relaciona al misterio y a la reflexión. También, tiene que ver con lo emocional, por ejemplo, nostalgia y romance. Además, evoca feminidad y elegancia, por ende, se suele utilizar en productos dirigidos a un público femenino.

Como puedes ver, la psicología del color para los diseñadores debe ser un punto importante, pues los colores acompañan a los mensajes y calan en la mente de quien los lee, dado las sensaciones que transmiten.¡Escoge con cuidado cada una de las tonalidades que utilices!

Mezclas de colores en digital

Si te dedicas a una carrera en la que debas crear contenido para plataformas web o a una en la que debas imprimir tus obras de arte, es necesario que conozcas cuales son las mezclas de colores en digital.

Básicamente, estas mezclas de la teoría del color son cruciales para obtener un resultado fiel a los colores originales, ya que, al pasar por el medio digital, estos no se mantienen igual. Entonces, si quieres que tus siguientes composiciones luzcan increíbles, ¡sigue leyendo!

1. ¿Qué es el modelo RGB?

El modelo RGB es el modelo utilizado por medios digitales como la televisión, las páginas webs y las pantallas de las computadoras. Sin embargo, el modelo RGB, previa a la era digital, ya tenía una teoría sólida, basada en la percepción humana de los colores.

¿Qué significan las siglas RGB? Las siglas RGB representan las iniciales de los colores rojo, azul y verde, en su traducción al inglés, red, blue and green, haciendo referencia a los colores primarios de este modelo.

El modelo RGB está basado en la "síntesis aditiva", es decir que, se puede obtener cualquier color a través de los colores primarios y todos estos superpuestos dan como resultado el color blanco, mientras que el negro es la ausencia total de color.

¡Este modelo es ideal para crear contenido para tus redes sociales!

2. ¿Qué es el modelo CMYK?

El modelo CMYK, por su lado, es el modelo que se usa para los materiales impresos en tinta, ya que el papel no cuenta con las propiedades luminosas de los monitores.

¿Qué significan las siglas CMYK? Las siglas CMYK representan las iniciales de los colores cyan, magenta, amarillo y negro (key).
Substractivos | creados con pigmentos
El modelo CMYK se basa en la premisa de la absorción de la luz; es decir, al mezclar todos los colores bases del modelo se obtiene negro o la ausencia de luz. Asimismo, a partir de los colores primarios, se obtienen diferentes combinaciones como púrpura, verde y rojo.

¡Este modelo es el adecuado para imprimir banners o cualquier otro tipo de publicidad!

Imagen: Modelo RGB y Modelo CMYK

Aplicaciones de la teoría del color

Por último, ¿para qué sirve la teoría del color? En pocas palabras, lo que es la teoría del color puede aplicarse en distintas profesiones, pues, como has visto, el efecto del color es sumamente variado.

A continuación, te mostraremos algunos ejemplos.

1. La teoría del color en el maquillaje

Conocer la teoría del color es un elemento esencial para ser un profesional del maquillaje. El uso de la colorimetría es una herramienta clave para crear armonías de color, pues te permitirá aplicar correctamente cada tonalidad en tus clientes.

Por ejemplo, al aprender cómo aplicar lo que es la teoría del color en el maquillaje estarás listo para lo siguiente:

1. Resaltar, iluminar y neutralizar las facciones y colores propios de la piel y el rostro de la persona. Por ejemplo, se aplica el color verde para neutralizar las tonalidades rojizas en la piel.

2. Combinar colores para alcanzar una sincronía adecuada entre maquillaje y vestuario de la persona.

3. Jugar con los efectos de iluminación y degradación de los colores.

4. Seleccionar los colores adecuados para la variedad de tonos de piel de las personas, tomando en cuenta las diferentes subtonalidalidades.

Ahora, te brindaremos más información relacionando lo que es la teoría del color con los diferentes tipos de pieles y los ojos.

Para las pieles claras, se adecuan los colores fríos y acromáticos, como el azul, el verde, el morado, el gris y sus derivados. Esto sucede porque las personas de tez blanca suelen tener una subtonalidad en la piel más fría o,conocida en el maquillaje como piel rosa.
➤ ¿Cuáles son los colores para pieles claras?
Para pieles trigueñas, favorecen los colores cálidos y neutrales como el amarillo, anaranjado, el rojo y sus derivados. Esto sucede porque las pieles trigueñas suelen tener subtonalidades más amarillentas.
➤ ¿Cuáles son los colores para pieles trigueñas?
Para las pieles oscuras, favorecen los tonos cálidos y fríos, ya que, tienen a tener subtonalidades más neutras. Asimismo, los colores intensos lucirán hermosos, pues resaltan al contrastar con la piel.
➤ ¿Cuáles son los colores para pieles oscuras?
Siguiendo las reglas del círculo cromático, los ojos azules se complementan con los colores cálidos de la rueda cromática como los colores bronces y anaranjados. Los ojos verdes resaltan con los colores rojizos.

Por último, los marrones, al ser neutrales, resaltan con todos los colores de la rueda cromática, pero, sobre todo, con los azules y verdes.
➤ ¿Cómo resaltar los ojos con la teoría del color?
Imagen: Unsplash

2. La teoría del color en el Diseño Gráfico

El uso de los colores en el diseño gráfico no es casualidad. La creación de la paleta de colores está basada en lo que es la teoría del color. En este caso, se crea un diseño no sólo con el propósito de obtener una combinación que luzca bien, sino, también, de transmitir un mensaje.

Por lo tanto, ¿cuál es la importancia de la teoría del color en el diseño gráfico? La función principal del color en el diseño gráfico es resaltar las características y cualidades del ítem o los ítems en la imagen de forma rápida, atractiva y visual. Usualmente, se utiliza para atraer a un cliente a un producto o servicio específico.

La impresión que dan los colores puede suponer hasta el 60% de la aceptación o del rechazo hacia una empresa. Una mala combinación de colores genera desconfianza y decepción en el cliente. Según especialistas, se debe obtener la mejor impresión en los primeros 90 segundos; para lograrlo, sin duda, ¡utilizar los colores será crucial!

Entonces, ¿cómo usar los colores en el diseño gráfico? Los colores pueden alterar la percepción visual de los elementos en los diseños. Por ejemplo, los colores cálidos parecen estar más cerca que los fríos, por lo que el uso de colores cálidos en el primer plano y de fríos en el fondo, aumenta la profundidad de la imagen.

Otro ejemplo se da en el uso de los colores saturados. Los tonos con alta saturación atraen más la atención y son percibidos como más grandes.

Por lo tanto, es esencial que aprendas cómo crear la paleta de colores para tu marca, pues esto influirá en la recepción de tus anuncios y publicaciones en tus clientes actuales y potenciales.

Imagen: Unsplash

3. La teoría del color en el diseño de interiores

Otro campo de relevancia en el que se puede aplicar lo que es la teoría del color es en el diseño de interiores o en la arquitectura. En este caso, el significado de los colores en la arquitectura te ayudará a escoger las tonalidades ideales para transmitir lo que deseas en un ambiente.

Por ejemplo, si quieres crear un espacio que transmita calma y serenidad, puedes optar por un verde o celeste; mientras que, si deseas comunicar emociones de alegría o vitalidad, lo más recomendable será escoger un naranja u otro color cálido.

Sin embargo, cabe resaltar que, la importancia de la teoría del color en el diseño de interiores no se limita al color de las paredes de un ambiente. También, deberás prestar atención a los muebles, mesas, cuadros y demás elementos que intervienen en una habitación.

En este punto, es importante recordar que el contraste de los colores, tema que revisamos líneas arriba, es fundamental para descubrir cómo aplicar lo que es la teoría del color de forma integral, en cualquiera de los ambientes que estés diseñando.

Por lo tanto, debes asegurarte de que todos los elementos estén en sincronía para transmitir lo que esperas. Si quieres darle un estilo diferente y llamativo al espacio que estés creando, te recomendamos darle un vistazo a nuestras plantillas de flores para pintar paredes.

Imagen: Unsplash

¡Ahora ya sabes qué es la teoría del color! Esperamos que te haya gustado aprender sobre el círculo cromático, las armonías del color, la psicología del color y las diferentes aplicaciones del color. Como has podido ver, la teoría del color te ayudará a potenciar tu rendimiento como profesional, pues ahora sabes los efectos que tienen las diversas tonalidades en una composición o en un ambiente.

Reconocemos que la teoría del color puede ser amplia y un poco compleja; sin embargo, te alentamos a que no pares de aprender. Así que, si te ha llamado la atención este tema y quieres seguir aprendiendo sobre él de una manera dinámica, te recomendamos inscribirte en el curso de Teoría del color desde cero.

No olvides revisar nuestro catálogo de cursos de dibujo y pintura para seguir potenciando tus habilidades artísticas en el tiempo. ¡Todos tenemos un espacio creativo en nuestro interior esperando ser despertado!

¡Te deseamos mucha suerte!

# data[].attributes.attachment_link.title
🎨 ¿Qué es la teoría del color? | Guía completa

# data[].attributes.attachment_link.description
Descubre qué es la teoría del color, la importancia de la teoría del color, todo sobre el círculo cromático y la psicología del color. 🤩

# data[].attributes.headline
Herramienta para encontrar los colores que buscamos.

# data[].attributes.subject
Herramienta para encontrar los colores que buscamos.

# data[].attributes.body
En esta página podemos encontrar las herramientas y recursos de color para cualquier proyecto. Desde generadores de paletas e ideas, hasta los significados de cada color.

# data[].attributes.body
Si tenemos muchas dudas a la hora de combinar tipografías para nuestro proyecto, aquí tienes un post que nos habla sobre 8 webs que nos ayudan a combinar fuentes.

# data[].attributes.headline
Recomendaciones para el uso de la tipografía 

# data[].attributes.subject
Recomendaciones para el uso de la tipografía 

# data[].attributes.body
No utilizar más de tres tipografías distintas.

Utilizar fuentes legibles.

Elegir un buen contraste entre el fondo y la letra.

Utilizar un interlineado de 1,5 puntos por el tamaño de la letra.

No abusar de los subrayados ya que suelen utilizarse para los hipervínculos.

No escribir todo en mayúsculas porque ralentiza la lectura. Se debe utilizar solo para destacar mensajes cortos como títulos, subtítulos o conceptos importantes.

Los espacios en blanco entre párrafos ayudan a descansar la mirada y a mejorar la concentración gracias a la mejor comprensión de la separación entre ellos. Así pues, es necesario añadir un poco más de espaciado entre párrafos y no dejar la misma separación que con el interlineado.

La longitud recomendada para un párrafo está comprendida entre 45 y 75 caracteres. (aunque esto puede depender del tamaño de la pantalla)

# data[].attributes.body
Curso completo de Figma

# data[].attributes.attachment_link.title
Curso completo Figma 2023 para principiantes - Figma tutorial español (Parte 1)

# data[].attributes.body
Aquí encontrarás un artículo donde puedes ver todo los sistemas de retículas para ayudarte a crear diseños coherentes y consistentes.

# data[].attributes.attachment_link.readable_text
Grid systems are the foundation of well-designed websites. Using grids in web design ensures that their websites have a clear hierarchy and are easy to follow.

Grid systems are the foundation of well-designed websites. By using grids, web designers can ensure that their websites have a clear hierarchy, are easy to navigate, and look aesthetically pleasing. What's more, grids facilitate the web design process by providing a guiding structure (and helping designers out of blank-page paralysis mode).

Unsure of how to use grids in web design? In this blog post, we'll look at the role grids play in a seamless user experience, and discuss five golden rules for incorporating grids into your next project.

Here's what we'll cover:

Ready to get started? Let's dive in!

1. What is a grid?

No matter the subject or style, you'll notice that many websites follow similar web design conventions. For example, most websites have invisible margins on either side of the page-and the content will fall on certain lines, rather than being placed sporadically around the page. This is because most websites are designed using grids.

​​A grid system is an underlying structure that helps organise elements on a page. It combines various columns and rows, allowing designers to arrange UI elements in a consistent pattern or format. This makes it easier for users to navigate through the page or app without getting confused or frustrated.

A well-designed grid system creates balance, symmetry, and uniformity throughout the design. It's essentially a virtual map that any website designer will use to design the page layout. Attempting to design a digital interface without one would be like trying to build a house without a blueprint.

2. Why are grids important in web design?

One of the most important pillars of web design is usability. If users can't find what they're looking for quickly and easily, they'll likely leave your website without a second thought.

Grids make it easier for users to find what they need by providing visual cues about where things are on the page. They also help create a more consistent experience by ensuring all page elements line up correctly, even when viewed from different devices or browsers. This means that no matter how someone views your website, they'll have a friction-free experience navigating it-instead of getting frustrated due to misaligned elements or confusing layouts.

In addition to helping users, grids help facilitate a smooth web design process. Rather than having to design each page from scratch, designers use grids to help break down a webpage into individual elements that they can easily place within the existing structure (kind of like a game of Tetris!).

3. What are the different types of grids?

Now that we've got a handle on what grids are, and their role in the web design process, let's look at five of the most common grid systems you'll find in everyday digital products.

Column grid

Columns are vertical page divisions that organise content into sections. Each column should have consistent widths throughout the page to allow the layout components to fit proportionally within each row. Websites can have anything from two to 16 columns that span the width of a landing page.

The horizontal dividers between columns are called gutters, and should be as uniform in width as the columns. They provide white space between elements on the page, making it easier for users to distinguish between different components.

Hierarchical grid

Hierarchical grids are a little more flexible, and help designers arrange content in order of importance. Hierarchical grids divide a page into columns and rows. But unlike column grids, it also introduces a clear hierarchy to the page by emphasising certain elements over others.

Hierarchical grids are especially popular on text-heavy websites, like blogs or news sites, where they're used to feature the latest content.

Manuscript grid

Like hierarchical grids, you'll find manuscript grids on text-heavy websites like blogs-as well as offline resources like newspapers and magazines. It consists of large, single columns designed to accommodate large amounts of text without overwhelming readers. Manuscript grids also allow for plenty of white space around text blocks so readers can quickly scan through content without experiencing 'information overload.'

Baseline grid

A baseline grid uses horizontal lines rather than boxes or columns. These lines are crucial for ensuring consistent spacing between each textual element, and help make your webpage readable and accessible. Baseline grids are particularly useful for re-scaling content, while maintaining set conventions for spacing and leading between elements.

Modular grid

The modular grid combines all four previous types-columns, hierarchy, baselines, and manuscripts-in one unified structure. Modular grids are made up of square or rectangle content blocks that can be arranged according to their size and importance, to achieve maximum visual impact.

4. How to create a website grid

Now for the fun part: Creating your very first website grid! For beginner designers, creating basic website grids has never been easier. Most best-in-class design tools like and have built-in grid layouts you can use (and customise).

Let's take a quick look at how to get set up with a website grid in Figma.

Once you've chosen your screen size, the first step to creating a grid system in Figma is to enable the layout grid option. To do this, click on "view" on the top menu bar and select "layout grids" from the drop-down menu. This will display a column of numbers that represent different breakpoints.

Breakpoints refer to different device sizes and orientations. If you're designing a website for desktop screens, for example, you might want to set your breakpoints at 1280px or 1440px instead of 1024px. It's key to decide which breakpoints work best for your project before you set your grid dimensions.

Once you've decided on your breakpoints, it's time to adjust your dimensions accordingly. You can do this by selecting "layout settings" on the right-hand side of the screen. There, you can play around with the grid properties-and even change the kind of grid you're using.

5. 5 golden rules to follow when using grids in web design

Choose the right grid

When getting started with a new web design project, it might be tempting to populate the page with the most common grid (i.e., Column or modular) and go from there. But that might not be the best way forward.

To create an effective grid layout for your website, you need to choose one that best fits with its intended purpose. For example, if you want to create a simple blog or portfolio site, a basic 12-column grid might work fine. But if you need a grid for a more complex project, like an e-commerce site, then it may be worth looking into more dynamic grid systems that allow for maximum flexibility.

Use responsive grids

A cardinal rule of web design is ensuring your website is responsive across all devices. In other words, your website needs to work on various screens and devices. Enter: Responsive grids.

Unlike regular static grids, responsive grids use percentages to distribute the content uniformly regardless of screen size. They're key for adapting your layout for various screens without distorting the content or dimensions.

Incorporate enough white space

White space (also known as negative space) should always be considered when creating grid layouts for websites. White space provides a visual break between different elements on the page, which helps make them stand out more clearly-and makes navigation easier for users. White space can also help bring focus to certain elements on the page, while still keeping everything organised and neat.

Grids are a valuable tool for ensuring 'repetition of space' between your elements-but it's up to you to ensure the dimensions of your grid allow for enough white space around the page.

Honour the Rule of Thirds

The rule of thirds is a web design concept based on the principles of visual perception. According to the rule of thirds, designers should divide webpages into nine equal parts with two vertical and two horizontal lines. By placing the most important elements on the 'thirds' of the grid, users' eyes will be naturally more drawn to them-which will influence how they navigate the site.

Considering the rule of thirds will influence which type of grid you use, and where on the grid you'll place important elements.

Consider The Golden Ratio

If you want a pixel-perfect grid layout, it's worth using the golden ratio. The golden ratio is a mathematical proportion that equals 1:1.618. If we consider this proportion a rectangle, its length would be 1.6180 times the width. This ratio can be applied to any shape or element, and is a helpful reference point when working out how to divide up the page-and how much space to allocate to each component.

6. Final thoughts

When it comes to web design, grids can be an invaluable tool in helping to create engaging and effective designs. By setting up columns, rows, and margins, design elements have room to breathe-and users can quickly get to grips with the interface without getting overwhelmed.

Following these five golden rules of grid usage can help you ensure that your design is clean, organised, and cohesive. If you take all these best practices into account as you approach your next design, you'll be left with a professional, well-thought-out website that users will love.

To learn more about the principles of great web design, check out these related blog posts:

# data[].attributes.attachment_link.title
How to use grids in web design: 5 golden rules

# data[].attributes.attachment_link.description
Grid systems are the foundation of well-designed websites. By using grids in web design one can ensure that their websites have a clear hierarchy.

# data[].attributes.body
Recopilación de los mejores artículos de ui from mars, más o menos ordenados por popularidad y en cinco temas:

1. 🎨 Diseño de interfaz

2. 👀 Métodos básicos de investigación

3. 📐 Métricas

4. 🧳 Trabajar en diseño de producto digital

5. 🗂 Portfolio de diseño

# data[].attributes.attachment_link.readable_text
Después de casi cinco años de escribir un artículo a la semana, uiFromMars supera ya los 200 artículos. Empieza a ser difícil encontrarlos todos, así que arreglémoslo.

Debajo te he recopilado los mejores artículos desde que empecé, más o menos ordenados por popularidad y en cinco temas:

1. 🎨 Diseño de interfaz

2. 👀 Métodos básicos de investigación

3. 📐 Métricas

4. 🧳 Trabajar en diseño de producto digital

5. 🗂 Portfolio de diseño

A partir de ahora iré actualizando esta página para documentar lo mejor que escribo aquí, así que añádela a favoritos para consultarla de vez en cuando. Ah, y disfrútala 🔥

🎨 Diseño de interfaz e interacción

👀 Métodos básicos de investigación

📐 Métricas

🧳 Trabajar en diseño de producto digital

🗂 Portfolio de diseño

Únete a 7596 diseñadores y mejora en tu carrera de diseño

Recibe un correo semanal con artículos, consejos, inspiración y herramientas para crecer día a día 🚀

# data[].attributes.attachment_link.description
Después de casi cinco años de escribir un artículo a la semana, uiFromMars supera ya los 200 artículos. Empieza a ser difícil encontrarlos todos, así que arreglémoslo. Debajo te he recopilado los...

# data[].attributes.body
El Design Toolkit de la UOC es la caja de herramientas de diseño en forma de fichas de contenidos y recursos de aprendizaje. Los contenidos se presentan ordenados alfabéticamente en la página principal, que ofrece un menú que los clasifica según su tipología, caraterísticas y atributos. El Design Toolkit recoje las herramientas más representativas y utilizadas en UX

# data[].attributes.attachment_link.description
El Design Toolkit de la UOC constituye tu caja de herramientas para llevar a cabo proyectos de diseño. Las herramientas se presentan en forma de fichas de contenidos y recursos de aprendizaje. Los contenidos aparecen ordenados alfabéticamente en la página principal y también organizados según su tipología, características y atributos.

# data[].attributes.body
[JUEGO]

Prueba esta interfaz a ver que te parece.

# data[].attributes.attachment_link.readable_text
Hi and welcome to User Inyerface,
a challenging exploration of
user interactions and design patterns.

To play the game, simply fill in the form
as fast and accurate as possible.

Please click HERE to GO to the next page

# data[].attributes.attachment_link.title
User Inyerface - A worst-practice UI experiment

# data[].attributes.attachment_link.description
User Inyerface - A worst-practice UI experiment

# data[].attributes.body
Pequeña guía para que aprender qué es Figma y cuáles son sus características principales no sea tan complicado.

# data[].attributes.attachment_link.readable_text
En este artículo te he preparado una reseña de Figma, comparándolo con Sketch y explicándote sus puntos fuertes y puntos débiles.

¡Vamos allá!

Primeros pasos con Figma

Debo reconocer que el primer contacto con Figma es bastante especial. Lo habitual en prácticamente cualquier software es que te tengas que descargar un archivo comprimido de varios MB, esperar a que descargue, instale e inicie el programa.

Con Figma, como está basado en el navegador, lo único que tienes que hacer es registrarte y ya puedes empezar a diseñar. Así, sin más.

Si eres como yo y "necesitas" tener una aplicación instalada, también puedes descargarla. Y lo mejor es que, además, también es compatible con Windows.

Lo primero que te encuentras es esto:

A la izquierda hay un pequeño menú, que sirve para ordenar los proyectos en recientes, borradores y eliminados. En este último apartado, Deleted Files, encontraremos todo lo que eliminemos, como si fuera un historial.

Para empezar un proyecto nuevo, solo tienes que hacer clic en "+" que tienes arriba a la izquierda.

Características de Figma

Todo está en la nube

Como te he avanzado en la introducción, Figma está basado en el navegador. Lo que significa que tus archivos estarán siempre accesibles y podrás evitar perder tiempo (e invertir dinero) en servicios de almacenamiento como Google Drive y Dropbox.

Tienes también un historial de cambios de cada archivo, por lo que siempre podrás volver a algún punto anterior. Y todo lo que borres está accesible en el Deleted Files que te he comentado en el paso anterior.

Creando un archivo: la interfaz

Si haces clic en el "+" que te he comentado y creas un nuevo archivo, verás la interfaz de Figma. A simple vista no es muy distinta a la de Sketch (es lo que tiene que sea el primero en llegar y el que marcó el camino), aunque es extremadamente minimalista:

En la barra negra (1) encontrarás las herramientas básicas: insertar un frame ( artboard en Sketch), figuras geométricas, dibujo libre de vectores, texto y comentarios. Más hacia la derecha están las funcionalidades de compartir, visualizar prototipo y zoom, entre otras.

La zona del centro, donde ahora hay el nombre, varía en función de lo que tengas seleccionado en un frame. Por ejemplo, si seleccionas un rectángulo verás lo siguiente:

A la izquierda (2) verás la lista de capas que tiene el proyecto, todo en lista de árbol. Si añades un frame con distintas figuras geométricas, cambiará:

Los dos iconos de abajo te permiten cambiar entre Layers (capas) y Components (los Symbols de Sketch).

En la zona de la derecha (3) está lo que podríamos llamar Inspector. Cambiará en función de la capa que tengas seleccionada, mostrando sus características y modificadores. La pestaña Prototype te permite empezar a hacer prototipos (una obviedad) y la de Code te muestra el CSS y el código para iOS o Android.

Por último, (4) hace referencia al Canvas. Es decir, donde diseñamos 🙂

Los componentes en Figma

Crear un componente con Figma es igual de fácil que hacerlo con Sketch: es suficiente con seleccionar lo que lo compondrá y hacer clic en el "rombo hecho de rombos".

La capa pasará de azul a lila y cambiará el icono de su izquierda:

Si necesitas editarlo, solo tendrás que hacer clic en él (es decir, seleccionarlo) y añadir las capas necesarias o las modificaciones que quieras hacerle.

Al igual que Sketch, todos los componentes pueden sobreescribirse. Para ello, solo hay que hacer clic en él e ir modificando los colores, textos, etc.

Compartir el proyecto con Figma

Este es un punto a favor para Figma. Si quieres compartir un proyecto con Sketch tendrás que utilizar Sketch Cloud u otra herramienta de terceros.

Con Figma tenemos un sistema muy parecido a Google Drive: si haces clic en el botón Share del menú horizontal superior se te abrirá una pequeño pop-up con la configuración del enlace:

Es una buena forma de compartir los archivos sin llegar a enviar el archivo original o sin que se vean los componentes (que es lo que sucede con Sketch Cloud y los símbolos).

Si se comparte en forma de prototipo, quien recibe el enlace puede añadir comentarios si tiene usuario en Figma.

Figma vs Sketch

Por lo general siempre defiendo Sketch, pero hay que reconocer que hay algunos casos en los que los otros programas son superiores.

Qué me gusta de Figma

Permite trabajar colaborativamente en un archivo. Esto soluciona algunos problemas que se dan en equipos de diseño, cuando dos diseñadores quieren trabajar a la vez en un solo archivo de Sketch. Solo queda una opción, duplicarlo y después "juntarlo" todo (o dejarlo en dos archivos y arriesgarse a perder parte del proyecto).

Puede utilizarse en Windows (y cualquier otro sistema operativo). Sinceramente, sigo utilizando Mac porque Sketch solo está disponible en ese sistema operativo. Y Figma me está haciendo replantear algunas cosas que creía que nunca iban a cambiar: me planteo volver a Windows.

Ágil y disponible en todas partes. Los archivos de Figma son accesibles desde cualquier ordenador y, lo que es mejor, no hace falta que descargues nada. Simplemente inicias sesión y ya lo tienes todo allí.
Reduce la cantidad de software de terceros. Con Sketch, quieras o no, acabas utilizando Zeplin, Dropbox y otros software que te ahorras con Figma.

Qué adoro de Sketch

Los símbolos. Por mucho que Figma tenga los componentes, me parecen mucho más complicados de gestionar y editar que los símbolos de Sketch.

Una interfaz clara. Ya lo he explicado más arriba: el UI de Figma es tan simple que en algunos casos confunde y hace que debas mirarte más de una vez qué tipo de capa estás seleccionando o cual está dentro de cual.

Los plugins. Las capacidades de Sketch se amplían exageradamente al utilizar los plugins. Con Figma no puedo comprar temas de accesibilidad, renombrar de golpe capas, distribuir elementos con un shortcut, etc. Sé que la "pluginitis" es mala, pero hay algunos que realmente ahorran tiempo (o clics).

La comunidad de Sketch es inmensa. Existen infinidad de recursos para descargar archivos, plantillas, plugins e incluso resolver fácilmente tus dudas.

Cómo hacer prototipos con Figma

He escrito una extensa guía para que aprendas a dominar los prototipos con Figma en minutos. En ella te detallo qué son, cómo se hacen, cómo se comparten, cómo hacer diferentes flujos, las características e incluso como hacer scroll horizontal y vertical.

Conclusiones y opinión

A simple vista Figma me puede resolver algunos de los problemas que empiezo a tener cuando trabajo en equipo: con Sketch acabamos con duplicando archivos y es muy fácil perder avances realizados o "pisar" el trabajo de otros compañeros.

Por contra, Sketch sigue siendo una referencia para mi en cuanto a estabilidad y buena cadencia de lanzamiento de versiones: cada vez que lanzan una versión nueva es para mejorar el rendimiento y añadir nuevas funcionalidades... a la vez que se adaptan las que ya existían.

Otro punto a favor es que la comunidad de Sketch es muy grande y facilita que el software se expanda (hay centenares de plugins) y pueda aprender trucos y maneras de trabajar de los demás.

Y por último, su UI es mucho más claro y tiene buena compatibilidad con los productos de Adobe que, quiera o no, acabo usando de vez en cuando.

Me parece muy positivo que vayan apareciendo distintas alternativas a los programas que usamos, porque implica que hay más competencia y todos se ven empujados a innovar y mejorar su producto poco a poco. Es una forma de evitar lo que sucedió con Adobe, que se hizo con el mercado durante muchos años y sus productos dejaron de ofrecer innovación.
Y a ti, ¿qué programa te parece que es mejor?
Esto también te interesa 👇

# data[].attributes.attachment_link.title
Introducción a Figma: primeros pasos - uiFromMars

# data[].attributes.attachment_link.description
En este artículo te he preparado una reseña de Figma, comparándolo con Sketch y explicándote sus puntos fuertes y puntos débiles. ¡Vamos allá! Debo reconocer que el primer contacto con Figma es bastante especial. Lo habitual en prácticamente cualquier software es que te tengas que descargar un archivo comprimido de varios MB, esperar a que descargue, instale e inicie el programa.

# data[].attributes.headline
Para mejorar las habilidades con el color

# data[].attributes.subject
Para mejorar las habilidades con el color

# data[].attributes.body
[JUEGO]

Color es un juego que te desafía a identificar tonos y saturaciones, así como combinaciones de colores complementarios, análogos, triádicos y tetrádicos. La interfaz muestra una rueda de colores interactiva con un color resaltado en el centro. Debes determinar el color (o colores) dentro de la rueda de colores en 10 segundos o menos, una tarea que aumenta en dificultad a medida que intentas hacer coincidir colores para esquemas de colores triádicos y tetrádicos.

# data[].attributes.attachment_link.readable_text
You should barely be able to see a difference between the inner and outer color. If you're on a laptop also make sure to adjust the viewing angle of your screen. Don't worry if you can't see all the colors, the game has built-in tolerance and will give your a perfect score if the colors are very similar.

# data[].attributes.attachment_link.description
A color matching game by Method of Action