Diseño de Páginas Web.pptx

1
Principios Básicos
de
Diseño de Sitios Web

2
Objetivo
 Conocer acerca de la teoría y las
técnicas de diseño de sitios web.
Principios Básicos de Diseño de Sitios Web

3
El diseño web

Ing. Fabio García Ramírez
Tecnología en Sistemas de Información
Fundación Universitaria Tecnológico Comfenalco
Cartagena de Indias 4
Temática
 El diseño web. Concepto.
 Características.
 Construcción de sitios webs.
 Ingeniería Web.
 Requisitos de Calidad.
 Modelo del proceso de desarrollo web.
 Principios esenciales de un diseño web
eficaz.

5
El diseño web. Concepto.
Que es?
Diseño gráfico
Programación
Cliente/Servidor
Comercio Electrónico

6
El diseño web. Concepto.
 Es un campo interdisciplinario muy
centrado en el usuario que incluye
influencias de las artes visuales, la
tecnología, el contenido y la finalidad.

7
Características.
 Contenido(informa o persuade al usuario).
 Tecnología(da funcionalidad al sitio).
 Aspectos visuales(forma visual del sitio).
 Aspectos económicos(beneficios).

Características.
Diseñadores
Usuarios
Forma(Visual) Función(Tecnología)
Finalidad(Económica)
Contenido

Construcción de sitios webs.
Tendencias(errores comunes):
 Construir a partir de los aspectos
visuales(resulta en un folletoware o
panfletoware).
 Enfoque tecnológico(diseño arbol de
navidad).

Construcción de sitios webs.
Errores imperdonables en los sitios webs:
 Usar gráficas demasiado grandes.
 Emplear fondos inapropiados.
 No ofrecerles algo gratuito a los visitantes.
 No darles motivos para regresar al sitio.
 No cambiar la apariencia del sitio ocasionalmente.
 No ofrecer contenido interesante.
 No llevar un registro de visitantes.
 No promover el sitio.

Ingeniería Web.
 Toma prestado muchos de los conceptos y principios básicos de la
Ingeniería del Software, dando importancia a las mismas
actividades técnicas y de gestión.
 No es un clónico perfecto de la Ingeniería del Software.
 La filosofía principal es la aplicación de un enfoque disciplinado
para el desarrollo de un sistema basado en computadora.
 La Ingeniería Web aplica un enfoque genérico que se suaviza con
estrategias, tácticas y métodos especializados.
 La Ingeniería Web está relacionada con el establecimiento y
utilización de principios científicos, de ingeniería y de gestión, y
con enfoques sistemáticos y disciplinados del éxito del desarrollo,
empleo y mantenimiento de sistemas y aplicaciones basados en
Web de alta calidad.

Requisitos de Calidad.
 La calidad se refiere a las características mensurables, que se
pueden comparar con estándares conocidos como longitud, color,
propiedades eléctricas, maleabilidad, otros.
 A nivel de software, existen unas métricas técnicas que
proporcionan una manera sistemática de valorar la calidad
basándose en un conjunto de reglas claramente definidas.
 Las métricas o requisitos de calidad mas relevantes para evaluar
la calidad de los sistemas basados en Web son:
a. Usabilidad.
b. Funcionalidad.
c. Fiabilidad.
d. Eficiencia.
e. Capacidad de mantenimiento.

Modelo del proceso de desarrollo
web.
Especificación y análisis
de los requisitos
Diseño
de prototipos
Materialización y
Pruebas unitarias
Integración y prueba
del sistema
Entrada en funcionamiento,
operación y mantenimiento
Definición del problema.
Exploración conceptual
Modelo en Cascada

Principios esenciales de un
diseño web eficaz.
 Usted no es el USUARIO.
 Los usuarios no son diseñadores.
 Diseñe para el usuario medio, pero tenga en
cuenta las diferencias.
 La ejecución de un sitio tiene que rayar la
perfección.
 Conoce y respeta las restricciones de la web
y del medio Internet.

diseño web eficaz.
 Los sitios web deberán respetar los principios
GUI siempre que sean apropiados.
 La navegación es solamente un medio para
conseguir un resultado final.
 Los elementos visuales influirán en gran
medida en la percepción inicial del interés del
sitio por parte del usuario.
 No invente interfaces para crear marca.
 Lo que ve es lo que desea(WYSIWYW).

