Más de 60 términos – Glosario de diseño web

El mayor reto a la hora de adentrarse a una experticia o especialidad, es conocer los términos que son usados dentro de ellos y su significado, y esto sucede a menudo dentro del diseño web, donde la mayoría de los profesionales suelen fusionar el uso de palabras en español e inglés y sostener una reunión o presentación del trabajo realizado.

Por lo tanto, el día de hoy decidí seleccionar algunos términos de relevancia para el mundo de diseño web y crear este glosario.

GLOSARIO DE TÉRMINOS

---

A

Above the fold

Es un término utilizado que se inicia en la época de la imprenta, donde, en la parte superior del periódico que está doblado en la mitad, es donde se ubican las noticias o titulares de gran impacto o noticias resaltantes.

En el caso del diseño web, se ubica en la parte superior visible a la hora de cargar la página web por primera vez, una vez que el usuario baja con su cursor, se conoce como Above The Fold.

Ancho Fijo (Fixed width)

Como su nombre lo indica el ancho fijo, es un tamaño fijo dentro de cada elemento del sitio web, donde el elemento no cambiará sin importar la resolución de la pantalla de los dispositivos, o si el navegador es diferente, si es maximizada la ventana o no, entre otros.

ASP (Active Serve Pages)

Es una tecnología de Microsoft, que permite crear páginas web dinámicas e interactivas, sin necesidad de editar o rescribir su código. Se enfocan principalmente en incorporar comandos del lado de servidor y así adaptarse.

Alineación

Define el posicionamiento donde estará ubicado el elemento de diseño (imágenes, bloque de textos, videos, …) dependiendo del uso la alineación puede ser izquierdo, derecho, centro, justificado, entre otros.

API (Interfaz de Programación de Aplicaciones)

Es un mecanismo que permite acceder y comunicar a las plataformas, dando la oportunidad de obtener y manipular datos de un sistema.

B

Below the fold

Se refiere a la sección de la página web que solo es visible luego de desplazar hacia abajo, en pocas palabras se encuentra después del Above the fold.

Backlink

Son enlaces que reciben de otras webs, es uno de los elementos de gran relevancia para el SEO, un ejemplo de ello es, la página web A, enlaza un artículo relacional de la página web B, por lo tanto la página B tiene un backlink desde la página web A.

Barra lateral (Sidebar)

Son bloques de información, de forma rectangular, que pueden ser ubicados del lado derecho o izquierdo, dependiendo del diseño, mayormente predominan las barras laterales del lado derecho, aunque, hay sitios que usan ambos lados.

En las barras laterales, mayormente son usadas para presentar los contenidos más populares, la cantidad de comunidad digital de cada red social, publicidad, encuestas, buscador, entre otros.

Banner

Son diseños mayormente rectangulares, donde presentan el contenido de relevancia o información publicitario, los usuarios al hacer clic en un banner, los lleva al sitio que está anclado donde se mostrará información relacionada con la imagen o contenido del banner.

Bitmap

Son imágenes por pixeles, en pocas palabras, cuando el diseñador diseña un arte visual y comenta que el tamaño o la cuadrícula es de 100 px X 100 px, y se ubican en cada espacio un color a cada pixel, da un total de 10.000 pixeles en total.

Barra de navegación (Nav Bar)

Se refiere a un grupo de enlaces que está en un sitio web, que permite a los usuarios navegar dentro de la página web, normalmente están ubicados en la parte superior de la página.

C

CSS (Cascading Style Sheets)

CSS es una abreviación de “Cascading Style Sheets”, se encarga del aspecto visual de la página web (colores, fondos, imágenes, etc).

CDN (Content Delivery Network)

Es una red que entrega el contenido dentro de los servidores distribuidos, en pocas palabras, buscan optimizar la presentación del contenido o página web a los usuarios, en función de su ubicación geográfica, el origen de la página y el servidor de entrega del contenido, y así mejorar la velocidad de respuesta.

Color RGB

RGB es una abreviación de RED, GREEN, BLUE; es utilizado con frecuencia dentro de las herramientas digitales, ya que, permite recrear los mismos colores que se muestran en las pantallas de computadora, pantallas de TV y pantallas de dispositivos móviles. Donde al unir los colores primarios permite obtener variaciones según el espectro de colores. Un ejemplo de como representa el color de azul claro:

