Elementos gráficos en una web• Elementos estructurales: Fondos, contornos, separadores, bloques…• Elementos decorativos: Imágenes de acompañamiento.• Elementos de contenido: El objeto que estamos mostrando o del que hablamos.• Elementos de navegación: Objetos que sirven para interactuar con el usuario.

Los formatosLos formatos de imágenes que cualquier navegador web puede presentar son: .gif, .jpg y .png:

GIF: Es un formato que conserva cada pixel de la imagen original, muy eficiente para gráficos sencillos con pocos colores. Permite entrelazar la imagen, es decir, presentarla con mayor detalle a medida que el navegador la descargue. Permite crear animaciones y transparencias del 100%.

PNG: Es un formato similar al GIF pero no permite crear animaciones. En cambio permite degradados de transparencias.

JPG: Excelente para trabajar con fotografías de muchos colores y texturas, porque mantiene la calidad percibida con pesos de imagen mucho más bajos. No permite transparencias ni animaciones.

Diferencias básicas entre diseño impreso y diseño web

“Interactuar en vez de mostrar”

“Espacio y entorno indefinido en vez de definido”

“Pixeles en vez de pulgadas y centímetros”

“Archivos pequeños en vez de grandes”

“RGB en vez de CMYK”

“Posible editar después de publicar”

La Usabilidad

“Una Web usable es aquella en la que los usuarios pueden interactuar de la forma más fácil, cómoda, evidente y segura posible. Una web

usable denota calidad, genera confianza y nos diferencia positivamente de otras alternativas.”

• Crear una jerarquía visual clara en cada página• Dar el control al usuario• Facilitar la interacción• Aprovechar las convenciones• Simplificar

La Usabilidad

1. Situar los elementos importantes siempre a mano.2. Los usuarios no siempre entran por la página principal.3. Dejar claro qué elementos son enlaces y cuáles no.4. Añadir un buscador o un mapa del sitio.5. Enlazar a cualquier información en menos de 3 clicks.6. Mantener una coherencia en el diseño de toda la página.7. Seguir las reglas básicas del buen diseño: selección de colores, tipografías,

regla de los tercios…8. No distraer el usuario con excesivas animaciones o elementos que parpadean.9. Intentar que los contenidos no tengan faltas de ortografía.10. No abrir nuevas ventanas del navegador innecesariamente.

DEC

ÁLO

GO

ÚTI

L

Las tendencias

FLAT DESIGN

PARALLAX

INFINITESCROLL

3D STYLE

HORROR VACUI

MINIMALISMSOLID

RESPONSIVE

ICONS CRISTAL SOCIAL

STICKERS CLOUD METRO

BUTTONS TABS BANNERS

La velocidad “El peso de las imágenes afecta negativamente al tiempo de carga de

nuestra web.”

“¿Cuánto debe pesar una imagen?.- MENOS”

La velocidad

Factores que afectan al “peso”

DIMENSIONES (ancho y alto)RESOLUCIÓN (ppp)

RATIO DE COMPRESIÓNFORMATO DE ARCHIVO

PROFUNDIDAD DE COLORMETADATOS

Diseño basado en GRID

Diseño basado en GRID

Diseño basado en GRID

Diseño basado en GRID