TTEECCNNOOLLOOGGÍÍAA
WWEEBB
¿QQuuéé eess eell
DDiisseeññoo WWeebb??

CCoonncceeppttooss BBáássiiccooss::
LLaa ppiirráámmiiddee ddeell ddiisseeññoo WWeebb
Las cuatro características principales del diseño
Web son:
1. El contenido
2. La tecnología
3. Los aspectos visuales
4. Los aspectos económicos

CCoonncceeppttooss BBáássiiccooss::
LLaa ppiirráámmiiddee ddeell ddiisseeññoo WWeebb
FINALIDAD
Usuarios Diseñadores
FORMA
(visual)
CONTENIDO
FUNCION
(tecnología)

CCoonncceeppttooss BBáássiiccooss::
LLooss ddiivveerrssooss ssiittiiooss WWeebb..
Complejo
Simple
Sitio creado
dinámicamente
Centrado
en el
documento
Aplicación basada en la Web
Centrado
en la
Aplicación
Sitio Web
Puramente estático
Sitio estático con
Formulario de entrada
Acceso dinámico a datos
A través de un sitio Web

Fundamentos ddee ddiisseeññoo WWeebb
CCoonnssttrruuiirr ppaarraa llooss uussuuaarriiooss
Un error frecuente en el desarrollo Web es que los
sitios se construyen mas para los diseñadores y sus
necesidades que para los verdaderos usuarios
La clave para obtener el éxito en el diseño de un sitio
web funcional es pensar siempre teniendo en cuenta
el punto de vista del usuario

Fundamentos ddee ddiisseeññoo WWeebb
UUttiilliiddaadd yy ffaacciilliiddaadd ddee eemmpplleeoo
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 serán eficientes, fáciles de
manejar y ayudaran a los usuarios a conseguir sus
objetivos de manera satisfactoria y sin errores

Fundamentos ddee ddiisseeññoo WWeebb
AAtteenncciióónn aall ccoonntteenniiddoo
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 ddee ddiisseeññoo WWeebb
NNaavveeggaannddoo llooss ccoonntteenniiddooss
Los usuarios necesitan ayuda para no perderse en un
sitio. Es necesario asignar nombres claros a los vínculos,
agrupar de forma lógica los botones, emplear títulos de
paginas claros y elementos de navegación consistentes
Estructurar de forma clara el sitio, ayuda, pero una buena
navegación necesita algo mas que una buena estructura.
Los mejores diseños Web, son a menudo, aquellos que
utilizan una navegación sencilla y refinada
La navegación es solamente un medio para conseguir un
resultado final

Fundamentos ddee ddiisseeññoo WWeebb
IImmppoorrttaanncciiaa ddeell AAssppeeccttoo
Un buen sitio Web tiene que funcionar y tiene que ser
fácil de navegar.
Con frecuencia lo primero en que repara el usuario,
es el aspecto visual.
El aspecto del sitio puede influir en la opinión que
tenga el usuario sobre el mismo
Los elementos visuales influirán en gran medida en la
percepción inicial del sitio por parte del usuario

Fundamentos ddee ddiisseeññoo WWeebb
VVaalloorr ppeerrmmaanneennttee
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
podríamos llamar el valor permanente, un sentimiento
básico 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 tecnología, la facilidad
de empleo y la consecución del objetivo.

Fundamentos ddee ddiisseeññoo WWeebb
EEqquuiilliibbrriioo eennttrree FFoorrmmaa yy FFuunncciióónn
La función sin la forma seria aburrida; aunque el sitio
funcione, no inspirara al usuario.
Si la forma es impresionante y la función es limitada,
el usuario quedara desconcertado.
La forma de un sitio debería estar directamente
relacionada con su finalidad
La determinación de la forma mas adecuada para un
sitio presupone que la función del sitio esta
claramente definida

Fundamentos ddee ddiisseeññoo WWeebb
LLoo qquuee ssee vvee eess lloo qquuee ssee ddeesseeaa
EL control debería estar en manos del usuario o, al
menos, debería 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 cómo quiere verlo.
El usuario debería ser dueño de sus propias
acciones, permitiéndosele navegar sin rumbo, realizar
cualquier tipo de búsqueda, imprimir el contenido
mostrado….

EEll pprroocceessoo ddee
DDiisseeññoo WWeebb
MMeettooddoollooggííaa

Proceso ddee DDiisseeññoo WWeebb
MMééttooddoo WWeebb aadd hhoocc
Es un método muy sencillo, consiste en desarrollar el
sitio, efectuar una inspección visual con un
explorador, corregir errores y publicar en la Web
Los sitios desarrollados con este método informal
presentan numerosos problemas
Este método se utiliza en proyectos muy pequeños
cuando solo se cuenta con un solo diseñador /
programador y cuando el mantenimiento necesario
en el futuro es de poca entidad.

Proceso ddee DDiisseeññoo WWeebb
MMooddeelloo ddeell MMééttooddoo WWeebb BBáássiiccoo
Es un método 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 diseñadores a planificar
cada paso desde el principio.