• Código RGB: (225,240,245)
• Código hexadecimal: #E1F0F5
• CMYK (usado con frecuencia por las imprentas): 0.08, 0.02, 0.00, 0.04

Color hexadecimal

Es usado con frecuencia para el diseño de espacios webs, donde a través de un número hexadecimal de 6 dígitos y 3 bytes, permite representar y transformar el código RGB en un valor hexadecimal. Cada byte representa un color en específico:

• Byte 1: valor rojo (tipo de color rojo)
• Byte 2: valor verde (tipo de color verde)
• Byte 3: valor azul (tipo de color azul)

Si se busca la manera de transformar los colores manualmente se toma el valor de RGB y se divide entre el número 16, y se sustituye la ubicación en orden de los bytes. Tomaremos el ejemplo anterior del color en RGB que el código era el siguiente (225,240,245), daría el siguiente resultado:

• Byte 1: 225/16 = 14.0625 = E1
• Byte 2: 240/16 = 15 = F0 (se completa con cero si el valor que se da es redondo)
• Byte 3: 245/16 = 15.3125 = F5

Al unir los 3 pares nos da que el color hexadecimal: E1F0F5.

CMS (Content Management System)

Es una abreviación de Content Manager System o Content Management System, es una aplicación de software que se utiliza para la gestión de creación y modificación de contenido digital.

En estos entornos de desarrollo admiten múltiples usuarios en un entorno colaborativo, donde al integrar la gestión de documentos, de activos digitales (fotos, videos, voices,) y funciones.

Caché

Es el almacenamiento temporal de contenidos webs, para optimizar el tiempo de mostrar el contenido al usuario y así reducir el retraso del servidor.

Cookie

Es una pequeña información enviada por un sitio web y almacenada en el navegador del usuario, esto permite obtener la información de cada usuario que ingresa a una página, hay varios casos en los que es necesario que una página web solicite el permiso del uso de cookies a través de los usuarios.

Colores análogos

Colores adyacentes entre sí en una rueda de colores.

Colores complementarios

Colores opuestos del círculo de la rueda.

Colores rectangulares (o tétrados)

Se ubica a través del círculo de colores, donde al usar la imagen de un cuadrado, cada esquina establece 2 pares de colores complementarios.

Colores Split-complementarios

Utilizando el circulo de colores, y con un triángulo, la base de las 2 esquinas seleccionado, ubican un color complementario en la parte superior del triángulo.

Compresión

Reducir el tamaño o peso de un archivo, y así a la hora de enviar y compartir el contenido se realice de forma fácil, también es recomendado comprimir las imágenes para mejorar el SEO para la carga de la página. Una de las herramientas recomendada es Tinypng.

CAPTCHA

Programa que protege las páginas webs contra los robots mediante la generación y clasificación de pruebas que solamente los seres humanos pueden pasar pero los programas informáticos actuales no pueden.

D

Diseño Fluido (Fluid Layout)

Es un estilo de diseño de página web en el que el tamaño de la medida de cada elemento cambia según la resolución de la ventana. Esto se logra definiendo áreas de la página utilizando porcentajes o ems (unidad de medida tipográfica), en lugar de anchos fijos de píxeles. Ejemplo:

• Diseño fijo:

.content {ancho: 960px; }

.left, .right {ancho: 180px; }

.middle {ancho: 600px; }

• Diseño fluido:

.content {ancho: 80%; }

.left, .right {ancho: 18%; }

.middle {ancho: 64%; }

Diseño Responsivo (Responsive layout)

El diseño y el contenido se adapta a cada resolución de pantalla, proporcionando una experiencia a cada usuario donde puede experimentar cada dispositivo electrónico.

Los contenidos de cada elemento, son reorganizado según las características del dispositivo y el navegador en uso. El objetivo de esto, es optimizar y mostrar armonía en los elementos, que ofrezca una experiencia de navegación agradable e intuitivo a los usuarios.

Diseño Adaptativo (Adaptive Layout)

Tiene múltiples diseños de plantillas estáticas, esto depende de cuando el sitio web detecta el espacio disponible, selecciona el diseño más apropiado para la pantalla. Por ejemplo, cuando una persona utiliza un navegador en una PC, el sitio elige el mejor diseño para esa pantalla de escritorio, cambiar el tamaño del navegador no tiene impacto en el diseño.

