View
2.419
Download
2
Category
Preview:
DESCRIPTION
Algunos conceptos de diseño gráfico para diseño web
Citation preview
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
Recommended