Diseño visual para web

5,862 views
5,605 views

Published on

Aspectos de diseño visual aplicados a web

Published in: Design, Technology, Business
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total views
5,862
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Diseño visual para web

  1. 1. Diseño Visual Luis Carlos Aceves G
  2. 2. Objetivos <ul><li>El punto inicial de contacto con cualquier usuario </li></ul><ul><li>Transmitir la identidad e imagen visual de la organización </li></ul><ul><li>Permitir una coherencia y estilo en todas las páginas del portal </li></ul><ul><li>Crear una primera experiencia positiva y agradable para el usuario (look & feel) </li></ul>
  3. 3. Características generales <ul><li>Es la forma en que ciertos aspectos importantes de un sitio son presentados , no solo son aspectos estéticos </li></ul><ul><li>Los aspectos visuales deben garantizar que cualquier usuario comprenda la oferta del sitio </li></ul><ul><li>El uso de hojas de estilo (Cascade Style Sheets) se presenta como una alternativa para asegurar un diseño estandarizado </li></ul>
  4. 4. Homepage – Página de inicio <ul><li>Transmitir la identidad </li></ul><ul><li>Responder inmediatamente qué hace la organización responsable del sitio </li></ul><ul><li>Aspectos a cuidar: </li></ul><ul><ul><li>La primera impresión </li></ul></ul><ul><ul><li>Resolución y formato </li></ul></ul>
  5. 5. Manejo de sistema visual y retícula de las páginas <ul><li>Un sistema visual es: </li></ul><ul><ul><li>una forma para mantener la consistencia en el manejo de elementos gráficos en todas las páginas </li></ul></ul><ul><ul><li>algo que asegura la estandarización en la presentación y ubicación de contenido, secciones y funcionalidades </li></ul></ul>
  6. 6. Manejo de sistema visual y retícula de las páginas <ul><li>La retícula de las páginas ( page layout ) es: </li></ul><ul><ul><li>la estructura visual en que la información será presentada en las páginas </li></ul></ul><ul><ul><li>una representación gráfica de las secciones y jerarquías </li></ul></ul>
  7. 7. Elementos multimedia <ul><li>Animaciones, audio y videos permiten crear un sitio más dinámico </li></ul><ul><li>Ayudan a comunicar de una forma alternativa cierta información , facilitando su entendimiento </li></ul><ul><li>Aspectos a cuidar: </li></ul><ul><ul><li>Información sobre los elementos multimedia </li></ul></ul><ul><ul><li>Control sobre el uso de contenido multimedia </li></ul></ul>
  8. 8. Manejo de imágenes <ul><li>A diferencia de las imágenes impresas, las imágenes utilizadas en la web son fáciles de integrar </li></ul><ul><li>Las imágenes animadas pueden hacer más lenta la descarga de la página </li></ul><ul><li>No incluir textos como parte de la imagen pues no será accesible </li></ul>
  9. 9. Manejo de imágenes <ul><li>Deben cumplir con alguno de los siguientes propósitos: </li></ul><ul><ul><li>proveer información </li></ul></ul><ul><ul><li>establecer algún contexto </li></ul></ul><ul><ul><li>facilitar el aprendizaje </li></ul></ul><ul><ul><li>proporcionar alguna indicación </li></ul></ul><ul><ul><li>establecer alguna identidad </li></ul></ul><ul><ul><li>mejorar el look and feel </li></ul></ul>
  10. 10. Manejo de imágenes <ul><li>Aspectos a cuidar: </li></ul><ul><ul><li>Uso de imágenes con intención </li></ul></ul><ul><ul><li>Iconografía </li></ul></ul><ul><ul><li>Imágenes de acciones universales </li></ul></ul><ul><ul><li>Texto descriptivo a través de atributo ALT </li></ul></ul><ul><ul><li>Tamaño y formato de las imágenes </li></ul></ul><ul><ul><li>Thumbnails </li></ul></ul>
  11. 11. Estándares de diseño web <ul><li>Estándares de estructura : </li></ul><ul><li>se refieren a la correcta construcción de páginas web </li></ul><ul><li>• Estándares de presentación : </li></ul><ul><li>están relacionados con los lineamientos de formato y diseño visual </li></ul><ul><li>• Estándares de comportamiento : </li></ul><ul><li>están relacionados con lo que se desea que haga la página de forma dinámica </li></ul>
  12. 12. Manejo de enlaces <ul><li>Elementos para identificar dónde debe hacer clic para llegar a determinada información o servicio </li></ul><ul><li>Tipos: </li></ul><ul><ul><li>Embebidos </li></ul></ul><ul><ul><li>Estructurales </li></ul></ul><ul><ul><li>Asociativos </li></ul></ul><ul><li>Los enlaces deben ser descriptivos para que los usuarios tengan claro qué ocurrirá al hacer clic </li></ul><ul><li>La presentación de los enlaces puede ser definida en los CSS </li></ul>
  13. 13. Manejo de enlaces <ul><li>Aspectos a cuidar: </li></ul><ul><ul><li>La cantidad de enlaces a presentar </li></ul></ul><ul><ul><li>Hacer obvio lo que es sensible a un clic (uso de color, subrayado, uso de viñetas o el diseño de botón) </li></ul></ul><ul><ul><li>Diferenciar las ligas visitadas y las no visitadas </li></ul></ul><ul><ul><li>Texto descriptivo para los enlaces </li></ul></ul>
  14. 14. Tipografía y texto <ul><li>Medios impresos: </li></ul><ul><li>Entre 10 y 12 puntos de resolución, en color oscuro y con un fondo claro </li></ul><ul><li>Web: </li></ul><ul><li>No depende completamente del diseñador </li></ul><ul><li>Es difícil leer en la web </li></ul><ul><li>La definición de tipografías se puede hacer en los CSS </li></ul>
  15. 15. Tipografía y texto <ul><li>Aspectos a cuidar: </li></ul><ul><ul><li>Tipografías “sin serif” </li></ul></ul><ul><ul><li>Al menos de 10 puntos </li></ul></ul><ul><ul><li>Entre más angosta sea la columna de lectura será más legible </li></ul></ul><ul><ul><li>Es muy útil contar con viñetas, textos resaltados y párrafos cortos para no saturar al usuario </li></ul></ul><ul><ul><li>Crear una versión para impresión </li></ul></ul>
  16. 16. Color <ul><li>Más que componente decorativo ayudan a resaltar elementos que tengan relevancia en el sitio </li></ul><ul><li>Debe ser estéticamente agradable a los ojos y el contraste entre ellos debe ser claro para dar jerarquía a los elementos </li></ul>
  17. 17. Color <ul><li>Aspectos a cuidar: </li></ul><ul><ul><li>Manejo en el contraste en textos para ayudar a la legibilidad </li></ul></ul><ul><ul><li>Fondo oscuro, la letra debe ser clara y viceversa </li></ul></ul><ul><ul><li>Evitar: </li></ul></ul><ul><ul><ul><li>Textos en gris </li></ul></ul></ul><ul><ul><ul><li>Marcas de agua </li></ul></ul></ul><ul><ul><ul><li>Texturas bajo textos </li></ul></ul></ul>

×