Guía de la asignatura
DISEÑO WEB
Optativa Libre - Diseño Industrial / Arquitectura y Urbanismo
Este curso tiene como finalidad instalar en el participante la capacidad de
auto-gestionarse en el mercado digital, por medio de una instrucción básica en el
diseño web, ya sea que tenga conocimientos previos o no sobre el tema, a partir de la
diseminación de conocimientos necesarios para un mejor y más acertado
desenvolvimiento al momento de encarar, o involucrarse en equipos donde el
proyecto incluya el diseño de una web y/o una aplicación móvil.
SUMARIO
PRESENTACIÓN 2
OBJETIVOS ESPECÍFICOS 3
CONTENIDO 4
DOCENTE 5
METODOLOGÍA 6
CRONOGRAMA 7
CATEGORÍAS DE CALIFICACIÓN 8
DERECHO PROYECTO FINAL 8
PROMOCIÓN DE LA ASIGNATURA 9
INSTRUMENTOS PARA LA EVALUACIÓN 9
CRITERIOS DE EVALUACIÓN 9
MATERIALES DE CONSULTA DE LA ASIGNATURA 9
RECURSOS 10
// Página 1 //
Guía de asignatura: DISEÑO WEB
Ficha técnica de la Asignatura - Segundo semestre 2024
1. Asignatura: Diseño Web
2. Duración: 15 (quince) semanas
3. Tiempo de estudio semanal: 3 horas
4. Horario: Viernes 13:30 a 16:30 h
3. Sesiones Sincrónicas: Viernes 14:00 h a 15:30 h
4. Horas Sincrónicas totales: 15 h
5. Horas Asincrónicas totales: 30 h
6. Horas de Trabajo Autónomo: 15 h
6. Total de Horas: 60 h
PRESENTACIÓN
La evolución constante de la Web como un espacio fundamental de interacciones sociales
conlleva una necesidad continua de actualización y mejora. En este sentido, el diseño web
emerge como un aspecto crucial a considerar, tanto por iniciativas privadas como públicas,
con el objetivo de crear entornos virtuales que sean funcionales, estéticamente atractivos y
orientados al usuario.
Para lograr esto, es esencial que los equipos humanos abocados al desarrollo web presten
una atención a todo el proceso de creación de estos espacios, desde la arquitectura de la
información hasta el diseño visual de las interfaces. Esto implica considerar una serie de
funciones, símbolos, tecnologías y estética que respondan a las necesidades tanto del
usuario final como del propietario del espacio en línea.
El enfoque metodológico que este curso propone en este contexto se basa en un
acercamiento a los principios del Diseño Centrado en el Usuario, que sitúa al usuario en el
centro del proceso de diseño, buscando comprender las necesidades, preferencias y
comportamientos de los usuarios para crear soluciones digitales que satisfagan sus
demandas de manera efectiva. En este curso, se busca familiarizar a los estudiantes con este
enfoque, así como con herramientas y técnicas utilizadas por estudios y agencias de diseño
web en el desarrollo de páginas web y aplicaciones móviles que incluye la creación de la
// Página 2 //
Guía de asignatura: DISEÑO WEB
estructura de la información, la elaboración de esquemas de flujo, maquetas visuales y
funcionales, así como la comprensión de los lenguajes de programación básicos utilizados en
el desarrollo front-end de sitios web.
En resumen, el objetivo principal es capacitar a los participantes para abordar el diseño web
desde una perspectiva centrada en el usuario, desarrollando habilidades tanto conceptuales
como prácticas para crear entornos virtuales efectivos y atractivos.
OBJETIVO GENERAL
Preparar a los estudiantes para una inserción efectiva en el ámbito del diseño de
productos digitales introduciendo conceptos fundamentales y habilidades necesarias
para que puedan abordar con confianza proyectos relacionados con el diseño de
sitios web y/o aplicaciones móviles, independiente de su nivel de conocimiento
previo.
OBJETIVOS ESPECÍFICOS
1. Comprender los principios y fundamentos del Diseño Centrado en el Usuario (DCU),
incluyendo la importancia de la experiencia de usuario (UX) y la interfaz de usuario (UI)
en el diseño web y móvil.
2. Familiarizarse con herramientas de diseño y prototipado, como el software Figma,
para la creación y visualización de interfaces de usuario, así como adquirir habilidades
básicas en el desarrollo front-end utilizando lenguajes de programación como HTML,
CSS y JavaScript, con énfasis en la creación de interfaces web interactivas y
responsivas.
3. Explorar técnicas y mejores prácticas para la creación de estructuras de información
efectivas, teniendo en cuenta la navegación intuitiva y la organización jerárquica de
contenido en sitios web y aplicaciones móviles.
4. Desarrollar habilidades en la creación de wireframes y maquetas visuales, utilizando
herramientas digitales para la planificación y representación visual de diseños web y
móviles aplicando principios de diseño visual y estilos de diseño para crear interfaces
atractivas y coherentes, que promuevan una experiencia de usuario satisfactoria y
memorable.
5. Practicar la colaboración y comunicación efectiva dentro de equipos de trabajo
multidisciplinarios, simulando situaciones del mundo real en proyectos de diseño web
y móvil, para prepararse para los desafíos en el ámbito digital.
// Página 3 //
Guía de asignatura: DISEÑO WEB
COMPETENCIAS BÁSICAS
Cinco son las competencias básicas que el participante del curso adquiere al culminar:
1. Comprensión de los principios de diseño UX/UI: que incluye conocer conceptos
como la arquitectura de la información, la usabilidad, la accesibilidad y la estética del
diseño.
2. Habilidad en el manejo de herramientas de diseño y prototipado: esto es
materializar la idea del producto digital, utilizando herramientas de diseño y
prototipado como Figma u otros similares para crear wireframes, maquetas visuales y
prototipos que inciden en la comunicación de ideas y la iteración del diseño.
3. Conocimientos básicos de desarrollo web: para comprender las limitaciones y
posibilidades del diseño en su posterior desarrollo, así como la capacidad de
colaborar de manera efectiva con desarrolladores en su implementación.
4. Habilidad para la investigación y el análisis: resulta esencial para diseñar
experiencias web efectivas. Esto puede alcanzar hasta la realización de pruebas de
usabilidad, encuestas, entrevistas y análisis de datos para informar el diseño.
5. Pensamiento crítico y resolución de problemas: es fundamental en el diseño web y
UX, esto implica identificar problemas en el diseño actual, proponer soluciones
efectivas y evaluar su impacto en la experiencia del usuario.
CONTENIDO
Módulo 1: Fundamentos del Diseño Web y Experiencia de Usuario (UX/UI) - 2
semanas
● Principios del Diseño Centrado en el Usuario (DCU) y su aplicación en el diseño web y
móvil.
● Términos básicos. Etapas del DCU. Métodos de diseño centrado en el usuario.
● Introducción a los conceptos básicos de experiencia de usuario (UX) y diseño de
interfaz de usuario (UI).
○ Actividad individual: Elaboración de una presentación breve sobre los
principios del DCU y su aplicación en el diseño web.
○ Actividad colectiva: Análisis de casos de estudio de diseño de sitios web y
aplicaciones móviles populares, identificando buenas prácticas de UX/UI y
áreas de mejora.
Módulo 2: Herramientas de Diseño y Prototipado - 3 semanas
// Página 4 //
Guía de asignatura: DISEÑO WEB
● Diseño web low-code y no-code.
● Software de diseño y prototipado Figma y sus características principales.
● Creación de wireframes y maquetas visuales utilizando Figma.
○ Actividad individual: Realizar el copy site de un sitio web utilizando Figma.
○ Actividad colectiva: Diseño colaborativo de un prototipo de aplicación móvil
utilizando Figma, dividiendo tareas entre la creación de wireframes y la
aplicación de diseño visual.
Módulo 3: Desarrollo Front-End con HTML, CSS y JavaScript - 3 semanas
● Anatomía de la web.
● De la pantalla al código. Lenguajes de maquetación: HTML5, CSS3, JS. Editores de
texto. Sublime. Visual Studio Code.
● Técnicas para crear interfaces web interactivas y responsivas basadas en el uso de
lenguaje HTML, CSS y JavaScript. Frameworks. Templates.
○ Actividad individual: Creación de una página web personal utilizando HTML y
CSS para practicar la estructura básica y estilos de diseño.
○ Actividad colaborativa: Desarrollo de una aplicación web interactiva utilizando
HTML, CSS y JavaScript, con enfoque en la responsividad y la experiencia del
usuario.
Módulo 4: Aplicación Práctica y Proyectos Colaborativos - 4 semanas
● Aplicar los conocimientos adquiridos en proyectos prácticos de diseño web y móvil.
● Practicar la colaboración y comunicación efectiva dentro de equipos
multidisciplinarios.
○ Actividad individual: Desarrollo y presentación de un proyecto personal de
diseño web o móvil, aplicando los principios de UX/UI y utilizando
herramientas aprendidas.
○ Actividad colaborativa: Colaboración en un proyecto de diseño web o móvil
más complejo, desde la planificación hasta la implementación, demostrando
habilidades de trabajo en equipo y resolución de problemas.
DOCENTE
LDG Patricia Samudio Salinas - profesora encargada
Soy Licenciada en Diseño Gráfico, egresada en 2002 de la Universidad Católica Nuestra
Señora de la Asunción, Paraguay. En 2018, obtuve un Máster en Diseño Editorial y
Publicaciones Digitales en la Escuela Superior de Diseño de Barcelona, España. En el año
2023, me gradué del Fab Academy con un Diploma en Principles and Applications of Digital
Fabrication.
// Página 5 //
Guía de asignatura: DISEÑO WEB
Actualmente me desempeño como Profesora Asistente en varias instituciones:
● En la Facultad de Arquitectura, Diseño y Arte, dicto la asignatura DGVI de octavo
semestre en la carrera de Diseño Industrial, además de la asignatura libre Diseño
Web.
● En el Instituto Superior de Arte (ISA-FADA), soy docente de las asignaturas Diseño
Digital I & II en la carrera de Diseño de Indumentaria Escénica y Urbana.
● En la Facultad Politécnica de la Universidad Nacional de Asunción (FPUNA), imparto la
cátedra de Diseño Gráfico II en la carrera de Ingeniería en Marketing.
● En la Universidad Columbia del Paraguay, soy tutora en Educación a Distancia, en la
carrera de Marketing.
Mi trayectoria profesional combina la docencia con una continua formación académica, lo que
me permite aportar una perspectiva integral a mis estudiantes. Estoy comprometida con la
innovación y el uso de las últimas tecnologías aplicadas al diseño.
Áreas de interés: metodología de diseño, gestión de proyectos, experiencia de usuario,
diseño editorial, diseño tipográfico, sistemas de diseño, fabricación digital.
METODOLOGÍA
Como experiencia del aprendizaje que se plantea para lograr los objetivos declarados, se
proyecta el empleo de un mix de recursos que faciliten la participación tanto individual, como
del conjunto de los participantes, para avanzar juntos en la construcción del conocimiento. Se
plantean actividades sincrónicas a través de videoclases [Google Meet - Discord] y grupo de
estudio [presencial], los días viernes, en el horario indicado en la ficha de la asignatura,
alternando encuentros virtuales y presenciales, que constituyen espacios de tiempo donde
los participantes se encuentran para debatir, discutir, practicar, demostrar y/o presentar
avances que completan el ciclo de aprendizaje de cada semana y módulo temático.
En tanto que las actividades asincrónicas, organizadas en los módulos de aprendizaje,
conforman los insumos de información para la inmersión en el contenido y verificación del
avance del estudio, distribuido mediante recursos como lecturas, videos y actividades,
individuales o colaborativas.
Para un buen estudio recuerda:
✔ Revisar la Guía Didáctica: Consulta la guía de la asignatura y la de cada módulo.
En ellas encontrarás detalles sobre la planificación, las clases en línea
(sincrónicas), la metodología de trabajo y la evaluación. Presta especial atención a
las orientaciones para cada actividad.
// Página 6 //
Guía de asignatura: DISEÑO WEB
✔ Mantener la comunicación: La comunicación será constante a través del Foro de
Consulta de cada módulo, la mensajería personalizada, y el grupo de estudio en
Discord. Recuerda que las dudas pueden ser resueltas tanto por los compañeros
como por la docente; así fomentamos la participación activa de todos en el
proceso de aprendizaje. Las consultas enviadas por mensajería o correo
electrónico serán respondidas los viernes por la mañana.
✔ Asistir y participar en las clases sincrónicas y grupo de estudio presencial: Sea
mediante las sesiones de Videollamadas o Discord y los grupos de estudio al final
de cada módulo, estas se utilizarán para discutir y reforzar contenidos, cerrar
actividades del tema o módulo. También se aprovecharán para aclarar dudas,
tanto grupales como individuales, y para llegar a acuerdos con los participantes
en el proceso.
Planificación semanal sugerida:
✔ Descarga los materiales: Descarga las orientaciones y documentos
correspondientes a la semana de estudio.
✔ Tiempo de estudio: Dedica 1 hora a la lectura de los materiales y a la investigación
adicional, y al menos 2 horas para la realización de las actividades.
✔ Participación en foros: Participa activamente en los foros de discusión y consulta,
interactuando, aportando, y colaborando con tus compañeros.
✔ Entrega de tareas: Envía las tareas de cada módulo a través del medio indicado.
Propuesta de reglas de convivencia de la cursada:
✔ Respeto mutuo: Mantén un tono respetuoso en todas las interacciones y fomenta
un ambiente inclusivo y colaborativo.
✔ Participación activa: Contribuye de manera positiva a las discusiones y
actividades, escuchando y valorando las opiniones de los demás.
✔ Puntualidad y responsabilidad: Cumple con los plazos y participa puntualmente
en las actividades sincrónicas y asincrónicas, demostrando compromiso con el
curso.
✔ Confidencialidad y privacidad: Respeta la privacidad de tus compañeros y
docente, y no compartas información sin consentimiento.
✔ Respeto a los derechos de autor: Usa y comparte materiales del curso y otras de
forma ética, citando fuentes correctamente y respetando la propiedad intelectual.
CRONOGRAMA
Módulo Tema Tiempo Actividades Evaluación
(Inicio-Fin / horas)
// Página 7 //
Guía de asignatura: DISEÑO WEB
Módulo 1: Principios del Semanas 1 al 3 ● Video clase Participación
Fundamentos Diseño Centrado Horas: 9 h ● Lectura y Entrega TPI 1:
en el Usuario Sincrónicas: 2 h revisión de Visualización de la
del Diseño Web (DCU) y su Autónomas: 3 h materiales información sobre
y Experiencia de aplicación en el Colaborativas: 1 h ● Trabajo práctico DCU
Usuario (UX/UI) diseño web y Presencial: 3 h individual Entrega TPC 1:
móvil. ● Trabajo práctico Análisis de caso
Términos colectivo
básicos. Etapas ● Grupo de
del DCU. estudio
Métodos de presencial:
diseño centrado 07/03
en el usuario.
Introducción a
los conceptos
básicos de
experiencia de
usuario (UX) y
diseño de
interfaz de
usuario (UI).
Módulo 2: Diseño web Semanas 4 al 8 ● Video clase Participación
Herramientas de low-code y Horas: 15 h ● Lectura y Entrega TPI 2:
no-code. Sincrónicas: 4 h revisión de Site personal
Diseño y Software de Autónomas: 6 h materiales Entrega TPC 2: App
Prototipado diseño y Colaborativas: 2 h ● Trabajo práctico colaborativa
prototipado Presencial: 3 h individual
Figma y sus ● Trabajo práctico
características colectivo
principales. ● Grupo de
Creación de estudio
wireframes y presencial:
maquetas 11/04
visuales
utilizando Figma.
Módulo 3: Anatomía de Semanas 9 al 12 ● Video clase Participación
Desarrollo una web y app. Horas: 12 h ● Lectura y Entrega TPI 3:
De la pantalla al Sincrónicas: 2 h revisión de Programación del
Front-End con código: HTML5, Autónomas: 5 h materiales Site personal
HTML, CSS y CSS, JS Colaborativas: 2 h ● Trabajo práctico Entrega TPC 3:
JavaScript Presencial: 3 h individual Programación de la
● Trabajo práctico Web app
colectivo
● Grupo de
estudio
presencial:
09/05
Módulo 4: Práctica del Semanas 13 al 15 ● Video clase Participación
Aplicación trabajo en Horas: 9 h ● Lectura y Entrega TPI 4:
equipo. Sincrónicas: 2 h revisión de Proyecto de sitio
Práctica y Planificación y Autónomas: 5 h materiales web de interés
Proyectos organización del Colaborativas: 2 h ● Trabajo práctico personal
Colaborativos trabajo. Presencial: 3 h individual
// Página 8 //
Guía de asignatura: DISEÑO WEB
● Trabajo práctico Entrega TPC 4:
colectivo Proyecto de sitio
● Grupo de web de elaboración
estudio colectiva
presencial:
30/05
CATEGORÍAS DE CALIFICACIÓN
Categoría Puntos
Participación -sincrónica/asincrónica- 70%
Trabajo práctico -individual (TPI) y colectivo (TPC)- 60%
Proyecto Final 40%
DERECHO PROYECTO FINAL
PP = (0.2 × P) + (0.4 × TP)
Promedio ponderado (PP) ≥60%
Participación (P) ≥70% = 20%
Trabajo práctico (TPI + TPC) ≥70% = 40%
Habilita ≥36
No Habilita ≤36
PROMOCIÓN DE LA ASIGNATURA
EF = (0.4 × EF)
NF = PP + EF
PP: Promedio ponderado 60
EF: Evaluación final 40
NF: Nota final 100
Aprueba ≥60%
Reprueba ≤60%
INSTRUMENTOS PARA LA EVALUACIÓN
Lista de cotejo [Auto attendance] - Guía de evaluación - Rúbrica de evaluación
CRITERIOS DE EVALUACIÓN
En cada una de las categorías de calificación se medirán diversos indicadores de logro, sean
estos de nivel cognitivo, de comprensión, aplicación, análisis, evaluación y creación; que
// Página 9 //
Guía de asignatura: DISEÑO WEB
estarán detallados en las guías de actividad de cada unidad, y para las que se utilizarán
instrumentos como guías de calificación, rúbricas o escalas.
MATERIALES DE CONSULTA DE LA ASIGNATURA
https://developer.mozilla.org/en-US/ Sitio de Aprendizaje de Mozilla Inc.
https://www.w3.org Sitio oficial de la organización que propone los estándares para el
entorno web.
https://www.w3schools.com Sitio de aprendizaje de códigos y lenguaje de programación.
https://material.io Sitio de estándares de diseño para productos digitales Google.
https://developer.apple.com/design/ Sitio oficial de estándares de diseño para productos
digitales Apple.
https://play.google.com/ Tienda de aplicaciones para smartphones y tabletas - sistema
operativo Android.
https://www.apple.com/la/ios/app-store/ Tienda de aplicaciones para iPhone e iPad - sistema
operativo iOS.
https://scholar.google.com/ Buscador académico de Google
https://www.thesprintbook.com/the-design-sprint Sitio del creador del proceso de diseño
Sprint para el desarrollo de productos digitales.
https://atomicdesign.bradfrost.com/ Sitio del creador de la metodología de diseño Atomic
Design.
https://www.pinterest.es/ Plataforma social para generar moodboard de inspiración en
diversas temáticas de interés.
https://www.instagram.com/ Plataforma social de tendencias.
https://www.awwwards.com Plataforma social que valora el trabajo y esfuerzo creativo de
diseñadores, desarrolladores y agencias web alrededor del mundo. Vale la pena visitarla.
https://littlebigdetails.com Un espacio para explorar detalles que se quieran aplicar a los
productos digitales. Sitio absolutamente recomendado de tenerlo entre tus marcadores.
https://dribbble.com Un sitio alucinante de visitar; en sus palabras de presentación “is the
go-to resource for discovering and connecting with designers and creative talent around the
globe”. Altamente recomendado.
https://muz.li/ Plataforma para descubrir la mejor inspiración de diseño y noticias; especial
para diseñadores y creativos.
RECURSOS
https://www.notion.so/ Sitio de descarga del recurso Notion, gestor de tareas, notas y
proyectos.
https://www.sublimetext.com/3 Sitio de descarga del editor de texto Sublime Text
// Página 10 //
Guía de asignatura: DISEÑO WEB
https://visualstudio.microsoft.com/es/ Sitio de descarga del editor Visual Studio Code de
Microsoft.
https://www.figma.com Sitio para acceder a la aplicación Figma.
// Página 11 //
Guía de asignatura: DISEÑO WEB
