• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página

Juanpol

Diseño UX y UI / Creación de productos digitales

  • Tutoriales de Figma
  • Blog
  • Newsletter
  • 🔴 YouTube

Tutoriales de Figma en Twitch y YouTube

Con este post doy por comenzada la serie de vídeos de Tutoriales de Figma en Twitch y YouTube. En realidad la comencé hace un par de semanas pero decidí borrar los primeros directos por distintos motivos que comentaré al final del artículo.

tutoriales de figma en twitch y youtube
El cover provisional que muestro antes de comenzar los tutoriales de Figma en Twitch y YouTube.

Índice del artículo

  • Tutoriales de Figma
    • Mapa del sitio web
      • Home
      • Programa
      • Charlas
      • Directos
      • Ponentes
      • Blog
      • Registro de usuarios
      • Compra de tickets
      • Página genérica
      • Landing
    • Plantillas genéricas
    • Sistema de diseño
    • Otros proyectos
  • Emisiones de prueba

Tutoriales de Figma

¿Qué vamos a hacer en los tutoriales? Con los streamings voy a compartir el proceso de diseño en Figma de un sitio web que me encargó una consultora hace unos meses. La empresa interesada deseaba organizar eventos online sobre la construcción utilizando tecnologías que bien podrían salir del guión de una película de ciencia ficción. Me gusta destacar este detalle porque no hablamos de apilar ladrillos con cemento sino de utilizar robots, drones y Big Data para levantar edificios, puentes, calles, etc.

Había una necesidad principal, diseñar rápidamente un sitio web para cada evento. Para eso les ofrecí crear una estructura genérica en Figma y basarse en ella para diseñar todas las páginas web con las charlas, cursos y conferencias que quieran organizar.

Te puede interesar el artículo donde hablé de los tutoriales de Figma en Twitch.

Mapa del sitio web

Durante la primera reunión vía Meet me pareció estar delante de un proyecto grande pero después de analizar las pautas de la fase inicial todo se “simplificó”.

En principio la estructura de cada sitio web será la siguiente:

Home

Cada evento tendrá su página principal, en ella el visitante podrá saber cuál es la temática del evento, acceder al programa de conferencias, conocer a los ponentes que participarán, saber quiénes son los patrocinadores, acceder a las páginas de registro, compra de tickets, etc.

Programa

El sitio web tendrá un apartado donde se publicará el schedule o programa de actividades. Los interesados podrán conocer con más detalle el contenido de las charlas o mesas redondas que se realizarán.

Charlas

Todas las charlas del programa tendrán una ficha donde se explicarán los temas que se tratarán, las personas que participarán en ella, los recursos que los asistentes podrán descargar, etc.

Directos

Todas las ponencias se emitirán desde una o varias páginas en las que el usuario podrá seguir el streaming en directo o en diferido. Este apartado será de acceso limitado, solamente podrán entrar los asistentes que han comprado su entrada.

clases de vídeo
La cámara que estoy usando para crear los tutoriales de Figma en Twitch y YouTube.

Ponentes

Habrá un listado de ponentes con una pequeña ficha o bio de cada uno de ellos, charlas en las que participarán y enlaces externos con más información.

Blog

Cada evento tendrá su blog para publicar información, noticias, entrevistas a ponentes, conclusiones, etc. La estructura de este apartado será la de un blog básico, listado de posts, lista de posts de una categoría o etiqueta y detalle de un post.

Registro de usuarios

Aunque es probable que en una fase posterior se utilice un sólo sitio web para gestionar membresías, en la fase inicial, la página de cada evento contará con su propio flujo de registro. Cada usuario tendrá su apartado de preferencias, datos de contacto, facturación, etc.

Compra de tickets

Prácticamente igual que el punto anterior, la web del evento contará con una pasarela de pago para comprar entradas.

Página genérica

Una de las clases la dedicaremos a diseñar una página genérica que será utilizada para publicar información, preguntas frecuentes, los requisitos que una empresa debe cumplir para patrocinar el evento, la lista de patrocinadores, información de contacto, etc.

Landing

Por último vamos a diseñar una landing genérica para promocionar el evento completo o algunas de sus charlas.

Plantillas genéricas

Como dije anteriormente necesitamos una estructura genérica que siempre se repita cambiando nombre, colores, contenidos e imágenes.

Mirando las estadísticas de uso, la empresa nos asegura que más de un 80 % de los usuarios visitarán la web con un ordenador, y unos pocos utilizando tablets y móviles.

Los templates que vamos a diseñar funcionarán en cualquier tipo de plataforma para que los asistentes puedan acceder al contenido desde cualquier sistema y con cualquier tipo de pantalla, estoy hablando de distintos tamaños y con orientación horizontal o vertical.

Sistema de diseño

Otro de las tareas que realicé en la primera fase del proyecto fue crear un DSM (sistema de diseño) en Figma siguiendo los guidelines que me dieron. La idea es que el equipo UX y UI de la empresa pueda utilizarlo y hacerlo crecer a partir de sus necesidades.

Además de estilos y elementos básicos el DSM cuenta con una serie de patrones que se utilizarán para crear de forma dinámica algunos de los apartados del sitio web. Hay secciones que tendrán una estructura cerrada pero otras se construirán desde el CMS (gestor de contenidos). Por ejemplo, el listado de artículos del blog siempre tendrá la misma estructura, pero los bloques con información que el visitante encontrará en una landing irán cambiando en el tiempo, antes del evento se mostrará cierta información, durante los días de la conferencia otra distinta y una vez finalizado volverá a cambiar.

