Pasaste todo el video dando tu opinion sobre que es mejor usar un diseñador (por separado), entonces porque pones por titulo "Exportar un sitio funcional (HTML y CSS ) desde Adobe XD"??
Dante Huaman porque esa es la pregunta que hace la gente. Muchos ven mis videos sobre adobe XD y se preguntan como exportar html, entonces este video es mi respuesta a esa pregunta. Si el video se llamase “mi opinion sobre exportar código” nadie entraría a verlo y llegarían a otros videos que les enseñan a exportar código basura ;)
Pensé lo mismo. Creo que queda mejor en pregunta "¿Se puede exportar un sitio funcional (HTML y CSS ) desde Adobe XD?" y así el video y conclusión sería el mismo sin hacer clickbait.
Excelente explicación, en lo personal soy nuevo en el uso de Adobe XD y que mejor que dejar claro a las personas que contratan el servicio, en este caso en mi pais, Colombia, ya que pretenden que el diseñador sea el encargado de hacer absolutamente todo, desde el diseño, copy, codigo, etc...
Entiendo tu punto de vista y estoy totalmente de acuerdo. El problema es que muchas veces (por no decir la gran mayoría) las búsquedas laborales y los empleos que hay te solicitan tanto Ui como Ux, como si un programador fuera diseñador, o un diseñador fuera programador.
Si, estoy 100% de acuerdo que deben existir 2 opciones para quienes quieran diseñar y automáticamente se genere un código funcional y la otra lo normal que vemos hoy en día que es desrrollo backend y fronend.
6:05 Hace poco tuve una experiencia sobre esto, con un cliente que normalmente hace cambios y cambios y cambios (y no está mal por este lado, al final siempre paga y va al día), pero tenía otros proyectos en cola y decidí aventurarme para "avanzar más rápido" en esta parte del proceso, al final, lo que en otras ocasiones tomaba hasta semanas (sumando todos los cambios), logré hacerlo en medio día. ¿Y luego?, con la decisión tomada, pasé a aplicar los cambios al sitio web real. En verdad es una herramienta buenísima. Yo siento que en esto puede aportar muchísimo. Si he andado buscando información sobre "exportar de Adobe XD a Wordpress", hay mucha información, pero me temo que no como muchos quisiéramos... Por ejemplo: Exportar de Xd "un archivo comprimido", instalar un plugin en wordpress, subir el archivo (como si se tratase de un tema o plugin) y que ya aparezca todo en el sitio web, tal cual estaba en XD (jajaja, risas). Suena bonito, pero cada cosa para lo que es, me encantó tu explicación, saludos desde El Salvador 🇸🇻 Francisco Edito viendo el final del vídeo: Vengo del futuro jajaja de casi un año después de la publicación original del video, ¿Hoy en día ya se puede exportar directamente? Gracias de antemano por el aporte! ☕️
Totalmente de acuerdo, lo mejor es trabajar con herramientas que permitan una comunicación fluida diseñador-desarrollador para optimizar el proceso de trabajo saludos
@Francisco Que productos podría utilizar para algo final? Tengo la idea de una pagina que incluye en una sección actualizaciones tipo blog, y otra con audio de una radio. Agradecería la respuesta para no malgastar el tiempo en aprender un programa que no cumple la función
Excelente comentario, soy Diseñador y comienzo en el desarrollo Front End y como dices, deberá nunca reemplazarse el factor humano para criterios de función, creación y adaptabilidad.
Me parece bien separar diseño y desarrollo web pero podrían haber galerías de componentes y de bloques-secciones como los que hay en elementor que pudieran ser utilizados en adobe xd, por ejemplo. Al final, en una web actual tenemos unos tipos de elementos muy concretos (header, footer, galerias de personal o de logos, portfolio, sliders, fichas de productos, archives, posts, etc) los cuales podrían estar disponibles en XD como componentes. Así también el proceso diseño-desarrollo se haría más robusto.
Recién empiezo como frontend. Para mí está bien que no se pueda exportar, más allá de que el código no queda limpio. Si no que es mejor para que la persona entienda que no es fácil, que tenés que entender la lógica, sintaxis de cada lenguaje y como se conectan entre si.
Un video muy bien explicado, recién empiezo en este mundo del diseño para apps y web, mi duda es como debería exportar para entregar al desarrollador de la aplicación?
@@FranciscoAMK Me acabo de ver las 3 clases de corrido, que crack!! Aprendí mucho, hay solo algo en lo que aún tengo dudas y es en los tamaños, cual es el tamaño base para diseñar y qué luego se ajusten perfectamente a las distintas proporciones de pantalla de Android por ejemplo? Y otra, tengo unos diseños en Illustrator, en un tamaño 1080x1920 a que tamaño debería cambiar para importarlo en Adobe XD correctamente. GRACIAS
Muy bien explicado paisano. Yo estoy aprendiendo ahora a usar XD, simplemente para presentar al cliente el diseño. Siempre pensando en las limitaciones que se tiene a la hora de desarrollar con los contructores de wordpress.
Cual es el proceso óptimo de crear una app, paso a paso, con Dashboard de administración, existe alguna guia o tutorial Francisco, como para tener la idea.
Ninguna que yo haya visto. A grandes rasgos se trata de definir requerimientos, diseñar las interfaces, la experiencia y los datos, desarrollar el código, hacer pruebas y finalmente publicar.
La pregunta es, la parte gráfica, se puede usar? o hay que volver a hacer todo. Entendí que la animación enlaces etc hay que hacerlo en la etapa de programación pero la parte grafica. es posible usarla? y donde coviene? que le doy yo al programador? Gracias
Hola Francisco. Ya has usado ó podrías probar los programas "Blocs" y "Mobirise"? Me parecen buenas alternativas a Webflow por ser creo más económicas, aunque también las veo más limitadas. Tal vez serían buena opción para sitios básicos? Espero me puedas dar tu opinión o hacer un video con el análisis de éstos. Muchas gracias!
Es la primera vez que busco el botón ME ENCANTO aqui en RUclips. (Soy super selectiva viendo videos es tan difícil dar un Me gusta) Estoy totalmente de acuerdo contigo, diseño es diseño y ya el desarrollo es otra historia, por eso hay gente tan capa que estudia para ser desenvolvedor, (por si acaso no soy developer, soy disenadora)
Hola Francisco, que opinas sobre Elementor, he visto que ultimamente muchos hablan de él, es mejor hacer un sitios web con elementor o creando un template desde cero (pasar mi html/css a los archivos header, footer, etc)
A mí me gusta una mezca de ambas cosas. La cabecera, el pie de página y los estilos generales como parte de un tema hecho para el caso, y en el cuerpo darle algo de libertad al cliente implementando elementor para los contenidos.
Excelente explicación y canal, el proceso de diseño y desarrollo se deben de trabajar por separado. Un programa de diseño no tiene que exportar a código sino simplemente mostrar el diseño y flujo de navegación para que sea pasado por pruebas de usabilidad y sea aprobado por el cliente.
Pregunta. Entonces qué hago para pasar mi pequeño sitio que cree en Adobe XD a la red o sea como lo pongo a trabajar como una pagina web hecha y drecha?
Hola Francisco, si bien estoy de acuerdo en que es necesario primero tener la propuesta visual antes de pasar al código, creo que tu comparación de tiempos no va al caso, ya que aunque con adobeXd duraste menos, luego tendrías que sumar el tiempo al pasarlo a código, en cambio con el tiempo de hacerlo con solo código solo es ese, ya que lo tienes funcionalmente sin tener que pasarlo a otro lado; personalmente creo que lo relevante de tener la propuesta visual antes de ir al html y css, es que se va a lo fijo, mientras que con css se da mucho que se busca todo a base de probar y probar, y hacer cambios aquí y allá, lo que hace que a final de cuentas se pierda mas tiempo. Saludos.
Claro, la comparación de tiempo iba a eso, a que puedes tener multiples versiones y hacer cambios muy rápido. Efectivamente después se suma el tiempo de desarrollo, pero es solo un tiempo de desarrollo: Considera hacer 7 versiones diferentes de un componente "resumen de artículo", es mucho más rápido hacer las 7versiones en Adobe XD y luego desarrollar la que corresponde, en lugar de hacer 7 veces los cambios en código.
Interesante el punto de vista, y lo comparto. Siendo desarrollador full stack, es muy fácil ordenar el código css cuando tienes los diseños ya aprobados y solo necesitas plasmarlos en código, ayuda en cuanto a trabajo por que ahorra el tiempo al crear componentes que se pueden usar en diferentes partes de la página web, en vez de repetir código cada vez que haces un diseño.
Si yo diseño una página y luego quiero hacer también el trabajo de desarrollo en ese diseño, como lo exporto y que programa utilizo para crear la web funcional?
Mira este video del minuto 58 en adelante más o menos: ruclips.net/video/lqHhx7HSZbA/видео.html Puedes usar cualquier programa de desarrollo que quieras. Algún editor de código como sublime o alguno de desarrollo visual como webflow o pinegrow
Gracias!! Por fin lo explicaste claramente, el diseño y programación son cosas totalmente distintas. Si el que diseña no entiende, ¿Cómo lo puede explicar al cliente? Así mismo, si programas ¿Cómo explicas el por qué del diseño de app´s?
en términos de diseño entiendo la comparación que haces Francisco pero en términos de site final; XD otorga un prototipo mientras las otras dos ya dan un site real. Me parece que no es del todo valida la comparación... que opinas? Gracias por el tutorial!
Estoy de acuerdo, el ejemplo para funciona exige una proyección que no está bien explicada. El punto más correcto sería ¿qué es más óptimo? Gastar tres días desarrollando y aplicando cambios o un día diseñando y aplicando cambios más un solo día de desarrollo en donde trabajas más rápido porque ya está todo aprobado.
El objetivo es maquetar la animación, para que al momento de desarrollar el código solo inviertas en desarrollar lo que ya está aprobado. Iterar en la etapa de diseño es mucho menos costoso que hacerlo en la etapa de desarrollo.
Yo también opino lo mismo, no le veo sentido, como diseñador sin conocimiento de programación (creo somos muchos asi) no me resuelve, yo estoy buscando algo parecido a adobe Muse, en verdad me encantaba y lograba hacer todo el trabajo completo. aun no me explico porque adobe desapareció Muse, en fin habrá que aprender un poco de programación.
Creo que esta bien que existan programas como Adobe XD, recuerdo hace como 10 años cuando diseñaba la presentación de una pagina web en una plantilla enorme de JPG lo hacia desde Photoshop y después cuando el cliente me autorizaba el diseño continuaba con el desarrollo en Flash o Dreamweaver, ahora es casi lo mismo, no uso XD pero uso Affinity Designer que tiene algunas funciones para automatizar diseños y crear interfases, después continuo con Webflow o algún otro programa front-end Por cierto estaría genial que hicieras videos sobre Affinity Designer y Affinity Photo para los demás colegas ya que ofrecen una alternativa muy profesional y tentadora para migrar de Adobe, sobre todo porque son de pago único 😀
Yo ando buscando un herramienta que me permita solo tener el CSS, el CSS como tal es lo que permite pintar sobre el lienzo, ya del código HTML si debería ser manual ya que en el tenemos tantas opciones como sabores de refresco... Aunque, por lo que veo de xD, permite darte una idea he ir paso a paso generando manualmente ese CSS...
Será que el avance de programas de "desarrollo" web pone en peligro el labor de las plataformas y los desarrolladores independientes, y por eso, desde la época del front page que viene teniendo poco aval un tipo de herramienta tan útil como un programa de desarrollo "enlatado y sencillo"?
concuerdo con ello, los medio ignorantes hablan de que el diseño ya se tiene en la mente y que no se ocupa XD... pero eso si es una pagina simple, ya hablando de una pagina mas compleja se ocupa plasmar todo un diseño, esto es como todo edificador que ocupe construir una casa oh edificios , necesita un plano, nadie se va a ir a edificar una casa sin un plano, amenos que este construyendo una chosa o casa de 4 paredes que parezca un cubo sin mas.
Muy buena explicación tu video pero la verdad es que no me termina de convencer el durar 1 día de trabajo diseñando para después no tener el code fuente para cargar a un hosting. Repito todo lo que explicas está bien pero si lo piensas ya XD está atrás debido a que herramientas como Elementor, Divi y Visual Compouser ya pueden entender en code cómo integrar el diseño con el desarrollo.
Depende del tipo de proyecto, para un sitio web de 4 o 5 páginas, te lo concedo. Para crear productos complejos, en donde requieres mantener un biblioteca de componentes de diseño, obtener aprobación de múltiples participantes y documentar el diseño, sin dudaDivi y similares no te sirven. No me imagino que la gente de UBER pueda mantener su diseño con una herramienta de ese tipo.
Francisco Aguilera G. Si ahí tienes mucha razón, viéndolo de esa forma adobe XD es muy útil para proyectos bien personalizados se podría decir que un es un servicio vip para clientes de ese tipo.
Saludos Franciso, hoy acabo de intentar la instalación de este plugin "Web Export" pero me sale error. Version 25.2.12.3 Mac Mojave. Si sabes algo agradecido tu respuesta
Hola, yo estoy en un dilema mas o menos, soy ilustrador 3D y 2D hago miles de cosas con programas tridimensionales y luego retoco en photoshop o bien en lo que sea necesario pero de diseño web CERO, y estoy buscando hacerme una nueva web. El tema compadre que pedirle a alguien que te lo haga uff es tremendo ya que para pillar al diseñador es todo un tema mientras que si lo haces tu mismo es mejor y logras lo que tu quieres. Que me recomiendas ya que wordpress me cargo y tiene plantillas feisimas y wix te limita a sus valores y quedas colgado de la brocha aunque tiene plantillas mejores en cuanto a look. Esto de los diseños web y programadores de codigos es un tema y la verdad no quiero buscar a nadie por lovque ya explique mas arriba. Saludos y excelente explicación
Creo que tienes tres opciones a) te conformas con alguna plantilla que encuentres b) diseñas algo tu y le encargas a un desarrollador que te lo programe c) contratas a alguien para que diseñe y desarrolle tu sitio. Cualquier opción fuera de esas tres lo veo como un potencial dolor de cabeza.
hmm... No sabía si quiera para que servía esta aplicación de adobe, de hecho lo encontré buscando "xd" en el buscador de google, pero ahora que medio sé para qué sirve, creo que hasta me podría llegar a interesar para alguna página que quisiera hacer para proyectos que tengo en mente
Tengo una pregunta muy importante si yo hago un diseño digamos super imperativo como hago para pasarlo en htm5 , css , javajava script soy nuevo en el mundo de programación y estoy buscando información en youtube udemy y otras paginas :c si pueden por favor ayúdenme
Esencialmente, escribiendo el código HTML/CSS/JS necesario para que sea lo más cercano a tu diseño. Ya sea que escribas el código directamente o uses una app tipo webflow o pinegrow.
de qué sirve acelerar el proceso de diseño si lo importante y lo difícil es el desarrollo?. Sería mucho más útil simplificar el desarrollo que la tarea de dibujar un sitio
Para nosotros los diseñadores tomamos conciencia del trabajo que cuesta a un programador realizar su trabajo. Lamentablemente es el cliente a quien no le importa el proceso. Solo ve el producto final . Deberíamos ponernos de acuerdo en selecionar páginas con Diseño y programacion de tal manera que el cliente entienda de que cada una pueda tener su ventaja y desventaja . hay programadores expertos pero eso no le da creatividad al momento de diseñar . entonces habría que vender páginas de diferentes categorías que vayan mas allá de que si son estáticas , dinámicas etc
Por supuesto, hay proyectos que requieren diseño desde plantilla, otros que requieren diseño personalizado, pero sencillo de tal modo que el mismo diseñador pueda construir y otros proyectos requieren diseño y desarrollo personalizado.
Hola. Soy nuevo en esto y no entiendo para qué sirve este programa si no se puede exportar a HTML. ¿Qué sentido tiene diseñar algo que no se puede implementar? ¿Para implementarlo hay que diseñar todo de nuevo en html? Me perdí.
El problema es que el diseñador es libre de poner lo que quiera en AdobeXD, "el papel lo aguanta todo" el problema viene cuando ingenieria tiene que cubrir tiempo para dejar el sitio pixel perfect. Si la herramienta diera el maquetado se avanzaria bastante para que ingenieria se dedique a funcionalidad y no a diseño. Que se supone para eso se paga a otra persona, si se va a tener que hacer retrabajo estamos mal en el proceso.
Ahora le digo al jefe que a pesar de tener un diseñador superguay, tiene que dedicar más dinero al diseño-programación del frontend... ;-) . ¡Y le adjunto tu vídeo!
Ahí toca trabajar con un desarrollador o desarrollar la app tú mismo. Adobe XD solo genera maquetas para obtener validación de la idea antes de entrar en el desarrollo.
Si usted (lector) no lee y no sabe la razon de XD que es hacer PROTOTIPOS, NO aplicaciones finales funcionales es porque usted, repito NO LEE o no hace investigación al comprar un software u app como este. Soy diseñador y soñaria con crear un app en XD y que se exportara en un app final pero eso es una fantasia porque sé que hay que programar todo finalmente. Este app mayormente se usa para crear prototipos para compañías que pagarán por el mismo. El prototipo sirve para VENDER LA IDEA a gerentes o cualquier persona envuelta en el proyecto y para que los programadores tengan una idea completa sobre lo que deben crear en CONJUNTO CON LOS diseñadores. Si usted quiere crear websites entonces XD NO ES SU solucion! Espero esta explicación ayude a entender a los que siguen preguntando para que perder el tiempo diseñando si no se puede usar finalmente como un app o website! XD es un app para diseñadores de INTERFACES en un ambiente de desarrollo de apps o webs corporativos.💪🏼🤦🏻♂️
Está excelente que no exporte código, no sé denigra el trabajo de los Desarrolladores, lo que no me gusta es que sea tan gigante jajaja es decir, Adobe XD permite hacer cosas increíbles, y eso a veces ocasióna problemas al intentar duplicar esos efectos tan locos con códigos, afortunadamente no es imposible, pero a la vista del cliente se imaginaria que el desarrollador puede programar así de sencillo y rápido, aún así está muy padre y muy buen video
Por eso siempre digo que la comunicación es importante. Nunca debemos presentar al cliente una interacción sin antes haberla validado con quién vaya a desarrollar.
Lo que todavia más jode de que Adobe esté dejando una aplicación que serviria para hacer landings page, o cosas sencillas en html, es que es una app muchísimo más ligera que illustrator, photoshop y sobretodo indesign, y digo está última porque adobe a nivel de app para publicación digital la dejó ralentizada, sin actualizar y cuando veo XD me da una rabia tremenda no usen esta nueva simplicidad y ligereza almenos para otras de sus apps como Indesign para publi digital o Captivate para aprendizaje en la web. Todo pasa para desarrolladores superchupis porque saben codigo.
¡De acuerdo! PERO... no todas las piezas que un desarrollo XD son para web. También debería exportar un código HTML para tizas sencillas como un plantilla de Correo Electrónico. ¿Porque?, usar una desarrollador para una pieza tan visual, no seria un buen uso. Hoy en día hay herramientas como HubSpot que uno como diseñador puede desarrollar una plantilla pero en HTML, y como diseñadores es mas fácil prototipo en XD y si el software permite exportar un html seria lo mejor porque es sencilla la pieza, unos con conocimientos básicos lo limpia y facilitaría mucho el tiempo de respuesta a los clientes. SOLO EN ESO SERIA GENIAL QUE EXPORTARA HTML, del resto tiene toda la razón la lógica humana no se puede reemplazar, irónico que humanos no puedan crear código que reemplace la lógica.
Hola, me parece excelente el tema! me gustaria que hablaras en un video de masomenos como estructurar una app o web app, que parametros, que cosas si o si deben haber. Para poder tener unas bases mas solidas y poder iniciar un proyecto personal .
Lo ideal sería que una vez creado el diseño se pudiera exportar a HTML y CSS, de tal manera que el programador solo use ese resultado. Bien lo dice, XD no hace la parte funcional pero si debería tener un resultado estático que es el diseño listo para usar. ¿Qué piensan ustedes? 🤔
no concuerdo con tu conclusión final, me gustaria que mis diseños fueran funcionales por que no, en el futuro cada quien realizará sus propias app para determinadas tareas.
No es malo pensar así, pero es una visión bastante a futuro. Mi conclusión apunta al estado actual de las cosas. Ojalá en el futuro podamos hacer cosas así, aunque siempre de la mano del criterio profesional de un desarrollador.
y ya existe Elementor... no entiendo como un diseñador va a querer que lo que hace en su imaginación no sea realidad con herramientas pulidas... yo tampoco estoy de acuerdo en que los diseños se queden estéticos y estáticos... el futuro es diseñar funcional
En el minuto 6:60 donde haces las comparaciones de las 4 columnas hay que dejar claro que el ganador es "WP Elementor" porque una vez le das al botón de actualizar ya está online. En las otras opciones tienes que usar FTP en el caso de código y en el caso de Adobe XD solo es el diseño, por lo tanto tendremos que exportar las imágenes y ponerle código. Vamos, que haces la comparación y te quedas tan ancho ya que no es justa. 🤣
Claro, tienes un buen punto, pero la idea es extrapolarlo a mucho más que eso, a cambios generales en todo el sitio o la aplicación. Mientras más compleja sea el cambio, más se hace marcada la diferencia de tiempo. En todo caso, si para tu proyecto elementor soluciona los problemas, excelente 👍
En esencia toda esta gama de aplicaciones hace lo mismo, con algunas diferencias en funcionalidades extra y flujos de trabajo, pero son bastante similares. Tengo pensado hacer un video comparativo, pero por ahora te comparto esta reflexión de hace un tiempo. Nuevas herramientas, preguntas, respuestas y más ruclips.net/video/ytOHkwlisUw/видео.html
Es cierto que el diseñador no debería meterse a querer hacer el trabajo del programador. Pero en ese caso el programador tampoco debería querer hacerse el diseñador, no crees? Si los diseñadores queremos hacer el diseño y que funcione, es precisamente para ahorrar el tiempo de pasarle el diseño a un programador, que al final cambie el diseño por no saber cómo programar ciertas partes diseñadas (siempre pasa y lo digo por experiencia). Por otro lado, los clientes son los que pagan, si yo diseñadora le digo mi trabajo llega hasta aquí, solo haré lo visual, después se pasará al programador. Este cliente busca mejor un programador que le haga el diseño al mismo tiempo que la programación, ya que, repito, los programadores toman la parte de diseñador y así el cliente "ahorra" el trabajo del diseñador ( Es como ir a la farmacia por medicamento directamente sin previamente ir al dr. a que revise y recete) Entonces en la industria del diseño y desarrollo web se debería dejar claro y respetar el trabajo de ambas partes. Soy diseñador, le paso el diseño a un programador. Soy programador, necesito el diseño hecho por un diseñador para desarrollarlo. Pero no, nos transformamos en "todólogos", en una lucha por adquirir y satisfacer al cliente. Así que termino diciendo que en XD hay un pluggin llamado Fireblade, tiene ciertos errores y el código lo genera horriblemente (como tu mencionaste). Pero al final genera los archivos html y css que funcionan en el navegador. También Quest AI, que además genera breakpoints para hacerlo responsive, entre otros. Que sigan los juegos del hambre.
Sobre los puntos: 1. Lo ideal es que sea un trabajo en conjunto y una comunicación constante. Programadores pueden tener opiniones muy relevantes sobre diseño y diseñadores sin duda pueden aportar ideas para desarrollo. Pero el que encabeza cada área debería estar clarísimo. 2. Depende del tipo de cliente. Hay agencias que solo buscan diseñadores freelance o empresas que solo necesitan externalizar el diseño porque tienen programadores contratados. Dependiendo de cual sea el público objetivo, quizás es buena idea formar una alianza diseño/desarrollo y presentarse ante el cliente como un team. Y que la suerte esté siempre a tu favor.
En una charla sobre UX el profesional decía que una cosa es programación y otra cosa es desarrollar un lenguaje HTML, creo que por eso una aplicación, que tiene su propia programación y que ademas funciona dentro de determinado sistema operativo, le sería muy difícil traducir todo eso a un lenguaje HTML y que no esté lleno de "errores" de sintaxis. Perdón por mi escaso lenguaje digital jaja
Es increible como con el correr de los años los convencieron de que los procesos de diseño sean mas dependientes de terceros. Diseño webs desde 1995 y realmente no entiendo el concepto de diseñar algo para que no funcione, sino para mostrarlo a otro que lo hará funcionar luego con otra herramienta. El ahorro de tiempo se convirtió en doble trabajo. Entiendo que esto alimenta a tener diseñadores por un lado y desarrolladores por el otro, pero me resulta un paso hacia atrás en el trabajo. No encuentro una sola herramienta WYSIWYG desde la muerte de Adobe Flash.
Si buscas un WYSIWYG de buena calidad, creo que webflow tw puede servir. Eso sí, hay que tener ojo en diferenciar las aplicaciones de diseño de las aplicaciones de desarrollo visual. Mientras adobe xd entra en la primera categoría, webflow o wordpress con sus varios constructores visuales entran en la segunda.
Encuentra una transcripción del video y más info aquí: franciscoamk.com/adobexd-codigo/
como puedo poner boton de hipervinculo a facebook
Pasaste todo el video dando tu opinion sobre que es mejor usar un diseñador (por separado), entonces porque pones por titulo "Exportar un sitio funcional (HTML y CSS ) desde Adobe XD"??
Dante Huaman porque esa es la pregunta que hace la gente. Muchos ven mis videos sobre adobe XD y se preguntan como exportar html, entonces este video es mi respuesta a esa pregunta. Si el video se llamase “mi opinion sobre exportar código” nadie entraría a verlo y llegarían a otros videos que les enseñan a exportar código basura ;)
@@FranciscoAMK Es el primer clickbait útil que he visto xd
Pensé lo mismo. Creo que queda mejor en pregunta "¿Se puede exportar un sitio funcional (HTML y CSS ) desde Adobe XD?" y así el video y conclusión sería el mismo sin hacer clickbait.
Cambiale el título al video, que perdida de tiempo.
@Darkscyther mis 30' valen, sobre todo en horario laboral.
GRAN EXPOSICIÓN para diferenciar desarrollo y diseño. Muy de acuerdo !!
Me encantan todos tus videos! obvio que ya activé la campanita para recibir noticias de tus videos!
Excelente
Muy bueno tu video, en especial el Perry el ornitorrinco !!!!!!
Excelente explicación, en lo personal soy nuevo en el uso de Adobe XD y que mejor que dejar claro a las personas que contratan el servicio, en este caso en mi pais, Colombia, ya que pretenden que el diseñador sea el encargado de hacer absolutamente todo, desde el diseño, copy, codigo, etc...
Grande muy buena explicación 💪
:)
muy bueno el video....perfectamente explicado, muchas gracias, saludos....
Genial, no tengo idea de programación ni codigo pero me sirve para diseñar y enviarselo a algun desarrollador., gracias !!!!
Hay algun programa que devuelva código ??
Entiendo tu punto de vista y estoy totalmente de acuerdo. El problema es que muchas veces (por no decir la gran mayoría) las búsquedas laborales y los empleos que hay te solicitan tanto Ui como Ux, como si un programador fuera diseñador, o un diseñador fuera programador.
Bueno ui y ux si van de la mano y no necesariamente implican programación.
Excelente información. Le hago una pregunta ¿Como hago para que un boton ya sea de redes sociales me lleve a x pagina? Le agradezco su respuesta
En XD no se puede, en html como cualquier enlace
@@FranciscoAMK Muchas gracias
Si, estoy 100% de acuerdo que deben existir 2 opciones para quienes quieran diseñar y automáticamente se genere un código funcional y la otra lo normal que vemos hoy en día que es desrrollo backend y fronend.
Didáctica impecable genial... lo tienes todo Francisco.
Muchas gracias Diego :)
6:05 Hace poco tuve una experiencia sobre esto, con un cliente que normalmente hace cambios y cambios y cambios (y no está mal por este lado, al final siempre paga y va al día), pero tenía otros proyectos en cola y decidí aventurarme para "avanzar más rápido" en esta parte del proceso, al final, lo que en otras ocasiones tomaba hasta semanas (sumando todos los cambios), logré hacerlo en medio día. ¿Y luego?, con la decisión tomada, pasé a aplicar los cambios al sitio web real. En verdad es una herramienta buenísima. Yo siento que en esto puede aportar muchísimo.
Si he andado buscando información sobre "exportar de Adobe XD a Wordpress", hay mucha información, pero me temo que no como muchos quisiéramos... Por ejemplo: Exportar de Xd "un archivo comprimido", instalar un plugin en wordpress, subir el archivo (como si se tratase de un tema o plugin) y que ya aparezca todo en el sitio web, tal cual estaba en XD (jajaja, risas). Suena bonito, pero cada cosa para lo que es, me encantó tu explicación, saludos desde El Salvador 🇸🇻 Francisco
Edito viendo el final del vídeo:
Vengo del futuro jajaja de casi un año después de la publicación original del video, ¿Hoy en día ya se puede exportar directamente? Gracias de antemano por el aporte! ☕️
Totalmente de acuerdo, lo mejor es trabajar con herramientas que permitan una comunicación fluida diseñador-desarrollador para optimizar el proceso de trabajo saludos
☝️
@Francisco Que productos podría utilizar para algo final? Tengo la idea de una pagina que incluye en una sección actualizaciones tipo blog, y otra con audio de una radio. Agradecería la respuesta para no malgastar el tiempo en aprender un programa que no cumple la función
Puedes usar WordPress, webflow, squarespace, wix o algún similar.
Excelente comentario, soy Diseñador y comienzo en el desarrollo Front End y como dices, deberá nunca reemplazarse el factor humano para criterios de función, creación y adaptabilidad.
Gracias Diego 🤗
Me parece bien separar diseño y desarrollo web pero podrían haber galerías de componentes y de bloques-secciones como los que hay en elementor que pudieran ser utilizados en adobe xd, por ejemplo. Al final, en una web actual tenemos unos tipos de elementos muy concretos (header, footer, galerias de personal o de logos, portfolio, sliders, fichas de productos, archives, posts, etc) los cuales podrían estar disponibles en XD como componentes. Así también el proceso diseño-desarrollo se haría más robusto.
Recién empiezo como frontend. Para mí está bien que no se pueda exportar, más allá de que el código no queda limpio. Si no que es mejor para que la persona entienda que no es fácil, que tenés que entender la lógica, sintaxis de cada lenguaje y como se conectan entre si.
👍
Listo, brutal, mataste todas las dudas de un solo disparo jaja gracias 🔥
Gracias :)
Un video muy bien explicado, recién empiezo en este mundo del diseño para apps y web, mi duda es como debería exportar para entregar al desarrollador de la aplicación?
Mira mi masterclass de Adobe XD en la tercera lección hablamos de eso.
@@FranciscoAMK Me acabo de ver las 3 clases de corrido, que crack!! Aprendí mucho, hay solo algo en lo que aún tengo dudas y es en los tamaños, cual es el tamaño base para diseñar y qué luego se ajusten perfectamente a las distintas proporciones de pantalla de Android por ejemplo? Y otra, tengo unos diseños en Illustrator, en un tamaño 1080x1920 a que tamaño debería cambiar para importarlo en Adobe XD correctamente. GRACIAS
Muy bien explicado paisano. Yo estoy aprendiendo ahora a usar XD, simplemente para presentar al cliente el diseño. Siempre pensando en las limitaciones que se tiene a la hora de desarrollar con los contructores de wordpress.
Esa es la actitud.
Me gustó, suscrito. Gracias amigo.
Welcome compa ✌️
Hola! una pregunta, Adobe XD me sirve para diseñar una presentación? puedo compartir con otros el prototipo, como si fuera una presentación?
Sip
Cual es el proceso óptimo de crear una app, paso a paso, con Dashboard de administración, existe alguna guia o tutorial Francisco, como para tener la idea.
Ninguna que yo haya visto. A grandes rasgos se trata de definir requerimientos, diseñar las interfaces, la experiencia y los datos, desarrollar el código, hacer pruebas y finalmente publicar.
La pregunta es, la parte gráfica, se puede usar? o hay que volver a hacer todo. Entendí que la animación enlaces etc hay que hacerlo en la etapa de programación pero la parte grafica. es posible usarla? y donde coviene? que le doy yo al programador? Gracias
Checa la tercera parte de la Masterclass ruclips.net/video/lqHhx7HSZbA/видео.html ;)
Hola Francisco. Ya has usado ó podrías probar los programas "Blocs" y "Mobirise"? Me parecen buenas alternativas a Webflow por ser creo más económicas, aunque también las veo más limitadas. Tal vez serían buena opción para sitios básicos? Espero me puedas dar tu opinión o hacer un video con el análisis de éstos. Muchas gracias!
Tengo pensado en algún momento revisarlas :)
@@FranciscoAMK Estaremos atentos a la reseña. Muchas gracias Paco!
Es la primera vez que busco el botón ME ENCANTO aqui en RUclips. (Soy super selectiva viendo videos es tan difícil dar un Me gusta) Estoy totalmente de acuerdo contigo, diseño es diseño y ya el desarrollo es otra historia, por eso hay gente tan capa que estudia para ser desenvolvedor, (por si acaso no soy developer, soy disenadora)
Muchas gracias Melissa
Hola Francisco, que opinas sobre Elementor, he visto que ultimamente muchos hablan de él, es mejor hacer un sitios web con elementor o creando un template desde cero (pasar mi html/css a los archivos header, footer, etc)
A mí me gusta una mezca de ambas cosas. La cabecera, el pie de página y los estilos generales como parte de un tema hecho para el caso, y en el cuerpo darle algo de libertad al cliente implementando elementor para los contenidos.
Muy buena explicación, muchas gracias.
Gracias :)
Muy buen video.. se puede importar un html completo??
Matías Sande asumo que no viste el video XD
Francisco Aguilera G. Claro que lo vi, pero yo pregunto si se puede importar un html a Adobe... vos publicaste la exportacion, yo digo la Importacion
Matías Sande nop, no se puede
Excelente explicación y canal, el proceso de diseño y desarrollo se deben de trabajar por separado. Un programa de diseño no tiene que exportar a código sino simplemente mostrar el diseño y flujo de navegación para que sea pasado por pruebas de usabilidad y sea aprobado por el cliente.
Exacto
¡Genial! Muchas gracias. Súper bien explicado ❤
🤗
Pregunta.
Entonces qué hago para pasar mi pequeño sitio que cree en Adobe XD a la red o sea como lo pongo a trabajar como una pagina web hecha y drecha?
ruclips.net/video/3SzYRtEtX_I/видео.html
Eso.mismo que haces, puedes hacerlo con el.código de Adobe dreamweaver? Y exportar los css desde XD?
No tan así, revisa este video: ruclips.net/video/sm0qLEp3tUg/видео.html
Hola Francisco, si bien estoy de acuerdo en que es necesario primero tener la propuesta visual antes de pasar al código, creo que tu comparación de tiempos no va al caso, ya que aunque con adobeXd duraste menos, luego tendrías que sumar el tiempo al pasarlo a código, en cambio con el tiempo de hacerlo con solo código solo es ese, ya que lo tienes funcionalmente sin tener que pasarlo a otro lado; personalmente creo que lo relevante de tener la propuesta visual antes de ir al html y css, es que se va a lo fijo, mientras que con css se da mucho que se busca todo a base de probar y probar, y hacer cambios aquí y allá, lo que hace que a final de cuentas se pierda mas tiempo. Saludos.
Claro, la comparación de tiempo iba a eso, a que puedes tener multiples versiones y hacer cambios muy rápido. Efectivamente después se suma el tiempo de desarrollo, pero es solo un tiempo de desarrollo:
Considera hacer 7 versiones diferentes de un componente "resumen de artículo", es mucho más rápido hacer las 7versiones en Adobe XD y luego desarrollar la que corresponde, en lugar de hacer 7 veces los cambios en código.
@@FranciscoAMK Si señor, toda la razón, un abrazo!
Interesante el punto de vista, y lo comparto. Siendo desarrollador full stack, es muy fácil ordenar el código css cuando tienes los diseños ya aprobados y solo necesitas plasmarlos en código, ayuda en cuanto a trabajo por que ahorra el tiempo al crear componentes que se pueden usar en diferentes partes de la página web, en vez de repetir código cada vez que haces un diseño.
Si yo diseño una página y luego quiero hacer también el trabajo de desarrollo en ese diseño, como lo exporto y que programa utilizo para crear la web funcional?
Mira este video del minuto 58 en adelante más o menos: ruclips.net/video/lqHhx7HSZbA/видео.html
Puedes usar cualquier programa de desarrollo que quieras. Algún editor de código como sublime o alguno de desarrollo visual como webflow o pinegrow
Francisco Aguilera G. Gracias :D
Gracias!! Por fin lo explicaste claramente, el diseño y programación son cosas totalmente distintas. Si el que diseña no entiende, ¿Cómo lo puede explicar al cliente? Así mismo, si programas ¿Cómo explicas el por qué del diseño de app´s?
Son dos cosas diferentes, aunque a veces sea la misma persona quien haga ambas.
Yo hago todo esto más fácil con Adobe Muse! El programa me ha sacado de muchos apuros; elaboró firmas personal profesionales!
Qué bueno :)
Hola como estas? Una consulta, hay forma de escribir en HTML y despues vincularlo al XD?
No que yo sepa
en términos de diseño entiendo la comparación que haces Francisco pero en términos de site final; XD otorga un prototipo mientras las otras dos ya dan un site real.
Me parece que no es del todo valida la comparación... que opinas? Gracias por el tutorial!
Estoy de acuerdo, el ejemplo para funciona exige una proyección que no está bien explicada. El punto más correcto sería ¿qué es más óptimo? Gastar tres días desarrollando y aplicando cambios o un día diseñando y aplicando cambios más un solo día de desarrollo en donde trabajas más rápido porque ya está todo aprobado.
No entiendo de que sirve invertir tiempo en transacciones bonitas en XD si no se puede exportar el codigo
El objetivo es maquetar la animación, para que al momento de desarrollar el código solo inviertas en desarrollar lo que ya está aprobado. Iterar en la etapa de diseño es mucho menos costoso que hacerlo en la etapa de desarrollo.
@@FranciscoAMK Es como si los arquitectos no hagan planos bonitos si no se van a construir solos, todo tiene su función
Yo también opino lo mismo, no le veo sentido, como diseñador sin conocimiento de programación (creo somos muchos asi) no me resuelve, yo estoy buscando algo parecido a adobe Muse, en verdad me encantaba y lograba hacer todo el trabajo completo. aun no me explico porque adobe desapareció Muse, en fin habrá que aprender un poco de programación.
cómo dices que se llaman las aplicaciones para el Desarrollo? No entiendo lo que dices en el minuto 8:03
Webflow y Pinegrow. Tengo un par de tutoriales de ambos :)
Genial! Gracias.
Genial que bien explicaste.
Gracias :)
yo hacía páginas web simples en adobe muse y la verdad que salía bastante limpio el código. Un bajon quedar viudo de muse :´)
Creo que esta bien que existan programas como Adobe XD, recuerdo hace como 10 años cuando diseñaba la presentación de una pagina web en una plantilla enorme de JPG lo hacia desde Photoshop y después cuando el cliente me autorizaba el diseño continuaba con el desarrollo en Flash o Dreamweaver, ahora es casi lo mismo, no uso XD pero uso Affinity Designer que tiene algunas funciones para automatizar diseños y crear interfases, después continuo con Webflow o algún otro programa front-end
Por cierto estaría genial que hicieras videos sobre Affinity Designer y Affinity Photo para los demás colegas ya que ofrecen una alternativa muy profesional y tentadora para migrar de Adobe, sobre todo porque son de pago único 😀
Tengo pendiente interiorizarme en el mundo affinity. Hay tantos programas hoy en día que llega a ser difícil conocerlos todos.
Yo ando buscando un herramienta que me permita solo tener el CSS, el CSS como tal es lo que permite pintar sobre el lienzo, ya del código HTML si debería ser manual ya que en el tenemos tantas opciones como sabores de refresco... Aunque, por lo que veo de xD, permite darte una idea he ir paso a paso generando manualmente ese CSS...
En la próxima versión de XD vendrá incluida la posibilidad de obtener css de cada elemento :)
@@FranciscoAMK que buen noticia, como programador independiente es importante también darle una idea general a los clientes... gracias por el dato...
Muy buena explicación, como siempre de 10!
Gracias Ader :)
Será que el avance de programas de "desarrollo" web pone en peligro el labor de las plataformas y los desarrolladores independientes, y por eso, desde la época del front page que viene teniendo poco aval un tipo de herramienta tan útil como un programa de desarrollo "enlatado y sencillo"?
No lo sé, creo que se trata más bien de cosas técnicas.
concuerdo con ello, los medio ignorantes hablan de que el diseño ya se tiene en la mente y que no se ocupa XD... pero eso si es una pagina simple, ya hablando de una pagina mas compleja se ocupa plasmar todo un diseño, esto es como todo edificador que ocupe construir una casa oh edificios , necesita un plano, nadie se va a ir a edificar una casa sin un plano, amenos que este construyendo una chosa o casa de 4 paredes que parezca un cubo sin mas.
Ese es precisamente el punto 👍
Muy buena explicación tu video pero la verdad es que no me termina de convencer el durar 1 día de trabajo diseñando para después no tener el code fuente para cargar a un hosting. Repito todo lo que explicas está bien pero si lo piensas ya XD está atrás debido a que herramientas como Elementor, Divi y Visual Compouser ya pueden entender en code cómo integrar el diseño con el desarrollo.
Depende del tipo de proyecto, para un sitio web de 4 o 5 páginas, te lo concedo. Para crear productos complejos, en donde requieres mantener un biblioteca de componentes de diseño, obtener aprobación de múltiples participantes y documentar el diseño, sin dudaDivi y similares no te sirven. No me imagino que la gente de UBER pueda mantener su diseño con una herramienta de ese tipo.
Francisco Aguilera G. Si ahí tienes mucha razón, viéndolo de esa forma adobe XD es muy útil para proyectos bien personalizados se podría decir que un es un servicio vip para clientes de ese tipo.
Saludos Franciso, hoy acabo de intentar la instalación de este plugin "Web Export" pero me sale error. Version 25.2.12.3 Mac Mojave. Si sabes algo agradecido tu respuesta
Ni idea
buena tarde, tengo duda sobre tus cursos. donde encuentro o a que correo puedo escribirte?
franciscoamk.com/contacto
respeto memero por la thumbnail
😅
Hola, yo estoy en un dilema mas o menos, soy ilustrador 3D y 2D hago miles de cosas con programas tridimensionales y luego retoco en photoshop o bien en lo que sea necesario pero de diseño web CERO, y estoy buscando hacerme una nueva web. El tema compadre que pedirle a alguien que te lo haga uff es tremendo ya que para pillar al diseñador es todo un tema mientras que si lo haces tu mismo es mejor y logras lo que tu quieres. Que me recomiendas ya que wordpress me cargo y tiene plantillas feisimas y wix te limita a sus valores y quedas colgado de la brocha aunque tiene plantillas mejores en cuanto a look. Esto de los diseños web y programadores de codigos es un tema y la verdad no quiero buscar a nadie por lovque ya explique mas arriba. Saludos y excelente explicación
Creo que tienes tres opciones a) te conformas con alguna plantilla que encuentres b) diseñas algo tu y le encargas a un desarrollador que te lo programe c) contratas a alguien para que diseñe y desarrolle tu sitio.
Cualquier opción fuera de esas tres lo veo como un potencial dolor de cabeza.
Jajaja, tienes toda la razón, ha sido un parto todo esto, gracias por responder
gracias por quitarme las dudad :)
:)
Buen video. Resolviste mis dudas.
Genial
hmm... No sabía si quiera para que servía esta aplicación de adobe, de hecho lo encontré buscando "xd" en el buscador de google, pero ahora que medio sé para qué sirve, creo que hasta me podría llegar a interesar para alguna página que quisiera hacer para proyectos que tengo en mente
Me da curiosidad: ¿En qué circunstancia alguien busca XD en youtube?
@@FranciscoAMK nono, en google, quería buscar una plantilla de meme para ponerlo de comentario en un estado de Facebook xD
Tengo una pregunta muy importante si yo hago un diseño digamos super imperativo como hago para pasarlo en htm5 , css , javajava script
soy nuevo en el mundo de programación y estoy buscando información en youtube udemy y otras paginas :c si pueden por favor ayúdenme
Esencialmente, escribiendo el código HTML/CSS/JS necesario para que sea lo más cercano a tu diseño. Ya sea que escribas el código directamente o uses una app tipo webflow o pinegrow.
por que dejaste de dar los cursos, con lo bien que explicas!!
Dejé de venderlos, pero aún loa hago y los pongo aquí, de hecho, dentro de poco subo las ultimas lecciones del curso UI
de qué sirve acelerar el proceso de diseño si lo importante y lo difícil es el desarrollo?. Sería mucho más útil simplificar el desarrollo que la tarea de dibujar un sitio
Para nosotros los diseñadores tomamos conciencia del trabajo que cuesta a un programador realizar su trabajo. Lamentablemente es el cliente a quien no le importa el proceso. Solo ve el producto final . Deberíamos ponernos de acuerdo en selecionar páginas con Diseño y programacion de tal manera que el cliente entienda de que cada una pueda tener su ventaja y desventaja . hay programadores expertos pero eso no le da creatividad al momento de diseñar . entonces habría que vender páginas de diferentes categorías que vayan mas allá de que si son estáticas , dinámicas etc
Por supuesto, hay proyectos que requieren diseño desde plantilla, otros que requieren diseño personalizado, pero sencillo de tal modo que el mismo diseñador pueda construir y otros proyectos requieren diseño y desarrollo personalizado.
Pero si logro hacer una página, algún desarrollador la podra subir y hacer que funcione?
Esa es la idea
@@FranciscoAMK Entonces es útil XD, aunque estába acostumbrado a la interfaz de muse, veo que vale la pena aprenderlo
@Antonio Araya te recomiendo ver este video ruclips.net/video/3SzYRtEtX_I/видео.html
Buena esa
🤘
Hola. Soy nuevo en esto y no entiendo para qué sirve este programa si no se puede exportar a HTML. ¿Qué sentido tiene diseñar algo que no se puede implementar? ¿Para implementarlo hay que diseñar todo de nuevo en html? Me perdí.
Te recomiendo ver esto: ruclips.net/video/3SzYRtEtX_I/видео.html
Excelente
Gracias
Manita arriba si también te mandan cambios cuando ya el proyecto se esta desarrollando :(
🙋♂️
El problema es que el diseñador es libre de poner lo que quiera en AdobeXD, "el papel lo aguanta todo" el problema viene cuando ingenieria tiene que cubrir tiempo para dejar el sitio pixel perfect. Si la herramienta diera el maquetado se avanzaria bastante para que ingenieria se dedique a funcionalidad y no a diseño. Que se supone para eso se paga a otra persona, si se va a tener que hacer retrabajo estamos mal en el proceso.
Una explicación perfecta y genial.
Gracias
muy bueno!!
Gracias
Excelente video bro.
Gracias :)
Ahora le digo al jefe que a pesar de tener un diseñador superguay, tiene que dedicar más dinero al diseño-programación del frontend... ;-) . ¡Y le adjunto tu vídeo!
No entendí entonces que hago con el diseño que hice y como hago para poder utilizarlo
Ahí toca trabajar con un desarrollador o desarrollar la app tú mismo. Adobe XD solo genera maquetas para obtener validación de la idea antes de entrar en el desarrollo.
Si usted (lector) no lee y no sabe la razon de XD que es hacer PROTOTIPOS, NO aplicaciones finales funcionales es porque usted, repito NO LEE o no hace investigación al comprar un software u app como este. Soy diseñador y soñaria con crear un app en XD y que se exportara en un app final pero eso es una fantasia porque sé que hay que programar todo finalmente. Este app mayormente se usa para crear prototipos para compañías que pagarán por el mismo. El prototipo sirve para VENDER LA IDEA a gerentes o cualquier persona envuelta en el proyecto y para que los programadores tengan una idea completa sobre lo que deben crear en CONJUNTO CON LOS diseñadores. Si usted quiere crear websites entonces XD NO ES SU solucion! Espero esta explicación ayude a entender a los que siguen preguntando para que perder el tiempo diseñando si no se puede usar finalmente como un app o website! XD es un app para diseñadores de INTERFACES en un ambiente de desarrollo de apps o webs corporativos.💪🏼🤦🏻♂️
Está excelente que no exporte código, no sé denigra el trabajo de los Desarrolladores, lo que no me gusta es que sea tan gigante jajaja es decir, Adobe XD permite hacer cosas increíbles, y eso a veces ocasióna problemas al intentar duplicar esos efectos tan locos con códigos, afortunadamente no es imposible, pero a la vista del cliente se imaginaria que el desarrollador puede programar así de sencillo y rápido, aún así está muy padre y muy buen video
Por eso siempre digo que la comunicación es importante. Nunca debemos presentar al cliente una interacción sin antes haberla validado con quién vaya a desarrollar.
el plugin ANIMA funciona?
o probé y obtuve los mismos resultados
Lo que todavia más jode de que Adobe esté dejando una aplicación que serviria para hacer landings page, o cosas sencillas en html, es que es una app muchísimo más ligera que illustrator, photoshop y sobretodo indesign, y digo está última porque adobe a nivel de app para publicación digital la dejó ralentizada, sin actualizar y cuando veo XD me da una rabia tremenda no usen esta nueva simplicidad y ligereza almenos para otras de sus apps como Indesign para publi digital o Captivate para aprendizaje en la web. Todo pasa para desarrolladores superchupis porque saben codigo.
Superchupis 🤣
¡De acuerdo! PERO... no todas las piezas que un desarrollo XD son para web. También debería exportar un código HTML para tizas sencillas como un plantilla de Correo Electrónico. ¿Porque?, usar una desarrollador para una pieza tan visual, no seria un buen uso. Hoy en día hay herramientas como HubSpot que uno como diseñador puede desarrollar una plantilla pero en HTML, y como diseñadores es mas fácil prototipo en XD y si el software permite exportar un html seria lo mejor porque es sencilla la pieza, unos con conocimientos básicos lo limpia y facilitaría mucho el tiempo de respuesta a los clientes. SOLO EN ESO SERIA GENIAL QUE EXPORTARA HTML, del resto tiene toda la razón la lógica humana no se puede reemplazar, irónico que humanos no puedan crear código que reemplace la lógica.
Hola, me parece excelente el tema! me gustaria que hablaras en un video de masomenos como estructurar una app o web app, que parametros, que cosas si o si deben haber.
Para poder tener unas bases mas solidas y poder iniciar un proyecto personal .
Gracias por la sugerencias Luis
hacer paginas webs es terrible
es un trabajo de hormiga
te va doler la cabeza
yo he pasado x eso
Cuales es la otra aplicación a parte de webflow? 8:02
Pinegrow. Tengo un tutorial por ahí ;)
@@FranciscoAMK Listo, gracias
El Diseño ya está en la mente. No se necesita diseñar en XD. Código nomás. Un solo código para diseño responsivo.
Lo ideal sería que una vez creado el diseño se pudiera exportar a HTML y CSS, de tal manera que el programador solo use ese resultado. Bien lo dice, XD no hace la parte funcional pero si debería tener un resultado estático que es el diseño listo para usar. ¿Qué piensan ustedes? 🤔
Totalmente. Pienso lo mismo y por ende no entiendo para qué sirve este programa la verdad, si luego hay que hacer todo de nuevo en html.
@@edcampos8747 es solo para hacer bosquejos o ideas
como le muestro un diseno a un cliente ??? osea, un diseno hecho con XD
Desde XD tienes la opción de compartir prototipo y ese link se lo puedes mandar al cliente
no concuerdo con tu conclusión final, me gustaria que mis diseños fueran funcionales por que no, en el futuro cada quien realizará sus propias app para determinadas tareas.
No es malo pensar así, pero es una visión bastante a futuro. Mi conclusión apunta al estado actual de las cosas. Ojalá en el futuro podamos hacer cosas así, aunque siempre de la mano del criterio profesional de un desarrollador.
y ya existe Elementor... no entiendo como un diseñador va a querer que lo que hace en su imaginación no sea realidad con herramientas pulidas... yo tampoco estoy de acuerdo en que los diseños se queden estéticos y estáticos... el futuro es diseñar funcional
En el minuto 6:60 donde haces las comparaciones de las 4 columnas hay que dejar claro que el ganador es "WP Elementor" porque una vez le das al botón de actualizar ya está online. En las otras opciones tienes que usar FTP en el caso de código y en el caso de Adobe XD solo es el diseño, por lo tanto tendremos que exportar las imágenes y ponerle código. Vamos, que haces la comparación y te quedas tan ancho ya que no es justa. 🤣
Claro, tienes un buen punto, pero la idea es extrapolarlo a mucho más que eso, a cambios generales en todo el sitio o la aplicación. Mientras más compleja sea el cambio, más se hace marcada la diferencia de tiempo. En todo caso, si para tu proyecto elementor soluciona los problemas, excelente 👍
que diferencias hay entre figma, adobe xD, etc?
En esencia toda esta gama de aplicaciones hace lo mismo, con algunas diferencias en funcionalidades extra y flujos de trabajo, pero son bastante similares.
Tengo pensado hacer un video comparativo, pero por ahora te comparto esta reflexión de hace un tiempo.
Nuevas herramientas, preguntas, respuestas y más ruclips.net/video/ytOHkwlisUw/видео.html
Es cierto que el diseñador no debería meterse a querer hacer el trabajo del programador. Pero en ese caso el programador tampoco debería querer hacerse el diseñador, no crees?
Si los diseñadores queremos hacer el diseño y que funcione, es precisamente para ahorrar el tiempo de pasarle el diseño a un programador, que al final cambie el diseño por no saber cómo programar ciertas partes diseñadas (siempre pasa y lo digo por experiencia).
Por otro lado, los clientes son los que pagan, si yo diseñadora le digo mi trabajo llega hasta aquí, solo haré lo visual, después se pasará al programador. Este cliente busca mejor un programador que le haga el diseño al mismo tiempo que la programación, ya que, repito, los programadores toman la parte de diseñador y así el cliente "ahorra" el trabajo del diseñador ( Es como ir a la farmacia por medicamento directamente sin previamente ir al dr. a que revise y recete)
Entonces en la industria del diseño y desarrollo web se debería dejar claro y respetar el trabajo de ambas partes.
Soy diseñador, le paso el diseño a un programador.
Soy programador, necesito el diseño hecho por un diseñador para desarrollarlo.
Pero no, nos transformamos en "todólogos", en una lucha por adquirir y satisfacer al cliente.
Así que termino diciendo que en XD hay un pluggin llamado Fireblade, tiene ciertos errores y el código lo genera horriblemente (como tu mencionaste). Pero al final genera los archivos html y css que funcionan en el navegador. También Quest AI, que además genera breakpoints para hacerlo responsive, entre otros.
Que sigan los juegos del hambre.
Sobre los puntos:
1. Lo ideal es que sea un trabajo en conjunto y una comunicación constante. Programadores pueden tener opiniones muy relevantes sobre diseño y diseñadores sin duda pueden aportar ideas para desarrollo. Pero el que encabeza cada área debería estar clarísimo.
2. Depende del tipo de cliente. Hay agencias que solo buscan diseñadores freelance o empresas que solo necesitan externalizar el diseño porque tienen programadores contratados. Dependiendo de cual sea el público objetivo, quizás es buena idea formar una alianza diseño/desarrollo y presentarse ante el cliente como un team.
Y que la suerte esté siempre a tu favor.
2021 y sigo usando adobe muse
Diseño se hace en photoshop y con bootstrap o html ya lo haces real.
Hoy existen apps más enfocadas como sketch, o Adobe XD para hacer el diseño
En una charla sobre UX el profesional decía que una cosa es programación y otra cosa es desarrollar un lenguaje HTML, creo que por eso una aplicación, que tiene su propia programación y que ademas funciona dentro de determinado sistema operativo, le sería muy difícil traducir todo eso a un lenguaje HTML y que no esté lleno de "errores" de sintaxis. Perdón por mi escaso lenguaje digital jaja
por eso sigo usando adobe muse
Nunca me gustó el código que Muse generaba... por eso prefiero cosas como pinegrow o webflow
Es increible como con el correr de los años los convencieron de que los procesos de diseño sean mas dependientes de terceros. Diseño webs desde 1995 y realmente no entiendo el concepto de diseñar algo para que no funcione, sino para mostrarlo a otro que lo hará funcionar luego con otra herramienta. El ahorro de tiempo se convirtió en doble trabajo. Entiendo que esto alimenta a tener diseñadores por un lado y desarrolladores por el otro, pero me resulta un paso hacia atrás en el trabajo. No encuentro una sola herramienta WYSIWYG desde la muerte de Adobe Flash.
Si buscas un WYSIWYG de buena calidad, creo que webflow tw puede servir. Eso sí, hay que tener ojo en diferenciar las aplicaciones de diseño de las aplicaciones de desarrollo visual. Mientras adobe xd entra en la primera categoría, webflow o wordpress con sus varios constructores visuales entran en la segunda.
@@FranciscoAMK Sigo pensando que esta muy limitado el diseño. Las webs se simplificaron demasiado y lucen absolutamente todas iguales.
Extraño un poco muse :c
Lamento tu pérdida, pero hay que seguir adelante con la vida...
Wordpress + Elementor le da mil patadas a esa App. A parte, 100% Gratuito.
Like si viste al perry ninja delante del macetero.
Ese no es Perry, es el Agente Perry
Antes se podía hacer todo el sitio web desde Adobe Muse...
adobe xd deberia exportar
Yo creo que el enfoque debería permitir diseñar con mucha libertad... el código es tarea de los desarrolladores, no de los diseñadores
+1🙋🏻♂️
✨👌😎👍
Yo exporte pero con plugins
Se viene review de web export