17 sitios de referencias de diseño que usan los diseñadores (2026)

Al buscar referencias de diseño, el mayor desperdicio no es recorrer pantallas bonitas. Es pasar tiempo con pantallas que no responden al problema que tienes delante.

Para flujos reales como login, onboarding y pago, abre archivos de pantallas de apps. Para la arquitectura de información de un dashboard SaaS, usa referencias de productos web. Para la primera pantalla y la conversión, empieza por galerías de landing pages.

Estos 17 sitios de referencias de diseño UI/UX estaban accesibles el 22 de agosto de 2026.

Cómo elegir rápido

Referencias UI/UX para apps: pantallas y flujos reales

Al crear o mejorar una app, es más útil ver cómo otro producto pide al usuario una decisión en la misma situación que buscar un botón más bonito.

1. Mobbin

Una biblioteca líder de pantallas reales de apps móviles y servicios web, consultable por patrón, componente y flujo. Es un buen primer lugar para comparar login, bottom sheets, pago y ajustes.

Úsalo para: ver cómo los competidores ordenan el onboarding o la conversión a suscripción.

2. WWIT (What Was IT)

Un gran punto de partida para pantallas de productos coreanos. Reúne categorías como finanzas, comercio y delivery con patrones de login, registro y bottom sheets.

Úsalo para: estudiar densidad de información, terminología y pantallas de pago en servicios como Toss y Naver Pay.

3. Appshots

Una biblioteca de pantallas reales de productos móviles y web organizada por flujos. Es especialmente útil si necesitas ver el recorrido completo y no una pantalla aislada.

Úsalo para: registro, permisos, configuración inicial, estados vacíos y activación.

4. ScreensDesign

Los antiguos scrnshts.club y UISources ahora llevan a ScreensDesign. Permite estudiar capturas de App Store y pantallas de apps por categoría.

Úsalo para: revisar composición, textos y momentos destacados de las capturas de App Store antes de lanzar.

Referencias para UI web y SaaS: estructura y flujos

Los productos web tienen más densidad de información y cada pantalla suele cumplir más funciones. Empieza por pantallas que ayudan a realizar el trabajo, no solo por páginas de marketing pulidas.

5. Page Flows

Permite estudiar flujos importantes de productos web y móviles mediante pantallas y vídeo. Es útil para onboarding, creación de cuentas, upgrades y ajustes.

Úsalo para: decidir dónde y cuándo debe aparecer una función.

6. Refero

Una biblioteca de referencias para UI web, dashboards SaaS y landing pages que se explora por pantalla y sección.

Úsalo para: diseñar la arquitectura de información de tablas, dashboards y ajustes de un SaaS B2B.

7. Nicelydone

Un archivo de inspiración UI/UX centrado en aplicaciones web, con la densidad y el realismo de productos que funcionan.

Úsalo para: herramientas de administración, colaboración y dashboards donde importan ambiente y estructura.

Referencias de landing pages: primera pantalla y conversión

Una landing page no es solo una colección de visuales atractivos. Explica qué valor se promete, a quién, y cómo se consigue la siguiente acción. Revisa titular, prueba y CTA como una misma secuencia.

8. Landingfolio

También incluye ejemplos de precios, login, registro y componentes. Los filtros por sector, color y dispositivo ayudan a acotar la dirección visual.

Úsalo para: secciones hero, precios y presentación de funciones en SaaS.

9. SaaS Landing Page

Una fuente enfocada en ejemplos de landing pages para SaaS. Compara cómo la explicación del producto, logos de clientes, casos de uso y precios construyen el argumento.

Úsalo para: organizar un mensaje B2B y un CTA de demo en una página.

10. Fountn

Un hub amplio de diseño con IA, Figma y recursos UI. Funciona como punto de partida para descubrir los recursos que necesita un proyecto.

Úsalo para: buscar herramientas de diseño, UI kits y recursos de productividad a la vez.

Tendencias de diseño web: layout, tipografía e interacción

Estos sitios sirven para observar cómo las marcas manejan el ritmo, el espacio en blanco y las transiciones; no para copiar cada patrón en una pantalla de producto centrada en la usabilidad.

11. Recent

Godly.website ahora redirige a Recent. Es una forma rápida de revisar sitios actuales y orientar la atmósfera visual y la interacción.

Úsalo para: dar más impacto visual a un sitio de marca o portfolio.

12. Awwwards

Un archivo de sitios premiados con interacción, tipografía y dirección de arte potentes. Úsalo para ampliar el rango expresivo, no como una guía definitiva de UX de producto.

Úsalo para: campañas de marca, portfolios y sitios editoriales que necesitan mayor acabado.

13. Httpster

Un buen lugar para ver diseño web independiente y experimental. Sus layouts y tipografías más audaces ayudan a salir de tarjetas y grids previsibles.

Úsalo para: replantear la dirección de una marca o escapar de layouts familiares.

Casos de estudio e inspiración

Las piezas conceptuales pueden no reflejar las restricciones reales de producto. Toma la estructura y la intención, y evalúa la dificultad de implementación por separado.

14. Dribbble

Permite explorar rápidamente shots de UI e ideas visuales: color, gráficos, combinaciones de componentes y microinteracciones.

Úsalo para: abrir la dirección visual cuando empiezas desde cero.

15. Behance

Sus casos de estudio a nivel de proyecto facilitan seguir el branding, el sistema de diseño y la composición de pantallas.

Úsalo para: estudiar un rebranding o la dirección de un servicio completo, no solo una pantalla.

16. Growth.Design

Lee los patrones UX como casos de estudio, no simplemente como colecciones de pantallas. Ayuda a pensar por qué los usuarios actúan y qué decisiones de diseño crean problemas.

Úsalo para: fundamentar conversaciones sobre conversión, retención y patrones oscuros.

17. GDWeb

Una colección amplia de sitios web y móviles coreanos. Facilita entender el tono y la estructura que las marcas y empresas locales eligen en la práctica.

Úsalo para: encontrar referencias adecuadas para un cliente o sector coreano.

Usa las referencias como preguntas, no solo como guardados

Las buenas referencias no son una carpeta de pantallas atractivas. Son evidencia para tomar la siguiente decisión más rápido.

• ¿Qué decisión pide esta pantalla al usuario?
• ¿Qué muestra primero y qué oculta de forma intencional hasta después?
• ¿Funcionaría el mismo enfoque con nuestros usuarios, contexto y restricciones?

Empieza con Mobbin y WWIT para UI móvil, Page Flows y Refero para flujos web, y Landingfolio para landing pages. Alternar entre tres sitios que encajen con el problema suele ser más productivo que recorrerlos todos.