Sitios de Inspiración para Diseño Web: 14 Galerías para Marcar

Ningún sitio cubre todo lo que necesitas antes de construir un website. Los 14 que aparecen abajo se dividen en cuatro funciones: encontrar ideas, estudiar la estructura de páginas, tomar prestados patrones de interfaz probados, y ver cómo se ve la ejecución pulida. Dribbble y Behance son buenos para dirección visual. Awwwards, CSS Design Awards y The FWA muestran lo que un jurado considera ambicioso. Land-book y Lapa Ninja están hechos para la estructura de landing pages, y Mobbin es para flujos de productos. Aquí encontrarás el mejor uso de cada sitio, una nota breve sobre cómo usarlo bien, una limitación honesta, después una tabla comparativa y un método de cuatro pasos para convertir un montón de marcadores en un brief.

Por qué importan las referencias antes de construir

Un brief en blanco produce trabajo vago. "Moderno, limpio, confiable" describe todo website que se ha presentado alguna vez, y un diseñador que lo lea llenará los vacíos con sus propios hábitos, no con tu gusto.

Las referencias arreglan eso. Diez capturas de pantalla dicen más sobre espaciado, tono y densidad que una página de adjetivos. También exponen desacuerdos desde temprano. Si el fundador sigue guardando sitios oscuros con mucho movimiento y el responsable de marketing sigue guardando los pálidos y editoriales, quieres saberlo antes de que alguien abra Figma.

Aquí viene el truco, sin embargo. Diferentes sitios responden diferentes preguntas. Una galería que es brillante para secciones hero no dice nada sobre checkout. Un feed lleno de tomas hermosas de UI te dice poco sobre si el sitio completo se mantiene unido. Entonces la pregunta útil no es "¿cuál sitio es mejor?" Es "¿qué intento encontrar hoy?"

Un límite para este artículo: se trata de encontrar inspiración. Si buscas lugares para publicar tu propio trabajo, este resumen de alternativas a Dribbble es la mejor lectura, y Dribbble vs Behance te ayuda a elegir una plataforma de portafolio.

Galerías vs sitios de premios: quién decide qué entra

Las galerías curadas son cuestión de gusto. Alguien (un editor, un pequeño equipo, a veces una persona) elige sitios que le gustan y los publica. Godly, SiteInspire, Land-book, Minimal Gallery y httpster funcionan así. Estás tomando prestada una perspectiva, que es el atractivo y la limitación.

Los sitios de premios añaden un proceso. Los sitios se envían, un jurado los revisa, y los ganadores reciben etiquetas. En la página de sitios ganadores de Awwwards, puedes ver el vocabulario: Site of the Day, Developer Award, y honores por categoría como Product, Portfolio y Business & Services. El resumen de 2026 de AIDesigner describe la puntuación de Awwwards en diseño, usabilidad, creatividad y contenido. CSS Design Awards usa categorías puntuadas también (UI, UX, innovación).

Cómo leer una puntuación de premio

Trata una puntuación como la opinión de un jurado sobre criterios específicos, no como un veredicto sobre el sitio completo. Mira qué categoría puntuó alto. Un sitio con una puntuación de creatividad estelar y una puntuación de usabilidad modesta te está diciendo algo útil: es una obra maestra, no un modelo para una página de producto.

También revisa la etiqueta. Un Developer Award señala la calidad de la construcción. Site of the Day señala la selección del día. Responden preguntas diferentes.

Por qué un ganador no es una plantilla

Un sitio premiado se construye para ganar premios. Ese es un objetivo diferente al de vender planes, reservar citas u obtener suscripciones a boletines.

La animación impulsada por desplazamiento pesada puede ser hermosa y aun así cargar lentamente en un teléfono de rango medio. La navegación inusual puede impresionar a un jurado y confundir a un visitante por primera vez. El texto con bajo contraste se ve elegante en una captura de pantalla y falla en una verificación de accesibilidad. Y ninguna de las puntuaciones te dice nada sobre conversión, porque un jurado no puede ver las analíticas de un sitio.