diseño web eficaz.
 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.
 No existe una única forma “correcta” de
diseño web que se adapte a todos los sitios.
 El control debería estar en manos del usuario
o al menos debería parecerlo.

Resumen.
 El diseño web es un campo interdisciplinar
que consta de cuatro elementos principales:
contenido, forma, función y finalidad.
 El de seguir una metodología, incluso básica,
de diseño web puede ser extremadamente
útil.
 No existe una única forma “correcta” de
diseño web que se adapte a todos los sitios.

El proceso
de
diseño web

Temática
 Método web ad hoc.
 Modelo en cascada.
 Modelo en cascada modificado.
 Diseño de aplicación conjunta(JAD).
 Modelo de proceso IWeb.
 Enfoque de un proyecto de un sitio web.

Método web ad hoc.
 Similar al método codificación y prueba.
 Diseño al vuelo(realizar y publicar).
 Método informal(diseña según vas
avanzando).
 Planificación escasa y limitada.
 Adecuado para proyectos pequeños con
escaso mantenimiento.

Modelo en cascada.
de los requisitos
Diseño
de prototipos
Materialización y
Pruebas unitarias
del sistema

Modelo en cascada modificado.
de los requisitos
Diseño
de prototipos
Materialización y
Pruebas unitarias
del sistema
Análisis de riesgos
en “remolino”

Diseño de aplicación conjunta
(JAD, Joint Application Design).
El diseñador habla con
los clientes para conocer
sus requisitos. Realiza el
primer prototipo.
El cliente prueba el
prototipo y sugiere
cambios y ampliaciones.
Si es correcto se publica.
1
2
El diseñador prepara un
nuevo prototipo.
Volver al paso 2.
3

Modelo de proceso IWeb
Formulación
Planificación
Análisis
Ingeniería
Evaluación
del cliente
Generación
de páginas
y pruebas
Diseño del
contenido
Diseño
arquitectónico
Diseño de
la interfaz
Producción
Diseño de
navegación

Enfoque de un proyecto de un
sitio web.
 Objetivos y problemas.
 Audiencia – perfil del usuario.
 Análisis de requisitos.
 Planificación del sitio.
 Fase de diseño.
 Pruebas.
 Puesta en funcionamiento.
 Mantenimiento.

Objetivos y problemas.
 Deben ser claros.
 Medibles.
 Para determinarlos se realiza una
“Tormenta de Ideas” (BrainStorming).
 Deben refinarse.

Objetivos poco claros:
 “Proporcionar un mejor servicio al
cliente”.
 “Conseguir más dinero abriendo un
mercado interactivo”.

Objetivos bien declarados:
 Desarrollar un sitio Web de ayuda y soporte técnico que aumente la
satisfacción del cliente, permitiendo un acceso 24/7 para cuestiones
comunes y disminuyendo en un 25 por 100 la atención telefónica
prestada.
 Crear un almacén interactivo de recambios de automóvil que venda
directamente al consumidor productos por un valor mínimo de 10.000
dólares al mes.
 Desarrollar un sitio Web que proporcione a los potenciales clientes de
un restaurante de comida japonesa cierta información importante, tal
como horario, menú, ambiente y precios, y les anime a visitar el lugar o
a hacer su pedido por teléfono.

Audiencia – perfil del usuario.
 Cual es la audiencia potencial del sitio y sus
motivos para acceder al sitio.
 Preguntas básicas tales como: Dónde viven? Que
edad tienen? Hombres o mujeres? Que idioma hablan? Que
conocimientos técnicos poseen? Que obtienen del sitio? Que desean
ejecutar en el sitio? Cuando visitarán el sitio?
 Para la mayoría de los sitios hay muchos
tipos de usuarios, cada uno con diferentes
características y objetivos.
 Se recomienda elaborar un perfil del usuario.

Análisis de requisitos.
 Clase de contenido a publicar.
 Cual sería el aspecto del sitio.
 Tecnología a utilizar.
 Restricciones técnicas.

Planificación del sitio.
Es plasmar en papel las especificaciones del
sitio. Puede contener las siguientes secciones:
Declaración y análisis de objetivos.
Análisis de la audiencia.
Requisitos de contenido, técnicos y visuales.
Diagrama de la estructura del sitio.
Personal requerido.
Duración.
Presupuesto.

