Este documento describe los diferentes elementos gráficos que se pueden incluir en una página web, como elementos estructurales, decorativos, de contenido y de navegación. También explica los principales formatos de imágenes que admiten los navegadores (.gif, .jpg y .png) y sus características. Por último, resume las diferencias básicas entre el diseño impreso y el diseño web, así como principios importantes de usabilidad para el diseño de páginas.

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

10. Los formatos
Los 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.

11. Diferencias básicas entre diseño
impreso y diseño web
“Interactuar en vez de mostrar”
“RGB en vez de CMYK”
“Espacio y entorno indefinido en vez de definido”
“Pixeles en vez de pulgadas y centímetros”
“Archivos pequeños en vez de grandes”
“Posible editar después de publicar”

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

13. DECÁLOGO ÚTIL
La Usabilidad
1.
2.
3.
4.
5.
6.
7.
Situar los elementos importantes siempre a mano.
Los usuarios no siempre entran por la página principal.
Dejar claro qué elementos son enlaces y cuáles no.
Añadir un buscador o un mapa del sitio.
Enlazar a cualquier información en menos de 3 clicks.
Mantener una coherencia en el diseño de toda la página.
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.

14. Las tendencias
PARALLAX
3D STYLE
RESPONSIVE
INFINITE
SCROLL
FLAT DESIGN
HORROR VACUI
SOLID
MINIMALISM

15. ICONS
CRISTAL
SOCIAL
STICKERS
CLOUD
METRO
BUTTONS
TABS
BANNERS

22. La velocidad
“El peso de las imágenes afecta
negativamente al tiempo de carga de
nuestra web.”
“¿Cuánto debe pesar una imagen?.
- MENOS”

23. La velocidad
Factores que afectan al “peso”
DIMENSIONES (ancho y alto)
RESOLUCIÓN (ppp)
RATIO DE COMPRESIÓN
FORMATO DE ARCHIVO
PROFUNDIDAD DE COLOR
METADATOS

24. Diseño basado en GRID

25. Diseño basado en GRID

26. Diseño basado en GRID

27. Diseño basado en GRID