EXPERIMENT LAB

10 Plantillas de Portafolio de Diseño UI/UX: Del Concepto al Mockup con Nano Banana

Domina el arte de la narrativa visual para portafolios de UI/UX. Esta guía ofrece 10 prompts esenciales de Nano Banana que cubren Fintech, Salud, Automotriz y más para crear casos de estudio dignos de Dribbble.

10 Plantillas de Portafolio de Diseño UI/UX: Del Concepto al Mockup con Nano Banana

El mayor desafío para los diseñadores de UI/UX no es solo crear interfaces, sino demostrar el "proceso de pensamiento de diseño." Este tutorial está pensado para el campo de UI/UX, aprovechando la comprensión multimodal de Nano Banana para transformar ideas de diseño en five-stage horizontal visual narrative. cubriendo 10 escenarios verticales de alto valor como dashboards Fintech, HMI Automotriz y Medical WatchOS, ayudándote a generar portadas de portafolio al nivel de Dribbble/Behance con un solo clic.

Por qué la Narrativa Visual es Clave para los Portafolios de UI/UX

El núcleo de un showcase de UI/UX es la "coherencia lógica." Necesitamos que el modelo demuestre una cadena evolutiva completa desde "conceptos abstractos" hasta "interfaces concretas" y finalmente "escenarios de usuario."

La Arquitectura del Meta Prompt (Meta Lógica):

  1. Mood/Concept: Core visual metaphors or real-world references.
  2. Wireframe: Low-fidelity sketches emphasizing layout logic.
  3. Design System: Paletas de colores, tipografía y visualización de bibliotecas de íconos.
  4. High-Fi UI: Pixel-perfect high-fidelity designs.
  5. Mockup: Application effects in real devices.

10 Escenarios Esenciales de UI/UX: Del Concepto a la Realidad

1. Fintech: Professional Stock Trading Terminal (Dark Mode)

Diseño de UI para Terminal de Trading Profesional - Proceso de diseño completo desde el concepto hasta la implementación, incluyendo sistema de diseño en modo oscuro, visualización de datos con velas japonesas y mockup para monitor ultrawide

Prompt:

Create a UI/UX case study panoramic image focusing on a [Professional Stock Trading Terminal], featuring 5 horizontal sections.
[Part 1: Mood] Photography of Wall Street trading floor at night, blue glow from multiple screens, intense data atmosphere.
[Part 2: Wireframe] Low-fidelity wireframe of a SaaS dashboard, drawn in blue lines, labels: Multi-window Layout, Real-time Data Stream, Modular Panels.
[Part 3: Design System] Dark mode Design System display, Neon Green and Alert Red color palette, Roboto Mono font samples, micro-interaction button states.
[Part 4: High-Fi UI] Pixel-perfect PC trading dashboard UI, complex Candlestick charts, depth charts, dark grey cards on black background, high contrast data visualization.
[Part 5: Mockup] Real shot on an ultra-wide curved monitor, sitting on a minimalist metal standing desk, blurred office night background.
Style: Cyber-financial, professional, rigorous. Top title "Fintech Pro Terminal".

Analysis:
Apuntando a las demandas frecuentes de "Dashboards B2B" y "Visualización de Datos," este prompt usa el Modo Oscuro para disimular posibles imperfecciones de generación de IA en los detalles, resaltando una sensación premium general.

2. Wellness: Meditation & Sleep Assistant App (Glassmorphism)

Diseño de UI para App de Meditación y Sueño - Interfaz estilo glassmorfismo, mostrando mapa de recorrido del usuario, biblioteca de componentes translúcidos, página de reproductor iOS y mockup de iPhone

Prompt:

Create a UI/UX case study panoramic image focusing on a [Meditation & Sleep App].
[Part 1: Inspiration] Photography of a misty lake at dawn, soft gradient sky, blend of pink-purple and pale blue, serene.
[Part 2: User Flow] Hand-drawn User Journey Map, simple circles and arrows, labels: Sleep Guide, White Noise Selection, Morning Wake-up.
[Part 3: Components] Glassmorphism component library, translucent frosted cards, soft diffuse shadows, rounded icons.
[Part 4: High-Fi UI] iOS mobile player page UI, huge circular progress bar, background is dynamic flowing aurora gradient, frosted glass playback controls, borderless design.
[Part 5: Mockup] iPhone 15 Pro floating above soft white bed sheets, screen lit displaying the UI, morning light on phone edges.
Style: Healing, transparent, lightweight. Top title "Sleep Flow App".