Fase de diseño.
 Recopile el contenido, antes de abordar el
diseño.
 El diseño visual debe realizarse de arriba
abajo(Top-Down).
 Realice prototipos en papel o en pantalla.
 Tenga en cuenta el explorador(browser) a
utilizar y las dimensiones de la pantalla.
 Realice un sitio simulado.

Pruebas.
 Los sitios siempre tienen errores, de modo
que pruebe bien su sitio.
 Las pruebas deben tener en cuenta todos los
aspectos del sitio, incluyendo el contenido, la
apariencia visual, la función y la finalidad.
 Las pruebas más importantes son las
realizadas por el usuario, y deberían
realizarse en último lugar.

Puesta en funcionamiento y
mantenimiento.
 El desarrollo de un sitio web es un
proceso continuo: planificación, diseño,
desarrollo, entrega y vuelta a empezar.

Resumen.
 Los diseñadores de sitios Web deben
adoptar una metodología o modelo de
procedimiento que les guíe durante el
proceso de desarrollo y les ayude a
minimizar riesgos, a gestionar la complejidad
del proyecto y, en general, a mejorar el
resultado final.

Diseño para
los
usuarios

Temática
 Facilidad de empleo.
 Los usuarios.
 Características comunes de los usuarios.
 Entornos del usuario.
 Tipos comunes de usuarios.
 Convenios Web.
 Accesibilidad.

Facilidad de empleo.
 Es la facilidad con la que un grupo de usuarios
puede utilizar un sitio para conseguir objetivos
determinados con efectividad, eficacia y satisfacción
en un contexto concreto de empleo(según norma
ISO).
 Varía tanto como los usuarios que acceden al sitio.
 Depende del tipo de sitio y de la familiaridad que
tenga el usuario con él.

Facilidad de empleo.
Tenga en cuenta las siguientes directrices:
 Sea consistente(interfaz sencilla de usar).
 Simplifique al máximo el sitio y sus páginas.
 Confíe en la acción de reconocer, no en recordar.
 Intente prevenir o corregir errores.
 Proporcione información.
 Concéntrese en la velocidad.
 No suponga que los usuarios leerán las
instrucciones.

Los Usuarios.
 Tratar de satisfacer sus necesidades.
 Tenga en cuenta el usuario común(no irse a los
extremos: novatos o expertos).
 Los exploradores no utilizan los sitios, los utilizan las
personas.
 No existe un tipo genérico de persona, pero suelen
tener características físicas similares: visión,
memoria y reacción a los estímulos.

Características comunes de los
usuarios: Visión.
 Es la forma en que reciben la información del sitio Web.
 Existen tres factores que afectan a la forma en que se
percibe el color: Matiz, saturación y tonalidad.
 Matiz: Grado de similitud entre un color y los colores
básicos(rojo, verde y azul) o algunas de sus
combinaciones.
 Saturación: Hasta que punto un color difiere del
acromático(blanco, gris o negro).
 Tonalidad: Hasta que punto un color es más claro o más
oscuro que otro bajo las mismas condiciones visuales.

usuarios: Visión.
 Evite el uso de texto, gráficos y fondos de matices
similares(en vez de utilizar azul claro y azul oscuro, utilice
en su lugar azul y amarillo, o blanco).
 Evite combinar texto, gráficos y fondos con saturaciones
similares(en vez de utiliza un texto gris sobre un fondo
rosado, utilice un texto de color blanco sobre un fondo
rosado, o viceversa).
 Ponga un contraste alto. Evite el uso de texto, gráficos o
fondos de tonalidad similar(nunca utilice texto oscuro sobre
fondo oscuro o texto brillante sobre fondo brillante).
 Asegúrese que los colores que utilice para diferenciar
elementos, tales como vínculos, difieran claramente en dos
atributos: matiz y tonalidad(evite los vínculos que cambian
de rojo a rosado).

usuarios: Memoria.
 Los usuarios tienen tendencia a maximizar las ganancias y
a minimizar el trabajo.
 El reconocimiento resulta más sencillo que la
memorización, de modo que no obligue a los usuarios a
memorizar información.
 No utilice el mismo color para resaltar los vínculos visitados
de los que no lo han sido todavía.
 Elabore páginas que incluyan importantes diferencias
