DISEÑO WEB

Ing. Lewis Valenzuela Alegría

DEFINICIÓN
 Actividad que consiste en la planificación, diseño
e implementación de paginas y sitios web.
 Requiere navegabilidad, interactividad,
usabilidad y arquitectura de la información.
 Interacción de medios como el audio, texto,
imagen y video.
DEFINICIÓN
 Navegabilidad: Para lograr este objetivo, un sitio web debe proporcionar un
conjunto de recursos y estrategias de navegación diseñados para conseguir un
resultado óptimo en la localización de la información y en la orientación para el
usuario.
 Usabilidad: se refiere a la facilidad con que las personas pueden utilizar una
herramienta particular o cualquier otro objeto fabricado por humanos con el fin
de alcanzar un objetivo concreto.
 Interactividad: se refiere a la relación de un mensaje con una serie de
elementos previos.
 Arquitectura de la información: es el análisis, organización, disposición y
estructuración de la información.
ES DECIR:
 Básicamente es
realizar un
documento con
información híper
enlazada con otros
documentos y
asignarle una
presentación para
diferentes
dispositivos de
salida (en una
pantalla de
computadora, en
teléfono móvil, etc.)
CARACTERÍSTICAS
 Adaptarse al usuario.
 Atención a los detalles.

 Debe cuidar la estética.

 Cumplir con los estándares

web recomendados por la
w3c.
 Modelador de la interacción
entre usuario y aplicación.
 Tener utilidad.
ESTÁNDARES DEL WORLD WIDE WEB
W3C
 Organización independiente y neutral, desarrolla estándares
relacionados con la web también conocidos como recomendaciones.
 Estándares web mas conocidos: HTML (lenguaje de marcas de
hipertexto), XML (lenguaje de marcas extensible) y CSS (hoja de
estilo en cascada)
 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.
ETAPAS DEL DISEÑO WEB

Centrar el diseño en
Necesita de una sus usuarios (en
El proceso de diseño
metodología, de oposición a centrarlo
web centrado en el
técnicas y en las posibilidades
usuario se divide en
procedimientos tecnológicas o en
varias fases o etapas.
ideados para tal fin. nosotros mismos como
diseñadores)
 DIAGRAMA DE ETAPAS DEL DISEÑO WEB

 Etapa de planificación:

 Identificar los objetivos

del proyecto.
 Recoger, analizar y
ordenar toda la
información posible, con
el objetivo de tener una
base solida sobre la cual
poder tomar decisiones
de diseño en las
siguientes etapas.
 DIAGRAMA DE ETAPAS DEL DISEÑO WEB

 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 sub fases de
modelado del usuario,
diseño conceptual, diseño
visual, definicion de estilo,
y diseño de contenidos
MODELADO DEL USUARIO
 El diseñador tendrá en
mente para quien diseña,
que espera encontrar el
usuario y en que 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.
DISEÑO CONCEPTUAL
 Definir el esquema de la organización, funcionamiento y
navegación del sitio, realizar la “arquitectura de la
información”
 Otras tareas del diseñador son definir sistemas de
clasificación para los contenidos mediante esquemas
exactos o ambiguos.
ESQUEMAS EXACTOS Y AMBIGUOS
 Exactos:  Ambiguos:
 Son objetivos  Perfecto para usuarios
 Describen información que no saben lo que
conocida buscan.
 Para usuarios que  Son subjetivos.
saben lo que buscan,  Útiles para vagar por
pueden ser: el sitio.
alfabéticos,  Se clasifican en
cronológicos, temáticos, funcionales
geográficos, o por audiencias.
numéricos.
 ETAPA DEL DISEÑO VISUAL
Se especifica el aspecto visual del
sitio web:
Composición de cada tipo de
pagina, aspecto y
comportamiento de los elementos
de interacción y presentación de
elementos multimedia

Considerar barrido visual de la

pagina, distribuyendo los
elementos de información y
navegación según su importancia
en zonas de mayor o menor
jerarquía visual
RESOLUCIONES
 Hay estándares:
 640 x 480
 800 x 600
 1024 x 768
ELEMENTOS GRÁFICOS PARA EL DISEÑO
 Banners
 460 x 680 completo
 234 x 60 medio
 120 x 240 vertical
 125 x 125 cuadrado
 392 x 72 full
 Ficheros Gráficos en
formatos Gif, jpg, png
si son estáticos, o en
formato swf o gif
animado que es lo
mas frecuente.
BOTONES
 Permiten al usuario interactuar con la aplicación,
informándole de la acción que se va a producir si
pincha sobre ellos.
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 paginas.
DISEÑO DE CONTENIDOS
PROTOTIPADO
 Sirven para evaluar
la usabilidad del
sitio sin necesidad
de esperar a su
implementación.
 Prototipado de Alta
Fidelidad

PROTOTIPADO
 Prototipado de Baja Fidelidad (wireframe)
 El aspecto del prototipo distara bastante del que
tenga el sitio web final.
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 pagina
(distribución de los
elementos)
 Búsqueda
 Elementos Multimedia
 Ayuda
 Accesibilidad
 Control y
Retroalimentación
IMPLEMENTACIÓN Y LANZAMIENTO
 Es recomendable usar estándares para asegurar
la futura compatibilidad y escalabilidad del sitio.
 Separar contenido del estilo, mediante el uso de
hojas de estilo del lado del cliente y uso de bases
de datos del lado del servidor.
MANTENIMIENTO Y SEGUIMIENTO
GRACIAS.