Máster Online en Diseño UI y Desarrollo Web

Una de las áreas con mayor demanda de profesionales en la actualidad es la del diseño de interfaces web UI y el desarrollo web. Este diseño se encarga, principalmente, de la creación de las partes que podemos ver en un sitio web: es decir que si entras en cualquier página web (ya sea en un ordenador, en una tablet o en un móvil) y te gusta el diseño de ese site, eso es gracias al diseñador web (o equipo de diseñadores) que hay tras ese trabajo.

Es un área bastante técnica y para que los proyectos se realicen con éxito requieren de un extra de orden, meticulosidad y paciencia. Si dominas esta disciplina, tienes el premio más cerca: un buen profesional en diseño web suele tener acceso a ofertas con mejores condiciones laborales que la media.

Nuestro máster gira en torno al aprendizaje cualificado de la profesión de diseño web y desarrollo front-end a través de los lenguajes CSS + HTML y el CMS WordPress, buscando el equilibrio perfecto entre el manejo de estos lenguajes, los conceptos inherentes al diseño de interfaces actual, la educación visual y la práctica real.

HTML y CSS

Es imprescindible alcanzar una base sólida en los lenguajes HTML y CSS. Lo haremos a través de una serie de prácticas originales que recorrerán todas las posibilidades del código desde el principio centrándonos en el diseño.

  • Entender las partes de un documento HTML y el etiquetado semántico para los contenidos según posicionamiento SEO con HTML5.
  • Configurar y estructurar un sitio local para su correcto funcionamiento.
  • Crear hojas de estilo CSS y sus formas de vinculación con el documento HTML.
  • Dominar los selectores CSS básicos para seleccionar la estructura HTML y selectores avanzados para dominar todo el árbol del DOM.
  • Aprender a sacarle partido al inspector de código de Chrome, herramienta indispensable de la maquetación web.
  • Entender las distintas formas de posicionamiento: relativo, absoluto, fijo, flotante…
  • Recorrer todas las propiedades CSS que nos van a permitir dibujar formas y dominar los estilos gráficos.
  • Trabajar con todo tipo de fuentes tipográficas, de Google Fonts, personalizadas y fuentes de iconos.
  • Trabajar todas las opciones de navegación: vínculos, desplegables, anclas…
  • Estructurar etiquetas de formulario según UX y darles las funcionalidades apropiadas.
  • Centrarnos en metodologías de sintaxis para hacer un código limpio con BEM y SMACSS.

Nuevos espacios: Flexbox y Grid Layout

El diseño web ha experimentado cambios profundos en muchos aspectos pero quizá dominio del espacio ha sido el más rápido. Tenemos que controlar el espacio del navegador en todos los dispositivos.

  • Entender el nuevo espacio web fluido y cambiante entre dispositivos.
  • Desarrollar la arquitectura de contenido según la sintaxis de cajas Flexbox.
  • Aprender la nueva sintaxis Grid Layout, un paso más frente a las posibilidades de estructurar el contenido.
  • Dominar las técnicas CSS para crear un diseño responsive de calidad.

Animación CSS y SVG

El movimiento en nuestra web aporta dinamismo y señaliza funciones para la interacción más amigables y atractivas. Aprenderemos las opciones que nos da CSS3 y el formato de imágenes SVG.

  • Aplicar las propiedades CSS3 de animación con transition, transform y keyframes.
  • Dominar el dibujo con etiquetas SVG y sus posibilidades de animación con SMIL.
  • Hacer la integración de vídeo mp4 y su correcta aplicación en el código.

Frameworks: Bootstrap 5

Los frameworks son marcos de trabajo que ayudan al desarrollo de webs en equipo. Bootstrap 5 fue desarrollado por los desarrolladores de Twitter y hoy en día es uno de los más utilizados profesionalmente.

  • Configurar y vincular Bootstrap 5 para comunicarlo con nuestra web.
  • Dominar el sistema de columnas del grid layout responsive de Bootstrap y su aplicación.
  • Aprender las clases de visibilidad y ayuda de este framework.
  • Integrar la variedad de componentes JavaScript de Bootstrap para hacer slides, desplegables y pop-ups.

Prototipado UI con Adobe XD

Uno de las fases más importantes a la hora de crear una web es preparar un prototipo que sirva tanto al equipo de trabajo como al destinatario final para conocer como será su página. Para esta función se utiliza el programa de prototipado de Adobe, llamado XD.

  • Entender qué diferencia hay entre wireframes y prototipos de alta fidelidad.
  • Conocer los diferentes tipos de layout e identificar las partes de una interfaz.
  • Entender los principios de la usabilidad y el diseño UX.
  • Ver las herramientas de dibujo, símbolos e imágenes en Adobe XD.
  • Crear un prototipo interactivo de alta fidelidad y animado con Adobe XD.
  • Dominar los distintos formatos de imagen y su optimización para Internet: GIF, JPG, PNG y SVG.
  • Ver las formas y opciones de presentación de nuestro prototipo al cliente.

WordPress

La mayor parte de las páginas que vemos en Internet necesitan cambiar sus contenidos de forma dinámica, para eso utilizan gestores de contenidos. El más popular por su versatilidad y facilidad de uso es WordPress.

  • Aprender a instalar y configurar el CMS WordPress.
  • Creación y administración de contenidos de tipo páginas, entradas y categorías.
  • Conocer la diferencia entre instalar un tema externo y crear un tema hijo.
  • Empezar desde cero a crear nuestro propio tema con la jerarquía de archivos PHP de WordPress.
  • Dominar las funciones básicas PHP del núcleo de WordPress para consultar la base de datos.
  • Entender los diferentes archivos PHP que componen un tema y saber cuando usar cada uno.
  • Configurar y personalizar el loop de WordPress para personalizar nuestras consultas a la base de datos.
  • Instalar y configurar los plugins más importantes para nuestro tema de WordPress.
  • Aprender algunas funciones avanzadas para añadir campos personalizados a la gestión de contenidos de nuestro tema.
  • Optimizar y revisar ajustes previos para la correcta publicación de nuestro tema.

Proyecto final

Nuestro objetivo es crear un perfil profesional capaz de trabajar por cuenta propia o dentro de una empresa. Así que como proyecto principal simularemos una situación real eligiendo entre dos briefings de proyectos empresariales de sitio web. Tendremos que hacer el prototipo de la interfaz usando Adobe XD y luego desarrollarlo para convertirlo en una web real aplicando todos los conocimientos adquiridos a lo largo del Máster de Diseño UI y Desarrollo Web.

Requisitos para la obtención del título

Para finalizar el máster y obtener el título correspondiente, el alumno deberá efectuar con éxito la entrega de los proyectos y prácticas indicadas por el profesor en los plazos que se especifiquen. Se trata de una titulación propia de La Hauss.