Curso online de

Profesión online:
Diseñador Full Stack
www.ebac.mx
Curso online de
Profesión online:
Diseñador Full Stack
Conviértete en un profesional con habilidades en UX/UI y Front End.
Aprende desde crear la interfaz hasta la programación de productos
digitales.

Aumenta tus oportunidades laborales en una de las profesiones más

demandadas del mercado y destaca como Diseñador Full Stack.

Duración
16 meses con más de 64 horas de videolecciones

Online
Estudia a tu ritmo, donde quieras y cuando quieras

Prácticas y tutorías
Actividades prácticas y feedback personalizado

Proyecto profesional
Diseña un mini sitio web y una app desde cero
 ¿A quién va dirigido
este curso?

Principiantes en diseño UX/UI

Si quieres profundizar en los conceptos de interfaz y experiencia

de usuario para crear maquetaciones atractivas y funcionales,
este curso es para ti. Aprende técnicas de diseño gráfico que te
permitirán crear prototipos y armar aplicaciones desde cero
para ingresar al campo laboral.

Diseñadores y Creativos

Para profesionales con cierta experiencia que buscan renovar y

enriquecer sus conocimientos, cambiar de área o crecer en la
empresa que ya operan. Profundiza en UX/UI, una de las áreas
más valoradas en el mercado actual, y estarás preparado para
trabajar en equipos de diseño de productos en bancos,
empresas de TI, agencias de publicidad y más.

Diseñadores UX y UI
Además del diseño, aprende a usar la interfaz para garantizar la
mejor experiencia de usuario. Práctica tus habilidades y descu-
bre cómo aplicarlas a la programación en soluciones web para
crecer en el diseño full stack.
 ¿Qué aprenderás?
