De boceto a interfaz
Convierte la foto de una pizarra o un wireframe en papel en una interfaz digital acabada.
Última actualización:
Fotografía tu boceto, súbelo y obtén una pantalla real.
Pasos
- Fotografía el boceto de frente, con luz uniforme y todo el dibujo dentro del encuadre.
- Súbelo en el campo de prompt.
- Añade el contexto que el dibujo no puede transmitir: qué es el producto, qué significan las cajas, la dirección visual.
Un boceto de nuestra pantalla de onboarding. La caja grande de arriba a la izquierda es un vídeo, las tres cajas apiladas son pasos de configuración con marcas de verificación. Aspecto SaaS moderno, acento morado.
Que los bocetos se lean bien
- Etiqueta tus cajas. «hero», «nav», «gráfica»: las etiquetas escritas se leen y se usan.
- Dibuja la jerarquía. Las cajas más grandes se convierten en elementos más grandes.
- Evita los sombreados densos. Los dibujos de línea se leen con más fiabilidad que los sombreados.
- Una pantalla por foto, salvo que estés entregando un flujo a propósito.
De boceto a wireframe
Si quieres quedarte en baja fidelidad —limpiar el boceto sin comprometerte con un estilo visual—, pide un wireframe. Consulta Modo wireframe.
¿Te ha resultado útil este artículo?
Artículos relacionados
De captura a interfaz
Sube una captura de pantalla y obtén una versión editable y reestilizable de esa interfaz.
Modo wireframe
Genera wireframes de baja fidelidad para cerrar la estructura antes del diseño visual.
De texto a interfaz
Convierte una descripción escrita en una pantalla editable y de alta fidelidad.