Glosario de diseño
Tipografía
Alineación
Definición
Cómo se coloca el texto en el espacio de la página. Las principales alineaciones son a la izquierda, a la derecha, centrada y justificada.
Ejemplo
"La alineación a la izquierda favorece la legibilidad de los textos en la mayoría de los idiomas".
Branding
Branding
Definición
Construcción y gestión estratégica de la identidad de una marca para generar reconocimiento, confianza y diferenciación.
Ejemplo
"El branding incluye la identidad visual de una marca, y también su aspecto emocional, lo que busca transmitir a su audiencia".
Digital
Call to action
Definición
También "llamada a la acción". Es una instrucción o mensaje que busca incitar a la audiencia a realizar una acción.
Ejemplo
"El CTA será un botón para "Acceder a mi cuenta" e iniciar sesión".
Color
CMYK
Definición
Modelo de color (Cian, Magenta, Amarillo y Negro) utilizado en impresión, donde los colores se combinan sobre el papel para crear una amplia gama de tonalidades.
Ejemplo
"Guardar el archivo en CMYK para que los colores se vean tal cual los seleccionamos para imprimir".
Composición
Composición
Definición
Forma en que se organizan y se presentan elementos como texto, imágenes y espacios en una superficie para transmitir un mensaje claro y lograr un efecto estético.
Ejemplo
"El objetivo de la composición es que los diferentes elementos se fusionen en un diseño único, creando una jerarquía visual clara".
Redes Sociales
Carrusel
Definición
Varias imágenes o videos en secuencia, permitiendo a los usuarios deslizar o navegar a través de ellos para ver todo el contenido en un solo espacio.
Ejemplo
"El contenido deberá ser compartido en formato carrusel para desglosar la información en varias placas consecutivas".
Medidas y formatos
DPI (puntos por pulgada)
Definición
Resolución de una imagen o dispositivo, refiriéndose a la cantidad de puntos de tinta o píxeles en un espacio lineal de una pulgada.
Ejemplo
"Un mayor DPI resulta en una imagen más nítida, detallada y clara, ya que hay más puntos concentrados en el mismo espacio".
Digital
Extensión
(del archivo)
Definición
Serie de letras que aparecen al final de un archivo, separadas por un punto. Indica el tipo de archivo que es y qué aplicación puede abrirlo.
Ejemplo
"Algunos ejemplos de extensiones de archivo son: PDF, JPG, SVG, PNG".
Composición
Encuadre
Definición
Selección de un área específica (de imagen o composición) con el fin de guiar la atención del espectador hacia un tema principal.
Ejemplo
"El fotógrafo eligió un encuadre amplio para capturar la inmensidad del paisaje."
Digital
Eyetracking
Definición
Mapa de seguimiento ocular. Registro del movimiento de los ojos sobre una interfaz.
Ejemplo
"La técnica de eyetracking permite mostrar dónde miran los usuarios, por cuánto tiempo y en qué orden".
Composición
Espacio en blanco
Definición
Áreas vacías en la composición, libres de elementos visuales que ayudan a ordenar y dar aire.
Ejemplo
"Se utilizó amplio espacio en blanco para lograr que el logotipo resaltara más en la composición".
Medidas y formatos
Formato
Definición
Medidas exactas que tiene que tener la pieza. Al compartir una medida siempre será en relación estandarizada de ANCHO x ALTO.
Ejemplo
"La medida exacta de un diseño tamaño A4 será 21 x 29,7 cm".
Digital
Favicon
Definición
Es un pequeño icono gráfico de representación, también llamado icono de favoritos o de sitio web. Aparece en la pestaña del navegador.
Ejemplo
"El favicon de la pestaña de este sitio web me ayuda a identificar la página entre las muchas que tengo abiertas."
Composición
Grilla
Definición
Guía invisible que ayuda a ordenar los elementos bajo una estructura definida.
Ejemplo
“La grilla que utilizaremos en esta composición será de 3 columnas y 4 filas”.
Digital
HTML
Definición
Lenguaje estándar utilizado para estructurar el contenido de las páginas web. Define la estructura de los elementos que los navegadores web interpretan para mostrar el contenido al usuario.
Ejemplo
"Para añadir una imagen a tu sitio, se utiliza la etiqueta de HTML <img>".
Digital
Interfaz de usuario (UI)
Definición
Espacio de interacción con un sistema, aplicación o dispositivo. Incluye elementos gráficos que permiten navegación y uso.
Ejemplo
"El diseño de la interfaz de usuario de la aplicación móvil es muy intuitivo, con botones claros y un menú de navegación sencillo".
Branding
Isologo
Definición
Combinación de texto e icono (logotipo e isotipo) que están tan unidos e integrados que no pueden separarse sin perder su identidad. Forman un único elemento visual indivisible.
Ejemplo
Branding
Imagotipo
Definición
Combinación de un isotipo (icono) y un logotipo (texto). Ambos elementos (el texto y el icono) funcionan por separado y pueden reconocerse individualmente.
Ejemplo
Branding
Imagotipo
(con dependencia tipográfica)
Definición
Símbolo y tipografía conviven, pero solo el símbolo puede funcionar solo. La tipografía no posee identidad autónoma. El símbolo actúa como isotipo; la tipografía como apoyo.
Ejemplo
Branding
Isotipo
Definición
Es la parte gráfica de la marca, es decir, solo el icono o símbolo que la representa.
Ejemplo
Composición
Jerarquía
Definición
Organización de los elementos de un diseño para guiar la atención del espectador de lo más importante a lo menos relevante.
Ejemplo
"La jerarquía es lo que le dice a tu ojo por dónde empezar y cómo recorrer un mensaje. Determina qué se ve primero, qué después y qué se recuerda".
Branding
Key visual
Definición
Elemento gráfico central de una campaña o identidad visual, que concentra el concepto principal y se adapta a distintos formatos.
Ejemplo
"El key visual se utiliza como referencia para todos los materiales gráficos, asegurando consistencia y reconocimiento de marca".
Branding
Logotipo
Definición
Es la representación de la marca usando únicamente la tipografía (texto).
Ejemplo
Composición
Layout
Definición
Disposición u organización de los elementos dentro de un espacio o formato, clave para la composición visual.
Ejemplo
"Para el diseño de la página web, hemos desarrollado un layout que organiza los contenidos en columnas".
Redes Sociales
Mosaico
Definición
Una imagen grande que se divide en varias publicaciones separadas formando un diseño o cuadrícula en el feed.
Ejemplo
“Debemos adaptar este contenido a un diseño de mosaico para Facebook”.
Composición
Miscelánea
Definición
Ornamentos o elementos diversos que se usan para decorar, encuadrar, organizar la información y añadir atractivo visual a una composición.
Ejemplo
"Se utilizaron misceláneas de filetes para dividir secciones del libro y para enmarcar una cita especial".
Branding
Marca gráfica
Definición
Una marca es un signo distintivo (como un nombre, símbolo o diseño) que identifica los productos o servicios de una empresa.
Ejemplo
"La marca gráfica evoca un concepto, pero no lo construye sola; requiere un trabajo de branding y marketing para establecer esa conexión".
Medidas y formatos
Mapa de bits
Definición
Formato digital que utiliza una cuadrícula de píxeles para representar una imagen. Los píxeles en conjunto crean la representación visual de la imagen.
Ejemplo
"Las fotografías digitales son imágenes de mapa de bits y, por eso, al agrandarlas demasiado, se empiezan a ver los píxeles que las componen".
Color
Modelo de color
Definición
Sistema numérico que define los colores utilizando valores específicos, para representar un color en un dispositivo o medio particular. El modelo es la "receta" de colores.
Ejemplo
"El modelo de color (RGB o CMYK) permite trabajar con colores de manera precisa y consistente en diferentes aplicaciones".
Composición
Margen
Definición
Espacio que rodea un elemento, contenido o la página en sí misma, tanto en diseño impreso como digital.
Ejemplo
"El margen cumple la función de mejorar la legibilidad y separar elementos en la composición".
Branding
Naming
Definición
Proceso de crear el nombre de una marca, producto o servicio, combinando estrategia y creatividad.
Ejemplo
“El equipo de diseño presentó tres propuestas de naming para la nueva línea de productos.”
Composición
Opacidad
Definición
Nivel de transparencia de un color o elemento visual, usado para generar efectos de superposición.
Ejemplo
"La opacidad es útil para crear profundidad y efectos visuales interesantes en un diseño".
Medidas y formatos
Puntos (pt)
Definición
Unidad de medida fundamental en tipografía. Se usan para definir el tamaño de la letra, el interlineado y otros espaciados en un texto.
Ejemplo
"Utilizaremos la variable bold en 24 puntos (pt) para titulares, y 12 puntos (pt) para párrafos y cuerpos de textos".
Color
Paleta cromática
Definición
Selección de colores que se utiliza de forma armoniosa en un contexto específico, para transmitir un mensaje, crear una identidad visual o evocar emociones.
Ejemplo
"Se eligió una paleta cromática de azules y grises fríos para transmitir una sensación de innovación y seriedad en el diseño".
Medidas y formatos
Proporción
Definición
Relación de tamaño entre las partes de un diseño y con el diseño completo.
Ejemplo
"Los diseños para historias de Instagram deben mantener una proporción de 9.16".
Medidas y formatos
Píxeles (px)
Definición
La unidad de medida principal para el diseño en pantallas digitales. Cada píxel es el punto más pequeño que puede controlar una pantalla.
Ejemplo
"El número de píxeles en una pantalla determina su resolución y la nitidez de las imágenes".
Color
Perfil de color
Definición
Dentro de cada modelo, hay diferentes perfiles de color. Estos son cruciales para evitar variaciones en los tonos y garantizar que los colores se vean uniformes en diferentes medios.
Ejemplo
"El perfil de color es la "guía" que asegura que todos usen esa receta (modelo de color) de la misma manera".
Color
Pantone
Definición
Modelo de color de tintas planas estandarizado que funciona como un lenguaje cromático universal, utilizado para impresión profesional y branding.
Ejemplo
"El código Pantone elegido asegura que el color sea exacto y se mantenga la consistencia de la marca en todos los soportes de impresión".
Digital
QR Code
Definición
Código de respuesta rápida que almacena información (links, textos, contactos) y puede integrarse en piezas de diseño para conectar el mundo físico con el digital.
Ejemplo
"Se puede acceder a contenido digital escaneando el código QR del flyer con tu celular".
Medidas y formatos
Resolución
Definición
Claridad y el nivel de detalle de una imagen. Una mayor resolución significa más píxeles en esa área, resultando en una imagen más nítida y de mejor calidad al ser visualizada en pantallas o impresa.
Ejemplo
"La resolución de imágenes en pantalla suele ser de 72dpi; mientras que en impresión se recomienda que sea de 300dpi".
Color
RGB
Definición
Modelo de color que se basa en la mezcla de tres colores primarios luz (rojo, verde, azul) en diferentes intensidades para crear una amplia gama de colores visibles en dispositivos digitales.
Ejemplo
"El modelo de color de la pieza será RGB, para garantizar una correcta visualización desde dispositivos móbiles".
Composición
Recurso gráfico
Definición
Cualquier elemento visual incluido en la composición. Se utiliza con el fin de comunicar, hacer reconocible una marca o simplificar la información para el usuario.
Ejemplo
"Incluimos imágenes, tipografías, iconos, fondos, misceláneas como recursos gráficos que forman parte del sistema de identidad".
Color
Saturación
Definición
Intensidad o pureza de un color, que determina si se ve más vibrante o apagado. Un color está al máximo de su saturación cuando está en su estado puro, sin mezclar con otros colores.
Ejemplo
"El anuncio del festival de música fue diseñado con colores vibrantes y saturados".
Tipografía
Tipografía
Definición
Estilo o diseño particular de un conjuntode letras. Puede pertenecer a una familia con muchas variables.
Ejemplo
Composición
Trazo
Definición
Línea que forma parte de un dibujo o diseño; define forma, estilo y carácter visual.
Ejemplo
“El logotipo se distingue por sus trazos finos y elegantes.”
Medidas y formatos
Unidad de medida
Definición
Magnitud estándar utilizada para cuantificar y definir el tamaño de elementos como fuentes, espacios e imágenes, permitiendo la creación de un diseño coherente y escalable.
Ejemplo
"Las unidades de medida más frecuentes en diseño con: Milímetros (mm), Centímetros (cm), Píxeles (px), Puntos (pt) o Pulgadas (in)".
Digital
Vector
Definición
Gráfico digital creado a partir de fórmulas matemáticas para definir puntos, líneas, curvas y formas geométricas. Los vectores son escalables a cualquier tamaño sin perder calidad.
Ejemplo
"El vector es ideal para logotipos, ilustraciones e iconos que deben imprimirse o usarse a diferentes tamaños sin perder nitidez".
Tipografía
Variable tipográfica
Definición
Variaciones de peso, estilo o inclinación de una fuente.
Por ejemplo: Bold, Medium, Italic, etc.
Ejemplo
Digital
Wireframe
Definición
Esquema o boceto visual de bajo nivel que representa la estructura y disposición de los elementos en un sitio web o aplicación.
Ejemplo
"El wireframe sirve para validar estructuras y como plano inicial para explorar conceptos antes de añadir los detalles visuales finales".
Tipografía
X (altura de)
Definición
Medida tipográfica que define la altura de las letras minúsculas desde la línea base hasta la línea media, sin incluir los rasgos ascendentes ni descendentes.
Ejemplo
Otras
Y (¿?)
Definición
No encontramos un término que empiece con “Y” pero nos generó "toc" dejar esta letra y espacio vacío 😄
Ejemplo
"La “Y” decidió tomarse un descanso. Prometemos llenar este espacio cuando vuelva con una buena idea".
Digital
Zoom
Definición
Herramienta o técnica de acercamiento o alejamiento en diseño digital para observar detalles o ajustar proporciones.
Ejemplo
"Se hace zoom in (acercar) para ver detalles minúsculos, o zoom out (alejar) para obtener una perspectiva general de todo el diseño".