No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Wireframes digitales en Sketch

20/29
Recursos

Existen herramientas para el dise帽o de interfaces como Sketch, en el que tambi茅n se pueden hacer wireframes sencillos, y con los que se puede crear de forma m谩s precisa y atractiva. Aunque la finalidad es la misma: contar con un boceto, mostrar a los sujetos de prueba algo que puedan visualizar.

Aqu铆 se puede apreciar el dise帽o sobre el ejemplo anterior, un sitio para buscar departamento:

18.png
18.png

Es fundamental aprender a usar estas herramientas de dise帽o, ya que en la industria es la base de un trabajo profesional.

Aportes 153

Preguntas 16

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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 鈥淕enerales鈥 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! 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.

Considero que es bueno hacer un 鈥減are鈥 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

Si no tienen Sketch, Figma es muy similar en su interfaz y funcionalidades.

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

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 馃槂

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. 鉂わ笍

Nota mental: Aprender sketch, Figma y Adobe XD. Soy dise帽adora y antes del boom de est谩s aplicaciones hacia mis wireframes en Illustrator y Photoshop. 馃槥

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