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

Diseño Web
17 Agosto, 2017

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.