visuales con el resto de páginas.
 Limite el número de opciones de importancia similar, tales
como vínculos, a grupos entre 5 y 9 elementos.
 Póngase por objetivo la memorización de sólo tres
elementos o páginas secuenciales.

Características comunes de los usuarios:
Respuesta y tiempo de reacción.
 El tiempo que un usuario esperará es
proporcional al beneficio obtenido.
 Cuando los tiempos de respuesta para la
descarga de páginas sean superiores a 30
segundos, trate de proporcionar al usuario su
propia información del progreso, por ejemplo,
una barra de progreso del tiempo de descarga.
 Esfuércese en conseguir que el usuario conozca
lo más importante del contenido de una página
en un tiempo máximo de un minuto de carga.

Características comunes de los usuarios:
Respuesta y tiempo de reacción.
 Intente optimizar el acceso por teclado para
todas las páginas y no solamente para las
páginas de formulario.
 Minimice la distancia que el usuario tiene que
desplazar el ratón entre elecciones sucesivas.
 Minimice el desplazamiento del ratón entre la
zona de actuación en la página principal y el
botón Atrás del explorador.

Entornos del usuario.
 Cuando diseñe para los usuarios piense siempre
desde dónde están accediendo al sitio.
 Entre los entornos posibles se tienen: Oficina,
Casa, Cibercafé, puesto público(kiosko),
PDA(Asistente Personal).

Tipos Comunes de usuarios.
 Desde el punto de vista de la utilización de un sitio Web,
existen tres tipos de usuarios: novatos, intermedios y
expertos.
 Un usuario novato es el que tiene poco conocimiento de un
sitio, incluso, de cómo funciona la Web. Requiere ayuda
extra.
 Los usuarios expertos, son los que comprenden muy bien
la Web o el sitio. Requieren relativamente pocas ayudas y
preferirán hacer menos clics y consumir más.
 Los usuarios intermedios, son realmente el grupo más
numeroso de usuarios de la Web. Entienden cómo
funciona la Web, pero no saben navegar de una manera
eficiente.

Tipos Comunes de usuarios.
 Trate de crear un sitio Web adaptable que
cumpla con los requisitos de los usuarios
noveles, de los intermedios y de los expertos.
 Diseñe para el usuario intermedio si no es
posible desarrollar una interfaz Web adaptable.

Convenios Web.
 No se desvíe de los convenios utilizados de
forma habitual en el desarrollo de interfaces
presentes en los sitios Web más populares.
Algunas normas Web más comunes son:
 El logotipo situado en la esquina superior
izquierda le permitirá volver a la página principal.
 Los vinculos de texto se repiten en la parte
inferior de la página.
 Vínculo para volver a la parte superior de la
página utilizado en páginas largas.
 Los elementos sobre los que se puede hacer clic
son azules y se encuentran subrayados.

Convenios Web.
 Los elementos secundarios de exploración, tales
como un plano del sitio o un buscador, se
presentan de forma separada al resto de
elementos de exploración.

