Fundamentos

Qu es el
Diseo Web?
Conceptos Bsicos:
La pirmide del diseo Web

Las cuatro caractersticas principales del diseo

Web son:
1. El contenido
2. La tecnologa
3. Los aspectos visuales
4. Los aspectos econmicos
Conceptos Bsicos:
La pirmide del diseo Web

FINALIDAD

Usuarios CONTENIDO Diseadores

FORMA FUNCION
(visual) (tecnologa)
 Conceptos Bsicos:
Los diversos sitios Web.

Complejo Sitio creado

dinmicamente

Aplicacin basada en la Web

Sitio Web
Puramente esttico
Sitio esttico con
Formulario de entrada
Acceso dinmico a datos
A travs de un sitio Web

Centrado Centrado
Simple en el en la
documento Aplicacin
Fundamentos de diseo Web
Construir para los usuarios

Un error frecuente en el desarrollo Web es que los

sitios se construyen mas para los diseadores y sus
necesidades que para los verdaderos usuarios
La clave para obtener el xito en el diseo de un sitio
web funcional es pensar siempre teniendo en cuenta
el punto de vista del usuario
Fundamentos de diseo Web
Utilidad y facilidad de empleo

Los buenos sitios son aquellos realmente

provechosos para sus usuarios.
La utilidad comprende todas las funciones del sitio
que satisfacen las necesidades del usuario
La facilidad de empleo es la facilidad de la que
dispone el usuario para manejar las funciones del
sitio con el fin de conseguir un determinado objetivo.
Los sitios funcionales sern eficientes, fciles de
manejar y ayudaran a los usuarios a conseguir sus
objetivos de manera satisfactoria y sin errores
Fundamentos de diseo Web
Atencin al contenido

Los sitios Web suelen estar mas enfocados al

contenido que el software tradicional
El contenido es lo que estructura un sitio web
Un contenido original y de calidad es el activo mas
importante de la Web.
Los usuarios buscan contenidos utiles y cuando los
encuentran, los consumen con voracidad.
Fundamentos de diseo Web
Navegando los contenidos

Los usuarios necesitan ayuda para no perderse en un

sitio. Es necesario asignar nombres claros a los vnculos,
agrupar de forma lgica los botones, emplear ttulos de
paginas claros y elementos de navegacin consistentes
Estructurar de forma clara el sitio, ayuda, pero una buena
navegacin necesita algo mas que una buena estructura.
Los mejores diseos Web, son a menudo, aquellos que
utilizan una navegacin sencilla y refinada
La navegacin es solamente un medio para conseguir un
resultado final
Fundamentos de diseo Web
Importancia del Aspecto

Un buen sitio Web tiene que funcionar y tiene que ser

fcil de navegar.
Con frecuencia lo primero en que repara el usuario,
es el aspecto visual.
El aspecto del sitio puede influir en la opinin que
tenga el usuario sobre el mismo
Los elementos visuales influirn en gran medida en la
percepcin inicial del sitio por parte del usuario
Fundamentos de diseo Web
Valor permanente

Aunque, en un principio, el aspecto importa, los usuarios

se olvidaran poco a poco de ese tema a medida que
vayan utilizando el sitio.
Cuando un usuario abandona un sitio se lleva lo que
podramos llamar el valor permanente, un sentimiento
bsico de mayor o menor xito de la visita al sitio.
El valor permanente esta ligado al hecho de que el usuario
haya logrado concretar sus objetivos dentro del sitio
El valor permanente del sitio viene determinado por los
aspectos visuales, el contenido, la tecnologa, la facilidad
de empleo y la consecucin del objetivo.
Fundamentos de diseo Web
Equilibrio entre Forma y Funcin

La funcin sin la forma seria aburrida; aunque el sitio

funcione, no inspirara al usuario.
Si la forma es impresionante y la funcin es limitada,
el usuario quedara desconcertado.
La forma de un sitio debera estar directamente
relacionada con su finalidad
La determinacin de la forma mas adecuada para un
sitio presupone que la funcin del sitio esta
claramente definida
Fundamentos de diseo Web
Lo que se ve es lo que se desea

EL control debera estar en manos del usuario o, al

menos, debera parecerlo.
Lo que se ve es lo que se desea, es una consigna
centrada en el usuario y cede al usuario el control de
lo que quiere ver y de cmo quiere verlo.
El usuario debera ser dueo de sus propias
acciones, permitindosele navegar sin rumbo,
realizar cualquier tipo de bsqueda, imprimir el
contenido mostrado.
El proceso de
Diseo Web

Metodologa
Proceso de Diseo Web
Mtodo Web ad hoc

Es un mtodo muy sencillo, consiste en desarrollar el

sitio, efectuar una inspeccin visual con un
explorador, corregir errores y publicar en la Web
Los sitios desarrollados con este mtodo informal
presentan numerosos problemas
Este mtodo se utiliza en proyectos muy pequeos
cuando solo se cuenta con un solo diseador /
programador y cuando el mantenimiento necesario
en el futuro es de poca entidad.
Proceso de Diseo Web
Modelo del Mtodo Web Bsico

Es un mtodo deductivo, se inicia con una idea del

conjunto y se va estrechando hasta llegar a los pasos
necesarios para terminar el sitio.
En ingenieria de software, a este modelo se le
denomina Modelo en Cascada o Modelo del ciclo
de vida del software
Este modelo obliga a los diseadores a planificar
cada paso desde el principio.
 Proceso de Diseo Web
Modelo en Cascada
Definicin del problema
Exploracin del concepto

Anlisis de los requisitos

Especificacin

Diseo de prototipos

Realizacin y pruebas
unitarias

Integracin y ensayo
Del sistema

Publicacin, explotacin
Y mantenimiento
Planificacin del sitio
Objetivos Generales

Esta seccin debera contener una breve

argumentacin para explicar el propsito global del
sitio y las medidas bsicas adoptadas para alcanzar
el xito.
Planificacin del sitio
Objetivos Especficos

En esta seccin se analizaran detalladamente los

objetivos del sitio y se proporcionaran unos objetivos
mensurables para verificar la utilidad del sitio
Planificacin del sitio
Anlisis de la Audiencia

Esta seccin debera contener los perfiles de los

usuarios que van a visitar el sitio. La seccin
describir tanto las caractersticas de la audiencia
como las tareas que esta audiencia trata de realizar
en el sitio.

Donde viven? Qu obtienen del sitio?

Qu edad tienen? Qu desean ejecutar?
Idioma? Cundo visitaran el sitio?
Conocimientos tcnicos? Duracin por visita?
Planificacin del sitio
Anlisis de lo escenarios de empleo

En esta seccin se analizan los diversos escenarios

de tareas que realizaran los usuarios del sitio.
Comience primero analizando como llegara el usuario
a sitio, y despus, continu la visita hasta su
conclusin.
En esta seccin se pueden incluir tambin un anlisis
de cmo concluye la visita, por ejemplo, previendo el
numero de descargas, paginas accedidas, etc
siempre que estn relacionados con el anlisis
detallado de los objetivos
Planificacin del sitio
Requisitos del contenido

La seccin de requisitos del contenido proporcionara

una lista de todos los textos, imgenes y otros
medios de comunicacin que se necesita incluir en el
sitio.
Elaborar una matriz en la que se presenten el
contenido, la forma, la existencia y el posible
propietario o creador resulta de gran utilidad.
Planificacin del sitio
Requisitos Tcnicos

Esta seccin deber proporcionar una visin general

de los tipos de tecnologas que se emplearan en el
sitio, tales como HTML, Javascript, CGI, JAVA, etc.
Los requisitos tecnolgicos deberan estar
directamente relacionados con las capacidades de
los usuarios.
Planificacin del sitio
Requisitos Visuales

En la seccin de requisitos visuales se subrayaran

las consideraciones bsicas para el diseo de la
interfaz.
Esta seccin deber indicar a grandes rasgos como
se relacionara el sitio con cualquier material de
marketing existente y definir las restricciones que
tendrn los usuarios para emplear grficos y otros
elementos multimedia (tamao de pantalla, colores..)
Esta seccin puede resaltar algunos detalles
especficos como: tipo de fuente, color
Planificacin del sitio
Requisitos de Distribucin

Esta seccin contendr los requisitos de distribucin,

particularmente cualquier tema relacionado con la
funcin como host.
En esta seccin deber incluirse un anlisis bsico
del numero de usuarios que visitaran el sitio, cuantas
paginas se visitaran en un acceso tpico y cual es el
tamao de una pagina estndar
La mayora de estos datos son estimaciones que nos
permitirn definir correctamente las funciones que
debe realizar cada pagina.
Planificacin del sitio
Diagrama de la estructura del sitio

Esta seccin debe proporcionar la estructura del sitio

o un diagrama de flujo detallando las diversas
secciones existentes dentro del sitio y sus relaciones.
Se desarrollaran etiquetas e ideas generales para
cada seccin basndose en los diversos escenarios
de usuario analizados en las fases iniciales del
proyecto
Es importante la organizacin de las diversas
secciones del sitio y puede ser necesario refinar esta
organizacin con el tiempo.
Planificacin del sitio
Diagrama de la estructura del sitio

Pagina Principal

Productos Acerca de Noticias

Cpula

Robots

PSV
Planificacin del sitio
Dotacin de personal

Esta seccin recoger los recursos necesarios para

el desarrollo y explotacin del sitio.
Estos valores pueden darse como un simple dato de
horas-hombre y debern hacer referencia a cada una
de las cuatro reas que requieren personal:
contenido, tecnologa, diseo visual y gestin.
Planificacin del sitio
Plazos de Tiempo

Los plazos de tiempo debern mostrar el progreso de

proyecto teniendo en cuenta las dotaciones de
personal estimadas en la seccin anterior, combinado
con el tpico proceso en cascada sealado
anteriormente
Planificacin del sitio
Presupuesto

El presupuesto deriva principalmente de los

requisitos de personal y de los requisitos de
distribucin.
Los costos de la campaa de marketing, costos de
licencias de aplicaciones, propiedad intelectual y
otros, debern indicarse tambin en el presupuesto.