No todos somos diseñadores. Eso es algo bueno para la seguridad laboral, obviamente, pero cuando estás hurgando en Internet, definitivamente también puedes ver el lado malo de eso. La gente simplemente malinterpreta los términos de diseño y, por eso, el diseño mismo. Sobre todo principiantes en la materia.
Con la cultura actual de desarrollo profesional autodidacta , queríamos armar una lista de lo que creemos que son los términos de diseño más incomprendidos que los principiantes se equivocan un poco. Con suerte, esto ayudará a que Internet sea un lugar más brillante y mejor diseñado con el tiempo.
Cuando aprendí por primera vez sobre el kerning (el espacio entre los caracteres en un diseño) de un amigo, apenas podía mirar la mayoría de las vallas publicitarias o anuncios. Eran tan dolorosos. Las letras y los números suelen estar espaciados al azar o agrupados solo para encajar en un espacio arbitrario, independientemente de la legibilidad o la estética.
Sin embargo, no pasó mucho tiempo desde que aprendí que eso no es exactamente lo que es el interletraje. Eso es rastrear . Mientras que el kerning es el espacio entre caracteres, es el espacio entre caracteres individuales . El seguimiento es el espacio estándar entre todos los caracteres. Mi mente estaba alucinada.
2. Fondos
Imagen superior por borodatch, imagen inferior por Boris Rabtsevich / shutterstock.com
Uno pensaría que algo siendo un trasfondo no sería demasiado difícil de entender. Pero en términos de diseño, a menudo se confunde con un telón de fondo.
«¡Oh, ese horizonte es un hermoso telón de fondo para la foto!»
No, no lo es. Es un hermoso fondo . Porque es un elemento que forma parte de la foto en sí, detrás del foco principal, sea lo que sea.
Sin embargo, un hermoso telón de fondo sería la elección de una sábana mate que se cubra detrás de alguien como una pieza escenográfica.
Un fondo es parte del diseño. Un telón de fondo es parte de la configuración.
3. Legibilidad
La legibilidad a menudo se confunde con la legibilidad simple , que es la facilidad con la que alguien puede leer su copia. Este blog, por ejemplo, es muy legible debido a su tipografía sans serif. Todas las palabras se distinguen fácilmente unas de otras.
También es legible porque puedes distinguir fácilmente cada letra de la que está al lado. Si bien estas diferencias son pequeñas, son importantes. La mayoría de los tipos de letra sans serif y serif son legibles y legibles , mientras que un tipo de letra script/manuscrito puede ser legible , pero debido a que las letras a menudo están unidas o vinculadas, es posible que no sean muy legibles .
Lo que me lleva a…
4. Fuentes
Casi todos y cada uno de nosotros usamos mal este término. Hablamos de Helvetica o Comic Sans siendo una fuente en conversación. Mis alumnos me preguntaron durante años qué tipo de letra deberían usar en los trabajos, y yo les decía Times New Roman (uf, lo sé, pero yo era un profesor de inglés en deuda con los estándares de MLA).
Y también me equivoqué por otra razón además de la estética. Times New Roman no es una fuente. Es una tipografía . Si les hubiera dicho que escribieran en Times New Roman de 12 puntos, habría sido correcto. Porque las fuentes son colecciones de diferentes pesos para caracteres (negrita, condensada, regular) mientras que los tipos de letra son la familia de estilos para esos caracteres (Helvetica, Times New Roman, Myriad Pro).
Incluso en CSS, tenemos que diferenciarlos con font-family y font-weight , que son radicalmente diferentes.
5. Monocromo
Veo que esto se usa mal un montón. Para que algo sea monocromático , debe ser de un solo color (mono) (cromo o croma), lo que en sí mismo es problemático, pero lo abordaremos más adelante.
Monocromo puede ser variaciones de cualquier tono, ya sea rojo, azul, naranja, rosado-púrpura o cualquier otro. Solo variando los tonos de ese tono en particular. Tendrás tintes y tonos más claros y más oscuros.
Pero cada parte del diseño monocromático forma parte de ese tono único. Y puede ser de cualquier tonalidad, pero solo de esa tonalidad.
6. Escala de grises
La escala de grises , por otro lado, es casi monocromática, pero no lo es. Mucha gente confunde los dos y usa los términos indistintamente, limitando su uso de monocromo a tonos de gris.
Pero, ¿por qué la escala de grises no es monocromática? Porque incluye blanco. Que en CMYK es 0% en todos los ámbitos. No es técnicamente un gris. Un tono gris es principalmente cian con un poco menos de magenta y amarillo con muy, muy, muy poco, si es que hay alguno, negro. (CMYK 43, 35, 35, 0 es un buen ejemplo).
Lo mismo para esquemas en blanco y negro. La gente dice que están en escala de grises mucho, cuando no podría estar más lejos de la verdad. Son dos tonos totalmente opuestos, y los esquemas en blanco y negro no incluyen gris en absoluto. Eso no es monocromático ni en escala de grises.
7. color
Mucha gente no podría decirte realmente qué es un color. No, no vivimos en una versión de la vida real de The Giver de Lois Lowry ; la gente simplemente confunde los términos tono y color .
Lo que generalmente consideramos color es en realidad tono : rojo, verde, azul, amarillo, rosado-púrpura. Y cualquier variación de esos tonos, de claro a oscuro, de vibrante a apagado, es color .
El azul es un tono, el azul oscuro es un color.
8. Logotipos
Sé lo que estás pensando. “¿Quién es este tipo para decirme que no entiendo lo que es un logo?” Y para ser justos contigo, probablemente lo hagas. Tienes ojos, después de todo. Has visto los arcos dorados y has ido por un Big Mac.
Pero hay diferentes tipos de logotipos sobre los que quiero llamar la atención para que cuando te metas en las trincheras del diseño puedas tomar las mejores decisiones posibles.
En primer lugar, un logotipo es solo una abreviatura que representa una marca, una empresa, un artículo o algo más. Eso es todo. El logotipo , sin embargo, es un subconjunto de logotipos que se compone de, lo adivinaste… tipos de letra. Cosas como Disney, Google, CNN y la NASA usan logotipos.
Pero incluso debajo de eso, hay marcas de palabras y letras . CNN es una marca de letras porque se compone de, lo adivinaste, letras. Lo mismo para la NASA. Usan un tipo de letra único para simplemente usar letras para representar a la compañía en lugar de deletrear la Red Central de Noticias o la Administración Nacional de Aeronáutica y del Espacio. Si hicieran eso, como vemos con Google o Disney, sería una marca denominativa .
Y luego están las marcas comerciales , que es lo que generalmente consideramos logotipos: símbolos que representan a la empresa o marca. Apple es un buen ejemplo de esto, al igual que algunas cadenas de televisión (CBS eye, NBC peacock).
9. Estructura alámbrica
Este también se usa de manera extraña todo el tiempo. Un wireframe es solo eso: un marco. Es una guía básica que te muestra qué contenido habrá allí.
Divi tiene un excelente modo de estructura alámbrica en el generador visual , donde ves la página completa con bloques representativos que dicen cosas como «texto», «imagen» o «video» sin mostrar ningún contenido. Puede ver el diseño de la página representada, pero no su aspecto real.
No confunda una estructura alámbrica como esta con una maqueta o un prototipo . En muchos sentidos, el constructor visual en sí mismo es un prototipo . Ves la página real, cómo funciona, cómo encaja todo el contenido sin que esté en vivo. Es utilizable, pero tal vez no esté terminado.
Una maqueta es probablemente lo que su equipo de diseño arma en Photoshop antes de enviarla para su aprobación final . Ninguno de los contenidos funciona, es probable que todo sea marcador de posición y relleno, y nada de eso es real (en el sentido de que aún no es un sitio web, simplemente un documento o una imagen compuesta).
10. Márgenes
Este es simple, pero importante. Los márgenes son el espacio alrededor de su contenido en la página . El espacio en blanco entre el borde de la página y sus palabras e imágenes son márgenes.
El sangrado , por otro lado, es el espacio alrededor del borde de la página que deja para que la impresora sepa dónde comienzan sus márgenes (el espacio fuera incluso de los bordes de sus márgenes).
Del mismo modo, medianil es un término específico para el sangrado interno entre dos páginas impresas una al lado de la otra que están una frente a la otra. Por ejemplo, en las páginas iniciales de los cómics, donde una imagen ocupa dos páginas, no hay separación, pero en las novelas puede haber una separación de media pulgada, aunque haya un margen de una pulgada alrededor del resto de la página.
11. Espacio en blanco
Y para terminar, hablemos de los espacios en blanco . De ahora en adelante, haz todo lo posible por no confundir esto con el espacio negativo , que es decididamente diferente. El espacio en blanco es el espacio no utilizado alrededor de su contenido. Grandes márgenes, espacio entre párrafos y/o encabezados. El espacio no utilizado en su página es un espacio en blanco.
Sin embargo, el espacio negativo es el uso del espacio dentro de las formas y el contenido. Pueden ser recortes y superposiciones dentro de sus diseños (como la inmersión en el logotipo de Apple o la flecha oculta en FedEx).
Recuerde, el espacio en blanco es un espacio que no se usa a propósito, mientras que el espacio negativo es un espacio vacío que se usa con un propósito.
¿Qué me perdí?
Sé que esta no es una lista general de cosas que todos hemos entendido mal cuando comenzamos. Los términos de diseño pueden ser un lío sucio y turbio, y cuanto más claras seamos acerca de sus definiciones y cómo las usamos, más hermosos podemos hacer nuestros diseños y el mundo que nos rodea. (Y menos vallas publicitarias y volantes veremos con un terrible kerning y seguimiento).
Espero que esto haya aclarado algunas cosas, te haya hecho pensar en cómo compones tu trabajo y lo haya hecho para que veas el mundo (y lo representes) de una manera ligeramente diferente .
¿Qué términos de diseño te han dado más problemas para entender? ¿Algo que quieras compartir con otras personas?
Miniatura del artículo por nawamin / shutterstock.com