Diseño Esqueumórfico (Skeuomorphism Design)

Es un concepto de diseño usado para crear homólogos de los objetos de la vida real y llevarlo al mundo digital, y así desarrollar elementos para la interfaz de usuario. Un ejemplo de ello es el icono de la papelera de reciclaje y las carpetas para archivar.

Diseño Fijo (Fixed Design)

Es un diseño donde establece las medidas de cada elemento como un valor fijo en píxel, por lo tanto, es un ancho inamovible, y no puede ser adaptado a cada resolución de pantalla y la acción de minimizar.

Diseño neumorfismo (Neumorphism Design)

Es una tendencia de diseño relativamente nueva, su estética en el diseño de interfaz se basa en diseño minimal o plano y esceptomorfismo.

La base de su diseño es enfocarse en la combinación de colores de fondo, formas, degradados, resaltados, marcos, pantallas y sombras para garantizar botones e interruptores gráficos intensos. Todo da un aspecto 3D, futurista, elegancia. Para lograr el aspecto anterior juega con frecuencia en cada elemento las dos sombras una clara y otra oscura.

Diseño plano o sencillo (Flat Design)

El diseño se basa en una interfaz de usuario simple, minimalista y fácil de reconocer y detallar; utilizando imágenes 2D y plano, donde no posee sombras o degradados.

Dominio

Es el nombre de una página web, esto se convierte en la dirección donde los usuarios de Internet pueden acceder a su sitio web. Los dominios pueden ser reservados y se deben renovar anualmente para poder mantener la dirección. Los dominios se desarrollaron para sustituir a la dirección de Protocolo de Internet (IP), porque es más amigable y fácil de recordar y ubicar.

E

Enlace de Anclaje (anchor Link)

Es un enlace web que permite a los usuarios navegar internamente dentro del mismo contenido o publicación, pero, no llevarte a otra página.

El objetivo de usar este enlace, es permitir a los usuarios ir directo al grano al contenido que ellos desean, un ejemplo, es si le das clic a la palabra HTML, te llevará directo a la definición, y no tendrás que pasar por todas las definiciones que existen en este artículo.

Experiencia de usuario (User Experience – UX)

Es el proceso que utiliza el equipo que está detrás de la creación de una página web, en comprender y ofrecer una mejor experiencia y relevante para los usuarios y así proyectar la experiencia que desea vender la marca.

Para lograr esto es necesario evaluar diversos aspectos para crear un UX, como los procesos y función dentro de la página web, diseños y visual, usabilidad, identidad de marca, interfaz, plataformas, arquitectura, contenido e interacción con el diseño.

Esquema de color

La combinación de dos o más colores de la rueda de colores, también conocido como armonías.

F

Favicon

Es el icono asociado a un enlace, donde se muestra en la parte superior de la pestaña junto al nombre del sitio web. Esto permite identificar las pestañas y ahorrar tiempo a la hora de ubicarlo.

Es un icono que normalmente representa la versión más pequeña del logo, el tamaño del favicon es de 16px X 16px.

FTP (File Transfer Protocol)

Es un protocolo de transferencia de archivos que permiten transmitir ficheros sobre internet entre una máquina local y otra remota.

Footer Web

Se ubica en la sección inferior de una página web también se conoce como pie de página. Dependiendo del diseño que se aplica, se divide en 3 o 4 secciones, y puede contener información básica de la empresa, el copyright o derecho de autor, también hay diseños que presentan las últimas publicaciones, información de contacto, redes sociales.

Fuente

Es el estilo de tipografía en un estilo y un tamaño específico.

G

Google Mobile Friendly

Es un nuevo algoritmo de Google que clasifica los sitios webs que poseen un diseñado adaptado a los dispositivos móviles y así posicionar las páginas web que cumplan con este requisito.

GIF (Graphic Interchange Format)

Un formato que es utilizado para imágenes animados, que produce un movimiento constante en la imagen y en un tiempo corto.

Gradiente

Una técnica de diseño en la que un color base, se va trabajando desde lo más oscuro hasta lo más claro.

H

Hosting

Es el espacio donde se aloja u hospeda el sitio web, dependiendo el diseño, el peso y la cantidad de consultas y visitas que obtengan, es necesario la contratación de un hosting dedicado o con mayor capacidad.

Home Page

También es conocido como página de inicio o principal, es la página que le da la bienvenida a los usuarios, una vez que ingrese a la página web.

