20 términos para entender el diseño web desde su etapa visual

Publicado el

captura-33

Antes de empezar a mencionar términos y significados es importante destacar que el diseño web es una disciplina que permite desarrollar nuevas y diferentes experiencias informativas y de navegabilidad, además, es un proceso en el que influyen varios profesionales, como diseñadores visuales, diseñadores de UX, diseñadores de interfaces y desarrolladores Front End.

Como podrás darte cuenta el diseño web es un proceso extenso y multidisciplinario, sin embargo, en este post nos centraremos únicamente en la etapa visual del diseño web; conoce los términos más usados en esta área, actualí­zate e incorpóralos a tu vocabulario profesional, de paso no quedarás en ¿? cuando estés en medio de diseñadores.

Gestalt : Es una palabra alemana que traduce forma, en diseño podrí­a entenderse como un elemento que sin estar finalizado tiende a ser percibido en su totalidad. Ejemplo: Los guantes, zapatos y pantalón de Mickey Mouse, aun sin estar presente el personaje estos elementos son asociados instantáneamente con el famoso ratón.

Espacio negativo: Espacios vací­os dentro de piezas de diseño, algunos diseñadores utilizan este espacio para incorporar mensajes o elementos ocultos. Ejemplo: el logo de Carrefour con una C en el centro; el icono del Tour de Francia en su R simula un ciclista; Amazon en su logo marca una lí­nea que parece una sonrisa, además indica que se encuentra cualquier producto de la A a la Z.

RGB (Red, green, blue): Modelo cromático digital que representa a partir de la mezcla del rojo, verde y azul otros colores.

GIF (Graphics Format Interchange, formato de intercambio de gráficos): Formato gráfico usado principalmente para diseños en la web.

SVG (Scalable Vector Graphics): Es un formato gráfico que se basa en el manejo de vectores.

Anti-aliasing: Técnica usada para suavizar elementos creados en formato rasterizado.

Translúcido: Efecto que permite ver parte de la imagen de fondo (sin ser visualmente claro las formas y colores) sobre la capa superior del diseño.

Motif: Patrones decorativos que integran un diseño (espirales, flores, lí­neas, figuras geométricas, etc.).
 
Skeuomorphic: Tendencia que hace que los elementos de un diseño se vean tan reales como en el plano fí­sico.

Interfaz de usuario (User Interface): Superficie de contacto fí­sico y cognitivo por el cual el usuario se comunica con la máquina.

Usabilidad (Usability): Es la facilidad con que las personas pueden utilizar una interfaz web, la cual tiene como finalidad alcanzar un objetivo concreto.

Diseño de interacción : Diseño encargado de definir cómo se utilizan los sitios web y aplicaciones, tiene como finalidad mejorar la experiencia de los usuarios así­ como facilitar el cumplimiento de los objetivos trazados.

Favicon: Imagen que acompaña la url de un sitio web en la barra de direcciones, su tamaño es de 16 por 16 pí­xeles y se usa para generar recordación de marca, además, si se tienen varias pestañas abiertas permite identificar cada una fácilmente.

Wireframes: Estructuras que jerarquizan el contenido que hará parte de un sitio web, en ellas se muestran la ubicación de cada uno de los componentes y el funcionamiento de los elementos en general.

Style Tiles : Proceso visual de diseño web creado por Samantha Warren, el cual se divide en cuatro etapas: escuchar lo que el cliente quiere, interpretar lo que el cliente dice, definir un lenguaje visual e interactuar con diferentes estilos de diseño para hacer cambios.

Sprites: Conjunto de imágenes agrupadas en una sola imagen.

Header: Cabezote de las páginas web donde se ubica el menú, el logo, el buscador y algunos datos sobre información de la empresa.

Footer: Parte final del sitio web donde se encuentran generalmente elementos como botones de redes sociales, links de navegación, información de contacto, entre otros.

Responsive Design: Técnica de diseño web que se implementa en sitios web y aplicaciones con el propósito de que se adapten a la pantalla de cualquier dispositivo desde donde el usuario navegue.

Parallax: Técnica de Scrolling que altera las velocidades de algunos de los elementos del primer plano para crear un efecto de profundidad en el sitio web.
 

Si crees que falta algún término en este glosario de diseño web añádelo en los comentarios, si te interesa profundizar un poco más puedes encontrar más términos y técnicas en el glosario de diseño gráfico. Por último, recuerda no se trata de leer como una maquinita, se trata de incluir en la rutina todo el conocimiento adquirido, al final del dí­a es lo único que permanece.

Artí­culo escrito por Johant Rodrí­guez, de designplus.co para WWWhatsnew.com | imagen de shutterstock

3 comentarios en “20 términos para entender el diseño web desde su etapa visual

  1. Genial el artí­culo. Especí­fico donde los haya. algo muy académico incluso para un blog. Gracias por el recordatorio para los que nos dedicamos a esto en profundidad. Saludos.