Analysis:
Enfocado en el popular estilo "Glassmorphism" en aplicaciones C2C, la clave aquí es manejar texturas de transparencia y degradados suaves para crear una atmósfera envolvente.

3. Automotive: EV HMI Infotainment System (Automotive UI)

Diseño de HMI Dashboard para Vehículo Eléctrico - UI de sistema de infoentretenimiento vehicular, con modelo 3D del auto, panel de instrumentos digital, mapa de navegación y escena de interacción interior

Prompt:

Create a UI/UX case study panoramic image focusing on an [EV HMI Infotainment System].
[Part 1: Scenario] Future city highway at rainy night, flowing light trails, emphasizing speed and navigation needs.
[Part 2: IA] Wireframe layout of car system, emphasizing split logic between driver data (left) and entertainment/map (right).
[Part 3: Visual Specs] High-tech flat icon set, vehicle status icons (tire pressure, battery), cool tech-blue color scheme.
[Part 4: High-Fi UI] Widescreen dashboard UI, 3D car model in center, digital instrument cluster on left, dark map navigation on right, large card-style buttons.
[Part 5: Interior Shot] In-car shot from driver's POV, finger touching the central screen, blurred city view outside window.
Style: Driver-centric safety, high-tech, large typography, legible. Top title "EV Smart Dashboard".

Analysis:
"UI Automotriz" es un campo de océano azul. El prompt enfatiza específicamente "Pantalla Panorámica" y "Modelos 3D de Autos," que son elementos icónicos de este dominio.

4. Wearables: Health Monitoring WatchOS (Wearable UI)

Interfaz de Monitoreo de Salud para Smartwatch - UI deportiva estilo Apple Watch, mostrando monitoreo de frecuencia cardíaca, barras de progreso en anillo, interacción con carátula circular y escena de uso

Prompt:

Create a UI/UX case study panoramic image focusing on a [Smartwatch Health Monitoring System].
[Part 1: Context] Close-up of a pro runner sprinting on track, sweat, emphasizing heart rate and physical limit.
[Part 2: Interaction] Circular watch face interaction logic, showing Tap, Swipe, Long-press gesture guides.
[Part 3: Data Graphics] Ring progress bar components, vivid heart rate waveforms, high-contrast neon colors (green/orange/red) for intensity zones.
[Part 4: High-Fi UI] Apple Watch Ultra style interface, black background, bold large numbers showing "156 BPM", outer colorful activity rings.
[Part 5: On-Wrist] Close-up shot, smart watch on wrist, screen clearly visible under sunlight, running track background.
Style: High contrast, sporty, intuitive info. Top title "Pro Health WatchOS".

Analysis:
La UI para wearables debe enfatizar "Diseños Circulares" y "Fondos Negros (para ahorro de energía)," que son características clave que las distinguen de las UIs móviles.

5. Gaming: Cyberpunk Game Launcher (Game UI)

UI de Launcher de Juego Cyberpunk - Diseño de interfaz de juego sci-fi, con personaje de arte glitch, wireframes HUD, íconos holográficos y mockup de setup gamer

Prompt:

Create a UI/UX case study panoramic image focusing on a [Hardcore Sci-Fi Game Launcher].
[Part 1: Game Art] Visually striking cyberpunk character concept art, mechanical limbs, Glitch Art style.
[Part 2: Structure] Modular HUD-style wireframe, slanted lines, complex decorative border designs.
[Part 3: Visual Elements] Buttons with worn metal texture, holographic icon effects, yellow/black warning stripe assets.
[Part 4: High-Fi UI] PC Game Library Home UI, character art breaking the frame, weapon stats panel on right, friend list at bottom, full of tech details.
[Part 5: Gamer View] Screen shot next to RGB mechanical keyboard and mouse, screen displaying the UI, dark room, purple-red ambient light.
Style: Hardcore, destructive, immersive. Top title "Cyber Game Launcher".

