Diseño práctico para programadores con Jesús Olazagoitia
Rediseñando una web usando trucos sencillos y efectivos.
Duración total: 01:39:48
Código descargable
Acceso 100% online
Descripción de la masterclass
¿De qué va?
Vamos a ver el proceso completo de diseñar una aplicación web, partiendo del papel en blanco hasta conseguir un aspecto profesional.
No hace falta conocimientos de diseño, vamos intentar simplificar el proceso a un checklist que te permita crear diseños de landings y aplicaciones atractivas.
Y para llevarlo a la práctica haremos un rediseño en directo con estos tres pasos:
- Pasos de un proceso de diseño.
- Creación de un sistema de diseño.
- Rediseño en directo, vamos a sudar.
Usaremos como reto la página de Dani y veremos el resultado durante la sesión.
Nota: El fichero descargable con el rediseño incluye más trabajo del realizado por Jesús durante el directo. Le dio cariño de sábado ;)
¿Qué necesitas saber?
Empezamos desde cero
Nivel de dificultad
Básico
Tecnologías utilizadas
- Adobe XD
- Herramientas complementarias de diseño
Si quieres ver todos los enlaces, el rediseño completo y el vídeo tienes que suscribirte o entrar como usuario suscriptor.
Podrás ver a:
Jesús Olazagoitia
Explora los capítulos
1. Presentación [03:00]
Presentación
[03:00]
2. Colores: cambios en saturación y luz [15:00]
Colores: cambios en saturación y luz 🔥
[02:00]
Crear combinaciones de colores acertadas 🔥
[01:00]
Tonos neutrales 🔥
[02:50]
Fuentes con personalidad
[03:10]
Soluciones para combinar fuentes 🔥
[02:00]
Tamaños de fuentes (escala visual) 🔥
[01:48]
Pregunta: ¿qué es una tipografía con aire?
[02:12]
3. Rediseño de la landing [27:20]
Rediseño de la landing
[02:50]
El logo no me termina de convencer 🔥
[01:30]
Rediseño de botones
[01:40]
12 columnas
[03:30]
Truco para calcular el interlineado de letras 🔥
[01:40]
Truco para espacios y paddings 🔥
[02:00]
Colocando el vídeo en la landing
[00:50]
Nada de sutilezas 🔥
[00:55]
Truco sobre palabras huérfanas 🔥
[03:35]
Colocando cajas de texto
[02:10]
Verdades sobre los iconos 🔥
[06:40]
4. Rediseño de una página de lección del curso [41:30]
Rediseño de una página de lección del curso
[09:40]
Caja de línea de tiempo
[06:00]
Caja de datos técnicos (categoría, nivel...)
[02:02]
Truco para presentar información de nivel 🔥
[03:12]
Principio de agrupación puesto en práctica
[06:36]
Paginación
[03:10]
Truco para aumentar la armonía visual 🔥
[04:00]
Cajas flotando
[06:50]
5. Rediseño de la página de curso [12:58]
Rediseño de la página de curso
[02:10]
Diseñando una card
[07:50]
Problemas de lenguaje visual
[02:58]
Descubre todo lo que puedes conseguir sucribiéndote a Web Reactiva
Contenido nuevo todas las semanas
Una comunidad de developers colegas en telegram
Desafíos y retos de programación para que mejores tus habilidades
400 horas de contenido en audio y vídeo
Entrevistas y masterclass en directo con los/las mejores profesionales
Precio
24€Matrículaplus15€Al mes
- Contenido disponible 24/7
- Audios y videos
- Retos y desafíos
- Todo el código descargable
- Comunidad de developers
- Acceso premium completo