Glosario de términos de diseño Web avanzado

Conociendo el glosario de términos avanzados de diseño Web podrás expresarte con más seguridad con tu equipo de diseñadores y desarrolladores de páginas Web.

Como emprendedor del Internet, e incluso como desarrollador, puedes sentirte como que te hablan en otro idioma cuando te mencionan ciertos términos de diseño de páginas Web. No creas que eres el único, a todos nos pasa, algunas veces porque no le hemos asignado un nombre a eso que sabemos o porque el término que usamos no es igual que usa el resto del mundo.

Personalmente, soy de los que no suele llamar las cosas por su nombre, quizá porque no las tengo que comunicar muy a menudo; mientras que yo me entienda está todo bien. La cuestión es que tú, como emprendedor que piensa contratar a un equipo de diseño Web, necesitas enterarte de qué te están hablando para que puedas quedar satisfecho con la información que recibes, además de poder facilitar la comunicación entre las partes.

Es por todo lo que te he mencionado anteriormente que te voy a definir el glosario de los términos avanzados de diseño Web que te van a ayudar a expresarte con más seguridad. Como siempre, algunos serán más importantes, pero todos son útiles.

Ancho fijo (Fixed width)

El diseño de ancho fijo es aquel que no contempla ninguna flexibilidad, lo que puede causar problemas de visualización en dispositivos cuyas pantallas son de menor tamaño que el ancho especificado. Actualmente no se usan diseños de ancho fijo, o por lo menos no es recomendable.

Lo que sí es común ver son las relaciones de las anchuras de los distintos elementos para que se mantenga un diseño proporcional. Por ejemplo, puedo decidir que el área de contenido de mi página Web sea de un tercio del ancho total de la pantalla y el resto será reservado para un área lateral; esto corresponde a otro estilo de diseño.

Resumiendo, el diseño de ancho fijo, es eso, aquel que no contempla variaciones, por ejemplo, el ancho es 500 px, sin opción a cambios.

Diseño fluido (Fluid layout)

Fíjate que aquí se aplica el principio de la proporcionalidad del que te hablaba anteriormente. Los elementos son diseñados de tal manera que ocupen una porción del ancho total de la pantalla, incluso se puede poner un límite máximo de pantalla.

Este es un diseño que trabaja netamente en porcentajes y suele ser muy útil porque se adapta a todos los tipos de pantallas.

Algo que debes considerar con este tipo de diseño, o configuración, es que, en pantallas muy pequeñas, los elementos internos, como botones, imágenes o textos, pueden ser muy pequeños, afectando así la experiencia del usuario.

Este tipo de diseño no contempla una variación de los elementos (ni de posición, ni de forma, ni de existencia, para algún tamaño en específico), es decir, se diseña una versión de escritorio que se adapta a los distintos tamaños de pantallas sin cambiar su disposición; te lo digo porque no debes confundirlo con los diseños responsivos.

Diseño responsivo (Responsive layout)

El diseño Web Responsive o Adaptive nace a partir del diseño fluido, pero introduce una variante muy útil. Ya te había dicho que con el diseño fluido, la página se veía igual en todos los dispositivos y que muchos elementos podrían no ser accesibles.

Seguramente navegaste en tu móvil por páginas fluidas, y necesitabas hacer zoom para poder clicar el menú u otro elemento, con el diseño responsivo se elimina ese problema.

La idea del responsivo es la misma que del diseño fluido, es decir, es porcentual y se adapta según la pantalla, solo que con éste, puedes cambiar cómo se ven los elementos según un rango de tamaño de pantalla en particular. En este caso si es común ver variaciones de disposición y apariencia.

Para dispositivos con pantallas pequeñas, como los móviles, el diseño responsivo puede poner en uso una distribución sencilla, por lo general más simple, a fin de que los elementos sean más accesibles.

Sé que te has fijado que las versiones móviles no son exactamente iguales que las versiones de escritorio, esas son versiones responsivas.

Te pongo un ejemplo muy común, en blogs de WordPress donde aparece una barra lateral en la versión de escritorio, ésta pasa al final de la página (en versiones responsivas para móviles) para que el contenido principal ocupe el ancho de la pantalla; el menú también cambia para ser más accesible.

Fíjate que el diseño responsivo se ha presentado como la mejor alternativa para ofrecer una buena experiencia en dispositivos móviles, la otra opción sería crear una versión móvil de nuestra Web, lo que terminaría siendo como si tuviésemos dos.

Resolución de imágenes

Este es un término que puede ser conocido por ti. La resolución no es más que esas especificaciones de alto por ancho que muestran las imágenes, por ejemplo, 200x150px. Mientras mayor sean los números de la resolución, más nítida se verá la imagen en grandes tamaños. Sé que te has dado cuenta que cuando alargas una imagen suele verse borrosa o pixelada, eso es porque no tiene una buena resolución.

Evidentemente, la resolución tiene un límite donde la imagen pierde la calidad, por muy buena que sea la resolución. Por ejemplo, una imagen de 3000x3000px puede verse muy bien en ordenadores, pero si la imprimes para un banner podría verse pixelada.

Es importante que sepas esto, pues la selección de la resolución adecuada puede ayudarte a ahorrar tamaño en las imágenes y así lograr que carguen más rápidamente.

Interface de usuario (UI)

La interface de usuarios es el conjunto de elementos que ve la persona que visita tu página Web, desde los colores hasta los botones y el contenido. La idea es que la interface sea amigable con el usuario, incluso que sea atractiva y que invite a navegar. De la necesidad de una buena interface es que se genera la importancia del trabajo de los diseñadores Web y para cualquier empresa de diseño y desarrollo de páginas web.

Experiencia de usuario (UX)

La experiencia del usuario es un concepto que ha ido ganando relevancia en los últimos años. Ya no se trata de servir la información, sino de que ésta sea lo más agradable para el usuario. Esta experiencia depende de muchas cosas, no solamente del diseño, por ejemplo, depende de la velocidad de carga del sitio y de la calidad de la información.

Diseño esqueumórfico (Skeuomophism design)

Este diseño apuesta por el falso realismo, es decir, está constituido por una serie de elementos que cuentan con sombras, colores y texturas que dan la sensación de realidad. En términos más sencillos, este tipo de diseño suele ser más sobrecargado que el diseño plano o sencillo, muchas veces las páginas suelen pesar más, pero también causan un mayor impacto visual al usuario.

Diseño plano o sencillo (Flat design)

El diseño plano o sencillo no ataca el impacto visual, sino más bien es diseño pensado en la funcionalidad. Actualmente el Internet está tendiendo hacia el diseño más sencillo, y aunque eso es bueno porque las páginas cargan más rápidamente, muchos piensan que se pierden oportunidades de diferenciarse del resto.

El uso de un diseño sobre el otros siempre va a depender del usuario al que esté dirigido, quizá para un público más joven, los diseños que apuestan al falso realismo sea más exitosos, mientras que para adultos, un diseño sencillo es la mejor apuesta; también va a depender de los objetivos del dueño de la página.

CSS

Hojas de estilo en cascada, así traduce en español, no es más que un documento que incluye las reglas de estilo de un sitio Web. Cuando hablo de reglas de estilo me refiero a cómo se ven los elementos que conforman cada página, por ejemplo, el color de fondo, el tipo de fuente, incluso contempla el comportamiento de elementos tras acciones específicas.

Por lo general, cuando clicas un botón y éste despliega un menú, es porque está declarado de esa forma en el CSS.

Metadatos y Metaetiquetas

Son elementos que se usan para brindar información variada sobre un sitio Web. En las metaetiquetas puedes colocar información acerca de todo, desde la descripción del sitio Web, hasta el idioma en que está escrito el contenido.

Evidentemente, los metadatos son la información contenida en las metaetiquetas. Estos elementos, las metaetiquetas, son muy útiles para la optimización del sitio Web, pues es la primera información que lee el motor de búsqueda cuando rastrea el sitio.

Mouseover

Es un tipo de condición usada en lenguajes de programación como JavaScript. Básicamente, cuando el programador web utiliza esta condición Mouseover, le estamos dando instrucciones al elemento a que reaccione de una manera particular cuando el puntero de mouse esta sobre él.

