Extraescolar de Diseño Web/App - (16-18 años) Plan de Estudios - Betacode

Extraescolar de
Diseño Web/App
(16-18 años)
Plan de Estudios

¿Qué es BetaCode?
BetaCode es la primera academia de
programación para los más jóvenes
donde profesores imparten clases
semanales para completar la
formación tecnológica de las mentes
del futuro.

El proyecto nace en un mundo cada
vez más tecnológico donde la
necesidad de saber programar se ha
vuelto imperativa, siendo los
lenguajes de programación incluso
más demandados que los idiomas
en los puestos de trabajo actuales y
del futuro.

¿Por qué BetaCode?
En BetaCode preparamos a las mentes
más poderosas y capaces de la tierra,
los jóvenes.

Aquí, desde los 6 años y hasta su etapa
pre-universitaria, los 18, nos
encargamos de darles una educación
con la que se divertirán, y al mismo
tiempo se prepararán para un futuro
que les garantiza el éxito.

Somos la primera actividad extraescolar
donde los estudiantes aprenderán la
herramienta más demandada del futuro.

Nos distinguen el aprendizaje constante
y solido que ofrecemos, impartiendo dos
clases a la semana durante todo el
curso académico (9 meses).

Extraescolar de
Diseño Web/App
(16-18 años)
   9 meses de duración

   Clases online en vivo

   Martes y Jueves, 18:45-19:45

   Proyectos reales y competitivos

   Grupos reducidos

Profesores del curso

   Clara Martos     Marc Català
   Diseñadora Web   UX/UI Designer

Tecnologías aprendidas

Temario:
01. Fundamentos del                              05. Design Thinking
Diseño UX/UI                                     El Design Thinking se ha convertido en una de
En este módulo vamos a aprender qué es el        las estrategias de flujo de trabajo ágil más
diseño UX/UI, para ello vamos a definir los      usada en los últimos años.
conceptos de UX( User Experience) y UI (User     El hecho de que los alumnos empiecen a
Interface).                                      familiarizarse con esta metodología de trabajo
Para mejorar el entendimiento de los conceptos   les abrirá numerosas puertas en el futuro
se van a ejemplificar distintas situaciones      puesto que las empresas actuales buscan
donde ambos conceptos adquieren vital            perfiles con experiencia en metodologías ágiles.
importancia.                                     En este segundo módulo los estudiantes
                                                 identificarán un problema que busquen
                                                 solucionar y desarrollaran la página web/app
02. Fundamentos de                               en relación con dicho porblema.

Illustrator                                      06. Trello & Jenkins
En este módulo empezaremos a usar una de las     Siguiendo con las metodologías ágiles,
herramientas más usadas en el mundo del          aprenderemos a usar los dos programas más
diseño gráfico: Adobe Illustrator.               usados para la gestión del flujo de trabajo
Esta herramienta es usada en la actualidad por   dentro de los equipos.
miles de empresas para la creación de su logo.
Entender cómo funciona el software y las
buenas prácticas ayudará a los más jóvenes a
entender los elementos de más importancia a la
                                                 07. Fundamentos de
hora de diseñar la imagen de un proyecto.        HTML y CSS
                                                 Todo diseñador Web/App debe tener nociones
03. Illustrator Avanzado                         de lenguajes de programación de marcado. Para
                                                 ello introduciremos a los alumnos al mundo de
En este módulo aprenderemos los conceptos        la programación empezando por el lengauje
más avanzados de Illustrator. Se realizaran      HTML y CSS.
distintos proyectos que ayudarán a los           Con CSS los alumnos podrán empezar a
estudiantes a profundizar en el uso de la        agregar estilos a sus páginas web y a entender
herramienta.                                     el funcionamiento de herramientas de diseño
                                                 estudiadas con posterioridad.

04. Creación de Logotipo
con Illustrator
Con la ayuda de herramientas de diseño
gráfico ya aprendidas cómo Illustrator, Canva,
Squarespace Logo Maker, Fiverr Logo Maker,
Hatchful Logo Maker, Namecheap’s Logo
Maker, empezaremos a crear el logo de
nuestro proyecto final desarrollado a lo largo
del curso.

Temario:
08. HTML y CSS Avanzado 12. Adobe XD de 0 a
En este módulo realizaremos ejercicios con Avanzado
HTML como la creación de nuestra primera
página web, formularios y plataformas de           Un diseñador UX/UI debe saber trabajar con
registro.                                          distintas tecnologías de diseño, por eso,
Continuaremos este módulo añadiendo estilos y      aprenderemos a usar Adobe XD para realizar el
elementos UI a nuestra página web cómo             diseño de nuestro proyecto. Así pues, nuestros
botones, imágenes con márgenes definidos y         estudiantes tendrán la libertad de usar las
adaptaremos nuestra página web a distintas         tecnologías con las que se sientan más
pantallas (desktop, mobile y tablet)               cómodos.

09. Sketching con Mockflow 13. ¡Diseñamos nuestro
En este módulo empezaremos a dibujar cómo
                                                   proyecto!
será nuestra página web, para ello deberán
                                                   En este módulo empezaremos a diseñar nuestro
entender cuáles són las buenas prácticas a la
                                                   proyecto, teniendo en cuenta la imagen de
hora de diseñar una página web.
                                                   nuestra idea, colores, formatos y otros
Para realizar el esqueleto de la página web/app
                                                   elementos que definirán el diseño futuro de
usaremos el programa Mockflow, que nos
                                                   nuestro proyecto.
permite de una forma muy intuitiva hacer un
esbozo de nuestro proyecto.
                         14. ¡Damos vida a nuestro
10. Fundamentos de Figma proyecto!
Una vez realizado el esqueleto de nuestra          Una vez diseñado el proyecto, le daremos
web/app empezaremos a diseñar nuestro              dinamismo y funcionalidades siendo posible
prototipo. Para ello usaremos la herramienta       clicar los botones y saltar de una página a otra.
más usada dentro del mundo del diseño
web/app: Figma.
Estudiaremos durante 6 semanas el software
para que los alumnos obtengan confianza con la
                                                   15. Testing de nuestro
herramienta.                                       diseño
                                                   Con la ayuda de Useberry haremos distintos
11. Figma Avanzado                                 «tests» para conocer el comportamiento de
                                                   nuestros usuarios dentro de la web diseñada y
En este módulo aprenderemos los conceptos          veremos oportunidades de optimización de
avanzados de Figma, aprenderemos a usar            nuestra web/app.
plugins, crear diseños colaborativos y distintas
estrategias para la optimización de nuestros
diseños.

Proyectos desarrollados por
nuestros alumnos

Altent                             TwoDo App
Plataforma de apoyo académico      TwoDo App permite que terceros
para optimizar la búsqueda de      realicen tus tareas cuotidianas
recursos didácticos presentes      mediante un sistema similar al de
de forma online.                   Uber.

Herramientas usadas: Figma,        Herramientas usadas: Adobe XD,
Illustrator, Bubble y Useberry     Illustrator y Useberry

https://altentv2.bubbleapps.io/v   https://xd.adobe.com/view/c296c
ersion-test/landing_mobile         ba7-e168-47ed-8c45-
                                   7785dc2bea8a-97c5/

Extraescolar de
Diseño Web/App
      (16-18 años)

info@betacode.es

www.betacodeschool.com

@betacode.school