Así que roba la idea, no la construcción. Toma el ritmo, la escala tipográfica, la forma en que una sección se revela. Luego prueba tu propia versión en velocidad, uso del teclado y contraste antes de comprometerte con ella.

Los 14 sitios, en orden

El orden a continuación es editorial. No es una medida de calidad o popularidad, y no he intentado clasificar sitios por tráfico o audiencia.

1. Dribbble (dribbble.com)

Mejor para: detalles de UI, movimiento y dirección visual.

Visita dribbble.com

Dribbble es una gran comunidad de diseñadores que publican trabajos y estudios de caso breves. Explora por etiqueta (una etiqueta como "landing page" o "dashboard" supera el feed principal siempre) y guarda los trabajos en colecciones conforme avanzas. Los trabajos de movimiento son especialmente útiles para microinteracciones que quieres describir a un desarrollador.

Límite: un trabajo es un fragmento. Muestra cómo se ve algo, no si funciona en todo un sitio o en una pantalla pequeña.

2. Behance (behance.net)

Mejor para: entender el razonamiento detrás de un diseño.

Visita behance.net

Behance es la red de portafolio de Adobe, y su fortaleza es el estudio de caso de proyecto completo. Lee las diapositivas del proceso, no solo la imagen principal: encontrarás el briefing, las restricciones y las alternativas que fueron rechazadas. Las galerías curadas son un atajo decente si no sabes qué buscar.

Límite: los proyectos varían mucho en profundidad y disciplina. El diseño web está junto a marca, fotografía e ilustración, así que espera filtrar.

3. Awwwards (awwwards.com)

Mejor para: sitios ambiciosos e interactivos.

Visita awwwards.com

Awwwards ejecuta premios jurados, incluyendo Site of the Day, Menciones Honrosas y premios Developer. Usa las etiquetas de premios como filtro: los ganadores de Developer Award vale la pena abrir en dev tools para ver cómo se construyó una transición. AIDesigner también permite filtrar por tecnología y colecciones por industria.

Límite: los sitios ganadores a menudo son vitrinas. Brillante para ideas, arriesgado como modelo directo para un sitio empresarial con mucho contenido.

4. CSS Design Awards (cssdesignawards.com)

Mejor para: sitios de agencias y estudios pulidos.

Visita cssdesignawards.com

Los Websites of the Day aquí tienen puntuaciones en categorías como UI, UX e innovación. Mira las puntuaciones de categoría individual en lugar de la principal, y alinéalas con tu prioridad. Si tu sitio es una página de generación de leads, la puntuación de UX te dice más que la de innovación.

Límite: los ganadores tienden hacia trabajo de agencias y estudios, así que sitios empresariales más pequeños y ordinarios son menos comunes.

5. La FWA (thefwa.com)

Ideal para: trabajo experimental, enfocado en movimiento y campañas.

Visita thefwa.com

FWA es uno de los premios web más antiguos, y se inclina hacia lo aventurero. Ve aquí cuando quieras ver qué es posible con movimiento, 3D o narrativa, y cuando el brief es una campaña o un lanzamiento. Elige una interacción que te guste y anota qué hace por la historia.

Limitación: gran parte del trabajo tiene forma de campaña. Puede ser difícil trasladarlo a un sitio con docenas de páginas y mucho texto.

6. Godly (godly.website)

Ideal para: ideas de scroll y movimiento.

Visita godly.website

Godly es una galería seleccionada de sitios impactantes mostrados como previsualizaciones en video, que es exactamente el punto. Ves el comportamiento del scroll sin esperar a que la página cargue. Úsalo para recopilar referencias de movimiento rápidamente, luego abre los sitios en vivo que te gusten para verificar qué hacen realmente en un teléfono.

Limitación: una previsualización en video muestra movimiento, no estructura ni contenido. Aún necesitarás hacer clic para juzgar la página.

