Glosario de sitios web y diseño web: términos de diseño web en lenguaje sencillo

Para un oído poco acostumbrado a la tecnología, algunos términos pueden sonar bastante raros. Hemos reunido un glosario de términos y funciones de sitios web para ayudarte a comunicarte con nosotros como tu desarrollador web. Piénsalo como una guía en lenguaje sencillo sobre términos de diseño web, terminología de diseño de sitios web y la jerga que circula en las reuniones de proyecto. Los hemos seleccionado a partir de las preguntas que nos hacen como estudio de Webflow, así que iremos ampliando la lista a medida que lleguen más preguntas, aunque, por supuesto, esta lista no es exclusiva de los diseñadores de Webflow y sirve para todo el mundo.

Si todavía estás decidiendo con quién construir tu sitio, aquí tienes por qué deberías elegir un estudio de Webflow para tu próximo proyecto web y qué incluye el coste de un sitio web.

Diseño adaptativo

La forma en que se construye un sitio web determina cómo se ve en distintos dispositivos. El diseño adaptativo crea un sitio web en varias maquetaciones distintas, cada una pensada para un tamaño de pantalla diferente.

Diseño responsive

Garantiza que un sitio web se muestre correctamente sin importar el dispositivo desde el que lo vea el usuario. Los sitios responsive se construyen para adaptarse a distintos tamaños de pantalla, de modo que el usuario disfruta de la misma calidad y facilidad de uso tanto si navega desde un ordenador de escritorio, un móvil o una tableta.

Adaptativo vs responsive

El diseño responsive reconfigura todos los elementos del diseño tanto si se ve en un ordenador de escritorio, un portátil, una tableta o un teléfono móvil. Con el diseño adaptativo se crean varias maquetaciones fijas que se ajustan al tamaño de pantalla del usuario. A diferencia del enfoque responsive, más fluido, el diseño adaptativo emplea varios tamaños de un diseño fijo.

En Milk Moon solemos inclinarnos por un enfoque responsive, pero a veces lo combinamos. Puede que tengas un elemento que simplemente no funciona en el móvil, así que se oculta en ese dispositivo y se sustituye por un diseño más adaptativo solo para esa sección concreta.

Lightbox

Una pantalla completa envolvente para tus fotos, gráficos y vídeos.

Acordeones

‍El acordeón es un elemento de control gráfico formado por una lista de elementos apilados en vertical, como etiquetas o miniaturas. Un acordeón tiene una finalidad similar a la de una interfaz con pestañas: una lista de elementos en la que exactamente uno se despliega en un panel.

Carga diferida (lazy load)

Significa que las imágenes se cargan cuando aparecen en pantalla, en lugar de cargarse todas las imágenes de una página cuando se abre el sitio por primera vez. Es una de las formas más sencillas de acelerar una página (más sobre por qué importa en nuestro artículo sobre cómo la velocidad de página impulsa el éxito empresarial).

Animación Lottie

Lottie es un formato de archivo de animación que permite a los diseñadores llevar animaciones a cualquier plataforma con la misma facilidad que si fueran recursos estáticos. Son archivos pequeños que funcionan en cualquier dispositivo y se pueden ampliar o reducir sin pixelarse.

Barra de navegación

Una barra de navegación es un elemento de la interfaz de usuario dentro de una página web que contiene enlaces a otras secciones del sitio.

Sistema de gestión de contenidos (CMS)

Un CMS es un sistema en línea con el que los usuarios finales pueden crear, cambiar y editar el contenido del sitio web mediante un editor, de modo que quienes no son desarrolladores puedan editar su contenido con más facilidad.

Paginación

Dividir una lista larga de contenido, como entradas de blog o productos, en páginas numeradas para que los visitantes puedan recorrerla de una página en una. Si quieres que la página se quede donde está en lugar de saltar de vuelta arriba cuando alguien hace clic en “siguiente”, lee más sobre nuestro truco de paginación fluida aquí.

Sliders y carruseles HTML/CSS

Un carrusel es una colección o 'tira de película' de imágenes que se desplazan de forma escalonada o suave alrededor de un eje central. Puede tener una apariencia 2D o una similar a la 3D.

Embeds de HTML

El elemento embed de HTML incrusta contenido externo en el punto indicado del documento. Ese contenido lo proporciona una aplicación externa u otra fuente de contenido interactivo, como un complemento del navegador.

SSL

SSL significa Secure Sockets Layer. Es un protocolo de seguridad estándar que garantiza que todos los datos transmitidos entre el servidor web y el navegador permanezcan cifrados y, por tanto, ilegibles a simple vista. Puedes saber si un sitio web tiene un certificado SSL mirando la dirección web: si la URL empieza por “https”, el sitio es seguro. También verás un símbolo de candado en la barra del navegador, aunque Chrome cambió su candado por un icono de ajustes en 2023, así que lo que veas depende de tu navegador. En sentido estricto, SSL ha sido sustituido por TLS (Transport Layer Security), pero todo el mundo sigue diciendo SSL.

Diseño UI

UI viene de user interface, interfaz de usuario, y el diseño UI trata de las pantallas y los puntos de contacto interactivos que componen un sitio web o una aplicación. Los gestos de deslizar, las barras de desplazamiento y los botones en los que se hace clic forman parte del diseño UI: en esencia, todo lo que compone la interfaz de usuario.

Diseño UX

UX viene de user experience, experiencia de usuario, y el diseño UX trata de ofrecer una experiencia fluida y fácil de usar al usuario final mientras navega por un sitio web o una aplicación. Aquí tienes cómo un sitio web bien diseñado puede impulsar tu negocio.

Wireframe

La estructura de un sitio web. Sin fuentes, colores ni imágenes: esta maquetación es el primer paso para asegurarse de que los cimientos son sólidos antes de añadir el contenido.

Cookies

Una cookie es un pequeño dato que se utiliza para habilitar servicios esenciales y de otro tipo en un sitio web. Las cookies ayudan a los sitios web a recopilar datos sobre cómo interactúan los visitantes con los sitios, productos y servicios. También pueden servir para guardar las preferencias del usuario en un sitio. Al aceptar las cookies, aceptas que una empresa use estas herramientas para publicidad y analítica. ¿Te preguntas qué efecto tiene un banner de cookies en tus cifras? Compartimos las nuestras en el dilema del consentimiento de cookies.

Desplazamiento parallax

Una técnica que consiste en diseñar el fondo de una maquetación web para que se mueva más despacio que el primer plano cuando el usuario se desplaza, creando un efecto similar al 3D.

Favicon

‍Abreviatura de “favourite icon” (icono favorito), es el icono que aparece en la pestaña del navegador de tu sitio web.

CSS

Piensa en el HTML (Hypertext Markup Language) como el esqueleto o la columna vertebral, y en el CSS como el aspecto. El CSS, siglas de Cascading Style Sheets (hojas de estilo en cascada), es la forma más habitual de definir el aspecto de un sitio web. Mientras que el HTML le dice al navegador qué va en la página, el CSS le dice cómo debe presentarse, por ejemplo los colores, las fuentes, la maquetación y más.

SEO

‍SEO, o Search Engine Optimisation (optimización para motores de búsqueda), se refiere por lo general a toda la práctica de acciones dentro y fuera del sitio que conducen a un posicionamiento más alto o más segmentado en una página de resultados de Google o en la de la mayoría de los demás buscadores.‍

Accesibilidad

Se refiere a la práctica de asegurarse de que tu sitio web pueda ser utilizado y consultado por todas las personas, con todas las capacidades y discapacidades.

Texto alternativo (alt text)

El texto alternativo es el texto escrito que aparece en lugar de una imagen en una página web si la imagen no se carga en la pantalla del usuario. También es lo que los lectores de pantalla leen en voz alta a las personas que no pueden ver la imagen, y ayuda a los buscadores a entender lo que muestra.

Preguntas frecuentes

¿Cuáles son los términos de diseño web más habituales?

Los que más nos preguntan son diseño responsive, diseño UI y UX, wireframes, CMS, SSL, SEO, texto alternativo y accesibilidad, y todos están explicados arriba. En pocas palabras: el diseño responsive es cómo se adapta un sitio a distintos tamaños de pantalla, un wireframe es la maquetación básica antes de añadir fuentes, colores o imágenes, un CMS te permite editar tu propio contenido sin un desarrollador, y el SEO es todo lo que haces para posicionarte más arriba en los resultados de búsqueda.

¿Cuál es la diferencia entre el diseño UI y el UX?

El diseño UI es el aspecto y la sensación de las pantallas y los puntos de contacto, como los botones, las barras de desplazamiento y los gestos de deslizar, mientras que el diseño UX es lo fluida y fácil de usar que resulta toda la experiencia mientras alguien se mueve por tu sitio web o aplicación. La UI es lo que la gente toca, la UX es cómo se siente al usarlo.

¿Cuál es la diferencia entre el diseño responsive y el adaptativo?

El diseño responsive es fluido: reconfigura todos los elementos del diseño para que encajen en la pantalla en la que se ve. El diseño adaptativo utiliza varias maquetaciones fijas y elige la que se ajusta al tamaño de pantalla del usuario. En Milk Moon nos inclinamos por el responsive, pero a veces incorporamos un elemento adaptativo cuando una sección simplemente no funciona en el móvil.