UX-UI Conexion creativa
UX-UI Conexion creativa
  • Видео 167
  • Просмотров 104 457
Crea Impresionantes Tarjetas 3D con HTML, CSS y JavaScript | Tutorial Completo Paso a Paso
¡Aprende a crear un impresionante efecto de hover 3D para tarjetas usando HTML, CSS y JavaScript! 🚀 En este tutorial, vamos a construir una tarjeta interactiva que reacciona al movimiento del ratón, dándole un efecto de inclinación 3D realista que captará la atención de tus usuarios. Este diseño es perfecto para mostrar productos, portafolios o simplemente darle un toque creativo a tus proyectos web.
En este video, te enseño todo paso a paso:
Cómo configurar la estructura HTML
Cómo darle estilo con CSS, incluyendo un efecto de vidrio moderno
Cómo agregar el JavaScript que da vida al efecto 3D
🔗 Enlaces Útiles:
Diseño en Figma: www.figma.com/design/zTavZL7kmVVOnkGjehVDBi/3D_cards?node-id=1-7&t=f...
Просмотров: 11

Видео

Aprende cómo crear una animación flip card paso a paso con Figma y CSS
Просмотров 59Месяц назад
Aprende cómo crear una animación flip card paso a paso con Figma y CSS
De Figma a Código: Crea y Valida un Formulario Solo con HTML y CSS (Sin JavaScript)
Просмотров 37Месяц назад
De Figma a Código: Crea y Valida un Formulario Solo con HTML y CSS (Sin JavaScript)
Cómo crear un efecto de cursor en Figma sin plugins: Mejora la UX fácil y rápido
Просмотров 116Месяц назад
Cómo crear un efecto de cursor en Figma sin plugins: Mejora la UX fácil y rápido
Cómo Resaltar Elementos con :not y :hover en CSS | Tutorial Práctico
Просмотров 452 месяца назад
Cómo Resaltar Elementos con :not y :hover en CSS | Tutorial Práctico
¡Crea un Grid tipo Pinterest en CSS con UNA SOLA línea de código! (Sin JavaScript)
Просмотров 372 месяца назад
¡Crea un Grid tipo Pinterest en CSS con UNA SOLA línea de código! (Sin JavaScript)
Convierte fácilmente un botón de Figma a HTML y CSS en minutos usando Dev Mode
Просмотров 1652 месяца назад
Convierte fácilmente un botón de Figma a HTML y CSS en minutos usando Dev Mode
Cómo Crear una Landing Page Profesional que Genera Ventas | Guía Paso a Paso
Просмотров 2713 месяца назад
Cómo Crear una Landing Page Profesional que Genera Ventas | Guía Paso a Paso
Cómo Crear Landing Pages Profesionales en 2024 | Guía Rápida y Fácil
Просмотров 963 месяца назад
Cómo Crear Landing Pages Profesionales en 2024 | Guía Rápida y Fácil
Tabs vs Accordions en UX/UI: ¿Cuál es la Mejor Opción para tus Proyectos?
Просмотров 393 месяца назад
Tabs vs Accordions en UX/UI: ¿Cuál es la Mejor Opción para tus Proyectos?
Cómo Crear Frames Responsivos en Figma: Uso de Variables y Ajustes Automáticos
Просмотров 1213 месяца назад
Cómo Crear Frames Responsivos en Figma: Uso de Variables y Ajustes Automáticos
Explorando el Fascinante Mundo de las Personas de Producto | UX-UI
Просмотров 380Год назад
Explorando el Fascinante Mundo de las Personas de Producto | UX-UI
Errores Comunes en UX/UI: ¿Cómo Evitarlos? | UX/UI Conexión Creativa Podcast
Просмотров 325Год назад
Errores Comunes en UX/UI: ¿Cómo Evitarlos? | UX/UI Conexión Creativa Podcast
Desvelando los Secretos del Diseño Inclusivo y Accesible
Просмотров 406Год назад
Desvelando los Secretos del Diseño Inclusivo y Accesible
🎯 ¡Menos es Más! Descubre el Poder del Minimalismo en el Diseño UX | Conexión Creativa 🚀
Просмотров 146Год назад
🎯 ¡Menos es Más! Descubre el Poder del Minimalismo en el Diseño UX | Conexión Creativa 🚀
Cómo crear un efecto de desplazamiento infinito en Figma: Tutorial paso a paso
Просмотров 2,5 тыс.Год назад
Cómo crear un efecto de desplazamiento infinito en Figma: Tutorial paso a paso
Fundamentos UX/UI: Investigación y Análisis del Usuario
Просмотров 920Год назад
Fundamentos UX/UI: Investigación y Análisis del Usuario
5 Tips para Crear una Landing Page que Genere Ventas
Просмотров 383Год назад
5 Tips para Crear una Landing Page que Genere Ventas
Diseño UX/UI llevado al siguiente nivel con IA: Aprende a usar ChatGPT para tus proyectos
Просмотров 6 тыс.Год назад
Diseño UX/UI llevado al siguiente nivel con IA: Aprende a usar ChatGPT para tus proyectos
Diseño responsivo con breakpoints y auto layout en #figma
Просмотров 371Год назад
Diseño responsivo con breakpoints y auto layout en #figma
Tarjeta Auto layout responsivo e implementando propiedades de componente
Просмотров 206Год назад
Tarjeta Auto layout responsivo e implementando propiedades de componente
Que es una auditoria UX o un UX Audit🤔 ? Que se tiene que tener en cuenta 🤔?
Просмотров 6732 года назад
Que es una auditoria UX o un UX Audit🤔 ? Que se tiene que tener en cuenta 🤔?
Texto animado usando #figma con el uso de component sets 👍
Просмотров 6822 года назад
Texto animado usando #figma con el uso de component sets 👍
Propiedades de componentes con #figma
Просмотров 1,2 тыс.2 года назад
Propiedades de componentes con #figma
Figma o Adobe XD | cuál de las dos herramientas elegir?
Просмотров 9 тыс.2 года назад
Figma o Adobe XD | cuál de las dos herramientas elegir?
Componente slider con efecto hover | Adobe XD
Просмотров 5722 года назад
Componente slider con efecto hover | Adobe XD
Diseña un menu deslizante animado | Adobe XD
Просмотров 1,6 тыс.2 года назад
Diseña un menu deslizante animado | Adobe XD
Efecto Mobile Slider en Adobe XD
Просмотров 4312 года назад
Efecto Mobile Slider en Adobe XD
5 trucos y tips UX para incrementar tus ventas muy rápido
Просмотров 4582 года назад
5 trucos y tips UX para incrementar tus ventas muy rápido
Deja de cometer estos errores UI-UX en tus diseños
Просмотров 1,7 тыс.2 года назад
Deja de cometer estos errores UI-UX en tus diseños

