Domina el Diseño Web y Figma.
Conviértete en un experto en Figma y diseño web con tácticas líderes en la industria que te permitirán crear proyectos de alto nivel con seguridad y de forma profesional.
Diseña más rápido.
Diseña mejor.
Accede a más de 70 lecciones enfocadas a la práctica para mejorar tus habilidades como diseñador.
Desde las bases del diseño web a crear prototipos interactivos y exportarlos en la tecnología que prefieras, de principiante a experto.
Descárgate los archivos de Figma que te ayudarán a trabajar de forma más eficiente y profesional y agilizar tus flujos de trabajo.
Accede a la comunidad exclusiva de WhatsApp donde responderemos dudas y preguntas mientras te rodeas de otros diseñadores como tú
Contenido teórico
Aprende los pilares del diseño web.
Diseñar bonito está bien, pero en el diseño web la estética no lo es todo. No es un arte, es una ciencia. Solo dominando sus fundamentos podrás crear proyectos funcionales, efectivos, con sentido lógico y con un propósito claro.
Guía de estilo
Aplícalo en todos tus proyectos .
Creando una guía de estilo o un design system definiremos colores, tipografías, estilos o variables y nuestros componentes para poder usarlos en nuestros proyecto de manera práctica y eficiente.
Proyecto web
Ejemplos prácticos.
El framework exacto con todos los pasos que tienes que seguir para tu proyecto profesional. Una guía y una plantilla para cada uno de tus proyectos a partir de ahora.
Descargables
Accede a los documentos que mejorarán tu productividad.
Los documentos que descargarás en este curso harán tu trabajo más fácil y organizado. Tendrás acceso a: Documento de trabajo, Guía de estilo, Documento de wireframe, Plantillas de diseño, Recursos, Documento de interacciones y Documento de animaciones.
Proyecto web
Aprende a gestionar un proyecto web de manera profesional, desde la planificación hasta la entrega final.
Para lograr proyectos consistentes y funcionales, es clave seguir fases previas y posteriores al diseño. En este curso, dominarás cada etapa del proceso, creando productos sólidos y afrontando cualquier proyecto con confianza y metodología profesional.
Organiza toda tu investigación de forma practica y en un sólo documento.
01
Aprende a crear Sitemaps para definir tus proyectos, ya sea a mano o gracias a la IA.
02
Crea wireframes de manera sencilla y profesional para tus proyectos.
03
Busca inspiración para tus proyectos y organízala para trabajar mejor.
04
Define tus estilos, variables y componentes, para trabajar de forma óptima.
05
Define tus estilos, variables y componentes, para trabajar de forma óptima.
06
Presenta tu diseño a cliente, anota sus correcciones y ajusta pequeños detalles.
07
Aprende a diseñar de forma correcta para que tu diseño se adapte a cualquier dispositivo.
08
Lleva tu diseño a la vida, crea interacciones y animaciones para hacerlo real.
09
Figma es muy potente pero hay detalles que se escapan, aprende a gestionarlo.
10
Style Guide
Crea una guía de estilo para cada proyecto.
Un design system o guía de estilo no solo garantiza la coherencia en tus proyectos, sino que también optimiza tu flujo de trabajo. Al dominar esta materia, podrás diseñar con mayor rapidez, precisión y confianza, elevando la calidad y eficiencia de tus proyectos.
Crea la jerarquía tipográfica ideal para tu proyecto y úsala de forma simple.
Define cuál será la estructura de tu prototipo y aprende a diseñar con grids.
Setea tu propio set de iconos ideal para cada proyecto al que te enfrentes.
Define las sombras una sola vez, y no deberás volver a pensar en ellas.
Crea tu set de botones, sus interacciones y variantes, aplícalos a todo tu proyecto.
Aprende a crear inputs que te funcionarán para cualquier proyecto web o app.
Si no trabajas con estilos estás trabajando el doble, crea tus estilos y mejora tu flujo de trabajo.
Las variables son vitales en tus procesos, aprenderemos como funcionan y para que sirven.
Temario curso
Pongámoslo todo en práctica
Todo esto es lo que vas a aprender, lecciones específicas para profundizar en cada punto. Exploraremos cada etapa clave para crear un proyecto web desde cero hasta su finalización.
1. Introducción
- 1.1 Presentación 01:52
- 1.2 ¿Cómo funciona el curso? 37:23
2. Diseño visual
- 2.1 Introducción 01:52
- 2.2 El color 37:23
- 2.3 Tipografía 38:08
- 2.4 Formas 10:49
- 2.5 Imágenes 07:11
3.UI
- 3.1 Introducción 00:27
- 3.2 Atomic design 05:37
- 3.3 Botones 17:46
- 3.4 Iconos 30:09
- 3.5 Espaciado 20:45
4. Introducción a Figma
- 4.1 Introducción 00:40
- 4.2 ¿Qué es Figma 10:24
- 4.3 Dashboard 02:29
- 4.4 Figjam 11:22
- 4.5 Figma Slides 03:11
- 4.6 Figma Design 10:49
-
4.7 Autolayout00:52
- 4.7.1 Teoría del Autolayout 01:25
- 4.7.2 Autolayout Simple 11:29
- 4.7.3 Fill, Hug, Fixed 14:38
- 4.7.4 Canvas Stacking 03:07
- 4.7.5 Constrains 04:47
- 4.7.6 Posición Absoluta 02:51
- 4.7.7 Máximos y mínimos 10:57
- 4.7.8 El shortcut mágico 02:00
- 4.8 Interacciones y animación 09:10
-
4.9 IA Figma00:39
- 4.9.1 IA Generativa 17:07
5. Gestión de proyecto 1/2
- 5.1 Introducción 00:38
- 5.2 Setear documento 03:18
- 5.3 Resumen proyecto 02:24
-
5.4 Investigación01:45
- 5.4.1 El Brief 20:31
- 5.4.2 La competencia 05:05
- 5.4.3 Los usuarios 07:37
- 5.4.4 El documento 02:50
-
5.5 Sitemap00:20
- 5.5.1 Teoría 04:17
- 5.5.2 Crear el Sitemap 12:35
-
5.6 Wireframes00:59
- 5.6.1 Teoría 11:05
- 5.6.2 Wireframes a mano 17:24
- 5.6.3 Preparación para Wireframes 12:41
- 5.6.4 Wireframes a ordenador 00:39
- 5.6.5 Wireframes en media 36:39
- 5.6.6 Wireframes con I.A 03:21
- 5.6.7 Plugins para wireframes 03:52
6. Style Guide
- 6.1 Introducción 02:05
- 6.2 Estructura 03:09
-
6.3 Colores04:06
- 6.3.1 Inspiración 04:00
- 6.3.2 Estilos 17:55
- 6.3.3 Variables 05:44
-
6.4 Tipografía01:04
- 6.4.1 Estilos 14:44
- 6.4.2 Variables 08:26
-
6.5 Grids00:20
- 6.5.1 Crear grids 06:13
-
6.6 Iconos00:49
- 6.6.1 Setear preferencias 03:10
- 6.6.2 Trabajar con vectores en Figma 11:57
- 6.6.3 Crear iconos 15:07
- 6.6.4 Set de iconos 07:54
- 6.7 Sombras 05:22
- 6.8 Logotipo 05:51
-
6.9 Botones00:49
- 6.9.1 Creando componentes botones 30:27
-
6.10 Inputs00:41
- 6.10.1 Creando componentes inputs 28:33
- 6.11 Style Guide con I.A 19:04
7. Gestión de proyecto 2/2
-
7.1 Setear Style Guide00:58
- 7.1.1 Colores 14:07
- 7.1.2 Introducción tipografía 00:29
- 7.1.3 Tipografía 10:54
- 7.1.4 Componentes 04:23
-
7.2 Diseño web00:54
- 7.2.1 Diseño home en mobile 38:41
- 7.2.2 Diseño home Desktop y tablet 31:54
- 7.2.3 Diseño páginas 01:02:54
- 7.2.4 Páginas contacto 46:53
-
7.3 Design Feedback00:45
- 7.3.1 ¿Cómo funciona? 07:29
-
7.4 Responsive Design01:32
- 7.4.1 Diseño responsive 38:46
-
7.5 Prototipo00:31
- 7.5.1 Botones e inputs 11:49
- 7.5.2 Acordeón 04:59
- 7.5.3 Slider 23:16
- 7.5.4 Texto animado 07:06
- 7.5.5 Navegación 05:43
- 7.5.6 Pop ups 10:28
- 7.5.7 Menú mobile 19:53
-
7.6 Anotaciones00:49
- 7.6.1 Crear Anotaciones 08:32
8.Bonus
-
8.1 Animaciones01:05
- 8.1.1 Animaciones simples 15:32
- 8.1.2 Botones e inputs 05:05
- 8.1.3 Parallax 07:27
- 8.1.4 Animación de carga 06:26
- 8.1.5 Animación tragaperras 15:22
- 8.1.6 Animación Ascensor 10:32
-
8.2 Interacciones
- 8.2.1 Switch 07:12
- 8.2.2 Calendario 07:12
- 8.2.3 Checkbox 06:30
- 8.2.4 Carrito e-commerce 09:41
- 8.2.5 Inputs 11:22
-
8.3 De Figma a código00:56
- 8.3.1 Plugin de Figma a código 17:37
-
8.4 De Figma a Framer01:02
- 8.4.1 Plugin de Figma a Framer 08:21
-
8.5 De Figma a WordPress02:22
- 8.5.1 Plugin de Figma a WordPress 12:55
-
8.6 De Figma a Webflow
- 8.6.1 Plugin de Figma a Webflow 12:01
-
8.7 Recursos10:49
- 8.7.1 Listado de los mejores recursos 20:31
Aprende las bases del diseño web y crea tu propio proyecto con ejercicios prácticos.
Descarga y utiliza los documentos que te ayudarán a enfrentarte a cualquier proyecto web de forma profesional.
Sigue todas las fases del diseño web, desde la investigación hasta exportar tu prototipo a la tecnología que quieras.
Accede a la comunidad donde podrás resolver tus dudas y compartir tus progresos con otros profesionales.
Desarrolla las habilidades que necesitas con un curso práctico de inmersión profunda y consigue tu certificado al terminarlo.
Soy OscarRGB, profesional del UX con más de 10 años de experiencia. He trabajado en más de 100 proyectos para marcas como SEAT, Binter y OLX. Además, soy profesor de UX en el máster de EAE Business School. También comparto contenido relacionado con UX en mis redes sociales donde tengo más de 100.000 seguidores.
Precio
Aprovecha esta oportunidad única: durante la primera semana de lanzamiento, podrás acceder con un descuento exclusivo. ¡No lo dejes pasar!
- + 20 horas de videos
- 7 Documentos descargables
- Ejemplos reales
- Comunidad privada
- Acceso de por vida
Algunas preguntas frecuentes
Aquí estoy para solventar cualquier duda que tengas sobre el curso, si tienes alguna otra duda, puedes preguntarme por email.
¿A quien va dirigido el curso?
Este curso ca dirigido a cualquier persona que se dedique al diseño web o quiera dedicarse a él. Personas que qiueran profesionalizar sus servicios y dominar Figma para crear proyectos web de forma profesional.
¿Es en directo?
Este curso no es en directo, pensado para que puedas adaptarlo a tus tiempos y dedicación. Dispondrás de todos los documentos y todo el contenido para que lo hagas a tu ritmo. Aún así haremos directos respondiendo dudas que surjan en nuestra comunidad privada de Whatsapp.
¿Necesito Figma de pago?
No te preocupes, aunque Figma de pago nos dará una serie de opciones que no tendremos si usamos el gratuito, podremos hacer todo el curso sin problema, además gracias a los documentos descargables casi no notarás la diferencia al hacer el curso.
¿Tendré acceso a todos los documentos?
Sí, con la compra del curso tendrás acceso a todos los documentos desagradables sin ningún pago addicional.
¿Cuánto tiempo me llevará completar el curso?
Este curso consta con más de 20 horas de video, pero realizarlo te llevará más tiempo, pues gran parte del contenido es contenido práctico.
Así que depende de tus aptitudes y de la entrega que pongas al realizarlo podrás terminarlo de forma más rápida o más lenta.
¿Necesito de conocimientos previos?
Pues aunque serán de ayuda para asimilar todo de forma más rápida, este curso está pensado para que puedas comenzarlo de 0. Entenderemos las bases del diseño web y todo lo que puede ofrecernos la herramienta Figma.
¿Cómo funciona la comunidad privada?
Podrás acceder a la comunidad privada de Whatsapp de forma instantánea al comprar tu curso. El acceso a esta comunidad es de por vida y allí podrás compartir tus conocimientos y dudas con otros alumnos además de disfrutar de contenido exclusivo y resolver todas tus dudas.
¿Cómo funciona las devoluciones?
Al ser un curso abierto en el que podrás descargarte todo el contenido una vez estés dentro no podremos hacer devoluciones, así que pregúntame cualquier duda que tengas antes de comprar. SI ha habido un erro de pago o has comprado más de un curso sin querer contáctame para que pueda proceder. ala devolución.