Diseño web completo de Figma a Webflow (UI 2024)
Vako Shvili, Web Designer
Regardez ce cours et des milliers d'autres
Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres
Regardez ce cours et des milliers d'autres
Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres
Leçons de ce cours
-
-
1.
Resumen de la clase
5:15
-
2.
¿Qué es Webflow?
6:54
-
3.
Teaser de flujo web
4:51
-
4.
PARTE 1: LOS SECRETOS DEL BUEN DISEÑO
2:31
-
5.
Primeros pasos con Figma
11:34
-
6.
El diseño es el rey
6:49
-
7.
Únete a nuestro lugar de reunión de estudiantes en Discord
0:10
-
8.
Assignment: alineación y cuadrícula
11:10
-
9.
Diseño: importancia de la jerarquía visual
7:20
-
10.
Assignment: jerarquía visual
9:20
-
11.
Diseño: ten cuidado con las ilusiones ópticas
3:51
-
12.
Diseño: proximidad
1:42
-
13.
Cómo usar la tipografía de manera hermosa
1:37
-
14.
Tipografía: la tipografía viene con personalidad
1:51
-
15.
Tipografía: categorías de tipografía
6:14
-
16.
Assignment: personalidad tipográfica
8:08
-
17.
Tipografía: tipo de configuración
8:30
-
18.
Assignment: tipo de configuración
7:27
-
19.
Tipografía: solo dos fuentes
2:47
-
20.
Tipografía: dónde encontrar fuentes
3:57
-
21.
Assignment: emparejamiento de tipos de letra
7:21
-
22.
El arte del color
1:11
-
23.
Colores: colores de muestreo
1:56
-
24.
Assignment: colores de muestreo
18:42
-
25.
Colores: colores finos
3:58
-
26.
Assignment: colores finos
2:56
-
27.
Colores: búsqueda de colores
2:45
-
28.
Colores: colores de marca
2:20
-
29.
Cómo usar fotos para crear sitios web deliciosos
0:23
-
30.
Fotos: superposiciones de imágenes
1:58
-
31.
Assignment: superposiciones de imágenes
5:18
-
32.
Fotos: técnicas de recorte: recorte extremo
4:28
-
33.
Fotos: técnicas de recorte: recorte suave
4:43
-
34.
Assignment: recorte de fotos
9:09
-
35.
Fotos: regla de los tercios
4:38
-
36.
Fotos: ¡Desempaquetalo!
4:47
-
37.
Fotos: elige fotos como un profesional
6:13
-
38.
Fotos: dónde encontrar fotos
3:27
-
39.
Assignment: encuentra fotos
4:54
-
40.
6 trucos de diseño que todo diseñador debe saber
0:24
-
41.
Truco de diseño: contraste
3:52
-
42.
Truco de diseño: espacio en blanco
5:07
-
43.
Truco de diseño: repetición
3:56
-
44.
Truco de diseño: consistencia
7:55
-
45.
Truco de diseño: superposición
3:43
-
46.
Assignment: superposición
1:00
-
47.
Truco de diseño: tensión
2:32
-
48.
Assignment: tensión
5:18
-
49.
PARTE 2: PRACTICA EL DISEÑO COMO UN PROFESIONAL
0:18
-
50.
El método de mímico
4:57
-
51.
El secreto más grande de los diseñadores: inspiración
5:52
-
52.
Assignment: tabla de humor
7:12
-
53.
Assignment: diseño de página de inicio de Figma
8:29
-
54.
Diseño de página de inicio de aplicaciones de chat: parte 1
9:16
-
55.
Diseño de página de inicio de aplicaciones de chat: parte 2
18:20
-
56.
Diseño de página de inicio de aplicaciones de chat: parte 3
15:40
-
57.
Diseño de página de inicio de aplicaciones de chat: parte 4
21:33
-
58.
PARTE 3: DESARROLLO WEB (WEBFLOW)
0:24
-
59.
Conceptos básicos de la web: diseñador de flujo web
4:18
-
60.
Conceptos básicos de la web: HTML y CSS
3:35
-
61.
Conceptos básicos de la web: el modelo de Box
2:15
-
62.
Webflow: jerarquía de elementos
4:30
-
63.
Webflow: elementos básicos de páginas web
4:05
-
64.
Webflow: configuración de tamaño
13:43
-
65.
Webflow: relleno y márgenes
14:37
-
66.
Webflow: tipografía web
7:26
-
67.
Webflow: buttons y enlaces
5:47
-
68.
Webflow: clases de CSS
6:22
-
69.
Tamaños de Webflow vs Figma
9:36
-
70.
Webflow: imágenes
6:40
-
71.
Webflow: flotación y visualización
9:02
-
72.
Webflow: Flexbox
12:56
-
73.
Webflow: lista de verificación de depuración
23:55
-
74.
Webflow: Navbar (aplicación de chat)
10:35
-
75.
Webflow: pasa el ratón por encima
8:24
-
76.
Webflow: sección central (aplicación de chat)
4:25
-
77.
Webflow: etiquetas HTML
11:13
-
78.
Webflow: clases combinadas
9:03
-
79.
Webflow: sección de CTA (aplicación de chat)
16:47
-
80.
Webflow: pie de página (aplicación de chat)
13:28
-
81.
Introducción al diseño web responsivo
6:40
-
82.
Responsive: sección de héroes: tableta
3:57
-
83.
Responsive: sección de héroe - móvil 1
5:16
-
84.
Responsive: sección de héroe - Mobile 2
3:03
-
85.
Responsive: menú de navegación (aplicación de chat)
10:12
-
86.
Responsive: desbordamiento
7:17
-
87.
Responsive: sección de CTA (aplicación de chat)
5:12
-
88.
Responsive: pie de página (aplicación de chat)
6:01
-
89.
Cómo estar en vivo: SEO (aplicación de chat)
5:30
-
90.
Publicación en vivo: publicación (aplicación de chat)
6:52
-
91.
Live: editor
3:31
-
92.
PARTE 4: PROYECTO DEL CLIENTE DE PRINCIPIO A FIN
1:32
-
93.
Buen proceso de diseño
8:03
-
94.
Proyecto del cliente: resumen del proyecto
5:12
-
95.
Proyecto de cliente: Moodboard
4:44
-
96.
¿Por qué wireframing?
7:35
-
97.
Estilos de Figma
3:05
-
98.
Componentes de Figma
7:40
-
99.
Kit de Wireframe
5:07
-
100.
Wireframes: página de inicio parte 1
13:18
-
101.
Wireframes: página de inicio parte 2
17:23
-
102.
Wireframes: página de publicaciones
9:48
-
103.
Wireframes - cuadrícula de blog
8:55
-
104.
Diseño de página de inicio de TeamApp: parte 1
13:53
-
105.
Diseño de página de inicio de TeamApp: parte 2
24:27
-
106.
Diseño de página de inicio de TeamApp: parte 3
15:18
-
107.
Diseño de publicaciones de blog
6:19
-
108.
Diseño de cuadrícula de blog
13:39
-
109.
Desarrollo de Webflow 2
1:02
-
110.
Webflow 2: estilos de fondo
8:28
-
111.
Webflow 2: Navbar (aplicación de equipo)
10:05
-
112.
Webflow 2: contenido de héroe
11:25
-
113.
Webflow 2: formas
13:01
-
114.
Webflow 2: sección de maqueta 1
12:05
-
115.
Webflow 2: sección de maqueta 2
4:41
-
116.
Webflow 2: secciones de fotos
5:01
-
117.
Webflow 2: componente deslizante
4:39
-
118.
Webflow 2: deslizador de testimonios
15:17
-
119.
Webflow 2: posicionamiento
8:38
-
120.
Webflow 2: flechas deslizantes
5:47
-
121.
Webflow 2: pie de página (aplicación de equipo)
7:26
-
122.
Webflow 2: forma del pie de página
9:39
-
123.
Interacciones: le da vida a tu sitio web
2:02
-
124.
Interacciones: interacción con tarjetas
13:57
-
125.
Interacciones: interacción de flecha 1
2:50
-
126.
Interacciones: interacción de flecha 2
7:12
-
127.
Responsive: Navbar (aplicación de equipo)
5:43
-
128.
Responsive: sección de héroe
4:57
-
129.
Responsive: sección de maqueta
5:02
-
130.
Responsive: cuerpo
5:23
-
131.
Responsive: testimonio y pie de página
6:47
-
132.
Blog y CMS: pasar de un sitio web estático a dinámico
1:33
-
133.
Blog y CMS: Webflow CMS
5:36
-
134.
Blog y CMS: elementos de CMS
3:36
-
135.
Blog y CMS: página de colección
4:14
-
136.
Blog y CMS: Navbar y titular
5:41
-
137.
Blog y CMS: bloqueo de autores
4:07
-
138.
Blog y CMS: campo de referencia
6:24
-
139.
Blog y CMS: ajuste de objetos
2:06
-
140.
Blog y CMS: imagen principal
3:03
-
141.
Blog y CMS: texto enriquecido
12:45
-
142.
Blog y CMS: fondo de bloque de autor
3:48
-
143.
Componentes de Webflow
10:15
-
144.
Blog y CMS: publicación receptiva
6:34
-
145.
Blog y CMS: página de inicio del blog
15:19
-
146.
Lista de colecciones
10:33
-
147.
Blog y CMS: paginación
7:11
-
148.
Blog y CMS: página de blog receptiva
5:25
-
149.
Live: SEO y publicación
8:30
-
150.
Activación: envíos de formularios
2:16
-
151.
Activación: dominio personalizado
13:02
-
152.
Sitio web de portafolio
4:34
-
153.
Visita al sitio web de portafolios
6:15
-
154.
Instalación de sitios web de portafolio
13:15
-
155.
Encontrar trabajo en línea
9:51
-
156.
Encontrar estudios de trabajo
6:35
-
157.
Encontrar redes de trabajo
3:12
-
158.
Encontrar la conclusión del trabajo
0:32
-
159.
Descripción general de Upwork
6:05
-
160.
Consejos 1-3: obtener la aprobación de tu perfil
4:46
-
161.
Consejos 4-9: crea un perfil que atraiga a los clientes
7:02
-
162.
Consejos 10-12: obtén la insignia de "mejor coincidencia"
3:30
-
163.
Consejos 13-14: proponer el precio correcto
4:09
-
164.
Consejos 15-16: sé el freelancer al que no puedes resistirte
6:03
-
165.
Consejos 17-22: escribe cartas de presentación muy buenas
8:03
-
166.
Consejos 23-25: no te suspendas
6:31
-
167.
Consejos 26-28: no te estafen
3:05
-
168.
Precios: ¿cuánto cobra?
11:25
-
169.
Precios: tarifa por hora vs tarifa fija
4:14
-
170.
Plantilla de propuesta: tarifa fija
8:36
-
171.
Plantilla de propuesta: tarifa por hora
2:28
-
172.
Contrato freelance
5:55
-
-