Комментарии

  • @sergioojeda3956
    @sergioojeda3956 14 дней назад

    10 minutos y no dijo nada

  • @windwaker1981
    @windwaker1981 24 дня назад

    pero esto fue simplemente reacomodar los elementos, de responsive NADA.

  • @magdalenaziecina2586
    @magdalenaziecina2586 2 месяца назад

    👌

  • @7reivaj
    @7reivaj 3 месяца назад

    Viva Venezuela !!! este Pana seguro que es Venezolano !

  • @MaguiWindd
    @MaguiWindd 4 месяца назад

    No logré hacerlo, el tutorial tiene muchas pausas y es confuso. Ojalá fuera más fluida la explicación :(

  • @Carolina-x9v
    @Carolina-x9v 5 месяцев назад

    hola, gracias por el tutorial. Me resultó, pero avanza demasiado rápido.

  • @tarikabaraka2251
    @tarikabaraka2251 5 месяцев назад

    UX (user experience) y UI (user interface) son términos que se refieren a la experiencia y las sensaciones del usuario cuando utiliza un producto o servicio. UX engloba la experiencia, mientras que UI está relacionada con la interfaz que un usuario utiliza para obtener un resultado.

  • @tarikabaraka2251
    @tarikabaraka2251 5 месяцев назад

    Un buyer persona es una representación semificticia del cliente ideal de un negocio. Se define usando datos sociodemográficos concretos e información sobre aspectos como su conducta online, personal, profesional y de la relación con la empresa que ofrece este producto o servicio.

  • @andreseduardogarcia2800
    @andreseduardogarcia2800 6 месяцев назад

    si pones la ventana donde te estas grabando en la esquina inferior izquierda se podría ver donde estabas seleccionado para crear componentes XD

  • @mariagabrielalatuffmillan8039
    @mariagabrielalatuffmillan8039 8 месяцев назад

    Me encantoooo

  • @mrndong3696
    @mrndong3696 8 месяцев назад

    Hablas mucho y dices nada

  • @ColeccionandoActivos
    @ColeccionandoActivos 8 месяцев назад

    COMPA ACTUALIZATE ADOBE (NO) COMPRO FIGMA

  • @ColeccionandoActivos
    @ColeccionandoActivos 8 месяцев назад

    Personalmente es una pena que el gigante Adobe al final no haya querido comprar Figma, apesar de que ofreció 20.000 millones de USD,y esto me desmotiva un poco por que yo utilizo la paqueteria original de Adobe, si Adobe hubiera comprado figma ya lo tuviera también, ahora tendré que pagar 13 USD mensuales para poder explotar las herramientas de figma cómo se debe, la otra opción que Adobe tiene a figma es (Adobe XD), que en lo personal es mucho!! mejor que Figma, pero Figma es más popular simplemente por que empezó antes en este nicho de programas para el UX/UI,ojala y Adobe XD superé a Figma asi no tendre que andar comprando por fuera puesto que ya lo tengo en mi paqueteria de Adobe

  • @julyhernandez804
    @julyhernandez804 8 месяцев назад

    Excelente el la información! pero como lo exporto responsive?

  • @TUTUTTU4m
    @TUTUTTU4m 8 месяцев назад

    no dijo nada solo se vanagloriándose que usaba diferentes herramientas, si no tiene creatividad puedes usar mil herramientas y tu trabajo va a ser basura, conozco profesionales internacionales que solo usa xD o solo figma y son de los mejores, la vida real es así, estudien y háganse expertos en su herramienta sin perder enfoque en la creatividad y como mejorar la experiencia de usuario migren cuando necesiten algo mas y así avancen, no le hagan caso a un muchachito que no tiene ni idea de como funciona este rubro profesionalmente

  • @2jgraphic719
    @2jgraphic719 8 месяцев назад

    Y no mejor Adobe Animate?? Tengo esa curiosidad, ya que me parece el padre de los chiquititos FIGMA Y XD. Pero es cierto que piden figma, podrías decirme pk? Muchas gracias.

  • @irawdom.
    @irawdom. 10 месяцев назад

    prefiero Adobe por mas q trate... no me termino de gustar figma..

  • @NoMeAnimes
    @NoMeAnimes 10 месяцев назад

    no sale el archivo

  • @kevinmolina11
    @kevinmolina11 11 месяцев назад

    El video comienza en el 1:31

  • @patypicazo1892
    @patypicazo1892 11 месяцев назад

    Nada, perdí mi tiempo. No hay comparativa real y solo se vende como el "todologo" pésimo video.

  • @marianalorenavelasquezparr3011
    @marianalorenavelasquezparr3011 11 месяцев назад

    Me encantó la intro, que bonita

  • @SantiagoMejiaMurillo
    @SantiagoMejiaMurillo Год назад

    YA NO ESTÁ DISPONIBLE EL LINK :(

  • @asderel09
    @asderel09 Год назад

    Muy práctico!

  • @miguelnoboa1516
    @miguelnoboa1516 Год назад

    Muchas gracias por el contenido ! saludos desde Ecuador!

  • @peperios-b3d
    @peperios-b3d Год назад

    que version de xd usas, por que en la que tengo no me permite instalar en complemento anima

  • @MarianoMasuelli
    @MarianoMasuelli Год назад

    Los primeros 3 re bien, este no se si te diste cuenta el eco que se te generó a partir de aproximadamente el minuto 4:45.

  • @joaquingaleano2456
    @joaquingaleano2456 Год назад

    Buen video!

  • @rogerakim271
    @rogerakim271 Год назад

    pésima explicación

  • @alejandrosaez3315
    @alejandrosaez3315 Год назад

    perdi mi tiempo, no dijo nada

  • @LuisCastano-ug2bb
    @LuisCastano-ug2bb Год назад

    supuestamente son gratis, pero no explica como descargarlas

  • @AleRDiaz
    @AleRDiaz Год назад

    Malisimo el video 😂

  • @fer_lg
    @fer_lg Год назад

    No dijiste nada en este video, solo: No tw cierres a un unico software y aprende de todo. Nada que no supiéramos quienes conocemos el entorno... en realidad! Esperaba una verdera comoarativa...

  • @rafaelfigueroa6792
    @rafaelfigueroa6792 Год назад

    Aprende a usar GPT antes de intentar enseñar como se hace.

  • @kyokusanagi1688
    @kyokusanagi1688 Год назад

    mox ?

  • @luquitaz5
    @luquitaz5 Год назад

    estuviste 5 minutos para preguntarle los colores complementarios cuando hay herramientas de color que te permiten hacerlo y probar miles de combinaciones... creo que no es para esto chat gpt.

  • @244yonatan
    @244yonatan Год назад

    MIRA BIEN TU VIDEO, EL TITULO DICE FIGMA O ADOBE XD, TE LA HAS PASADO HABLANDO DE TI Y DE TODO LO QUE TU SABES Y LO QUE SUPUESTAMENTE TE PIDE EL MERCADO LABORAL, TAMBIEN DAS ALGUNOS CONSEJOS SOBRE NO LIMITARTE, PERO NO HAS HABLADO NI HAS ECHO UNA COMPARATIVA ENTRE AMBOS PROGRAMAS, LO UNICO QUE ME HAS DICHO ES QUE FIGMA ES GRATIS Y ADOBE XD NO, PERO NO MUESTRA LOS PUNTOS A FABOR O EN CONTRA, VENTAJAS Y DESVENTAJAS, EN POCAS PALABRAS Y TU HABLANDO SOBRE TU CONOCIMIENTO SIN RESPETAR EL TITULO DE TU VIDEO.... DEJA MUCHO QUE DECIAR, ME PARECIO UNA PERDIDA DE TIEMPO YA QUE LO QUE ME INTERESA ES SABER SOBRE LOS PROGRAMA Y NO DE TI, MEJOR POSTULATE A TINDER O BADOO A VER SI TIENES SUERTE.... LO QUE HACE UNO PARA CONSEGUIR VISITAS A SU CANAL..

  • @airusobi5257
    @airusobi5257 Год назад

    algun herramienta gratuita?

  • @airusobi5257
    @airusobi5257 Год назад

    que pagina es la que me permite entablar el dialogo? gracias

  • @mainoraguilar698
    @mainoraguilar698 Год назад

    3 videos de 30 minutos cada uno para hacer algo que se puede completar en 10 mins y hasta menos xD

  • @uxuiconexioncreativa
    @uxuiconexioncreativa Год назад

    Descubre los principios esenciales del diseño #UX #UI en este completo ebook 🛒Amazon: a.co/d/1ZKQ558

  • @joyrodriguez8556
    @joyrodriguez8556 Год назад

    Hola, una consulta, yo realizo animaciones para planos de lotizaciones residenciales en figma y cuando un proyecto es un extenso, demora mucho en cargar, yo uso la version gratuita de figma, esto cambiaria si uso la version de paga? existe otra plataforma en la que pueda resaltar la fluidez al cargar el proyecto?, de antemano gracias por la ayuda.

    • @uxuiconexioncreativa
      @uxuiconexioncreativa Год назад

      Hola qué tal, bueno respondiendo a ese tema hay muchos factores que puedenser independientemente del programa que uses. Te recomendaría que trates de optimizar cualquier archivo de imagen externo que insertes, el tamaño del frame que estés utilizando, a lo mismo el internet. Trata de ver esos factores y si es de pago o premium no tiene nada que ver a lo relacionado. Espero que te haya ayudado en tu pregunta saludos 🤝🤝

  • @pandastory-abookseriesabou8568

    🤠​ Like the idea ​💥

  • @RobertoECC
    @RobertoECC Год назад

    Si conocieras bien el tema, no demoraría mucho tu video, dudas mucho.

    • @jesussox106
      @jesussox106 Год назад

      Es porque no es un Diseñador Gráfico. Pero mola el vídeo 👍

    • @claudiamoreno8585
      @claudiamoreno8585 Год назад

      ​@@jesussox106 una cosa es diseñador grafico y otro diseñador ux o ui

  • @jhonjairobeltrancoronado7644

    excelente video muy practico gracias

  • @Alicxia
    @Alicxia Год назад

    Hola! Me intereso mucho el tema, sería bueno un video con primeros pasos para usar chatgpt?? Y por supuesto sería genial ver un proyecto desarrollado con inteligencia artificial

  • @danielv9355
    @danielv9355 Год назад

    acABE DE ADQUIRUR ADOBE xd, y tengo mucha ilusion de las cosas que puedo hacer con el, espero no me pase lo que me paso hace unos años atras con Adobe Muse, un programa que el dedique años en aprender y de un momento a otro desaparecio, eso es lo que no quiero que me pase con XD

    • @uxuiconexioncreativa
      @uxuiconexioncreativa Год назад

      Hola Daniel, no te preocupe aprende XD es una buena herramienta muy fácil de usar ya después con esas bases podrás usar cualquier otra herramienta más profesional. Sigue así no te preocupe.. Feliz año

    • @danielv9355
      @danielv9355 Год назад

      @@uxuiconexioncreativa Hola Alexander, feliz año igualmente muchas gracias por compartir tu conocimiento en tu canal, MIra que tome los 7 dias de prueba de Adobe Xd, al 5 dia ya supe de las limitaciones, y en este momento cancele la suscripción antes de que me generara el pago y estoy en este momento con Figma, y siento que integra muchisimo mejor plugins de terceros, además que es gratuito, queria hacer un efecto de sticky header con scroll y al parecer con figma se logra mucho mejor, (cosa que no pude con Adobe XD, solo se podia con efecto de arrastre) Figma me convencio definitivamente y la verdad siento que Adobe la tiene dificil en alcanzar a Figma en muchos aspectos.

    • @liltxndem
      @liltxndem Год назад

      @@danielv9355 tremendo, aparte ahora dejo de existir adobe xd

    • @pedroocaresescobar
      @pedroocaresescobar Год назад

      @@liltxndem tal como dijo el amigo arriba jaja que aprendio a usar adobe muse y desaparecio jaja

    • @negociosdigitalescompe
      @negociosdigitalescompe 10 месяцев назад

      @@uxuiconexioncreativa jajajaja, yo tratando de instalar el paquete que tenia, y veo xq no lograba la instalación, pero F por el man que le dedico tiempo a adobe mouse, y a adobeXd jajaja q mala suerte bro.

  • @danielalejandro13
    @danielalejandro13 2 года назад

    Hola! cómo estás? Muy bueno el video y super claro, pero tengo una duda más respecto a las propiedades. He visto que se pueden crear componentes de diversos tamaños y que se puedan cambiar como una propiedad más dentro del panel derecho. Aún así, nunca logré configurar esa propiedad en particular. Saludos!

    • @uxuiconexioncreativa
      @uxuiconexioncreativa 2 года назад

      Hola Daniel gracias por tu comentario, haré otro vídeo explicando más lentamente ok. Saludos 👍

  • @leoleomartin
    @leoleomartin 2 года назад

    Hola. Muy bueno el video. No alcanzo a ver cuando modificas las propiedades del texto, lo tapa la imagen de tu cámara.

  • @Pablo_Escalona
    @Pablo_Escalona 2 года назад

    Creo que es elnunico video en español que habla de anima app. Podrias hacer un video con Locofy?, por favor 🙏🙏🙏 puedesnpasar el codigona html y css e incluso a React y Vuejs

  • @Pablo_Escalona
    @Pablo_Escalona 2 года назад

    Hola, que bueno tu canal, estoy encantado, llegué a él por el vídeo de animaapp, es el único que he visto en español, estaría encantado si hicieras más vídeos de anima app 🙏