Masterclass

Diseño práctico para programadores con Jesús Olazagoitia

Rediseñando una web usando trucos sencillos y efectivos.

Jesús Olazagoitia

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:

  1. Pasos de un proceso de diseño.
  2. Creación de un sistema de diseño.
  3. 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:

Imagen de Jesús Olazagoitia

Jesús Olazagoitia

Frontend developer

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

19€Matrículaplus10€Al mes

  • Contenido disponible 24/7
  • Audios y videos
  • Retos y desafíos
  • Todo el código descargable
  • Comunidad de developers
  • Acceso premium completo