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

¿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.

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.

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.