Design Words – Términos básicos de diseño web: cuándo y cómo emplearlos

En nuestro día a día en Góbalo estamos muy habituados a emplear términos técnicos que, aunque para nosotros ya resultan tan familiares como la taza de café que siempre nos acompaña, a veces los usamos sin ser conscientes de que no todo el mundo (especialmente clientes de la agencia u otros departamentos) tiene por qué conocerlos, o al menos no en exactitud. Por este motivo y para tratar de resolver ciertas dudas recurrentes, os dejamos un pequeño repositorio con conceptos tan básicos como habituales en el día a día del diseñador gráfico/web. ¡Esperamos que os resulten de utilidad!

Formatos:

• Estáticos (JPEG, PNG): para imágenes, no se pueden editar con facilidad. JPEG tiene menor calidad que PNG, que también puede ser transparente.

• Dinámicos (GIF, MOV, AVI, MP4, HTML5): para creatividades animadas. MOV, AVI y MP4 son formatos de vídeo; GIF está limitado en colores y calidad, pero por su peso es óptimo para Newsletters y Redes Sociales; HTML5 no debería tratarse como un formato dinámico, aunque se utiliza para la confección de banners animados.

• Vectorizados (AI, EPS, SVG): están compuestos por vectores y son editables, ideales para logotipos, pueden aumentarse de tamaño sin deformarse. El SVG por su bajo peso es ideal para utilizar en webs.

Términos web:

• Template:

• Literalmente es plantilla.
• Son las distintas páginas que forman una web.
• Pueden ser de diferentes formatos: html, php, twig, etc.
• También llamamos así a los Themes de WordPress

• CSS, StyleSheet u hoja de estilos:
  • Cambian la apariencia de la web mediante su sistema de clases y atributos.
  • Normalmente hay varias en función de la resolución de la pantalla.

Estructura:

Head:

• Es la parte superior del código.
• Contiene elementos como etiquetas meta, códigos de Analytics y hojas de estilos.
• Suele ser común a todas las páginas del sitio.
• No confundir con header.

Footer:

• Parte inferior del código y de la web.
• Suele alojar los scripts y los píxeles de seguimiento.
• Tiene contenido visual.

Body:

• Parte que alberga todo el contenido de la web.

Recursos web:

• Header: Aparece en la parte superior de la web y suele contener logotipo, menú, Redes Sociales, etc.
• Lightbox: Enlace hacia un contenido que se abre en la misma página dejando el resto en un segundo plano, muy empleado en galerías de imágenes.
• Iframe: Etiqueta html por la cual se embebe contenido externo a la página. Penaliza en SEO, por lo que es recomendable no usarlo para contenido. Se usa habitualmente para mapas y vídeos.
• Slider: también llamado carrusel o slideshow, es una forma de transición y animación de imágenes.

Términos generales:

• Arte final: En piezas offline, es la creatividad que finalmente se entrega para su impresión. Deben estar en CMYK, con 300 ppp como resolución recomendable.
• Render: Imagen que se genera a través de un programa específico de 3D o vídeo, mediante el cálculo de iluminación partiendo de un modelo 3D.