Wireframes digitales en Sketch

Hola! Les muestro mi wireframe (usé adobe XD para hacerlo)

Les comparto mi wireframe:

Home

Resultados

Detalle

Hola, este es mi wireframe… lo hice en Adobe XD. Porfa si pueden darme feedback lo agradeceria.

.

.

.

Igual les recomiendo Figma, hay para windows, mac y Linux. Es gratuito y se puede usar como desktop app o vía online.

Yo voy a usar Adobe XD, es gratuito y en este link pueden ver un tutorial muy bueno para afianzarse con esta herramienta.
https://www.youtube.com/playlist?list=PLhSj3UTs2_yVoP9-88WZI3HBS25vP6KoD

Hey! les comparto mi warframe de las 3 ventanas “Generales” según mi flujo de usuario 😄

Sketch es una buena herramienta para quienes tienen una mac, para los que tienen windows se recomienda adobe xd, figma.
Adobe xd también es una forma más fácil de trabajar ya que tienen sus elementos establecidos para que una persona con poca experiencia aprenda.

Muddanza
Wireframe hecho en Figma.

• Home:
  

  

• Resultados de búsqueda: (Info Ciudad)
  

  

• Resultados de búsqueda: (Mapa)
  

  

• Detalle del lugar
  

  

Les comparto mis wireframes, aun falta trabajar algo en la iconografía, coméntenme que puedo mejorar o que les parece

Les comparto mis wireframes, utilice figma para ello ❤️

Particularmente utilizo Adobe Xd, utilicé figma antes de probar Xd y de verdad me pareció poco intuitivo y difícil de usar. Quizás más adelante le vuelva a dar otra oportunidad. Pero ya tengo 6 meses con Adobe Xd y ha sido lo mejor. Lo único malo es que poco a poco más funcionalidades son pagas.