Necesidades del usuario
Aprende a identificar las necesidades de
los usuarios, diseñar el flujo de navegación
y analizar las investigaciones de compor-
tamiento para garantizar los mejores
resultados.
Usabilidad y diseño responsivo
Adapta proyectos para múltiples plata-
formas utilizando diseño receptivo, flujos
de navegación, wireframes, buenas
prácticas de texto y microinteracciones.
Figma
Domina la plataforma más avanzada
para crear productos digitales, construir
prototipos navegables, estandarizar y
optimizar proyectos, además de la facili-
dad de testear con los usuarios.
Metodologías ágiles
Como los proyectos de Diseño UX/UI son
extensos, te enseñaremos a organizar
prioridades y separar entregas en
etapas independientes, utilizando la
rutina de trabajo ágil.
API y SEO
Utiliza las últimas tecnologías de integra-
ción de API y SEO (optimización de moto-
res de búsqueda.
Prototipado y
microinteracciones
Conoce las bases del diseño de interfaces,
descubre cómo mejorar la usabilidad en
plataformas web/móviles y realiza prue-
bas para validar la experiencia de usuario.
Diseño perfecto de píxeles
Descubre la importancia del refinamiento
en el proceso de diseño y cuáles son los
principales detalles que garantizan la
calidad de la entrega.
JavaScript, JQuery y React
Aprende a usar las herramientas para
simplificar la navegación y habilitarlas
en tus interfaces para que sean fun-
cionales e interactivas.
Desarrollo web
Trabaja con HTML, CSS y frameworks
como los lenguajes Bootstrap para
crear interfaces más inteligentes y
receptivas.
Certificado
EBAC
 Conoce a
tus profesores
 Contenido del curso
La profesión online de Diseñador Full Stack se divide en 64 módulos.
Tendrás acceso ilimitado para que estudies cuando quieras y donde quieras.

Parte 1. Diseño de producto

Conoce las actividades relacionadas con un diseñador full stack enfocado en la

creación de productos digitales, las habilidades que necesita, los distintos mo-
delos de negocio, dónde podemos crear productos digitales y las característi-
cas de un MVP.

Fundamentos del diseño de producto

Rol y funciones de un diseñador de producto
Modelos de negocio
Qué es un MVP (Producto Mínimo Viable)
Lean Startup
Proceso para diseñar una plataforma digital

Actividades:

- Escribir las actividades de un Product Designer.

- Analizar los modelos de negocio que revisamos en el módulo y elegir uno para
desarrollar una página web y una app.
- Hacer un análisis de competencia, benchmark y el posicionamiento de la
compañía con el modelo de negocio seleccionado e incluir una investigación
de mercado y un FODA.
- Definir el MVP de tu proyecto.

Parte 2. Diseño UX/ UI

Descubre las diferencias entre UX y UI, algunas metodologías que puedes apli-
car para crear productos centrados en el usuario y cuál es el proceso para la
creación de productos digitales.

- Introducción a UX/UI
- Fundamentos y principios de UX/UI
- Metodologías de diseño
- Design Thinking
- Metodología Lean
- Metodología Agile
- Proceso de diseño de una plataforma digital

Actividades:

- Catalogar los conceptos de UX vs. los de UI.

- Con base en el FODA anterior, plantear un problema que detectaste y con
base en las metodologías ágiles, proponer dos soluciones.
- Duplicar el archivo de la tarea pasada, y describir paso a paso el proceso de
tu proyecto, con base en la metodología Lean.

Parte 3. Creatividad e innovación

Aprende a desarrollar tu creatividad, conoce distintas herramientas que podrás
implementar en tu proceso creativo y que te ayudarán a tomar las decisiones
correctas durante este paso. Por último, te compartiremos algunas métricas
para evaluar la viabilidad de las ideas propuestas.

- Pensamiento creativo
- Herramientas y generación de ideas
- Ejercicios que estimulen la creatividad
- Desarrollo del pensamiento divergente
- Toma de decisiones en el proceso creativo
- Tablas de evaluación
- Rúbricas Harry's Profile
- Matriz de impacto vs esfuerzo
- Votación y heatmaps

Actividades:

- Hacer una lluvia de ideas de posibles soluciones y funcionalidades, para la

plataforma que vas a diseñar.
- Utilizar tres de las herramientas vistas en la lección para generar 20 ideas de
nuevas formas para mejorar tu proyecto.
- Clasificar las ideas del ejercicio anterior en una matriz de impacto vs esfuerzo.

Parte 4. Principios y sistemas de diseño

Identifica los fundamentos de UI y cómo aplicarlos al diseño del producto,
aprende a trabajar con Atomic Design, sistemas de diseño, y por último, crea las
guías de estilo de tu producto digital.

- Principios de UI
- Atomic design y sus componentes
- Diseño de componentes
- Sistemas de diseño
- Guías de estilo

Actividades:

- Elegir tu idea favorita del ejercicio anterior, haz un storyboard para detallar que
pasa antes, durante y después de usar tu aplicación.
- Estructurar el layout de tu proyecto.
- Crear los componentes con sus variantes de los elementos de su interfaz.
- Realizar el sistema de diseño de tu proyecto.
- Generar y aplicar tu propio sistema de diseño y/o guía de estilos.

Parte 5. Construcción y pruebas de prototipos

Conoce todo lo relacionado al diseño de prototipos y la relevancia que le dará
a tu proceso de diseño de productos digitales, las diferentes clases de prototi-
pos que existen y cómo evaluarlos.

- Prototipado
- Prototipado en el diseño
- Prototipos digitales
- Prototipos de alta y baja fidelidad
- Evaluación de prototipos

Actividades:

- Crear el wireframe de baja fidelidad de las pantallas clave de tu app.

- Complementar los wireframes de tu ejercicio anterior.
- Redactar las pautas para hacer una prueba de usabilidad para evaluar tu
idea del proyecto.

Parte 6. Figma
Entiende las bases para organizar la información y los pasos que seguirá el
usuario dentro de la interfaz, desarrolla las primeras vistas de tu proyecto y
aprende a diseñar prototipos interactivos con efectos y técnicas avanzadas de
micro y macro interacciones para representar cómo será la experiencia final
del usuario.

- Arquitectura de la información en la interfaz digital

- Diseño visual para la interfaz en Figma
- Gráficos y elementos en la interfaz
- Herramientas avanzadas de Figma
- Creación de prototipos
- Interacciones avanzadas
- Documentación y publicación del proyecto

Actividades:

- Diseñar los wireframes de alta fidelidad del flujo de usuario de tu proyecto.

- Diseñar la interfaz de la pantalla de inicio.
- Ajustar la interfaz de la pantalla de inicio y continuar con el resto de pantallas
agregando estilos y gráficos.
- Terminar las pantallas faltantes del flujo del usuario y volver a hacer los ele-
mentos de diseño, con Autolayout.
- Hacer el prototipo interactivo en Figma de tu proyecto.
- Aplicar micro y macro interacciones en el prototipo.
- Compartir el resultado final de tu proyecto.

Parte 7. Gestión de un proyecto UX/UI

Aprende a presentar un producto y a evaluar la viabilidad del mismo con el ob-
jetivo de mejorarlo y hacer ajustes necesarios sobre la marcha.

- Hipótesis
- Retroalimentación de cliente
- Ajuste de proyecto (metodología, alcance, scope)
- Ajuste de prototipo
- Documentación

Actividades:

- Recolectar feedback de tus usuarios y documentar los hallazgos obtenidos.

- Realizar los ajustes necesarios a tu producto con base en el feedback obtenido.

Parte 8. Desarrollo Web

Aprende los fundamentos del Front End, los principios básicos de programación
en lenguajes HTML 5 y CSS3 y cómo estructurar toda la información para crear
una página web.

- Desarrollo web y frontend

- Conceptos, etiquetas y estructura de HTML
- Estilo de elementos individuales y diferentes grupos
- Frameworks CSS
- Bootstrap

Actividades:

- Configurar el VS Code donde el estudiante empezará a trabajar.

- Maquetar la estructura de un sitio web con texto, imágenes, listas y tablas.
- Maquetar un sitio web con un formulario y las etiquetas multimedia.
- Crear un sitio con HTML y CSS.
- Aplicar los conceptos aprendidos al sitio creado en la lección anterior.
- Crear una interfaz web con bootstrap.
- Refactorizar la hoja de estilos usada en la actividad pasada, usando la arqui-
tectura aprendida.
- Agregar estilos con SASS a archivo HTML.
- Refactorizar la hoja de estilos usada en la actividad de CSS3 II con las caracte-
rísticas y los conceptos de SASS.

Parte 9. Programación con JavaScript

Comprende los fundamentos de Javascript y su sintaxis básica con ES6, la
construcción de sitios web interactivos a partir de los conceptos de DOM y sus
eventos con JavaScript.

- Javascript
- Sintaxis básica con ES6
- Conceptos avanzados de JavaScript
- Creación de sitios web interactivos
- Conceptos DOM
- Eventos con JavaScript

Actividades:

- Crear con las primeras variables y data structures.

- Desarrollar las primeras funciones de JS, así como condicionales y loops.
- Aplicar los conceptos de ES6, crear las primeras classes con el uso de localsto-
rage.
- Diseñar una mini interfaz interactiva con los eventos de DOM.

Parte 10. Desarrollo Front End Stack

Descubre las funcionalidades básicas y avanzadas de jQuery para el desarrollo
web, el SEO, su importancia en el desarrollo web y cómo implementarlo a nivel
de código. Aprende a usar Git y GitHub para tener un seguimiento de los cam-
bios realizados y algunas de las herramientas online para desplegar sitios web
o web apps.

- jQuery
- Accesibilidad en sitios web
- SEO: Search Engine Optimization
- Control de Versiones: Git y GitHub
- Herramientas de despliegue

Actividades:

- Cambiar las funciones VanillaJS del mini sitio web.

- Hacer los cambios necesarios en el mini sitio creado para hacerlo accesible.
- Ajustar la optimización SEO.
- Cargar archivos del mini sitio web a un repositorio de GitHub por medio de Git.
- Desplegar la web app creada en el módulo anterior en GitHub Pages y Netlify.
- Ejercicio con promesas, programar una promesa que se resuelva o rechace
correctamente con las condiciones indicadas.
- Realizar un mini sitio donde se consulte un API y muestre la información de la
respuesta HTTP al dar click en un botón.

Parte 11. React y Redux

Introducción a la librería de Javascript, React y sus funcionalidades para el de-
sarrollo de web apps, Redux Toolkit y los conceptos básicos de Typescript. Fun-
damentos de TDD y aprende los beneficios de las pruebas para ejecutarlas e
integrarlas al desarrollo web.

- React
- Tipos de estilos en React
- Redux
- Introducción a Typescript
- TDD: Test Driven Development con Jest

Actividades:

- Realizar una interfaz básica de React que incluya un formulario y despliegue la

información ingresada en los campos.
- Desarrollar una web app que haga consultas a una API y muestre la informa-
ción de la respuesta y al dar click en cada elemento muestre sus detalles.
- Construir una web app de simulación con login e interfaz principal.
- Refactorizar el CSS de la web app pasada por styled-components.
- Realizar una web app de tareas por realizar, donde se pueda ingresar por
medio de un input y se pueda listar.
- Refactorizar la app de React II con Redux.
- Integrar Typescript a la app de React II.
- Agregar tests con Jest al app de React II.
- Resolver algunos ejercicios y preguntas de HTML, CSS, Javascript y React que
son comunes dentro de una entrevista técnica.
 Metodología del curso

Clases en vídeo
Tendrás acceso a todo el material del
curso en la plataforma digital.

Pon tu aprendizaje en práctica

El curso tiene actividades que
puedes hacer a tu ritmo.

Atención personalizada
Recibe corrección y retroalimentación
del tutor sobre tus proyectos.

Proyecto final
Desarrolla un proyecto profesional para
enriquecer tu portafolio.
 La Escuela Británica de Artes Creativas y Tecnología
(EBAC) es una institución innovadora de educación
superior en Artes Creativas y Tecnología que ofrece
cursos y programas de especialización en línea.

+45 +95.000
сursos profesionales en el área alumnos estudiando con
de IT, diseño, marketing, audio- nuestros cursos online
visual, fashion y negocios

100% +40
de los profesores y coordi- empresas colaboran en el de-
nadores son expertos y refer- sarrollo de cursos, proyectos
entes en el mercado laboral reales y programas de prácticas
Curso online de
Profesión online:
Diseñador Full Stack
www.ebac.mx