Glosario de términos de diseño web en español (Diccionario de vocabulario 2020)

El lenguaje del diseño web incluye muchos términos de diseño web que usted debe saber.

Ya sea que usted construya su propio blog o sitio web, trabaje con un diseñador o desarrollador web, o quiera aprender más sobre el diseño web en general, este artículo cubrirá los términos más importantes utilizados en el diseño web.

También nos adentraremos en los detalles del proceso de diseño web, incluidos los métodos de resolución de problemas y el flujo de trabajo.

¡Vamos allá!

Palabras relacionadas con Diseño Web: Vocabulario y glosario de términos actualizado 2020

El diseño web a menudo implica la superposición entre disciplinas, por lo que hemos incluido vocabulario que se ocupa de la marca, la composición, el color y la tipografía. diseño web a menudo implica la superposición entre disciplinas, por lo que hemos incluido vocabulario que se ocupa de la marca, la composición, el color y la tipografía.

Saber cómo hablar el idioma del diseño web le ayudará a hacer mejores preguntas, comunicarse más eficazmente y producir un mejor producto final.

También puede notar cómo se implementan estos términos en una amplia variedad de sitios web (para bien o para mal).

Debido a que el diseño web es un proceso holístico, los diseñadores web están capacitados para ver el panorama general y también los detalles.

Diseño

Composición y maquetación

La composición es la disposición de los elementos de diseño que forman una imagen completa. Una composición exitosa atrae al espectador y guía su mirada a través del diseño.

En las artes visuales, se puede oír hablar de esto como de»forma» En el diseño gráfico, a menudo se le llama diseño.

La composición se compone de una serie de elementos de diseño visual, entre los que se incluyen el equilibrio, la proximidad, la alineación, la repetición, el contraste y el espacio en blanco.

Balance

Esta no es tu habilidad para caminar en línea recta después de tres cervezas. En el diseño, el equilibrio implica la colocación de elementos en la página para que el texto y los elementos gráficos se distribuyan uniformemente. Hay tres maneras de lograr el equilibrio: simétricamente, asimétricamente y radialmente.

Simétrico

La simetría se logra cuando todos los elementos de diseño son iguales a ambos lados de una línea central

Asimétrico

Cuando los gráficos y el texto no son iguales en ambos lados de una línea central, se dice que un diseño es asimétrico. En el ejemplo anterior, todavía hay equilibrio, pero hay gráficos en un lado y texto en el otro

Radial

Un diseño radial es aquel en el que los elementos irradian desde un punto central, creando equilibrio.

Proximidad

La forma en que los elementos de diseño se agrupan o espacian en una página se llama proximidad. Los grandes grupos de diseño como elementos juntos.

Alineación

La alineación es la posición del texto o de los gráficos, ya sea a la izquierda, a la derecha, centrada o totalmente justificada…

Repetición

Para mantener un aspecto unificado, los diseñadores repiten elementos a lo largo de un diseño. (La repetición también se define como el número de veces que su hijo pide una galleta.)

Contraste

El contraste se logra mediante la inclusión de elementos en el diseño que se diferencian entre sí de forma apreciable. Un diseñador puede usar color, forma, textura, tamaño o tipo de letra para crear contraste.

Espacio en blanco

El espacio blanco -a veces llamado espacio negativo- es la parte del diseño que no está marcada por imágenes o texto. También es lo que los habitantes del Medio Oeste llaman su deprimente paisaje invernal.

Regla de los tercios

La regla de los tercios es una técnica que los diseñadores utilizan para determinar el punto focal. Utilizando una cuadrícula de tres filas y columnas, se indican los puntos focales donde convergen las líneas.

Los diseñadores usan esto como una guía para determinar dónde colocar elementos importantes en su diseño.

Rejilla

Una cuadrícula es una serie de líneas verticales, horizontales, angulares o curvas que se utilizan para organizar los elementos gráficos de una página, así como para relacionarlos entre sí.

Jerarquía

En el diseño, la jerarquía es la organización de los elementos por nivel de importancia. Periódicos, revistas y carteles de películas son buenos ejemplos del uso de la jerarquía de diseño.

Los titulares (también llamados tipo de visualización) suelen colocarse en la parte superior, mientras que los subtítulos y el cuerpo del texto se encuentran debajo.

Escala

La escala es el tamaño de un objeto en relación con otro objeto (no esa cosa en tu baño que maldices cada mañana).

La escala puede utilizarse para crear interés y captar la atención del espectador.

Esbozo en miniatura

Al conceptualizar, un diseñador a menudo crea dibujos pequeños y ásperos, esbozos en miniatura, para explorar muchas ideas.

Maqueta

Una maqueta es un modelo real o digital utilizado para probar las primeras ideas de diseño y ver cómo podrían verse en el mundo real.

Fotografía e ilustraciones

Resolución

El detalle de una imagen basado en el número de píxeles se conoce como resolución. Una imagen se ve más clara cuando tiene una resolución más alta.

OMPD

DPI significa «puntos por pulgada», que es una medida de la calidad de una impresora.

Para una impresión de alta calidad, se recomienda 300 ppp. Por ejemplo, una imagen de 300 ppp a 1200×1800 píxeles se convertirá en una impresión de 4×6 pulgadas.

IPP

PPI significa «píxeles por pulgada», que es una medida de la densidad de píxeles utilizada por los dispositivos electrónicos de imagen. Es probable que vea esto usado con escáneres, cámaras, televisores o monitores.

Aprenda más sobre la diferencia entre DPI y PPI.

Sangrado

Suena bastante espantoso, pero el sangrado es cuando un diseño se extiende más allá de su borde impreso, por lo que no hay posibilidad de bordes blancos cuando se recorta después de la impresión.

Recorte

El tamaño de corte es el tamaño final de una pieza impresa después de haber sido recortada de su página.

El recorte se realiza a lo largo de las marcas de corte que indican dónde cortar.

Píxeles

Los píxeles son puntos cuadrados que forman una imagen digital rasterizada (y una película realmente mala protagonizada por Adam Sandler.)

Cuantos más píxeles tenga una imagen, mayor será su resolución.

Cultivo

Un diseñador puede recortar o recortar partes innecesarias de una imagen para mejorar el encuadre, resaltar un tema específico o alterar la relación de aspecto de la imagen.

Foto de archivo/arte

Las fotos de archivo y el arte son imágenes con licencia creadas por un tercero.

El uso de imágenes de stock ahorra el costo de una sesión fotográfica profesional.

Echa un vistazo a algunos de nuestros lugares favoritos para obtener buenas imágenes de stock gratis.

Tipografía

Tipos de fuentes

La mayoría de las fuentes se encuentran en uno de los cuatro tipos de fuentes diferentes.

Serif

Las serifas son las líneas pequeñas y los ganchos al final de los trazos en algunas letras.

Sin gracias

Sans significa»sin» Una fuente sans serif no tiene serifas.

Guión

Los tipos de letra de guión utilizan un trazo fluido y cursivo.

Gracias a la losa

Las serifas de losa se distinguen por serifas gruesas y en forma de bloque.

Componentes de tipo

Todas las fuentes están hechas de los mismos componentes básicos.

Ascendente

Un ascendente es la parte de una letra minúscula que se eleva por encima del cuerpo principal de la letra. Piensa en»b» o»h»

Línea de base

Todos los caracteres de fuente se encuentran en la línea de base, el punto más bajo de todas las letras mayúsculas y minúsculas.

Descenso

Un descendente es la parte de una letra minúscula que desciende por debajo del cuerpo principal de la letra. Piensa en»g» o»p»

Mediana/altura x

La mediana o altura x es donde la mayoría de las letras minúsculas deben alcanzar su altura máxima. Se establece desde la altura de la x en una fuente.

Espaciado entre fuentes

El espaciado vertical y horizontal de una fuente a menudo se altera para cambiar su apariencia.

Kerning

El interletraje es el ajuste del espacio entre pares de letras de la misma palabra. Ciertos pares de letras crean espacios incómodos, y el interletraje añade o resta espacio entre ellas para crear un texto visualmente más atractivo y legible.

Líder

Se pronuncia «ledding,» leading (también conocido como line-height) es el espacio entre dos líneas de texto.

Seguimiento

No confundir con el kerning, el rastreo es el ajuste del espacio para grupos de letras y bloques enteros de texto. El rastreo afecta a todos los caracteres del texto seleccionado y se utiliza para cambiar su apariencia general.

Estuche de fuente

Normalmente, los caracteres están disponibles en dos formas.

En mayúsculas

Las letras mayúsculas y mayúsculas de un tipo de letra son mayúsculas. También son usadas por tu mamá para gritarte accidentalmente cuando ella te manda mensajes de texto.

Minúsculas

Las minúsculas se refieren a las minúsculas de un tipo de letra.

Gorras pequeñas

Las mayúsculas o minúsculas son caracteres en mayúsculas que tienen la misma altura que las minúsculas. Se utilizan para evitar que las palabras en mayúsculas aparezcan demasiado grandes en la página. ¿Quieres un ejemplo? Abre casi cualquier libro y mira las palabras iniciales de un capítulo.

Estilo de fuente

Más allá del espaciado y las mayúsculas y minúsculas, las fuentes también pueden ser alteradas por la escala, el peso y el estilo.

Tamaño del punto

El tamaño del punto es el tamaño del texto. Hay aproximadamente 72 (72.272) puntos en una pulgada.

Peso de la fuente

El peso de la fuente especifica la negrura de una fuente.

Cursiva

Cuando los caracteres se inclinan hacia la derecha, están en cursiva, una técnica visual utilizada para llamar la atención sobre palabras u oraciones específicas dentro de un párrafo.

Viudas y huérfanos

Las viudas y los huérfanos ponen muy tristes a los diseñadores. Eso es porque son palabras pobres y solitarias al principio o al final de un párrafo que cuelgan en la parte superior o inferior de una columna y que están separadas del resto del párrafo.

Lorem ipsum

Lorem ipsum (también conocido como texto ficticio) se utiliza como marcador de posición que se intercambiará más tarde con una copia real. El texto de Lorem ipsum proviene de «Los Extremos del Bien y del Mal», escrito por Cicerón en el año 45 a.C.

Color

Teoría del color

El estudio de cómo los colores hacen que la gente se sienta y sus efectos en un diseño se conoce como teoría del color. La teoría del color se utiliza para explorar los mejores tipos de colores para trabajar en diferentes casos de diseño, por ejemplo, elegir un esquema de pastel para un sitio web que necesita sentirse suave, o elegir rojo y amarillo para un anuncio de revista que necesita evocar energía.

Tono, tinte, tono y tonalidad

El tono es color puro. El matiz es un matiz con adición de blanco. El tono es un matiz con gris añadido. La sombra es una tonalidad con el negro añadido.

Saturación

La saturación se define por la intensidad del color.

Paleta

Una paleta es la gama de colores utilizada en un diseño. Estos son colores que funcionan bien juntos y a menudo son estéticamente agradables. Los diseñadores definen una paleta para un proyecto con el fin de crear consistencia y evocar una sensación específica.

Colores cálidos y fríos

Los colores cálidos se pueden encontrar en la mitad de la rueda de colores (rojos, naranjas, amarillos y rosas). Los colores fríos ocupan la otra mitad (azules, verdes y morados).

Monocromático

Una paleta de colores monocromáticos utiliza un solo color.

Escala de grises

Una paleta de colores monocromática basada en el gris se llama escala de grises.

Análogo

Los colores adyacentes en la rueda de colores (es decir, rojo violeta, rojo y rojo naranja) son análogos.

Complementario

Los colores complementarios son opuestos en la rueda de colores. Esta relación producirá tensión visual y»shock»

Triádico

Los colores triádicos son tres colores espaciados uniformemente en la rueda de colores. Uno de los colores domina, el segundo soporta y el tercero acentúa.

Gradiente

El gradiente es un cambio gradual de un color a otro. (Por ejemplo, la transición del azul gradualmente al verde).

Opacidad

Opacidad es sinónimo de falta de transparencia. Cuanto más transparente es una imagen, menor es su opacidad.

CMYK

CMYK es un proceso de impresión de 4 colores compuesto por cian, magenta, amarillo y key (negro). Los colores CMYK en la impresión nunca aparecerán tan vibrantes como los colores RGB en la pantalla porque CMYK crea color añadiendo colores juntos (haciendo las imágenes más oscuras) mientras que los colores RGB provienen de la luz.

RGB

RGB significa rojo, verde y azul, los tres colores de luz que se utilizan normalmente para mostrar imágenes en una pantalla digital.

Pantone