HTML (HyperText Markup Language)

Lenguaje de marcado que realiza la estructura de la página web, donde a través de las etiquetas permite construir el esqueleto de una página web.

Header Web

Se conoce también como el encabezado de una página web, es la sección donde los diseñadores incluyen con frecuencia el logo de la marca, el menú de navegación, un buscador o los iconos de las redes sociales.

I

Interface de usuario

Es el medio por la cual los usuarios interactúan con la página web o un sistema web, y así comunicarse.

K

Kerning

Es el proceso de ajustar el espacio entre las letras o los caracteres en un párrafo o parte de texto que va a ser impreso.

L

Llamada a la acción (Call to Action)

Botón ubicado en la página web, e-mail, landing page o blog que busca convertir a los clientes potenciales en clientes finales.

M

Matadatos

La definición de los metadatos, son datos que describen otros datos, sin embargo, en el caso de los metadatos en la página web son palabras o frases claves que describen el contenido de una web, esto ayuda a orientar al lector y comprender el contenido y en la búsqueda de los motores de búsquedas (SEO)

Metaetiquetas

Son etiquetas que proporciona información sobre una página web, donde según la configuración se puede proporcionar información sobre quién creó la página, con qué frecuencia se actualiza, de qué trata la página y qué palabras clave representan el contenido de la página.

Mouse hover

Es una acción que se dispara o se presenta, una vez que el usuario coloca el cursor del mouse encima a un área en específica, donde al tener contacto o hacer clic realiza una acción planificada previamente por el diseñador o administrador web o redactor como generar una imagen o un hipervínculo.

Menú tipo Hamburguesa (Hamburger Menu)

Es un icono o acción utilizado con frecuencia para los diseños responsive y ajustar el menú de una página web tradicional, a uno oculto, donde al hacer clic sobre el icono se abre para revelar un menú de navegación. Visualmente, es icono es una pila de tres líneas horizontales que se asemejan a una hamburguesa.

Mapa de sitio (Sitemap)

Es una lista de páginas donde según el tipo de usuario se pueden presentar y definir las ventanas o páginas o funciones que serán habilitados, esto también permite estructurar de forma clara y precisa sobre la jerarquía dentro del sitio web.

También es usado con frecuencia como un listado estructurado destinado a rastreadores web como motores de búsqueda.

N

Navegación BreadCrumb (Breadcrumb navigation)

Es una función visual, que permite orientar al usuario dentro de la página web, sobre la navegación realizada, presentando de forma clara dónde está ubicado en la web.

P

Plantilla Web (template web)

También conocido como template o theme, en inglés, es una base prediseñada a la cual se puede personalizar la información básica, imágenes, colores, logotipo, ubicación de los elementos visuales, …

La idea de usar la plantilla es que proporcionan una estructura clara, la ubicación de cada elemento, con una curva de aprendizaje baja, ahorra tiempo y crear páginas webs dentro de un molde con parámetros definidos, sin comenzar desde 0.

Plantilla Padre (Parent theme)

Dentro del CMS WordPress, la plantilla padre es la plantilla original donde los diseñadores y desarrolladores de temas pueden tomar y aprovechar las ventajas que proporciona la plantilla y así implementarlo para el desarrollo de plantillas hijos.

Plantilla Hijo (Child Theme)

Es una plantilla que ha heredado toda la funcionalidad, características y estilo de su tema principal o plantilla padre. El uso de las plantillas hijos es que permite actualizar o realizar cualquier cambio dentro y esto no influirá en la plantilla original.

Pop Under

Ventana que se despliega separada de la que el usuario tiene abierta. Esta ventana aparece justo detrás de la página principal.

Pop Up

Ventana emergente que aparece en el sitio web.

Pixel

Es el elemento más pequeño de una imagen en una computadora.

R

Rueda de color

Es un círculo de colores que muestran las relaciones y escalas de colores entre colores primario, secundario y terciario.

T

Tipografía

Es una familia de diseño de caracteres, que incluye letras, números, signos de puntuación y caracteres especiales.

W

Widget

Pequeñas funciones que se pueden distribuir por toda la web y pueden añadirse en los espacios designados, esto es muy usado dentro de los CMS como WordPress.

Cuéntame ¿qué otro termino recomiendas incorporar en este glosario de términos para diseño web?