Analysis:
La UI de videojuegos (GUI) no sigue los principios minimalistas de las apps típicas. Busca "Complejidad" y "Atmósfera." El prompt debe enfatizar elementos HUD y estilos Glitch.

6. Dev Tools: Minimalist AI Code Editor (SaaS UI)

Interfaz de Editor de Código con IA - UI minimalista de herramienta de desarrollo, mostrando esquemas de resaltado de sintaxis, editor estilo MacOS y espacio de trabajo en escritorio

Prompt:

Create a UI/UX case study panoramic image focusing on an [AI-Assisted Code Editor].
[Part 1: Metaphor] Neatly arranged matrix blocks, symbolizing logic and order, pure grey/white tone.
[Part 2: Layout] 3-column layout wireframe: File Tree, Code Editor, AI Chat Sidebar.
[Part 3: Syntax] Syntax Highlighting color scheme, soft pastel tones (lavender, pale blue, mint), rounded code block backgrounds.
[Part 4: High-Fi UI] MacOS style editor UI, minimalist distraction-free mode, an AI auto-complete suggestion box floating near cursor, Fira Code font.
[Part 5: Desk Setup] MacBook Pro on wooden desk, screen showing editor, coffee cup and plant nearby, natural light.
Style: Developer-friendly, rational, efficient, sterile. Top title "Zen Code AI Editor".

Analysis:
Para herramientas SaaS, el enfoque de diseño está en "Sin Distracciones" y "Legibilidad," apelando a una base de usuarios racional.

7. E-commerce: Luxury Fashion App (Editorial Style)

UI de App de Moda de Lujo - Interfaz de aplicación de moda de alta gama, mostrando estilo editorial Vogue, tipografía serif, sistemas de grilla y mockup en mano

Prompt:

Create a UI/UX case study panoramic image focusing on [High-End Luxury Fashion E-commerce].
[Part 1: Campaign] Black and white fashion photography, model in haute couture, minimal composition, Vogue style.
[Part 2: Grid] Rigorous 4-column grid layout sketch, massive Negative Space, emphasizing image ratio.
[Part 3: Typography] Elegant Serif heading display, paired with ultra-thin Sans-Serif body text, Beige/Black/Gold color palette.
[Part 4: High-Fi UI] Mobile Product Detail Page UI, full-screen background image, floating minimalist "Add to Bag" button at bottom, editorial layout.
[Part 5: Hand Mockup] Female hand with gold rings holding iPhone, screen showing interface, premium marble texture background.
Style: Noble, typography-driven, minimalist. Top title "Luxury Mode App".

Analysis:
El núcleo de la UI de Lujo es el "Espacio Negativo" y la "Tipografía Serif," completamente diferente de los diseños densos de las plataformas de e-commerce estándar.

8. IoT: Smart Home Control Panel (Smart Home Pad)

UI de Panel de Control para Hogar Inteligente - Interfaz de control integral del hogar, mostrando botones Neumorfismo, diseño de tarjetas, modos de escena y efecto de montaje en pared

Prompt:

Create a UI/UX case study panoramic image focusing on [Whole House Smart Control Pad].
[Part 1: Home Env] Cozy modern living room, warm lighting, comfortable sofa, embodying the warmth of "home".
[Part 2: Module Sketch] Card-style layout wireframe, dividing lights, temp, security into rectangular modules of varying sizes.
[Part 3: Skeuomorphic] Neumorphism or Soft UI style buttons, slight embossed effect, rounded rectangles, warm white color scheme.
[Part 4: High-Fi UI] Wall-mounted tablet UI, left side showing indoor 24°C, right side showing scene modes (Home, Away, Cinema), interface clean and soft.
[Part 5: Wall Shot] Real shot of control panel installed on light grey painted wall, finger touching the central screen, realistic shadows.
Style: Cozy, usable, approachable. Top title "Smart Home Hub".

Analysis:
Los paneles de hogar inteligente generalmente están fijos en paredes, por lo que el Mockup de la Parte 5 debe ser desde una "Perspectiva de Pared" en lugar de sostenerse en la mano.

9. Future Tech: AR Museum Guide (Spatial UI)

