PLANIFICACIÓN

MÓDULO: Diseño de Aplicaciones Web –Parte 1

OBJETIVO GENERAL DEL MÓDULO: Guiar a los estudiantes en la

planificación y desarrollo de su primera página web, iniciando desde la
identificación y definición de los objetivos alcanzar con ésta página,
seguidamente de la aplicación de la técnica de experiencia de usuario
para identificar los requerimientos mínimos de la misma y construir una
propuesta visual adaptada a las necesidades del usuario.

OBJETIVOS DE APRENDIZAJE – PARTE 1: al finalizar el estudiante

estará en la capacidad de poder identificar el alcance de una página web
a través de la captura de los requerimientos del usuario, para
posteriormente construir la propuesta visual de la página web.

CONTENIDO

(Parte 1)

1. Introducción al diseño de aplicaciones web

2. Experiencia de usuario
3. Proceso de diseño de UX
4. Sketches

METODOLOGÍA
 √ Clase expositiva por parte del facilitador teniendo como material
de apoyo la guía explicativa construida para el tema.
√ Práctica de laboratorio: construir la propuesta visual de una página
web a partir de los requerimientos de un usuario ficticio.

FASES DE LA CLASE

Inicio:

1. Estudiantes: Recapitulación del ensayo construido como respuesta

al análisis de la importancia de las páginas web en la sociedad
actual.
2. Instructor: Retomar lo analizado en el ensayo e iniciar el proceso
de ofrecer un servicio al usuario a través de la construcción de una
página web.

Desarrollo:

1. Introducción al diseño de aplicaciones web

a. Página web vs aplicación web
2. Experiencia de usuario
a. Factores que influyen en el diseño de UX
3. Proceso de diseño de UX
4. Sketches

Nota: ver guía práctica de clases con el contenido desarrollado.

Cierre:
 Desarrollo en clases del caso de estudio propuesto como práctica
de laboratorio.

Nota: ver sección de la guía asociada a la práctica de laboratorio.

RECURSOS

√ Laptop
√ Video beam
√ Laboratorio de computación
√ Herramienta en línea: Moqus
√ Guía de estudio
√ Papel
√ Lápiz
√ Colores
√ Internet
√ Pizarra acrílica
√ Marcadores

EVALUACIÓN

Práctica 1: Desarrollo de una página web haciendo uso del proceso de

diseño UX

La Técnica de Evaluación a utilizar es una “Lista de Cotejo” que

contendrá los siguientes indicadores:

Competencias Bueno Regular Deficiente

 ¿El contenido del
sitio alcanza el
propósito de los
requerimientos
del usuario?
¿La página web
cuenta con
creatividad?
¿La navegación
es sencilla?
La página web
¿está libre de
errores
gramaticales y
ortográficos?
Los íconos
¿representan
claramente su
propósito?
Total
Bueno: 4 pts Regular: 2,5 pts
Deficiente: 1 pt
 GUÍA EXPLICATIVA

MÓDULO: DISEÑO DE APLICACIONES WEB

PARTE 1

La Internet, considerada como la red de redes a nivel mundial, es

actualmente una plataforma de desarrollo para una amplia gama de
aplicaciones, desde las académicas, comerciales, gubernamentales,
militares y de entretenimiento.

INTRODUCCIÓN AL DISEÑO DE APLICACIONES WEB

Una Página Web: es un documento al que se puede acceder a

través de un navegador web en internet o en una intranet. Se suele
decir que el contenido es estático (sólo cambia si el desarrollador web
cambia el contenido del documento).

Una Aplicación Web: nos ofrece páginas web que se generan de

forma dinámica según unas circunstancias (por ejemplo si el usuario
está logueado, según la información obtenida de una base de datos...).
Nos ofrecen una determinada funcionalidad (blog, wiki,...). Son
programas que desarrollamos utilizando lenguajes de programación web:

√ Se pueden ejecutar en el servidor: PHP, Python, Java, Ruby, Go,...

√ Se pueden ejecutar en el cliente: JavaScript, TypeScript,..
EXPERIENCIA DE USUARIO

El diseño de UX (User Experience o experiencia del usuario en

español) es un proceso continuo e iterativo. Esto significa que la manera
en que interactuamos con un producto o servicio siempre puede mejorar
en algún aspecto, trátese de la usabilidad, la estética, la coherencia o la
accesibilidad.

√ La usabilidad: es una medida de qué tan bien un usuario específico