Accesibilidad.
El World Wide Web Consortium(W3C) ha
promulgado unas cuantas sugerencias para
mejorar la accesibilidad(http://www.w3c.org/wai) :
Proporcione alternativas equivalentes para los
contenidos auditivo y visual.
Aclare el uso del lenguaje natural(abreviaturas,
definiciones, citas, etc).
Garantice que las páginas que utilicen nuevas
tecnologías se transforman adecuadamente.
Garantice la accesibilidad de las interfaces de
usuario incrustadas.
Diseñe con independencia de los dispositivos.

Resumen.
 La facilidad de empleo es uno de los aspectos de un
sitio que no siempre se advierte a primera vista, pero
que influye enormente en la comodidad con que un
usuario puede realizar una determinada tarea
cuando utiliza el sitio.
 Intente crear una interfaz adaptable que pueda ser
utilizada por los tres grupos comunes de
usuarios(novatos, intermedios y avanzados), con el
fin de obtener un sitio funcional.

Tipos de sitios y Arquitectura

Temática
 Categorías generales de sitios Web.
 Estructura del sitio.
 Tipos especificos de sitios Web.

Categorías generales de sitios
Web.
 Sitio público: es un sitio cuyo acceso no está
restringido explícitamente a ningún tipo de usuarios.
 Sitio intranet: es un sitio que está reservado a una
determinada organización y generalmente funciona
dentro de una red privada.
 Sitio extranet: es un sitio Web al que puede acceder
una clase limitada de usuarios a través de Internet.

Categorías generales de sitios
Web.
 Sitios estáticos: es aquel cuyo contenido es relativamente fijo,
en el que los usuarios no pueden modificar ni el aspecto ni el
ámbito de los datos que observan.
 Sitios interactivos: es aquel en el que los usuarios pueden
actuar directamente sobre el contenido del sitio o con otros
usuarios del mismo.
 Sitios dinámicos: es aquel que sus páginas se generan en el
momento de la solicitud por parte del usuario.

Estructura del sitio.
Hay dos tipos de estructuras en cualquier sitio Web:
 Lógica: es la forma como se relacionan entre sí los documentos
y define los vínculos entre documentos.
 Física: describe dónde se encuentra realmente un documento,
mostrando, por ejemplo, el camino al directorio del documento
en un servidor Web o su situación en una base de datos(por
ejemplo, c:inetpubwwwrootdefault.htm).
 La estructura lógica de un sitio Web es más importante para el
usuario que su estructura física.
 Siempre que sea posible, evite dar a conocer la estructura física
de los archivos del sitio.

Estructura del sitio(Modelos).
Existen cuatro formas de organización lógica de los sitios Web:
 Lineal: es una estructura secuencial similar a la que sigue la
información impresa(revistas, periódicos, etc).
 Rejilla: es una estructura lineal doble, en la que sus elementos
se relacionan tanto vertical como horizontalmente.
 Jerárquica: es la más común en la Web, similar a la estructura
de un árbol.
 Tela de araña(Web): no sigue ninguna de las estructuras
anteriores y contiene muchos vínculos cruzados y saltos hacia
delante.

Página Principal Página 1 Página 2 Página 3
Página Principal
Página 1
Página 2
Página 3
Página 4
Página 5
Lineal
Lineal con alternativas
Página Principal Página 1 Página 2 Página 3
Lineal con opciones

Camisas
Manga Corta
Manga Larga
Pantalones
Rejilla
Lino
Dril
Chaquetas
Cuero
Lana

Empleos
Oferta
Hombres
Demanda
Jerarquía estrecha
Mujeres Ing. de Sistemas Contadores

Página Principal
Servicios Noticias
Portales
Jerarquía ancha
Banca Viajes

Página Principal
Servicios Portales
Jerarquía mixta
Banca
Descargas E-mail Todo en Uno Internacional
Nacional

Servicios
Presentación
Personales
Arbol con entrada lineal
Corporativos
Productos
Staff
Mision, Vision
Catalogo
Online
Página Principal
Verdadera
Página de
entrada o de
bienvenida

Servicios
Productos
Web Pura
Mapa del Sitio
Principal
Contactos
Buscador

Tipos específicos de sitios Web.
Los sitios públicos se pueden clasificar en:
 Comerciales: su finalidad principal es servir al usuario, de modo
que, de manera directa o indirecta, se beneficie a la
empresa(transacción comercial).
 Informátivos: su finalidad general es la distribución de
información(los de grupos religiosos, organizaciones sin ánimo
de lucro, los de noticias, los educativos, sitios del gobierno).
 Entretenimiento: su finalidad es simplemente entretener a sus
visitantes. Tratan de vender una experiencia agradable.
 Navegacionales: es el que tiene como finalidad ayudar a la
gente a no perderse en Internet(portales).
 Comunidad: su finalidad es crear un punto central para que los
miembros de una determinada comunidad se congreguen y se
relacionen.

Tipos específicos de sitios Web.
Los sitios públicos se pueden clasificar en:
 Artístico: su finalidad es inspirar, iluminar o entretener a los
espectadores.
 Personal: su finalidad es personificar al individuo en la Web.

Resumen.
 Los sitios Web se pueden clasificar según su
audiencia(públicos, intranet y extranet) o
finalidad(comerciales, informativos, personales,
artísticos,entretenimiento, navegacionales y
comunidad).
 La elección de la estructura correcta para un
determinado sitio es compleja y puede estar influida
por varios factores.

Diseño de Páginas Web.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a Diseño de Páginas Web.pptx

Similar a Diseño de Páginas Web.pptx (20)

Diseño de Páginas Web.pptx