Conceptos de diseño gráfico para diseño web

2,991
-1

Published on

Algunos conceptos de diseño gráfico para diseño web

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,991
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
51
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Conceptos de diseño gráfico para diseño web

  1. 1. 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.
  2. 2. 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.
  3. 3. 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”
  4. 4. 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
  5. 5. 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.
  6. 6. Las tendencias PARALLAX 3D STYLE RESPONSIVE INFINITE SCROLL FLAT DESIGN HORROR VACUI SOLID MINIMALISM
  7. 7. ICONS CRISTAL SOCIAL STICKERS CLOUD METRO BUTTONS TABS BANNERS
  8. 8. La velocidad “El peso de las imágenes afecta negativamente al tiempo de carga de nuestra web.” “¿Cuánto debe pesar una imagen?. - MENOS”
  9. 9. 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
  10. 10. Diseño basado en GRID
  11. 11. Diseño basado en GRID
  12. 12. Diseño basado en GRID
  13. 13. Diseño basado en GRID

×