Hola! les muestro mis wireframes, estan suuuper simples, los hice con figma ya que hace unos dias aprendi a usarlo (no muy bien jaja)
![](

No entendí porque usa sketch para dar un curso cuando la mayoría usa android. Debieron hacer esa investigación antes para que la clase fuera más amena para el estudiante. Veo los aportes y la mayoría tuvo q buscar otra plataforma para poder continuar el curso y aprender por sus medios como usar la plataforma.

Hola!!! les comparto mi trabajo

Para los que no tienen mac, la mejor herramienta para Windows es sin duda Adobe xd, es muy sencilla y practica!

Una herramienta util para esto es también lunacy, viene integrada en windows, es fácil de usar

Estuve investigando mas herramientas y encontré que invision podría ser una buena opción.

1.-

2.-

3.-

Herramientas UI

1. Figma (Mac, Windows y Linux)

2. Invision (Mac Y Windows )

3. Lunacy (Mac, Windows y Linux)

4. Adobe XD (Mac y Windows)

5. Sketch (Mac)

Hola, yo usé Figma para hacer mis wireframes

Si son estudiantes de universidad o colegio, les recomiendo mucho Figma.
Por ser estudiante me permitió tener todas las funcionalidades disponibles gratuitas.

Mi avance. La verdad ya habia empezado hacer el proyecto en https://whimsical.com/ ¿Esta bien que lo haga por aquí?

Para crear wireframes digitales en Adobe XD recomiendo un plugin llamado Quick Mockup. Simplemente escogen el template y luego van agregando los elementos. Es muy sencillo de usar.

.

este es el mio lo hice para el reto de my product design, una app de buses

Yo utilizo Adobe Illustrator y estoy probando con Adobe XD.

Hola! éste es mi wireframe en Figma

yo uso sketch, aca mi aporte

😃

Mi Wireframe para mi proyecto Stay up

Hola segundo Wireframe…

![Resultado.png]

(https://static.platzi.com/media/user_upload/Resultado-9c99283a-3caa-4ae7-be33-cdf69bd597cd.jpg)

Hola! Mis wireframes los hice con Adobe XD, es mi primera vez usando la herramienta y creo que lo hice bastante bien. Espero sus comentarios, saludos!
Home

Resultados

Detalle

Hola les comparto mi trabajo, poco a poco lo voy mejorando, gracias.

¿Alguno de ustedes está utilizando Figma?..Les comento que en su momento yo compré una licencia de Sketch pero creí que era una sola compra y listo, ahora dicen que me toca volver a pagar y la verdad he escuchado buenos comentarios de Figma pero prefiero preguntar por acá para saber sus opiniones. De antemano agradezco su ayuda.

Home

Results:

details

Map

Map Details

Chat

Les recomiendo mucho Figama!!!

Les comparto un wireframe que convertí en un boceto de una pagina e-comerce hecho con adobe XD.
Es un ejemplo de como pueden escalar un wireframe para convertirlo en una muestra de lo que será su pagina o aplicación y facilitar el trabajo a los developers.

Acá muestro como quedo mi pagina de producto.

Mi aporte para tener feedback:

![](

![](

![](

![](

Hola este es mi wireframe lo hice en figma fue la primera vez que lo uso y se que me falta mas practica.

Hola!! Les comparto mi trabajo:
https://xd.adobe.com/view/d92039f6-4d66-40cd-569d-2aeca8d4b784-af11/

Considero que es bueno hacer un “pare” aquí para dirigirse al curso completo de Figma. Además, con la membresía de Platzi se puede acceder gratis a la versión full de student por 2 años

les comento que es demasiado útil, en mi caso que inicio desde cero en el diseño, platear tu idea en papel y luego en el programa de tu preferencia ayuda atener una idea clara y precisa de lo que deseas realizar y aplicando todos los conocimientos adquiridos hasta este momento se obtiene resultados muy favorables. saludos

Otra opción es Figma, es gratuito y para cualquier SO. Lo recomiendo

aqui pude hacerlo en figma

Hola! comparto el proyecto autónomo sobre el q estoy aplicando lo q estamos aprendiendo

https://www.figma.com/file/yuvVPGFrxRFUTpE2VOdvlc/PortafolioSaltamontes?node-id=0%3A1

Aquí mis Wireframes hechos con Figma, recomiendo mucho esta herramienta.

Wireframes Digitales on Adobe XD

Home

Search and Filters

Details

Realice mis wireframes en figma, quedaron en fidelidad media ❤️

Hola, muestro mi aporte, lo hice en figma, fue mi primer acercamiento al programa.

Wireframe con figma!!

hola! acabo de terminar el mio, cualquier sugerencia será bien recibida

Les recomiendo Figma para hacer los wireframes. Es gratis y sólo necesitas un navegador web. Es multiplataforma. Además Platzi tiene un curso super bueno https://platzi.com/clases/figma/.

Gracias a todos los que respondan.
Conocen alguna alternativa para Linux?

Para los que le guste mucho la interfaz de sketch prueben **LUNACY **,es casi igual ,compatible con Windows y **GRATIS **en la tienda de Microsoft

Columna + Margen + Medianil = Retícula
Dispositivos:
Web = 12 Columnas
Tablet = 8 Columnas (IOS: 768px | Android: 600dps)
Móviles = 4 Columnas

Hola compañeros, les comparto mis wireframes hechos en Figma
https://www.figma.com/file/tMKG2pfFObRaQjlTKAGuTK/Get-a-Home-Curso-de-Fundamentos-de-UX-y-UI?node-id=0%3A1

Para las personas que quieran descargar Sketch en windows lastimosamente no se puede hay dos variantes
https://iconos8.es/lunacy
o
Adobe xd

En mi caso, utilizo Adobe Xd, es una opción muy sencilla y práctica. Además me ayudó mucho a comenzar a usarla el curso que tienen aquí en Platzi.

se que me estoy adelantando pero desde mi punto de vista como programador, esto de la retícula de 12 columnas para aplicarlo en el maquetado con css grid, uff va a quedar guapísimo

Hola, Así fue como me quedo!!!

Hecho en Adobe XD
.
.
Home del proyecto.

.
.
Resultado de la búsqueda.

.
.
Detalle de la búsqueda

Comparto mis wireframes, los hice en XD

Aquí mi wireframe en figma.
Si no entiendes muy esta herramienta, aquí te dejo un tutorial donde aprendí lo básico, también hay un curso en platzi a profundidad.
https://youtu.be/SqO_-olNvnU

Comparto el home

Acá les dejo mi aporte, un ejemplo de proyecto e-commerce trabajado con Figma.

Hola! envío mis wireframes

Hola, les muestro parte de mi Wireframe que hice en Figma

Lo trabaje en Figma 😃

![detalle.png]

hola aqui dejo mi trabajo, lo hice en figma.

Aparta

Les recomiendo https://www.figma.com/ es una pagina on-line colaborativa y gratis, muy completa.

Para el diseño de wireframes digitales, además de Sketch, está Adobe XD, Figma o InVision, éstos dos ultimos tienen la gran ventaja de ser gratuitos. Yo sólo he usado InVision y me parece muy intuitivo… apenas aprenderé a usar Sketch, Adobe XD y Figma en los próximos cursos.

aqui mi aporte

Acá está el prototipo que hice en figma

perdon soy malisimo para estas cosas pero algo es algo

HOLA!
Dejo mis wireframes por acá !

HOME
![](

BUSQUEDA
![](

DETALLE
![](

MENSAJE
![](

Mi aporte
Lo realice en figma
Home

Resultados:
Con mapa

Sin mapa

Contacto:

No se explica aqui, pero existen tipos de WireFrames, empezando con el echo a mano que es el mas basico.
Despues sigue el Lo-Fi o el de Baja Calidad, donde resalta solo la estructura.

Despues el High-Lo. donde ya le das un poco mas de forma, pero sin definir colores o diseño

Y la parte final donde le das el diseño. imagenes, color, tipografia etc.

Agradezco recomendaciones:

Lo bonito también de Figma es la colaboración en tiempo real. ❤️

Gracias por las herramientas

Si no usan Mac, la alternativa más directa para Sketch en Windows se llama Lunacy, de hecho es compatible con la nube de Sketch si necesitas subirlo a la red.

https://iconos8.es/lunacy

Aquí esta mi wireframe que hice en figma.

Una pregunta, recomiendas que los wireframes se hagan directamente en html, css y javascript o consideras que es mejor hacerlos en un programa de diseño como illustrator o sketch