Interfaz de Guía de Museo con RA - UI espacial de Realidad Aumentada, mostrando anclajes espaciales 3D, paneles flotantes translúcidos, vista en primera persona e interacción con Vision Pro

Prompt:

Create a UI/UX case study panoramic image focusing on [AR Augmented Reality Museum Guide].
[Part 1: Reality] Museum exhibition hall, displaying dinosaur fossil skeleton, slightly dim interior.
[Part 2: Spatial Coords] 3D spatial anchor diagram, marking floating positions of virtual info points around the skeleton.
[Part 3: UI Material] Frosted acrylic texture floating panel assets, glowing edges, 60% opacity.
[Part 4: High-Fi UI (POV)] First-person view (POV) of AR interface, transparent info cards floating next to dino skeleton showing 3D restoration animation, cursor at fingertip.
[Part 5: Wearing Scene] Side profile shot of a visitor wearing AR glasses (like Apple Vision Pro), performing hand gestures in mid-air.
Style: Futuristic, spatial computing, mixed reality. Top title "AR Museum Guide".

Analysis:
La Computación Espacial es una tendencia importante. Los prompts deben enfatizar sensaciones de "Transparencia" y "Flotación" para transmitir la experiencia de realidad mixta.

10. Education: Kids English Learning App (Playful UI)

Interfaz de app de inglés para niños - UI educativa y divertida, con ilustraciones vectoriales de caricaturas, mapa de niveles gamificado, botones UI regordetes y escena de uso en iPad

Prompt:

Create a UI/UX case study panoramic image focusing on [Kids English Learning App].
[Part 1: Cartoon World] Colorful vector illustration forest, cute animal characters (bunny, bear), high saturation.
[Part 2: Gamification] Level map wireframe, winding path like Monopoly, marking reward nodes.
[Part 3: Visual Assets] Rounded "Chubby UI" button design, with highlights and 3D volume, bright Yellow/Blue/Orange palette.
[Part 4: High-Fi UI] iPad landscape learning screen, AI teacher character on left, huge interactive word card on right, star reward slot at bottom.
[Part 5: Usage] Child's finger tapping on iPad screen, iPad in a thick shockproof case, colorful kids room background.
Style: Playful, fun, high saturation, large border radius. Top title "Kids Fun Learn".

Analysis:
La UI para niños necesita romper las reglas del "minimalismo," enfatizando el "Skeuomorfismo" y el "Feedback." Los botones deben verse "Jugosos" y clicables.


Consejos Pro de Nano Banana para Portafolios Perfectos

  1. Handling Text Rendering (Gibberish):
    Las interfaces de UI suelen contener mucho texto. Aunque Nano Banana es poderoso, generar texto de cuerpo complejo puede resultar en "lenguaje alienígena."

    • Tip: Minimiza las descripciones de texto largo específico en tu prompt. Usa palabras clave como "Placeholder text" or "Data visualization" para rellenar espacio. Enfócate en dejar que el modelo genere Encabezados y Números, que suelen ser más precisos.
  2. Mockup Realism:
    En la Parte 5 (Mockup), los modelos a veces simplemente "pegan" la UI en una pantalla sin integrarla.

    • Tip: Keywords like "Screen reflection", "Fingerprint smudge", and "Depth of field" puede aumentar considerablemente el realismo del mockup, evitando el aspecto de "sticker barato de Photoshop".
  3. Consistency Control:
    Si notas que la paleta de colores de la Parte 3 no coincide con la interfaz de la Parte 4:

    • Tip: Establece un color principal desde el inicio del prompt, por ejemplo, "Color principal: Verde Neón (#39FF14)", y repite esta palabra clave de color en la descripción de cada Parte.

Conclusion

Crear una pieza de portafolio de UI/UX convincente va más allá de una pantalla bonita; se trata de contar la historia de cómo llegaste ahí. Al usar estos prompts panorámicos de 5 etapas, obligas a Nano Banana a pensar como diseñador—considerando el mood, la estructura, el sistema y la aplicación final al mismo tiempo. Elige un escenario de la lista anterior que resuene con tus metas profesionales, personaliza el prompt con tus ideas únicas y empieza a construir un portafolio que destaque.

Happy prompting!