Introducción al Diseño Web

6,542 views

Published on

Published in: Design

Introducción al Diseño Web

  1. 1. INTRODUCCIÓN AL DISEÑO DE SITIOS WEB Lcda. Lorena Guerrero Jaramillo loreguerrero2009 gmail.com
  2. 2. DEFINICIÓN Actividad que consiste en la planificación, diseño e implementación de páginas y sitios web. Requiere navegabilidad, interactividad, usabilidad y arquitectura de la información. Interacción de medios como el audio, texto, imagen y video.
  3. 3. Básicamente es realizar undocumento con informaciónhiper-enlazada con otrosdocumentos y asignarle unapresentación para diferentesdispositivos de salida (en unapantalla de computadora, enpapel, teléfono móvil, etc.)
  4. 4. CARACTERÍSTICAS Adaptarse al usuario. Atención a los detalles. Debe cuidar la Estética. Constar dentro de los Estándares Web recomendadas por la W3C. Modelador de la interacción entre usuario y aplicación. Tener Utilidad.
  5. 5. Estándares del Consorcio WorldWide Web (W3C) Organización independiente y neutral, desarrolla estándares relacionados con la Web también conocidos como Recomendaciones. Estándares Web más conocidos: HTML (HyperText Markup Language), XML (eXtensible Markup Language), y CSS (Cascading Style Sheets).
  6. 6. Estándares Web La creación de un estándar Web requiere un proceso controlado, que consta de varias etapas que aseguran la calidad de la especificación.
  7. 7. Etapas del Diseño Web Centrar el diseño en sus Necesita de una usuarios (en oposición a El proceso de Diseño metodología, de centrarlo en las Web Centrado en el técnicas y posibilidades tecnológicas o en Usuario se divide en procedimientos nosotros mismos como varias fases o etapas.ideados para tal fin. diseñadores).
  8. 8. Diagrama de Etapas del Diseño Web 1 2 3 4 5 6
  9. 9. Etapa de Planificación Identificar los objetivos del sitio. Recoger, analizar y ordenar toda la información posible, con el objetivo de tener una base sólida sobre la que poder tomar decisiones de diseño en las siguientes etapas del proceso.
  10. 10. Fase de Diseño Momento del proceso de desarrollo para la toma de decisiones acerca de cómo diseñar o rediseñar, en base siempre al conocimiento obtenido en la etapa de planificación, así como a los problemas de usabilidad descubiertos en etapas de prototipado y evaluación. Incluye las siguientes fases:  Modelado del Usuario.  Diseño Conceptual.  Diseño Visual y definición del Estilo.  Diseño de Contenidos.
  11. 11. Modelado del Usuario El diseñador tendrá en mente para quién diseña, qué espera encontrar el usuario y en qué forma. Definición de tipos de usuarios que representan patrones de conducta, objetivos y necesidades. Basados en información real extraída de la audiencia objetiva del sitio web.
  12. 12. Diseño Conceptual Definir el esquema de organización, funcionamiento y navegación del sitio, realizar la “arquitectura de la información”. Los sitios web son sistemas hipermedia. Otras tareas del diseñador son: Definir sistemas de clasificación para los contenidos mediante Esquemas Exactos o Ambiguos.
  13. 13. Esquemas Exactos Son objetivos. Describen información conocida Para usuarios que saben lo que buscan, Pueden ser:  Alfabéticos  Cronológicos  Geográficos  Numéricos.
  14. 14. Esquemas Ambiguos Perfectos para usuarios que no saben exactamente lo que buscan. Son subjetivos. Útiles para vagar por el sitio. Se clasifican en:  Temáticos  Funcionales  Por Audiencias.
  15. 15. Etapa del Diseño VisualSe especifica el aspecto visual del sitio web: Considerar barrido visual de la página, distribuyendo los Composición de cada tipo de elementos de información ypágina, aspecto y comportamiento navegación según su importancia de los elementos de interacción y en zonas de mayor o menor presentación de elementos jerarquía visual. multimedia.
  16. 16. Resoluciones Medidas Seguras Hay 3 estándares:  640 x 480  800 x 600  1.024 x 768
  17. 17. Elementos Gráficos para el Diseño Banners Ficheros gráficos en formatos GIF, JPG, PNG si son estáticos, o en formato SWF o GIF animado (si son animados lo más frecuente).
  18. 18. Dimensiones de los Banners460 x 680 (banner completo)234 x 60 (medio banner)120 x 240 (banner vertical)125 x 125 (botón cuadrado)392 x 72 (full banner)
  19. 19. Botones Permiten al usuario interactuar con la aplicación, informándole de la acción que se va a producir si pincha sobre ellos.
  20. 20. • Aspecto es el buenmanejo de loscolores, contrasteentre texto y fondopara no dificultar lalectura.•Seleccionarcombinaciones decolores teniendosiempre en cuentalas discapacidadesvisuales.•Mantener unacoherencia y estilocomún entre todaslas páginas.
  21. 21. Diseño de Contenidos El nuevo medio y suscaracterísticas obligan a Permitir una fácil ser concisos, precisos, Seguir una estructura exploración del creativos y piramidal contenido estructurados a la hora de redactar. Un párrafo = una idea Ser conciso y preciso Vocabulario y lenguaje
  22. 22. Prototipado Sirven para evaluar la usabilidad del sitio sin necesidad de esperar a su implementación.  Prototipado de alta fidelidad
  23. 23.  Prototipado de baja fidelidad (Wireframe) El aspecto del prototipo distará bastante del que tenga el sitio web final.
  24. 24. Etapa de Evaluación Hay variedad de modelos para evaluar el sitio web:  Aspectos generales  Identidad e Información  Lenguaje y redacción  Estructura y Navegación  Layout de la página  Búsqueda  Elementos multimedia  Ayuda  Accesibilidad  Control y retroalimentación
  25. 25. Implementación y Lanzamiento Es recomendable utilizar estándares (HTML, XHTML...) para asegurar la futura compatibilidad y escalabilidad del sitio. Separar contenido de estilo, mediante el uso de hojas de estilo (CSS) del lado del cliente y uso de bases de datos del lado del servidor.
  26. 26. Mantenimiento y Seguimiento Un Sitio Web, no es una entidad estática, es un objeto vivo. Requiere de continuos rediseños y mejoras. Estos rediseños deben ser muy sutiles. Los mensajes y opiniones de los usuarios, su comportamiento y uso del sitio, ayudan a detectar problemas no detectados en el desarrollo del sitio.
  27. 27. CONCLUSIONES En este trabajo se ha descrito, a breves rasgos, cómo diseñar sitios web usables a través de la aplicación de técnicas, recomendaciones de diseño, métodos y procedimientos de Diseño Centrado en el Usuario.
  28. 28. ¡GRACIAS! Lcda. Lorena Guerrero Jaramillo loreguerrero2009 gmail.com

×