Cómo crear Wireframes para Diseño Web

Wireframes es una de las primeras etapas en la realización de un sitio web o aplicación. En este video muestro como yo lo realizo.
➤ Suscríbete, es gratis! bit.ly/UXTipson...
▾▾▾ Más Info aquí abajo ▾▾▾
Aprende más sobre Wireframes en el curso Avanzado de Sketch aquí: bit.ly/cursoava...
► Facebook: / uxtipsonline
► Twitter: / uxtipsonline
► Instagram: instagr.am/uxti...
► Web: www.uxtipsonlin...
► Contacto: [e-mail]
Espero que te guste el video y si es así no olvides de darle Like :) Este es mi primer tutorial en consejos de Experiencia de Usuario, si tienes alguna sugerencia no olvides de comentar! También déjame tus ideas para próximos videos!
-----------------------------------------------
// SOBRE MI
Mi nombre es Eugenia y trabajo como diseñadora de experiencia hace mas de 8 años. Me encanta enseñar y aprender también de los demás porque ésta increíble carrera nunca deja de sorprenderte y descubres siempre algo nuevo que aprender!
-----------------------------------------------
// MUSIC
Music: [Chill] A-GON - Karlita
/ dj-a-gon
• [Chill] A-GON - Karlita
/ alangonzaelz
/ agonmusic
Music: ELECTRO-LIGHT & JORDAN KELVIN JAMES - WAIT FOR YOU
provided by NCS
/ nocopyrightsounds
• ELECTRO-LIGHT & JORDAN...
Jordan Kelvin James
• / jordankelvinjames
Anna Yvette (vocalist)
• / annayvette
Music:Golden Coast - Break My Fall (Rainer & Grimm Remix)
wearegoldencoast
wergoldencoast

[@victorhugobenitezbosques8817]

Hola felicitaciones por estos vídeos, para mí es como agua en el desierto. Soy programador de dispositivos móviles y con tus vídeos empiezo a entender a mis compañeros de diseño sobre su trabajo. Un saludo desde México Puebla.

[@UXTips]

me alegro mucho que te ayuden viktor! Si bien esto es parte del proceso de diseño, considero importante (y más en esta etapa) que todo el equipo este integrado. Así que genial que te interese ;) Gracias por tu comentario 😊

[@danielarotoma1926]

Buen video, estoy estudiando programación y tengo que hacer una página web. Esto me ayudó a tener una idea mas clara.

[@CarlosGomez-rx9sn]

Genial el video me gusto soy desarrollador web y me gustan mas los videos de este tipo ya que son tanto útiles para diseñadores como programadores :D

[@UXTips]

Gracias Carlos! 😊

[@victorguevara4698]

Genial ya somos dos.... Y de hecho hacer y plantear el diseño, interactividad, etc. Hacer un proceso antes de siquiera pensar escribir una linea de codigo no hace aprender y mejorar cada dia mas... Saludos.

[@victorhuayhuapuma1505]

Yo me estoy especializado en el desarrollo web frontend, y la verdad todo lo que haces yo lo pasaría a código html, css con bootstrap y javascript con jquery o vue.js. Muy informativo :) me gusto mucho :) y también muy educativo.

[@gabrielgerardo7953]

Hermosas manos de una mujer ux..... que mas se puede pedir....jeje con mucho respeto y admiracion ....saludos!!!

[@Juniorista70]

Sencillamente una gran explicación de wireframes. Excelente.

[@victorguevara4698]

Exelente. Solo que en las diferencias tambien existen los mockups. No en todos los paises se manejan como tal por que por ejemplo en mi pais para la mayoria que esta comenzando; los mockups y wireframe son lo mismo, pero si es importante saber esa diferencia. Saludos y muchos exitos.... :D

[@Nic01983]

Hola, una sugerencia simple....la cámara podria estar de manera frontal para ver lo que escibes en tu libreta... :)

[@gonzafl4577]

Me sirvió muchisimo este video. Gracias !! (Estoy aprendiendo desarrollo web y no conocia esos conceptos ya que no sé mucho sobre la parte de diseño)

[@ramiroproietto6747]

Gracias! expresas las ideas con pocas y adecuadas palabras

[@diarioelmatero1193]

Estoy enamorado de tu forma de enseñar, Muchas Gracias!

[@nixonjosebrinezmoreno]

🎉❤🎉Que bueno profe. Te felicito,

[@LoboPintadoNRKlob]

Eugenia, Muchas gracias por tu aporte de excelente calidad, lo más importante CLARO

[@UXTips]

Gracias ⭐

[@josemanuelgutierrez4095]

Hola , entonces quiere decir que siempre antes de prototipar tenemos que hacer un wireframe ?? si es asi , que hay de las aplicaciones un poco mas complejas con varias interaciones y varias paginas ??? se realizaria esto de igual manera ???