Así como existe mouseover, podemos programar acciones cuando el mouse ya no está sobre el elemento o cuando clicamos dicho elemento. Por lo general, a nivel de diseño, se usa el Mouseover para cambiar una condición estética del elemento, por ejemplo, su color o su forma.

Dither

Es un proceso que se usa en edición de imagen y audio digital en el cual se agrega ruido aleatorio para evitar que los elementos, audio o imagen, se distorsione ante alguna condición establecida. Por ejemplo, con este proceso se puede lograr que una imagen se adapte mejor cuando esta junto con otra imagen con una paleta de color más limitada.

Favicon

Es la imagen que aparece en la pestaña del navegador de tu página Web. Según el sistema con que trabajes, será posible cargar un Favicon en formato .jpeg, .png, .gif o .ico.

Navegación Breadcrumb

Es un tipo de navegación que define un camino lógico para la exploración de un sitio Web. La idea con este tipo de navegación es facilitar la experiencia del usuario al proveer un camino que pueda recordar. De manera general, se va de lo más general, a lo más específico, por ejemplo, pasas de productos a una categoría de productos y de allí a los artículos en esa categoría.

Menú hamburguesa

¿Has visto el icono de las tres líneas horizontales en los menús de las versiones móviles de páginas Web? Seguro que sí, a eso se refiere la navegación hamburguesa. Simplemente es un elemento que guarda en su interior otros elementos para que el diseño sea mucho más práctico en pantallas pequeñas.

Al no estar expuesto todo el menú, el usuario puede dar con la información en la página; si quiere navegar otras páginas dentro del sitio, solo debe desplegar el menú.

JQuery slider

Es un elemento que te permite mostrar múltiples imágenes en un solo espacio; las imágenes se muestran por transición entre ellas. Seguramente lo has visto en páginas de inicio, pues es el lugar típico para este tipo de banner rotatorio. JQuery es el lenguaje en que son programadas las acciones de transición de las imágenes

Mapa de sitio (Sitemap)

Un mapa de sitio no es más que un documento que indica cómo está estructurado un sitio Web. Su función es hacer más sencillo el rastreo del sitio.

CDN

Una red de distribución de contenido no es más que un servicio que te permite alojar una versión de tu sitio Web en varios servidores para mejorar la velocidad de carga de tu página Web. De manera sencilla, se almacena la información en estos servidores y, dependido de dónde se haga la consulta, se redirige la petición al servidor más cercano, esto ahorra recursos en el servidor original, porque disminuye el número de solicitudes que se hacen en un mismo periodo de tiempo.

Tema padre/ tema hijo (Parente theme/ child theme)

Un tema hijo no es más que aquel que hereda ciertas características de un tema padre, como podría ser el theme Divi de WordPress. Por ende, el tema padre es aquel que da ciertas características a sus temas hijos. Se usan con la finalidad de reciclar código y hacer el trabajo de diseño y programación más sencillo.

Código de color hexadecimal (HEX color code)

Es un tipo de nomenclatura para definir los colores. Está constituido por 6 dígitos que pueden ser letras o números, o una combinación de ellos, siendo ffffff la representación del blanco y 92960 la representación del negro.

Código de color RGB

Este código muestra la proporción de rojo, verde y azul, en el color que estamos usando, entendiendo que un color es el resultado de la mezcla de los primeros tres. La ausencia de color está representada por el 0 y la presencia total del mismo se representa con 255, así, el color blanco seria RGB (255, 255,255)

Kerning

Se refiere al espacio entre letras en una misma palabra; definirlo es especialmente útil para lograr que el contenido logre una mejor estética y que sea más agradable para la lectura.

Above the fold

Representa la parte visible de una página Web.

Below the fold

Representa la parte que es invisible cuando se carga una página Web, es decir, aquella que se comienza a ver cuándo bajamos.

Si quieres saber más sobre la terminología de las páginas web, en otro artículo compartimos contigo el glosario de WordPress, para profundizar aún más en este famoso gestor de contenidos.