en un contexto específico puede usar un producto o diseño para
lograr un objetivo definido de manera eficaz, eficiente y
satisfactoria. Se suele medir la usabilidad de un diseño durante
todo el proceso de desarrollo (desde los wireframes hasta el
producto final) para garantizar la máxima usabilidad.
√ La estética: es un principio básico del diseño que define las
cualidades agradables de un diseño. En términos visuales, la
estética incluye factores como el equilibrio, el color, el movimiento,
los patrones, la escala, la forma y el peso visual. Los diseñadores
utilizan la estética para complementar la usabilidad de sus diseños
y, de este modo, mejorar la funcionalidad con diseños atractivos.
√ La coherencia: es fundamental para crear experiencias de usuario
efectivas y satisfactorias. Al mantener la consistencia visual,
funcional y conceptual, podemos facilitar la navegación del usuario,
mejorar la usabilidad y fortalecer la identidad de la marca.
√ La accesibilidad: implica crear productos digitales que puedan ser
utilizados por personas de todas las habilidades y discapacidades.
Esto incluye, pero no se limita a, personas con discapacidades
visuales, auditivas, motrices o cognitivas.
Factores que influyen en el diseño de UX

Cada caso de diseño de UX es único, por lo que es muy difícil hablar

de factores homogéneos que influyan en todos los proyectos.

El diseño de UX consiste en la búsqueda y creación de experiencias

que resulten satisfactorias para los usuarios cuando interactúan con un
producto o un servicio

PROCESO DE DISEÑO DE UX

Entender al usuario del producto o servicio:

√ ¿Quiénes son los usuarios (aspectos demográficos,

socioeconómicos, culturales)?
√ ¿Qué necesidades o problemas van a resolver con tu producto o
servicio?
√ ¿Cómo utilizan el producto o servicio?
√ ¿Qué tipo de fricción (dificultad o problemas) pueden encontrar al
usar tu producto o servicio?

Para entender al usuario podemos apoyarnos en instrumentos de

análisis y prospección como: • Entrevistas • Encuestas • Artículos de la
industria y académicos • Prototipos y pruebas de usabilidad.

Enfocar el diseño en el usuario:

 Cuando conocemos al usuario resulta más fácil encausar el diseño de
UX basado en las necesidades y problemas que se han identificado.

El diseño deberá ser intuitivo y fácil de usar, permitiendo que los

usuarios realicen sus actividades de forma eficiente.

Pensar en la usabilidad desde el punto de vista del usuario:

La usabilidad web se refiere al grado de facilidad para acceder y

navegar por una página de forma intuitiva, sencilla y rápida. Es la
capacidad de que un producto o servicio se acopla al usuario.

Buscar que la experiencia sea consistente y coherente en todo momento:

√ La consistencia permite que los usuarios se sientan cómodos y

se familiaricen con el producto o servicio.
√ La coherencia se refiere a la homogeneidad que deben tener
todas las partes de un sistema, sitio web o aplicación. De esta
forma el usuario se puede ubicar en el espacio digital y navegar
sin dificultad.

Diseño de un producto o servicio accesible:

√ Incluir personas con discapacidad en el proceso de pruebas de

usabilidad.
√ Analizar los productos y servicios desde la perspectiva de la
accesibilidad.

En este sentido, hay que evitar la creación de barreras o limitantes

Mantener el apartado artístico del producto o servicio:

 El diseño de un producto o servicio debe ser atractivo. Además de
alinearse con la identidad de la marca o empresa, debe tener una
personalidad propia, en este aspecto se debe trabajar de la mano con el
equipo de diseño gráfico.

SKETCHES

Qué es el boceto de una página web

El boceto de una página web es el primer paso de un proyecto de

diseño web, donde se crean ideas para la interfaz del usuario. Con este
recurso, es posible ver las partes que deberán conformar el sitio; los
diagramas de usabilidad se emplean para mejorar su estructura.

Tips del proceso a seguir para construir un Sketches

√ Mapa del sitio: se crea un esquema de la estructura de la web,

mejor conocida como mapa del sitio o sitemap. Esto incluye
identificar las páginas principales y cómo se relacionan entre sí,
como lo puedes ver en la imagen que sigue:
 En este punto también se definen qué funciones necesitará el sitio
web, como los formularios de contacto, carritos de compra, galerías de
imágenes, etc., conforme con lo que se estableció con el usuario.

√ Escoge una plataforma: se debe decidir con qué se construirá el

sitio web desde cero con HTML, CSS y JavaScript, o si se utilizará
una plataforma CMS (de gestión de contenidos). Luego de ello se
realiza el diseño del wireframes, para este caso usaremos papel y
lápiz; y luego Moqus.

Ejemplo de un boceto detallado que muestra la estructura y la ubicación

de los elementos clave en una página: