INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO

CIBERTEC

DIRECCIÓN ACADÉMICA
CARRERAS PROFESIONALES

CIBERTEC

MISIÓN: Ser la institución líder de educación superior técnica en el Perú con alcance a nivel nacional.

VISIÓN: Formar profesionales íntegros y competentes brindando una educación superior de alta calidad
que contribuya al desarrollo económico y ambiental del país.

I. INFORMACIÓN GENERAL DEL CURSO

Curso : Diseño De Interfaces Multimedia II (2372)

Ciclo : Tercero
Período : 2021
Horas : 3 laboratorio
Carrera(s) : Diseño Gráfico

II. INTRODUCCIÓN

Curso propio de la carrera Diseño Gráfico que pertenece a la línea de DISEÑO DIGITAL
INTERACTIVO Y SOCIAL MEDIA que brinda conceptos y prácticas avanzadas para el desarrollo de
sitios web responsive, aplicando los conceptos avanzados de UI / UX.

III. METODOLOGÍA

El proceso de enseñanza- aprendizaje se basa en el aprendizaje a partir de la experiencia. Busca

motivar al estudiante a través de situaciones cercanas a la realidad y propiciar la reflexión para la
resolución de problemas en los que se aplican de forma práctica los conocimientos adquiridos.

El aprendizaje del curso se consolida con el desarrollo de un proyecto de investigación aplicada

asesorado por el docente.

Esta metodología contribuye a que el alumno sea protagonista de su aprendizaje individual y

colaborativo mientras que el docente asume un rol de planificador, facilitador y guía, creando
escenarios que permiten a los alumnos la adquisición de competencias profesionales.
IV. LOGRO DEL CURSO

Al finalizar el curso el alumno será capaz de desarrollar e implementar un sitio web básico,
definiendo la arquitectura del contenido y aplicando conceptos de web responsive, UX / UI en el
diseño de la interfaz para SmartTV, tablets, web, a través del uso de software especializado.

V. UNIDADES DE APRENDIZAJE

UNIDAD 1. Arquitectura y diseño avanzado de interfaces para un sitio web Duración: 12 horas

Logro de la Unidad de Aprendizaje

Al finalizar la unidad, el alumno define la arquitectura de un sitio web y diseña interfaces en Photoshop
aplicando los conceptos de UI / UX.

Capacidades Conocimientos

1. Define la arquitectura de un sitio webTemario

recopilando la información, Tema 1: Diseño de experiencia de usuario UX
organizándola, discriminándola y - Que es UX
asignándole la importancia para su - Beneficio de aplicar UX.
visualización anticipando modificaciones - Proceso para el desarrollo de experiencia de usuario UX.
futuras. - Brief e investigación de usuario.

2. Crea un brief y una estrategia para un Tema 2: Contenido estratégico y Arquitectura

sitio web aplicando los conceptos de UI y de la Información
UX, que le permitirá sabe cuáles son los - ¿Qué es la arquitectura de la información en un sitio
objetivos, el alcance y lo que deseamos web?
transmitir a través del sitio, y por otro - Formas de organizar la información en una página web.
lado lograr un lenguaje claro con el - Ventajas de organizar la información en una página web.
cliente.
Tema 3: Diseño de Interfaces pensadas en el Usuario - UI
3. Maqueta (wireframe) el diseño de una - Que es el diseño de Interfaz de Usuario o UI
interface para web responsive basado en - Diseño de wireframe
los conceptos de Arquitectura de la - Mapa y recorrido del sitio
Información UI y UX. - Test de usabilidad
- Diseño de interacción.
Evidencia de Aprendizaje
Sitio web: Brief y estrategia UI/UX y diseño
de maqueta: Elabora un brief para el sitio
web define las estrategias UI / UX para tu
sitio creando una maqueta (wireframe) web.
- AP1
UNIDAD 2. Diseño de un sitio web con Adobe Photoshop Duración: 9 horas

Logro de la Unidad de Aprendizaje

Al término de la unidad, el alumno diseña un sitio web responsive en abobe Photoshop.

Capacidades Conocimientos

1. Prepara archivos en Photoshop para elTemario

diseño de sitio web usando Grid.
Tema 4: Preparación del archivo de diseño web.
2. Diseña un sitio web en Photoshop basado - Que es un grid de diseño
en Grid bootstrap. - Grid pensados para responsive.
- Configurar archivo con grid responsive en Photoshop.
3. Adapta el diseño para celulares y tablets
para visualizar su comportamiento
responsive. Tema 5: Diseño Visual del sitio web.
- Diseño de la página de inicio
4. Prepara y exporta los elementos del - Diseño del menú de navegación
diseño para su uso en editores web. - Diseño de contenido web.
- Diseñando para Smartphone y Tablets