Desarrollado por Pantone Corporation, una compañía profesional del color, Pantone es el sistema de color propietario más utilizado para mezclar colores. El sistema incluye colores que no se pueden mezclar en CMYK.

Web y digital

Elementos de la página web

La mayoría de los diseños de páginas web incluyen una combinación de estos elementos.

Cabecera

Los elementos de diseño repetidos en la parte superior de cada página se denominan encabezados.

Navegación y barra de navegación

La navegación es un mapa de ruta hacia las partes más importantes de un sitio web y debe ser visualmente coherente en todas las páginas. Una barra de navegación es un conjunto de enlaces repetidos en cada página que a menudo incluye enlaces a páginas como «Quiénes somos», «Productos», «Contáctenos» y «Testimonios»

Ruta de la miga de pan

Las migas de pan son elementos de navegación que generalmente aparecen cerca de la parte superior de una página para mostrar a los usuarios la jerarquía de secciones de la página actual.

Texto del cuerpo

El cuerpo del texto es el principal contenido escrito de una página.

Enlaces

Cualquier palabra o imagen puede ser un enlace que lleve a los usuarios a otra página.

Recuadro

Una barra lateral es la columna izquierda o derecha de una página típicamente utilizada para enlaces de navegación vertical o publicidad. También puede contener búsqueda de sitios, enlaces de suscripción (RSS, boletines, etc.) o botones de redes sociales.

Banner

Los banners se encuentran normalmente en la parte superior de una página o en una barra lateral, y son anuncios que enlazan con otros sitios web.

Pie de página

Los elementos de diseño repetidos en la parte inferior de cada página se denominan pies de página.

HTML

HTML significa HyperText Markup Language. Este es el lenguaje de codificación estándar para sitios web que crea todas las fuentes, colores, gráficos y enlaces que usted ve en línea.

Página de aterrizaje

Una página de destino es una sola página que aparece en respuesta a los resultados de los motores de búsqueda. Las páginas de aterrizaje se utilizan para la generación de clientes potenciales.

Interfaz de usuario (UI)

La interfaz de usuario es el diseño de aplicaciones para ordenadores, dispositivos móviles y otros dispositivos para maximizar su usabilidad y la experiencia del usuario.

Marco de alambre

Las imágenes básicas que muestran las funciones esenciales de un sitio web se conocen como wireframes. Los diseñadores utilizan marcos alámbricos para mostrar cómo funciona una página o un sitio.

Formatos de archivo de imagen

Un formato de archivo de imagen es una forma estandarizada de codificar arte, gráficos y fotos digitalmente.

Gráficos vectoriales

Los gráficos vectoriales son pequeños gráficos que utilizan las matemáticas para mostrar imágenes. Pueden ampliarse sin perder calidad y son esenciales para diseños multiplataforma (por ejemplo, vallas publicitarias, tarjetas de visita, etc.).

IA

AI significa Adobe Illustrator Document. Este es un formato de archivo desarrollado por Adobe Systems para representar diseños vectoriales de una sola página.

BPA

EPS son las siglas de Encapsulated Post Script. Este es un formato de archivo de tamaño variable que se utiliza comúnmente para los diseños vectoriales. Debido a su alta calidad, se utiliza comúnmente con elementos de impresión como logotipos, tarjetas de visita o folletos.

PDF

Un PDF es un formato de documento portátil desarrollado por Adobe que puede descargarse y visualizarse universalmente en cualquier ordenador. Los archivos PDF son los más adecuados para compartir vistas previas del trabajo y se pueden ver universalmente.

Gráficos rasterizados

Los gráficos rasterizados están compuestos de píxeles en una cuadrícula, donde a cada píxel se le asigna un valor de color. Son buenos para asignar efectos especiales, corrección de color y manipulación de fotos. Dependen de la resolución, lo que significa que las imágenes no se pueden ampliar sin degradar su calidad.

MIC

GIF o Graphics Interchange Format es un formato de archivo rasterizado que soporta animación y transparencia. Los GIF sólo pueden mostrar hasta 256 colores, lo que permite tamaños de archivo muy pequeños. (PD: Se pronuncia «JIF» en contraposición a la pronunciación ampliamente aceptada «GIF», según el creador del GIF, Steve Wilhite.)

JPEG

Joint Photographic Electronic Group también se conoce como JPEG, el tipo de archivo raster más utilizado para los diseños basados en la web. Los JPEG son archivos comprimidos que se cargan rápidamente. Típicamente los verás usados para correos electrónicos, anuncios de banners, fotos en línea y casi todo lo demás en línea. A diferencia de los GIFs, no pueden tener un fondo transparente (un fondo blanco se añadirá automáticamente).

PNG

PNG significa Portable Network Graphics, un formato basado en web que no pierde calidad cuando se comprime. Los archivos PNG fueron creados para mejorar la calidad de los archivos GIF.

DIVISIÓN DE SERVICIOS DE ADQUISICIÓN

PSD o documento de Photoshop es el archivo de imagen raster de trabajo sin comprimir creado por los diseñadores en Adobe Photoshop.

TIFF

TIFF significa Tagged Image File Format, un formato común para intercambiar imágenes raster entre aplicaciones. El TIFF produce una imagen de mayor calidad que un JPEG o PNG, y es ampliamente utilizado entre las industrias editoriales y los fotógrafos. No lo confundas con un «tiff» o una «grieta», que ocurre cuando le envías a tu diseñador ocho rondas de revisiones.

Tipos de logotipos

Todos los logotipos se construyen a partir de tipografía, formas y/o imágenes, y normalmente encajan en uno de estos seis tipos de logotipos estándar. Cada uno le dará a su marca o negocio una sensación diferente. Estos seis tipos también se pueden combinar entre sí para crear logotipos aún más únicos.

Marca abstracta

Una marca abstracta es un logotipo que utiliza las cualidades emotivas del color y la forma para transmitir su marca. En lugar de ser una imagen reconocible como una manzana o un pollo, las marcas abstractas utilizan formas para representar su negocio.

Emblema

Los logotipos de los emblemas utilizan marcos y formas para incluir el nombre de la empresa u organización. Piensa en insignias, sellos y crestas.

Marca de letra

Los logotipos de marcas de letras incluyen una o más letras estilizadas (por ejemplo, las iniciales de una empresa) para identificar la marca. Los logotipos de marcas de letras famosas incluyen los de IBM, CNN, HP y HBO.

Marca o símbolo pictórico

Las marcas y símbolos pictóricos son iconos visuales no abstractos que representan el nombre de su empresa o servicio. Puedes ver esto con el logo de Apple, el pájaro de Twitter y el centro de la diana de Target.

Mascota

Los logotipos de las mascotas dependen de un personaje o portavoz de la marca para representar a una empresa. Las mascotas famosas incluyen al Coronel Sanders, el hombre de Kool-Aid y el Sr. Peanut.

Marca de palabras

Una marca se basa en un tratamiento tipográfico personalizado del texto para ilustrar una marca. Piense en VISA, Google o Coca-Cola.

Términos de marca

La marca es la comunicación del mensaje, los valores y la experiencia de una organización.

Todo, desde el logotipo de una empresa y los elementos de diseño identificables hasta el «instinto» que la gente obtiene de una organización, es el motor del porqué detrás de un sitio web. Cuando se trata de diseño web, usted tiene la oportunidad de crear experiencias que refuerzan la marca de la empresa.

• identidad: Toda la representación visual de su marca, puede incluir logotipo, color, tipografía, imágenes, voz, etc. No sólo un logotipo.
• marca de la carta/Marca de la palabra/Logotipo: Un tipo de logo hecho con letras estilizadas (IBM) o palabras (Coca-Cola)
• marca registrada: Un tipo de Logo hecho con una representación gráfica (Apple, Target)
• icono: Una representación simplificada de un objeto o concepto. Un logotipo y un icono no son lo mismo.
• sistema de diseño: Un repositorio de componentes digitales reutilizables que se combinan para formar un sitio web.
• guía de marcas: Una referencia visual y filosófica para el color, la personalidad y la voz de una marca.

Términos de Experiencia de Usuario

La experiencia del usuario abarca la forma en que las personas interactúan y se comprometen con un sitio web. La experiencia del usuario influye en la forma en que dirigimos a los usuarios a través del sitio y los guiamos hacia objetivos finales específicos. Abarca muchos elementos de diseño y desarrollo, incluyendo cómo se ve y funciona algo. Tome decisiones de funcionalidad pensando en el usuario final, no en sus propias preferencias o en las herramientas que está utilizando.

• persona: Carácter ficticio que representa a un usuario principal de su sitio/producto. Por lo general, las personas están muy bien desarrolladas porque deben representar a personas reales con motivaciones reales.
• de cableado: Layout de baja fidelidad de un sitio, representación de contenidos generales a nivel de bloque y elementos interactivos.
• maqueta: Maquetación de alta fidelidad de un sitio, representación del color final, tipografía, imágenes, etc.
• Prototipo: La versión interactiva de un sitio, no puede ser construida con el código final.
• CTA: Llamada a la acción, generalmente emparejada con un botón.
• Conversión: Cuando un usuario realiza una acción específica deseada.
• Página de aterrizaje: Una sola página optimizada para una audiencia específica o para un resultado en los motores de búsqueda.
• Usabilidad: Cómo los usuarios reales interactúan realmente con su sitio, generalmente probado mediante la observación de una serie de tareas guiadas.

Términos de la interfaz de usuario

La interfaz de usuario (UX, UI) incluye elementos en la página con la que el usuario interactúa. Su interfaz de usuario tiene un impacto en su experiencia de usuario, aunque no son lo mismo. No haga pensar a sus usuarios; diseñe una interfaz intuitiva que aproveche los patrones modernos.

• Breadcrumb: Enlaces de contenido jerárquico.
• Menú: Área de navegación principal, a veces con una lista desplegable o volante de elementos del submenú.
• Filtro: Elementos predefinidos que permiten reducir el contenido visible por varias taxonomías (las taxonomías son una forma elegante de decir categorías).
• búsqueda: Entrada abierta que consulta el contenido y devuelve una lista de resultados.
• Deslizador: Una forma moderna y animada de mostrar información que probablemente no deberías usar.

Términos de composición

Composición se refiere a cómo el contenido y la estética de un sitio web trabajan juntos. Cada elemento en la página web debe sentirse como si perteneciera al diseño de la página web, no como algo que se añade posteriormente.

• Equilibrio: Usar elementos de diseño similares o complementarios para hacer que la composición se sienta igual.
• Repetición: Usar elementos recurrentes para reforzar los patrones o servir como señales visuales familiares.
• Espacio en blanco: ¿Cuánto «espacio de respiración» tiene cada elemento?
• Rejilla: Estructura subyacente a un diseño que determina cómo se desarrolla todo.
• Regla de los tercios: Un concepto visual que establece que los puntos focales más agradables se encuentran en la intersección de tres filas y columnas.

Términos de jerarquía

La jerarquía implica la importancia relativa de la visibilidad de las piezas de información. La jerarquía visual es generalmente una colección de pequeños detalles como la tipografía, el color, la proximidad y el equilibrio. Tener una buena jerarquía ayuda a la capacidad de análisis de la información y ayuda a los usuarios a priorizar la información de la página por importancia. La jerarquía también ayuda a dirigir a los usuarios a través de un sitio web. Las decisiones tomadas sobre el estilo y la posición de los elementos tienen un gran impacto en la experiencia del sitio web.

• Escala: ¿Qué tan grandes o pequeños son los elementos de la página en relación a los demás?
• Proximidad/Alineamiento: ¿Qué elementos de la página están asociados entre sí?
• Punto Focal: El lugar en la página a la que estamos dirigiendo la atención del usuario
• Marcado semántico: Utilizar correctamente los elementos HTML para implicar jerarquía y uso dentro del contenido.

Términos de tipografía

La tipografía es la decisión estética sobre la disposición del tipo. El tamaño, el espaciado, la alineación, el tamaño de la columna y el tamaño relativo del tipo tienen un gran impacto en la experiencia del usuario, así como en la estética. Las opciones tipográficas deben ser deliberadas, tanto para reforzar los sistemas de imágenes grandes como para ser estéticamente atractivas y fáciles de leer/entender.

• fuente (tipo de letra): Colección de letras y glifos/símbolos
• strong> font-family: ¿Qué tipo de letra estás usando?
• tamaño de fuente: ¿Qué tan grande/pequeño es?
• font-weight: ¿Qué tan pesado/ligero es?
• estilo de fuente, decoración de texto: Cursiva, subrayado, huelga
• línea-altura (anterior): ¿Cuánto espacio entre líneas?
• el espaciado entre letras (tracking): Ajustar el espaciado entre grupos de letras/bloques de texto.
• kerning: El espacio entre letras individuales.
• font-weight: ¿Qué tan pesado/ligero es?
• serif/sans serif: las fuentes Serif tienen un trazo o línea decorativa adicional hasta el final de las letras, mientras que una fuente Sans Serif no tiene.