7. SiteInspire (siteinspire.com)

Ideal para: encontrar referencias para una industria específica.

Visita siteinspire.com

SiteInspire es un escaparate que puedes filtrar por estilo, tipo y tema. Eso lo convierte en el punto de partida sensato cuando un cliente dice "somos un despacho de abogados" o "vendemos muebles" y necesitas ejemplos relevantes en diez minutos. Combina un filtro de tema con un filtro de estilo para acotar correctamente.

Limitación: las categorías son propias del sitio. Algunos sitios encajarán de forma incómoda, y necesitarás tu propio criterio para juzgar la calidad.

8. Land-book (land-book.com)

Ideal para: secciones hero y estructura de página.

Visita land-book.com

Land-book es una galería de landing pages. Abre varias páginas de la misma categoría una al lado de la otra y compara cómo cada una ordena sus secciones: qué viene después del hero, dónde aparece la prueba social, cómo se repite el llamado a la acción. Ese ordenamiento suele ser más reutilizable que cualquier estilo visual.

Limitación: estás viendo páginas terminadas sin los resultados detrás de ellas. Una estructura ordenada no es prueba de que convierte.

9. Lapa Ninja (lapa.ninja)

Ideal para: landing pages de SaaS y startups.

Visita lapa.ninja

Lapa Ninja es una gran biblioteca de páginas de destino organizada por categoría. La lista 2026 de Páginas de Inicio SaaS también señala sus galerías dedicadas a fuentes, secciones e imágenes OG, que son útiles cuando solo necesitas una pieza de una página.

Limitación: el tamaño corta de ambos lados. Una biblioteca grande recompensa una pregunta clara y castiga el desplazamiento sin rumbo.

10. One Page Love (onepagelove.com)

Ideal para: lanzamientos de página única, portafolios y eventos.

Visita onepagelove.com

One Page Love recopila sitios web de una página y plantillas. Es adecuado para un lanzamiento de producto, una página de conferencia o un portafolio personal, donde toda la historia cabe en un scroll. Estudia cómo cada página maneja el orden de las secciones, porque en una página ese orden es la navegación.

Limitación: es un formato de página única por diseño, así que no ayudará mucho con la arquitectura de un sitio más grande.

11. Minimal Gallery (minimal.gallery)

Lo mejor para: diseños editoriales y de estudio limpios.

Visita minimal.gallery

Minimal Gallery es contenida y centrada en la tipografía. Úsala para calibrar cuánto puedes eliminar: espaciado, tamaño de tipo y muy pocos colores haciendo la mayor parte del trabajo. Es una buena referencia cuando un cliente pide constantemente "más" y quieres mostrar cómo se ve lo menos.

Límite: la estética es estrecha. Una marca que necesita densidad, cuadrículas de productos o mucha información encontrará menos coincidencias.

12. Mobbin (mobbin.com)

Lo mejor para: patrones de UI de producto como onboarding y checkout.

Visita mobbin.com

Mobbin es una biblioteca de capturas de pantalla de flujos reales de app y web UI. Su valor está en las secuencias: ve cinco flujos de onboarding seguidos y los patrones comunes resaltan, junto con la elección inusual que vale la pena cuestionar. La guía de Colorlib la destaca para investigación UX en productos reales.

Límite: el enfoque es la interfaz de producto. Si necesitas páginas de marketing expresivas y dirigidas por marca, busca en otro lugar en esta lista.

13. httpster (httpster.net)

Lo mejor para: riesgos de tipografía y diseño.

Visita httpster.net

httpster es un escaparate de larga trayectoria de sitios distintivos. Es un buen lugar para encontrar un emparejamiento de tipos inusual o un diseño que rompe la cuadrícula a propósito. Guarda una cosa por sitio (un estilo de encabezado, una idea de menú) en lugar de guardar el sitio completo.

Límite: un sitio distintivo es una apuesta más grande para adoptar. Algunos de los diseños más atrevidos necesitarían ajustes para legibilidad o accesibilidad.