Evidencia de Aprendizaje Tema 6: Preparando y exportando los elementos

de diseño.
Sitio web: Diseño de sitio web en Photoshop: - Dividiendo el diseño por sectores.
Diseña la página de inicio y 2 páginas de - Separando diseño por archivos
contenido (quiénes somos y datos de - Generar recursos de imágenes
contacto) en PHOTOSHOP definiendo la
arquitectura del contenido y aplicando
conceptos de UX / UI.) - AP2
UNIDAD 3. Introducción a HTML5 – ONEPAGE con Dreamweaver Duración: 09 horas

Logro de la Unidad de Aprendizaje

Al término de la unidad, el alumno aprende los conceptos básicos del código HTML. Implementa una ONE
PAGE dividiéndola en 3 secciones Cabecera (Header), Contenido (Section) y pie de página (Footer), Con el
programa Dreamweaver.
Capacidades Conocimientos
1. Conoce los conceptos básicos del
lenguaje HTML. Temario
Tema 7: Introducción a HTML
2. El alumno prepara una página web en - Qué es HTML
Dreamweaver comprendiendo la - Lo nuevo en HTML 5
estructura HTML básica. - Estructura HTML5
- Etiquetas y atributos estructurales HTML
3. El alumno implementa la página web de
inicio con contenido responsive.
Tema 8: Preparando un sitio web Responsive en
Dreamweaver
- Características principales de Dreamweave
- Espacio de trabajo de Dreamweaver.
- Configuración de un sitio web
- Doctype
- ONE PAGE <head> (etiqueta: title, meta.
Link)
- ONE PAGE <header> (Etiqueta: img, nav, ul, li)
Evidencia de Aprendizaje - ONE PAGE <body> (main, div, h1, h2 h3, h4, label, p,
img)
Diseño web en Adobe Dreamweaver: - ONE Page <footer> (div, h3, img)
Colocando imágenes, etiquetas, y los
vínculos necesarios para navegar por todo el
contenido del ONE PAGE.) - AP3
UNIDAD 4. Hoja de estilo en cascada CSS Duración: 15 horas

Logro de la Unidad de Aprendizaje

Al término de la unidad, el alumno elabora un ONE PAGE en HTML implementado con nuevos elementos,
recursos de contenido y personaliza su diseño utilizando hojas de estilo CSS
Capacidades Conocimientos

1. El alumno conoce los conceptos de lasTemario

hojas de estilo CSS.
Tema 9: Introducción y aplicación de CSS.
2. El alumno maneja selectores y - Qué es CSS
propiedades de las hojas de estilo y las - Estilos CSS aplicado al menú de navegación
aplica al contenido de la página utilizando - Estilos CSS aplicado al cuerpo de sitio web
el panel de diseñador CSS en - Estilos CSS aplicado al Pie de página
Dreamweaver.
Tema 10: Navegaciòn OnePage.
3. El alumno personaliza el diseño uno ONE - Navegación con anclas
PAGE y genera una navegación aplicando
anclas.

Evidencia de Aprendizaje

Sustentación del proyecto: (Presentación de

ONE PAGE desarrollado en Adobe
Dreamweaver implementando CSS: La
presentación debe contener todo el material
desarrollado en las presentaciones anteriores
- SP1

VI. EVALUACIÓN
Fórmula del Curso:

Promedio Final = 25%(CL1) + 30%(CL2) + 45%(CL3)

Dónde: CL = Caso Práctico de Laboratorio

Cronograma:
TIPO DE EVALUACIÓN SEMANA
CL1 06
CL2 10
CL3 14
Consideraciones:
• La nota mínima aprobatoria es 13.
• Ninguna evaluación es susceptible de eliminación.
• El curso NO considera la posibilidad de rendir un Examen Sustitutorio.

VIII. BIBLIOGRAFÍA

Bibliografía Básica

• BROKS , Kevin 2010 Storytelling for User Experience UX: Crafting Stories for
BetterRosenfeld Media; 1st edition edition (15 April 2010). (1933820470)

Bibliografía Complementaria

• GOMEZ LOPEZ, Julio 2011Construcción de páginas web STARBOOK EDITORIAL, 2011

(9788492650842)