Proceso ddee DDiisseeññoo WWeebb
MMooddeelloo eenn CCaassccaaddaa
Definición del problema
Exploración del concepto
Análisis de los requisitos
Especificación
Diseño de prototipos
Realización y pruebas
unitarias
Integración y ensayo
Del sistema
Publicación, explotación
Y mantenimiento

Planificación ddeell ssiittiioo
OObbjjeettiivvooss GGeenneerraalleess
Esta sección debería contener una breve
argumentación para explicar el propósito global del
sitio y las medidas básicas adoptadas para alcanzar
el éxito.

Planificación ddeell ssiittiioo
OObbjjeettiivvooss EEssppeeccííffiiccooss
En esta sección se analizarían detalladamente los
objetivos del sitio y se proporcionarían unos objetivos
mensurables para verificar la utilidad del sitio

Planificación ddeell ssiittiioo
AAnnáálliissiiss ddee llaa AAuuddiieenncciiaa
Esta sección debería contener los perfiles de los
usuarios que van a visitar el sitio. La sección
describirá tanto las características de la audiencia
como las tareas que esta audiencia trata de realizar
en el sitio.
¿Donde viven?
¿Qué edad tienen?
¿Idioma?
¿Conocimientos técnicos?
¿Qué obtienen del sitio?
¿Qué desean ejecutar?
¿Cuándo visitaran el sitio?
¿Duración por visita?

Planificación ddeell ssiittiioo
AAnnáálliissiiss ddee lloo eesscceennaarriiooss ddee eemmpplleeoo
En esta sección se analizan los diversos escenarios
de tareas que realizaran los usuarios del sitio.
Comience primero analizando como llegara el usuario
a sitio, y después, continué la visita hasta su
conclusión.
En esta sección se pueden incluir también un análisis
de cómo concluye la visita, por ejemplo, previendo el
numero de descargas, paginas accedidas, etc…
siempre que estén relacionados con el análisis
detallado de los objetivos

Planificación ddeell ssiittiioo
RReeqquuiissiittooss ddeell ccoonntteenniiddoo
La sección de requisitos del contenido proporcionara
una lista de todos los textos, imágenes y otros
medios de comunicación 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.

Planificación ddeell ssiittiioo
RReeqquuiissiittooss TTééccnniiccooss
Esta sección deberá proporcionar una visión general
de los tipos de tecnologías que se emplearan en el
sitio, tales como HTML, Javascript, CGI, JAVA, etc.
Los requisitos tecnológicos deberían estar
directamente relacionados con las capacidades de
los usuarios.

Planificación ddeell ssiittiioo
RReeqquuiissiittooss VViissuuaalleess
En la sección de requisitos visuales se subrayaran las
consideraciones básicas para el diseño de la interfaz.
Esta sección deberá indicar a grandes rasgos como
se relacionara el sitio con cualquier material de
marketing existente y definirá las restricciones que
tendrán los usuarios para emplear gráficos y otros
elementos multimedia (tamaño de pantalla, colores..)
Esta sección puede resaltar algunos detalles
específicos como: tipo de fuente, color

Planificación ddeell ssiittiioo
RReeqquuiissiittooss ddee DDiissttrriibbuucciióónn
Esta sección contendrá los requisitos de distribución,
particularmente cualquier tema relacionado con la
función como host.
En esta sección deberá incluirse un análisis básico
del numero de usuarios que visitaran el sitio, cuantas
paginas se visitaran en un acceso típico y cual es el
tamaño de una pagina estándar
La mayoría de estos datos son estimaciones que nos
permitirán definir correctamente las funciones que
debe realizar cada pagina.

Planificación ddeell ssiittiioo
DDiiaaggrraammaa ddee llaa eessttrruuccttuurraa ddeell ssiittiioo
Esta sección 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 sección basándose en los diversos escenarios
de usuario analizados en las fases iniciales del
proyecto
Es importante la organización de las diversas
secciones del sitio y puede ser necesario refinar esta
organización con el tiempo.

Planificación ddeell ssiittiioo
DDiiaaggrraammaa ddee llaa eessttrruuccttuurraa ddeell ssiittiioo
Pagina Principal
Productos Acerca de Noticias
Cúpula
Robots
PSV

Planificación ddeell ssiittiioo
DDoottaacciióónn ddee ppeerrssoonnaall
Esta sección recogerá los recursos necesarios para
el desarrollo y explotación del sitio.
Estos valores pueden darse como un simple dato de
horas-hombre y deberán hacer referencia a cada una
de las cuatro áreas que requieren personal:
contenido, tecnología, diseño visual y gestión.

Planificación ddeell ssiittiioo
PPllaazzooss ddee TTiieemmppoo
Los plazos de tiempo deberán mostrar el progreso de
proyecto teniendo en cuenta las dotaciones de
personal estimadas en la sección anterior, combinado
con el típico proceso en cascada señalado
anteriormente

Planificación ddeell ssiittiioo
PPrreessuuppuueessttoo
El presupuesto deriva principalmente de los requisitos
de personal y de los requisitos de distribución.
Los costos de la campaña de marketing, costos de
licencias de aplicaciones, propiedad intelectual y
otros, deberán indicarse también en el presupuesto.