14. Pinterest (pinterest.com)

Lo mejor para: recopilar color, tipo y dirección fotográfica en un tablero.

Visita pinterest.com

Pinterest te permite mezclar capturas de pantalla de sitios web con fotografía, empaque, interiores y pósters en un mood board. Eso es útil cuando la dirección visual debe venir de fuera de la web. Comparte un solo tablero con el equipo para que todos reaccionen al mismo material.

Límite: no es específico de web, y los pines a menudo llevan a un repost, no al sitio original. Localiza la fuente antes de confiar en una referencia.

Cómo convertir inspiración en un brief

Una carpeta de 60 capturas de pantalla no es un brief. Es un mood. Aquí está el método que usaría para convertirlo.

1. Recopila 15 a 20 referencias. No cinco, que es demasiado estrecho para mostrar un patrón. No 80, que es una acumulación que nadie leerá. Mezcla fuentes: algunas de una galería, algunas de un sitio de premios, un par de flujos de producto.
2. Etiqueta lo que te gusta de cada una. Sé específico. "El tamaño del encabezado contra el cuerpo de texto." "La forma en que se presenta la tabla de precios." "La fotografía tranquila." Si no puedes decir qué te gusta, elimina la referencia.
3. Separa gusto de función. Gusto es color, tipo y mood. Función es navegación, orden de secciones, formularios y checkout. Ordena tus etiquetas en dos columnas. El gusto puede ser atrevido. La función debe ser aburrida y probada.
4. Escríbelo en el brief para el diseñador. Incluye las referencias, las notas etiquetadas y una lista corta de lo que no quieres (eso a menudo es más útil que lo que sí quieres). Menciona el objetivo comercial junto al visual, para que un diseñador sepa cuándo seguir una referencia y cuándo ignorarla.

Si quieres ver cómo se presenta el trabajo terminado de diseño web para clientes, hay ejemplos en la página de portafolio de diseño web, que puede ayudarte a juzgar cuánto detalle necesita tu propio brief.

Tabla comparativa

FAQ

¿Por dónde empiezo si tengo poco tiempo?

La guía de Colorlib sugiere una división simple: Mobbin (y Refero) para investigación UX en productos reales, Awwwards o Godly para inspiración visual, y Lapa Ninja como referencia para landing pages, con Dribbble y Behance para dirección creativa más amplia. Es una ruta razonable de tres paradas para la mayoría de proyectos.

¿Hay algún lugar donde buscar partes individuales de páginas como barras de navegación o footers?

Sí. La lista de Toools Design tiene una sección sobre partes destacadas de un sitio, con galerías para hero sections, barras de navegación, footers, imágenes OG, páginas 404, páginas de precios y social proof. Son específicas, que es el punto.

¿Hay galerías más nuevas además de estas 14?

Hay muchas, y cada año se lanzan nuevas. Trata cualquier galería nueva con la misma prueba: ¿quién selecciona los sitios y por qué los selecciona? Una respuesta clara a ambas preguntas es una mejor señal que el tamaño de la colección.

¿Está bien copiar un layout que me gusta?

Toma el principio, no la página. El orden de secciones, la lógica de espaciado y el contraste tipográfico son ideas que puedes reelaborar. Copiar la obra, el código o la identidad visual distintiva de un sitio es otro asunto, y además resulta en un sitio web olvidable.

Elige el sitio según la pregunta que te hagas: Mobbin para flujos, Land-book para orden de página, Dribbble para detalles. La advertencia más importante es que ninguna de estas galerías ni las puntuaciones de premios te dice cómo funciona un sitio, qué tan accesible es o si convierte, así que verifica tu propia versión contra eso antes de lanzarlo.

Las galerías te muestran pantallas individuales. Para ver sitios terminados uno al lado del otro con lo que cada uno cuesta en tiempo de carga, lee 64 sitios web hermosos, verificados en vivo y probados de velocidad.