[@Edward-ce2lt]

Hola Eugenia buen video ;te quiero hacer una pregunta ,con que programas creaste los ultimos 2 wireframes que muestrasal final??

[@daf80]

Hola Eugenia, gracias por compartir tus conocimientos. Si me podes responder buenisimo sino no importa. Estoy metiendome en el mundo del diseño web con Figma pero no vengo del mundo del diseño grafico. Estoy aprendiendo a usar figma y a utilizar por otro lado html y css para diseñar. Mi traba esta en el comienzo de todo, como aprendo a realizar wireframes desde una idea que tenga en la cabeza?, no se por donde arrancar.

[@UXTips]

Viendo ejemplos de muchas apps, sitios web etc que te inspiren y comiences a ver qué patrones de diseño se estan usando. Ya mucho se ha probado con usuario por lo que no tienes que empezar de cero. Lo mejor para comenzar es aprendiendo de otros. Aqui por ejemplo dribbble.com/shots/popular

[@enmanueldiazmelo9371]

Gracias

[@leviatanMX]

Buen video...! a mi me gusta usar Balsamiq Mockups

[@adelavalle]

Hola, Dirías que es productivo hacer los wireframes en versión movil y descktop, de un mismo proyecto o para tí eso se puede obviar?

[@juancarloszapata4181]

Buen video, gracias

[@jairgabrieldelmazoriega3478]

Excelente! quedo bien los conceptos de wireframes.

[@UXTips]

Gracias!

[@practicodesign5863]

Hola Eugenia, que buen canal. Yo rara vez hago wireframes en papel, pero no estaría mal que nos recomendaras algunas marcas de libretas para sketch. Saludos!

[@UXTips]

Hola! gracias por tu comentario :D Libretas para wireframes te refieres? Bueno yo uso desde libretas comunes hasta hojas sueltas je! pero se que las mas populares son las moleskine.com. Algo muy interesante y que voy a probar en breve son estas hojas con puntos para imprimir www.printablepaper.net/category/dot - Saludos!

[@moviedev874]

que buen vídeo...soy estudiante que recién estoy empezando en esto del diseño web y quería saber ¿que sigue después de elaborar el prototipo y cual seria el programa para terminarlo por completo?

[@ljchacc]

Muchas gracias por la explicación y el ejempleo, fue muy claro. Gracias

[@dlerner92]

Están muy buenos los videos que haces! Me sirve mucho ya que soy Diseñadora Gráfica y actualmente me estoy metiendo por mi cuenta en el mundo del Diseño UX/UI. Hice un par de trabajos relacionado a UX pero lamentablemente lo que vi en la facultad fue algo más general y no se dividían en distintas especializaciones. Quisiera saber saber si conoces sobre algún curso gratuito o por lo menos accesible.

[@matiastoso1977]

Whaaat nanan muy buen videooo.. tenes algún curso en donde enseñes esto??

[@UXTips]

por ahora solo comparto por aqui o en instagram :)

[@gerardopacheco9521]

alguna herramienta para hacerlos que recomiendes ?

[@UXTips]

Si, Figma o Sketch, o papel :D

[@jespascual3692]

Excelente, gracias

[@gendersoncaro7664]

no se si les paso, pero cuando empezó a diseñar el Wireframes de la cafetería, automáticamente empecé oler a café.

[@UXTips]

Jajaja 😊👍

[@ReflectionHere]

hola, muy buen video, cómo hiciste el wireframe de baja fidelidad? en qué programa? y el de alta fidelidad? gracias

[@UXTips]

Con Sketch :) Puedes ver mis videos de Sketch aqui kzbin.info/aero/PLAd-1AckEO2e88L3qkqVzCZILYrT-qxb5

[@qomovirus]

Excelente, a pesar de que ya pasaron 5 años n.n

[@julioalvarado1833]

Gracias más videos asi

[@christiandelapena1643]

Excelente video muy conciso y entendible. Tengo una duda que me gustaría me resolvieran los más experimentados en el tema, esto de los wireframes ¿no estaría más enfocado al UI que al UX? por el tema del diseño o esquema de interfaz (lo de especificar la interacción de los elementos es de UX pero todo lo referente a la estructura del producto (web/app) me parece que va más por el UI. Es una duda que siempre he tenido y que me gustaría me pudieran apoyar. De antemano muchas gracias. Por cierto excelente canal, me acabo de suscribir :)

[@UXTips]

Hola Christian! responderé esto en mas detalle en un próximo video así que no te lo pierdas :)

[@villaloboslinda8291]

hola como por me puedes recomendar un libro para poder aprender hacer la estructura de los espacios wireframe gracias

[@yimym.7146]

Nice video

[@erwinboadabohada1340]

hola yo hice un conversor de monedas en sublime tex como haria para eso subirlo a un telefono. en realidad estudio solo y no se mucho apenas incurciono en este mundo perdone mi ignorancia pero como hago para subirlo a mi tlefo y usarlo como una app. si me puede dar una luz.

[@AlbertoGuerreroZaroza]

Hola Eugenia, no cualquiera puede diseñar, por ejemplo, yo puedo saber donde están todos los truquitos y botoncitos de una herramienta, pero si no les doy el toque , la simetría, o podemos decir el buen gusto no sirve de nada. Quizás en próximos videos podrías dar algunos consejos, o tips acerca de lo anterior como diseñadora, para personas como el suscrito puedan enfocarse. También hay unos videos que hablan de las tendencias del diseño web para el 2015, 2016, ..no he visto o hay muy pocos que se atrevan a decir cual va a hacer la moda que viene para el 2017, por ejemplo . continúan los colores flat, fotos a todo lo ancho ese tipo ce cosas. Sin alargarme mas.. me retiro . Buenas Noches 😊✌️️

[@UXTips]

Gracias por tu sugerencia Alberto! 😊

[@juanvaldemarcolichonramire407]

Muy bueno :):)

[@SHORELESSPRODUCTIONS]

Amor os una pro, muchísimas gracias por tu vídeo pero mira suceden dos dilemas, primero necesito un software gratuito que me recomiendes que opere en windows xp y este en español sea para elaborar plantillas de formularios web el segundo es alguno de estos que me han mencionado que partir de fotos de is dibujos en mis proyectos personales le agregue fluidez si me entendes?, este ultimo puede ser de pago no asi el primero te agradezco tu tiempo

[@alvarogermainn]

Podes hacer un tutorial de pasar esos wireframes, a alta fidelidad como los muestras al final de video?

[@UXTips]

Hola Alvaro! gracias por la sugerencia! para pasarlos a alta fidelidad simplemente ya aplicas el diseño casi final, con contenido real, imagenes reales etc y puedes hacer esto con Sketch o Adobe XD. En los cursos que ofresco aquí puedes ver el proceso completo www.uxtipsonline.com/ Saludos!

[@juandcg0331]

Como programador me gusta la parte del desarrollo del prototipado y wireframe, pero a la hora de del diseño quedo loco, no se me dá por ningun lado. Algún video en el cúal puedas recalcar algunos trucos para mitigar estos problemas?

[@juandcg0331]

@Ana Maria Muchas gracias por responder. En estos momentos me estoy enfocando en el área del desarrollo Front End como pasante en una empresa de desarrollo, mi objetivo es ser multifacético y llegar a conseguir el dominio como desarrollador web full stack. Estoy aprendiendo muchos tips de Ingenieros y diseñadores en la parte de UI y UX; tienes toda la razón, no hubo mejor forma de aprender que sentarse al lado (literalmente) de un experto en diseño y voy mejorando poco a poco a diseñar en herramientas como Elementor.

[@escorpiodeoctubre]

muy buenos videos, hacele caritas felices a tus dibujos =)

[@UXTips]

jaja lo tendré en cuenta para los próximos wireframes :P

[@lizhu8427]

claro o sea los wireframes van dibujados seria basicamente ( boceto ) y lo que es el prototype es una vez creado en por ejemplo adobe XD ahora mi duda es por que yo muchas veces no creo wireframes sino que los imagino y ya los voy construyendo en prototype ... creo que cuando tenes cancha ya directamente agarras de prototipos pero si los wireframes siempre sirven por que a veces no tenes ideas y dibujando vas tachando borrando etc y generas nuevas ideas.

[@daviruiz6327]

Esto significa Wireframes ?

[@fbnbnz]

Perteneces a IXDA por lo que vi :)

[@UXTips]

jeje! he participado del grupo local hace un tiempo y de los eventos pero no soy organizadora :D Es un excelente equipo!

[@fbnbnz]

Muy bien! Aca ixda viña presente

[@UXTips]

que bueno!! 😄😄

[@rubenming]

Los menús de hamburguesa mejor a la izquierda no?

[@johnyauyo]

Lo último que muestras en el video es lo que se suele llamar mockups

[@kooper7]

eso no es un sketch?

[@incubaagencia7444]

Buen vídeo, esta todo bien explicado y fácil de entender. www.incuba.pe/diseno-web

[@UXTips]

Gracias :D

[@lottharortiz1803]

me enviaron de ISIl lol xd

[@rodcastillosuarez8291]

minuo deperdiciados de mi vida, se supone que todo lo que ya esta escribo en papel lo tienes que levar a la aplicación del wirefram no? dislike