Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Diseño visual para web

6,602 views

Published on

Aspectos de diseño visual aplicados a web

Published in: Design, Technology, Business

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>

×