conceptos de diseño gráfico para diseño web
DESCRIPTION
Algunos conceptos de diseño gráfico para diseño webTRANSCRIPT
![Page 1: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/1.jpg)
![Page 2: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/2.jpg)
![Page 3: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/3.jpg)
![Page 4: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/4.jpg)
![Page 5: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/5.jpg)
![Page 6: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/6.jpg)
![Page 7: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/7.jpg)
![Page 8: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/8.jpg)
![Page 9: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/9.jpg)
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.
![Page 10: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/10.jpg)
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.
![Page 11: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/11.jpg)
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”
![Page 12: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/12.jpg)
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
![Page 13: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/13.jpg)
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
![Page 14: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/14.jpg)
Las tendencias
FLAT DESIGN
PARALLAX
INFINITESCROLL
3D STYLE
HORROR VACUI
MINIMALISMSOLID
RESPONSIVE
![Page 15: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/15.jpg)
ICONS CRISTAL SOCIAL
STICKERS CLOUD METRO
BUTTONS TABS BANNERS
![Page 16: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/16.jpg)
![Page 17: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/17.jpg)
![Page 18: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/18.jpg)
![Page 19: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/19.jpg)
![Page 20: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/20.jpg)
![Page 21: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/21.jpg)
![Page 22: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/22.jpg)
La velocidad “El peso de las imágenes afecta negativamente al tiempo de carga de
nuestra web.”
“¿Cuánto debe pesar una imagen?.- MENOS”
![Page 23: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/23.jpg)
La velocidad
Factores que afectan al “peso”
DIMENSIONES (ancho y alto)RESOLUCIÓN (ppp)
RATIO DE COMPRESIÓNFORMATO DE ARCHIVO
PROFUNDIDAD DE COLORMETADATOS
![Page 24: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/24.jpg)
Diseño basado en GRID
![Page 25: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/25.jpg)
Diseño basado en GRID
![Page 26: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/26.jpg)
Diseño basado en GRID
![Page 27: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/27.jpg)
Diseño basado en GRID
![Page 28: Conceptos de diseño gráfico para diseño web](https://reader033.vdocuments.site/reader033/viewer/2022050808/54b4e4394a7959e3798b4942/html5/thumbnails/28.jpg)