Además de crear en Figma la librería de equipo realicé varias videollamadas para explicar el uso de la misma. De todos modos sigo en contacto con ellos para hacer upgrades al DSM y para responder las dudas que vayan surgiendo.

Otros proyectos

En la 2ª fase del proyecto rediseñamos el sitio web “padre” de todos los eventos.

El objetivo es crear una base de conocimientos para que los profesionales del sector puedan consultarla todas las veces que quieran. Una gran parte de los temas no cambiará y los que necesiten una actualización la recibirán en los eventos siguientes.

Los visitantes podrán buscar eventos y charlas introduciendo términos de búsqueda y aplicando los filtros necesarios. Consumir contenidos publicados en el apartado Blog y comprar tickets y membresías permanente para acceder a los contenidos de pago publicados en todos los eventos, los ya finalizados y los que vendrán.

Emisiones de prueba

Hasta el momento he publicado en Twitch y YouTube cinco directos de entre 55 y 120 minutos, pero antes hice cuatro emisiones de prueba que terminé borrando.

La primera duró algo más de una hora. Como lo hago con mis podcasts preparé una escaleta a modo de guión para presentarme y comentar todo lo que haríamos en las clases pero no quedó como yo esperaba. Sinceramente el hecho de tener una cámara en mitad del escritorio me incomodó un poco. Una cosa es grabar un podcast cuando nadie te puede ver y otra muy distinta es hablar en directo o en vivo, como dirían mis amigos de Latam. Conclusión, el primer streaming de Figma no salió como esperaba y decidí borrarlo.

Cómo calcular la distancia entre los elementos de un diseño en Figma.

También borré los tres directos siguientes, su contenido y fluidez eran aceptables pero en ellos utilicé la imagen de una marca que, días después, descubrí que pone ciertos límites en su uso. Evidentemente debí consultar con anterioridad sus términos y condiciones de uso.

Debo decir que los cinco vídeos que ya publiqué también son “de prueba”. Aunque en ellos comparto información de interés creo que aún me estoy “acostumbrando” al hecho de mostrarme delante de la cámara. La media de espectadores es muy baja pero estoy recibiendo un feedback muy interesante del que hablaré con más detalles en otro post.

Te puede interesar el directo de prueba que hice en YouTube.

Queda mucho camino por recorrer, seguiré puliendo el contenido que quiero publicar, organizar bien los temas escuchando a los oyentes y también pivotando, si fuera necesario.

Me gustan las carreras de fondo y tengo claro una cosa, si desde siempre dedico dos o tres horas al día a profundizar mis conocimientos con las técnicas, teorías y herramientas que utilizo en mi trabajo… ¿Por qué no compartir una parte de esos momentos con personas que hacen lo mismo?

Si quieres ver los primeros vídeos te dejo enlaces a los canales de Twitch y YouTube, además puedes seguir la actividad de los mismos en Instagram y Telegram.

Si tienes alguna duda o deseas hacer alguna sugerencia por favor deja un comentario, toda opinión es igualmente valiosa. Como siempre digo, todos aprendemos de todos.

Muchas gracias.

Aprende a usar Figma, Sketch y Webflow

Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Información de privacidad

En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

juanpol

Acerca de Juanpol

Product Designer, Diseñador UX/UI y creador de contenido con 29 años de experiencia. Trabaja en Freepik Company.

Interacciones con los lectores

Comentarios

  1. Foto del avatarVick dice

    26 mayo, 2021 a las 15:18

    Hola Juan, hace un tiempo encontré tu sitio buscando aprender un poco más sobre sketch y el diseño UI UX.

    Quiero agradecerte por pensar en este nuevo espacio de videos, tal útil y tan cálido. Fue gratificante tener abierto figma, y aprender a armar estilos junto a vos. También me gustó que no hubiera música de fondo, ni que fuese una actuación o presentación, sino simplemente vos, trabajando en la plataforma, tomando unos mates y compartiendo un tiempo. Se sintió bien, ya que también yo estaba con mi compu, tomando un té y compartiendo ese momento. ¡Espero que sigas adelante con este gran proyecto! De este lado de la pantalla, te lo agradecemos.

    ¡Saludos desde Buenos Aires! Vick

    Responder
    • juanpolJuanpol dice

      26 mayo, 2021 a las 19:54

      Hola Vick, ante todo bienvenida al blog! No te imaginas la ilusión que siento cuando leo tus comentarios… qué gusto saber que hay gente como tu, al otro lado de la pantalla que recibe y «vive» lo mismo que yo mientras realizado el directo. Me quedo con tu feedback para seguir haciendo buenas prácticas y para mejor un poco más de aquí en más. Estas semanas estoy con bastantes proyectos extra que se comen todo mi tiempo físico, pero volveré en breve, si es posible esta misma semana. Un gran saludo para ti desde Málaga. Muchísimas gracias por dejar tus comentarios. ¡Seguimos…!

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


En este sitio web te solicito algunos datos para poder moderar y responder comentarios de usuarios. Responsable de los datos: Juan Pablo Olmo / Finalidad de los datos: Gestionar los comentarios y evitar el spam. / Legitimación: Aceptación expresa de la política de privacidad. / Almacenamiento de los datos: Base de datos alojada en Siteground España. / Duración: Hasta que lo solicites. / Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Te puede interesar

  • Componentes interactivos de Figma
  • Los mejores plugins de Figma en 2023
  • Cómo crear un scroll en Figma
  • ¿Qué es Figma y para qué sirve?

Información

  • Juanpol
  • Contacto

Juanpol

Juanpol

Diseño UX y UI / Creación de productos digitales

  • info@juanpol.com
  • LinkedIn
  • YouTube
  • Telegram
  • Twitter

  • Privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los ajustes

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies.