1. INTRODUCCIÓN
AL DISEÑO DE
SITIOS WEB
Lcda. Lorena Guerrero Jaramillo
loreguerrero2009 gmail.com
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. Básicamente es realizar un
documento con información
hiper-enlazada con otros
documentos y asignarle una
presentación para diferentes
dispositivos de salida (en una
pantalla de computadora, en
papel, teléfono móvil, etc.)
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. Estándares del Consorcio World
Wide 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. 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. 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).
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. 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. 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. 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. 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. 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. Etapa del Diseño Visual
Se 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 y
pá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. Resoluciones Medidas Seguras
Hay 3 estándares:
640 x 480
800 x 600
1.024 x 768
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. 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. 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. • Aspecto es el buen
manejo de los
colores, contraste
entre texto y fondo
para no dificultar la
lectura.
•Seleccionar
combinaciones de
colores teniendo
siempre en cuenta
las discapacidades
visuales.
•Mantener una
coherencia y estilo
común entre todas
las páginas.
21. Diseño de Contenidos
El nuevo medio y sus
caracterí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. Prototipado
Sirven para evaluar la usabilidad del sitio sin
necesidad de esperar a su implementación.
Prototipado de alta fidelidad
23. Prototipado de baja fidelidad
(Wireframe)
El aspecto del prototipo distará bastante del que
tenga el sitio web final.
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. 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. 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. 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.
