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:
- 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.