Elementos gráficos en una web
•
•
•
•

Elementos estructurales: Fondos, contornos, separadores, bloques…
Elementos decorat...
Los formatos
Los formatos de imágenes que cualquier navegador web puede presentar
son: .gif, .jpg y .png:
GIF: Es un forma...
Diferencias básicas entre diseño
impreso y diseño web
“Interactuar en vez de mostrar”

“RGB en vez de CMYK”

“Espacio y en...
La Usabilidad
“Una Web usable es aquella en la que los usuarios pueden
interactuar de la forma más fácil, cómoda, evidente...
DECÁLOGO ÚTIL

La Usabilidad
1.
2.
3.
4.
5.
6.
7.

Situar los elementos importantes siempre a mano.
Los usuarios no siempr...
Las tendencias
PARALLAX

3D STYLE
RESPONSIVE

INFINITE
SCROLL

FLAT DESIGN

HORROR VACUI
SOLID

MINIMALISM
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 i...
La velocidad
Factores que afectan al “peso”
DIMENSIONES (ancho y alto)
RESOLUCIÓN (ppp)
RATIO DE COMPRESIÓN
FORMATO DE ARC...
Diseño basado en GRID
Diseño basado en GRID
Diseño basado en GRID
Diseño basado en GRID
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Conceptos de diseño gráfico para diseño web
Próxima SlideShare
Cargando en…5
×

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

3.393 visualizaciones

Publicado el

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

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
3.393
En SlideShare
0
De insertados
0
Número de insertados
2.085
Acciones
Compartido
0
Descargas
56
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

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

×