Términos de color

El color abarca las decisiones estéticas sobre el uso del color en una composición. El color puede ser usado para evocar emoción, énfasis, dividir o agrupar elementos; el color puede crear unidad y equilibrio visual.

El color suele estar relacionado con el branding. Las opciones de color deben ser deliberadas y utilizadas consistentemente en todo el sitio web.

• HEX: En los sitios web, el color hexadecimal, un número de seis dígitos utilizado para representar el color en HTML/CSS.
• RGB: Modelo de color aditivo utilizado para las pantallas, valores de luz roja/verde/azul que se combinan para formar colores.
• CMYK: Para impresión, modelo de color sustractivo usado para tinta, tinta cian/magenta/amarilla/negra que se combina para formar colores.
• Pantone/spot color: tintas específicas personalizadas de un determinado color. Las grandes marcas suelen tener su propio color Pantone personalizado.
• Tono: ¿Dónde está en el espectro de colores?
• Saturación: ¿Qué tan vívido u opaco es el color?
• Contraste: ¿Cuánto destaca?
• Opacidad: ¿Sólido o transparente?

Términos de las imágenes

Los términos de imágenes incluyen los elementos visuales y gráficos de un sitio web. Las imágenes son importantes para comunicar su mensaje y conectar con su audiencia.

Sin embargo, cuando las imágenes se utilizan de forma inadecuada, pueden añadir un volumen adicional al tiempo de carga de un sitio web, sin hacer mucho por la experiencia del usuario. Utilice imágenes como soporte de sus mensajes; utilice el formato de imagen adecuado para el contenido.

• Vector: Imágenes que están hechas de matemáticas (SVG, EPS).
• Raster: Imágenes que están hechas de píxeles (JPG, TIFF, PNG, GIF).
• Resolución: Cuántos píxeles tiene una imagen rasterizada (por ejemplo, 800×600 o 2400×1200). Una resolución más alta será típicamente un tamaño más grande, pero un detalle más alto.
• Compresión: Optimización (tamaño de archivo grande/pequeño).
• jPG/JPEG: Mejor para fotografía e imágenes detalladas.
• PNG: Ideal para gráficos, colores simples e imágenes con transparencia.
• GIF: Ideal para gráficos o animaciones de bajo nivel de detalle.
• TIFF: El mejor para la calidad de impresión, no apto para la visualización en pantalla.
• SVG: Un formato de imagen vectorial adecuado para su visualización en la web, ideal para gráficos y logotipos.

Términos de la Terminología Web

Los términos de la terminología web abarcan el vocabulario general cuando se diseña para la web. Los diseñadores web no sólo saben de diseño, sino que también entienden la tecnología para la que están diseñando.

• Rumbo: Títulos y subtítulos, escritos semánticamente con etiquetas h1 – h6. Útiles para organizar la información en una jerarquía y son utilizados por los motores de búsqueda y lectores de pantalla.
• Copia del cuerpo/texto del cuerpo: El contenido escrito primario, generalmente párrafos, listas, citas, etc.
• Héroe: La imagen/gráfico principal en una página de inicio o página de aterrizaje, generalmente con una llamada primaria a la acción.
• Desplazamiento simple: Un sitio web donde la mayoría del contenido está contenido en una sola página
• Diseño sensible: Un diseño que no es fijo, sino que se adapta al tamaño de la pantalla y/o al dispositivo del usuario.
• Punto de ruptura: Un punto específico (por ejemplo, el ancho) en el que el contenido o el diseño de un sitio web cambiará para adaptarse a una interfaz diferente.
• Accesible: La capacidad de un sitio web para ser utilizado por todas las audiencias, incluyendo la visión, la audición o la función motora, a través de la tecnología de asistencia o la navegación estándar.
• Front-End: En general, se trata de código que se ejecuta en un navegador y controla lo que se ve y con lo que se interactúa.
• Back-End: En general, se trata de código que se ejecuta en un servidor y controla el contenido y la lógica.
• CMS: Sistema de gestión de contenidos (como WordPress).