- 38
- 289 618
uiFromMars
Spain
Приєднався 25 лют 2018
Vídeos sobre diseño de producto digital (tutoriales y teoría), carrera profesional y portfolio ✨
¡Hola! 👋
Soy Cris Busquets, senior product designer y escritora. Ahora trabajo en Automattic en el equipo de WordPress.com y antes estuve en Twitter, Holaluz, DDB y otras agencias y estudios de diseño.
He escrito un libro, "Diseño desde Marte", un manual de diseño de producto en español en el que encontrarás todo lo que necesitas para crecer en tu día a día.
Cada semana publico un artículo nuevo en uiFromMars, un blog sobre diseño de producto digital que empecé en 2018 y que ya cuenta con más de 200 artículos.
¡Hola! 👋
Soy Cris Busquets, senior product designer y escritora. Ahora trabajo en Automattic en el equipo de WordPress.com y antes estuve en Twitter, Holaluz, DDB y otras agencias y estudios de diseño.
He escrito un libro, "Diseño desde Marte", un manual de diseño de producto en español en el que encontrarás todo lo que necesitas para crecer en tu día a día.
Cada semana publico un artículo nuevo en uiFromMars, un blog sobre diseño de producto digital que empecé en 2018 y que ya cuenta con más de 200 artículos.
Diseña conmigo 5: Una app de podcasts (componentes y variables en Figma)
Quinta entrega de la serie "Diseña conmigo" 🚀
En esta ocasión reviso el moodboard y el UI kit del vídeo anterior y vuelvo a los wireframes para empezar a diseñar los componentes y las variants para el diseño. Todo en Figma.
00:00 - 00:20: Introducción
00:21 - 01:20: Repaso
01:21 - 06:43: Sentando las bases
06:44 - 11:59: Iconos y Material Design
12:00 - 22:30: Componentes de lista y cover
22:31 - 33:00: Elementos de formulario y variants
33:01 - 36:32: Diseño de "Utilities"
36:33 - 40:15: Repaso componentes
40:16 - 40:55: Cierre
Estos son los contenidos y recursos mencionados:
🎨 Variants en Figma: aprende a utilizarlas: www.uifrommars.com/variants-figma/
🔗 Mobbin: mobbin.com/
En esta ocasión reviso el moodboard y el UI kit del vídeo anterior y vuelvo a los wireframes para empezar a diseñar los componentes y las variants para el diseño. Todo en Figma.
00:00 - 00:20: Introducción
00:21 - 01:20: Repaso
01:21 - 06:43: Sentando las bases
06:44 - 11:59: Iconos y Material Design
12:00 - 22:30: Componentes de lista y cover
22:31 - 33:00: Elementos de formulario y variants
33:01 - 36:32: Diseño de "Utilities"
36:33 - 40:15: Repaso componentes
40:16 - 40:55: Cierre
Estos son los contenidos y recursos mencionados:
🎨 Variants en Figma: aprende a utilizarlas: www.uifrommars.com/variants-figma/
🔗 Mobbin: mobbin.com/
Переглядів: 673
Відео
Diseña conmigo 4: Una app de podcasts (UI kit con variables locales de Figma)
Переглядів 7955 місяців тому
Cuarta entrega de la serie "Diseña conmigo" 🚀 En esta ocasión reviso los wireframes y el moodboard que hice en vídeos anteriores, para definir el "look & feel" de la aplicación. También empiezo a definir los estilos tipográficos y la paleta cromática con las variables locales de Figma. 00:00 - 00:08: Introducción 00:09 - 01:12: Repaso 01:13 - 07:31: Moodboard y competencia 07:32 - 31:23: Tipogr...
Diseña conmigo 3: Una app de podcasts (la nueva UI de Figma, revisión, flujo de pago y moodboard)
Переглядів 1 тис.5 місяців тому
Tercera entrega de la serie "Diseña conmigo" 🚀 Antes de comenzar, este vídeo es especial porque tengo la nueva interfaz de Figma (UI3), a la que dedico unos minutos al principio :) En esta ocasión reviso los wireframes que hice en vídeos anteriores, ajustando el flujo de pago y el acceso al perfil. También empiezo a perfilar bien el moodboard, buscando las referencias y las tipografías. 00:00 -...
Diseña conmigo 2: Una app de podcasts (wireframes, flujo de pago y caos)
Переглядів 1,4 тис.7 місяців тому
Diseñar no es fácil y el vídeo de hoy es un claro ejemplo de ello. Este es el segundo vídeo de la nueva serie en la que diseñaremos una aplicación de podcasts. El objetivo es ir paso a paso y "en tiempo real" por el proceso de diseño. En este vídeo terminaré los wireframes, sufriré un poco con la conceptualización del flujo de pago y verás de forma clara cómo de caótico puede ser diseñar... 00:...
Diseña conmigo 1: Una app de podcasts (conceptualización y wireframes)
Переглядів 2,6 тис.7 місяців тому
Empiezo una nueva serie en la que diseñaremos una aplicación de podcasts. El objetivo es ir paso a paso y "en tiempo real" por el proceso de diseño. En este primer vídeo tratamos la conceptualización y parte de los wireframes. 00:00 - 01:59 Introducción 02:00 - 03:59 Cover de archivos en Figma 04:00 - 07:18 Requisitos y monetización 07:19 - 15:40 Conceptualización y definición de "pantallas" 15...
Diseña conmigo: accesibilidad, modo oscuro y variables locales con Figma
Переглядів 1,2 тис.8 місяців тому
En este vídeo verás mi proceso de diseño y cómo utilizo Figma. Este segundo vídeo es más concreto que el anterior, ya que el foco principal está en las variables locales de Figma y en aprender a hacer el modo oscuro. 00:00 - Introducción 00:30 - Mejorar el diseño y la accesibilidad 09:55 - Reorganizar Sections 11:10 - Variables locales, estilos y modo oscuro 30:29 - Resultado y cierre Artículos...
Diseña conmigo: interfaz de registro y login con Figma
Переглядів 4,9 тис.8 місяців тому
En este vídeo verás mi proceso de diseño y cómo utilizo Figma. He intentado añadir capítulos por si quieres ver algo en concreto :) 00:00 - Introducción 01:47 - El brief y UI kit 05:19 - Variables en Figma 06:53 - Estilos tipográficos 08:55 - Iconos y componentes 11:26 - Diseño de elementos de un formulario y sus estados 16:53 - Un cursor que parpadea 20:18 - Botones 22:50 - Diseñando la interf...
Dos años después: ¡hola! 🫠
Переглядів 2,1 тис.Рік тому
Un muy breve vídeo que grabo para contarte qué ha pasado para que no haya grabado vídeos, y qué pasará a partir de ahora. Te dejo con los enlaces que menciono: www.uifrommars.com/ disenodesdemarte.com/
FigJam de Figma: primeros pasos y review
Переглядів 10 тис.3 роки тому
👋🏻 ¡Hola astronauta! En el Config 2021, Figma lanzó FigJam, una herramienta que viene a competir directamente con Miro y Mural. En este vídeo te explico de qué va y te acompaño en los primeros pasos de la herramienta. 00:00 Introducción 00:37 Rotuladores, figuras geométricas y post-its 05:45 Textos, conectores y stamps 08:47 Uso de componentes y frames de Figma en FigJam 09:44 ¿Chat en el curso...
Componentes Interactivos en Figma: Introducción y ejemplos
Переглядів 40 тис.3 роки тому
👋🏻 ¡Hola astronauta! En este vídeo te explico las características de los Componentes Interactivos de Figma. Esta funcionalidad te permite crear interacciones entre componentes, sin tener que duplicar frames sin ton ni son. 00:00 Introducción 00:31 Básicos de Componentes interactivos 02:30 Ejemplo práctico 06:33 Conclusiones y juegos ¡Hola! Me llamo Cris Busquets, si te gustó el video puedes seg...
Notion: Cómo crear lista de tareas minimalista (y sencilla)
Переглядів 6 тис.3 роки тому
👋🏻 ¡Hola astronauta! En este video te explico paso a paso como monté mi lista de tareas minimalista utilizando Notion 🤗 Capítulos: 0:00 Introducción 0:41 Lista de tareas 3:25 Lista de proyectos 4:00 Como relacionar tablas (databases) 4:57 Filtros de tablas 09:16 Tablero Kanban 10:32 Conclusiones Tutorial original (en inglés): ua-cam.com/video/r6hUkChpwWQ/v-deo.html Puedes seguirme en: 🚀 uiFromM...
Auto Layout en Figma: Introducción y ejemplos
Переглядів 36 тис.4 роки тому
👋🏻 ¡Hola astronauta! En este vídeo te explico las características de la última actualización del Auto Layout de Figma. Esta funcionalidad te permite crear elementos que se adaptan a su contenido y hacerlos responsive. 00:00 Introducción 00:12 Básicos de Auto Layout 04:32 Propiedades del resizing 06:05 Ejemplo práctico ¡Hola! Me llamo Cris Busquets, si te gustó el video sígueme en: uiFromMars: w...
Notion (tour y dashboard) - Cómo me organizo los proyectos
Переглядів 13 тис.4 роки тому
👋🏻 ¡Hola astronauta! En este video te hago un recorrido por mi Notion y te muestro mi configuración 🤗 Te enseño cómo organizo mi vida en varios dashboard de Notion: una lista de tareas, la planificación de uiFromMars, UA-cam y mi vida 📝 El tutorial al que hago referencia: ua-cam.com/video/r6hUkChpwWQ/v-deo.html Capítulos: 0:00 Introducción 0:27 Visión general de Notion 4:15 Una lista de tareas....
Tutorial Figma: Prototipo con hover
Переглядів 12 тис.4 роки тому
#figma #prototipos #hover Segundo vídeo de la serie de prototipos con Figma: en este tutorial aprenderás a crear un efecto hover de forma fácil y muy resultona 🤩 ¡Hola! Me llamo Cris Busquets, si te gustó el video sígueme en: uiFromMars: www.uifrommars.com/ Twitter: cbusquets
Tutorial Figma: Prototipo con drag & drop
Переглядів 17 тис.4 роки тому
#figma #prototipos #tutorial Bienvenid@ a esta nueva serie de tutoriales de #Figma para hacer #prototipos, en la que te explico paso a paso cómo lograr efectos brutales 😏 Te dejo el enlace dentro 👇 Archivo de Figma que puedes copiar y reusar: www.figma.com/community/file/915155792792678613/Drag-&-Drop-(uiFromMars)
Neural Filters de Photoshop: primeras impresiones
Переглядів 4174 роки тому
Neural Filters de Photoshop: primeras impresiones
Tutorial Figma: diseño de icono Big Sur
Переглядів 4,6 тис.4 роки тому
Tutorial Figma: diseño de icono Big Sur
Notion | Cómo hacer una lista de tareas y planificación semanal
Переглядів 55 тис.4 роки тому
Notion | Cómo hacer una lista de tareas y planificación semanal
Portfolio en diseño UI/UX: Trucos y consejos
Переглядів 19 тис.4 роки тому
Portfolio en diseño UI/UX: Trucos y consejos
Notion | Cómo me organizo el día a día y los proyectos
Переглядів 19 тис.4 роки тому
Notion | Cómo me organizo el día a día y los proyectos
#zapatillasFromMars | Señor Muñoz - Por qué los SEOs no quieren tantos enlaces
Переглядів 5474 роки тому
#zapatillasFromMars | Señor Muñoz - Por qué los SEOs no quieren tantos enlaces
#zapatillasFromMars | Cristina Santamarina - Diseño en interfaces conversacionales
Переглядів 6304 роки тому
#zapatillasFromMars | Cristina Santamarina - Diseño en interfaces conversacionales
#zapatillasFromMars | Joan León - Herramientas de Optimización de Imágenes para diseñadores
Переглядів 3574 роки тому
#zapatillasFromMars | Joan León - Herramientas de Optimización de Imágenes para diseñadores
#zapatillasFromMars | Alberto García Ariza - Más de 50 años de Creative Coding
Переглядів 2794 роки тому
#zapatillasFromMars | Alberto García Ariza - Más de 50 años de Creative Coding
#zapatillasFromMars | Javier Velilla - ¿Cómo afecta el ciclo de vida de tu producto a tu marca?
Переглядів 3114 роки тому
#zapatillasFromMars | Javier Velilla - ¿Cómo afecta el ciclo de vida de tu producto a tu marca?
#zapatillasFromMars | Juan Carlos Ruiz - Design Tokens con superpoderes
Переглядів 13 тис.4 роки тому
#zapatillasFromMars | Juan Carlos Ruiz - Design Tokens con superpoderes
#zapatillasFromMars | Noemí Cortizas Martínez - CMF: Diseño sensorial o UX físico/orgánico
Переглядів 4034 роки тому
#zapatillasFromMars | Noemí Cortizas Martínez - CMF: Diseño sensorial o UX físico/orgánico
#zapatillasFromMars | Lo de Producto - Lo de lanzar un SaaS en 30 días
Переглядів 3814 роки тому
#zapatillasFromMars | Lo de Producto - Lo de lanzar un SaaS en 30 días
#zapatillasFromMars | meri Fernandez - Neurociencia y UX
Переглядів 5314 роки тому
#zapatillasFromMars | meri Fernandez - Neurociencia y UX
Gracias!!! Ganas de ver el siguiente y seguir aprendiendo!!
Que grande eres y que genialidad de vídeos! Estoy haciendo el máster de Google de UX y es como ver en práctica pura y real todos esos conocimientos, así que mil gracias porque estoy aprendiendo mucho y cogiendo mil anotaciones para el proyecto final.
cómo hago lineas oblicuas perfectas? solo puedo hcaer lineas o bien verticales u horizontales(con shift) pero no oblicuas ... creo que no se puede, alguien me ayuda?
Antes Echo que Perfecto
Me está encantando esta serie de vídeos. Muchas gracias Cris!
Mil gracias por compartir conocimientos Cris! Una duda a riesgo de parecer que no tengo ni idea... cuando asignas un cuerpo de texto, por qué multiplicas este por 1,3 en el line height? Saludos!
Gracias por estos videos! Gracias MONTONES
Ay Yo estoy en pañales en el UX/UI y agradezco a montones videos como los tuyos, Muchas Gracias por tomarte el tiempo!
Muchas gracias por compartir tu proceso Cris, me parece de lo más didáctico. Casos prácticos que podrían ser reales. En vaya berenjenal te has metido, pq ahora queremos más!
Gracias por compartir, esperamos el siguiente :)
Gracias! Sin duda me has animado a seguir aprendiendo y a aplicarlo <3
Gracias! ¿Para cuándo el siguiente?
Se puede imprimir o descargar?
Sobre la parte del color, yo quizás no me quedaría con las tríadas o monocromos o complementarios. Sé que la teoría del color marca unos estándares, pero quizás exploraría otras combinaciones que quizás no cuadran con ningún estándar pero que el conjunto y la vibración final es armónica. Quizás buscaría inspiración en algo natural como flores, frutos, hojas, mariposas, pájaros... que tengan una combinación de amarillo y verde. La naturaleza tiene su propio lenguaje y quizás no cumple con las teorías del color pero es pura inspiración.
Muchísimas gracias por este nuevo video Cris! ✨👌🙂👍✨
Yo para gestionar las contraseñas uso Bitwarden, igual te puede ayudar a ti también jeje :p
Cris como puedo acceder a tus clases de diseño online soy de la Argentina
Me encantan!! en todos tus vídeos me llevo algo nuevo. Por cierto, ahora con ios 18, han creado un nuevo modo para manejar un dispositivo sin las manos. Analiza donde está mirando tu ojo y ves como los elementos van interactuando. Lo mismo si es necesario el estado focus en los botones, si no ahora, próximamente. Saludos y gracias!
Gracias por compartir tus conocimientos
Esperando con ansias el próximo video!!! Saludos desde Argentina :)
¡Mola! a por el cuarto
Estoy aprendiendo muchísimo! Gracias Cris
Excelente!
Primero que nada ¡BRAVO! 👏 Buenísima idea, mola verte en faena y pienso que es una buena propuesta esta serie y alguna cosita más que he visto. Gracias
¡Gracias a ti! Espero que los siguientes vídeos de la serie te hayan gustado también :)
@@uiFromMars voy a por los siguientes ;)
Arigato aqui me divierto aprendiendo
Estoy diseñando contigo tal y como dice el título. Creando una app completa paso a paso siguiendo esta serie de videos :)
¡Qué bien! :) Espero que te esté siendo útil 🚀
Brutal Cris, me encanta este formato de tutorial.
¡Gracias por el feedback, @danividark! 🤘🏼
ecxelente contenido
¡Gracias! :)
¿En esta serie de videos vas a crear algun sistema de diseño o UI kit? me encantaría una clase tuya sobre eso, como organizas los componentes estilos variables, etc. y si no es mucho pedir mostrar algo de como haces prototipado 😅
Justo en el cuarto vídeo entro en la parte de UI Kit con variables locales :)
¡Hay que encontrar donde está la opción para dar la separación entre elementos! Jajaja! Esperando impaciente el siguiente. 🤗
Creo que ahora ya la tengo más localizada 😂
Yo creo que te mereces que Netflix haga una serie con tus vídeos! Mi sensación esperando vídeo nuevo es la misma que tuve con Game of Thrones!!! Eres una crack!!! En serio, se aprende muchísimo del proceso de creación y de figma como herramienta de ejecución.
hahahaha ¿te imaginas? Quizás esta sería la manera de hacer que el diseño sea más visible 😂
¡Totalmente! 🙌🏽😂
Suscrito!
¡Genial! Gracias, @williemedinatorres928 :)
Hola, me gusta la fidelidad de tus vídeos con el proceso real. Yo prefiero utilizar Axure, admite funciones y variables, una simulación de la interacción y almacenamiento de datos a partir de la interacción que es genial!!! Y puedes enviar a los clientes un enlace que es adaptativo. Se lo lleva y lo prueba en su contexto. ¿Lo has probado? Es genial. Por mucho que pruebo Figma...puede que sea más bonita la interfaz, pero no son competencia en lo que producen de cara a los clientes. Me encantaría saber lo que opinas. Y sospecho que te encantaría.
Hola Cris, solo paso por acá para decirte que sos una genia, ultra crack! Y que amo tu libro <3, no nos abandones por 2 años nomas!!!
¡Gracias! Hoy o mañana subiré otro vídeo :)
Vamos Cris!!! Aqui lo espero 🍿 ❤, se que siempre nos pides que te digamos que nos interesa ver, y se me ocurrió que sería muy útil un video como el que hicieron con midudev cuando evaluaron los portfolios de devs, pero en este caso con los de diseño. Creo que sería súper interesante. Un abrazo grande!! Y nuevamente gracias!!
Es genial poder verte trabajar! Me sirve para comprobar que muchas de las cosas que hago son correctas, y también para descubrir otras cosas que desconocía. Ojalá muchos más videos así. Saludos!!
¡Qué bien! Gracias por el feedback :) Seguiré con este formato!
Me resulta super valioso verte trabajar. Gracias!
Qué real tu proceso! Alivia encontrar a alguien que genere un contenido tan reflectivo de nuestro día a día y no pintado como un proceso lineal y perfecto. Espero pronto se venga alguna desktop app en los videos! Saludos desde Argentina 🫶🏻
No había pensado en la versión de escritorio, pero quizás la incluyo cuando termine con la app :) ¡Gracias por tu comentario!
Super! Me encanto por que mientras duermo a mi bebe en brazos voy viendo el video y siento que no me estanco, mantiene mi mente activa ❤ Gracias !!!!
Vaya, no se me había ocurrido que este fuera un caso de uso, pero me alegra mucho leer que este tipo de vídeos te ayuda a no estancarte :)
X:0 Y:0 - Nuevo TOC desbloqueado 🥲.
Gracias por hacer estas series, están muy ben pensadas. Es como hacer pairing contigo ⭐
Me encantó el truco para descargar el SVG y el detalle para hacer el modo oscuro 🤯 Gracias por compartir 🚀⚡
Cris que real tu proceso de diseño, a veces nos atoramos en unas cosaaas, y como dices en youtube se maquilla mucho el proceso. Agradezco mucho tu aporte
Hola ! Y las "shadows effects" no pueden añadirse a variables? En modo dark no se percibe...
Mmmm buena pregunta. Lo revisaré 🤔
✨👌💪🙂👍✨
Me ha gustado mucho la sesión contigo. Me he picado con los botones de Google y Apple, he parado el video para no sesgarme en como lo solucionabas y que pena que en youtube no se puedan adjuntar fotos, sino te adjuntaba el visual final.
¡Gracias, Naiara! Al final con otros vídeos de la serie conseguí definir un poco mejor el camino. Me costó un poco 😅😂
Qué maravilla poder verte trabajar Cris. Muchísimas gracias.
¡Gracias a ti por ver el vídeo! 🚀
Alucinante explicación. No conocía esta función de Figma. Muchísimas gracias!!
Muy buen formato Chris, gracias por compartirlo!
Gracias a ti por verlo y dejar el comentario ✨
Hola Cris, genial ver como trabajas, es muy interesante ver tu proceso. Me veo muy reflejado en como defines el flujo y que debe incluir cada pantalla. Seguiré muy atento a los próximos videos. PD: Puedes probar bitwarden para autocompletar tus contraseñas
¡Gracias! Iré subiendo más, eso seguro :) Uso Bitwarden, pero por algún motivo no me decido a usar la extensión en los navegadores 😂
la verdad no se los demas suscriptores tuyos pero a mi me esta encantando la serie de videos creeme que estoy aprendiendo demasiado con esta serie de videos te has convertido en mi creadora de contenido de diseño favorita espero con ansias el siguiente video saludos
¡Mil gracias por tu feedback y tu comentario! :) ¡Qué bien que te guste este formato!