Sitio de referencia de diseño recomendado: Web·UI·Publicidad·Branding Guide (2026)

Al buscar un sitio de referencia de diseño, lo primero que debe decidir es una cuestión de su trabajo, no de su gusto. Dónde abrir primero depende de si el orden de la información en la página de destino está bloqueado, el flujo de pago de la aplicación es difícil o si desea ver cómo se mantiene su marca en los puntos de contacto reales.

Este artículo es un centro de sitios de referencia de diseño para web, UI/UX, publicidad, branding, packaging y diseño editorial. En lugar de buscar todas las respuestas en un solo lugar, las hemos organizado para que pueda ir directamente al archivo correcto cuando las necesite.

pregunta para elegir primero

• Si necesitas estructura y orden persuasivo en tu pantalla: Referencia de Diseño Web
• Si necesita un flujo de usuarios real siguiendo la funcionalidad: Referencia UI/UX
• Si tiene curiosidad sobre el método de expresión del material o campaña actualmente en ejecución: Referencia de publicidad/marketing
• Si desea ver más allá del logotipo, el tono, los recursos y la aplicación: marca, paquete y referencia editorial.

La razón por la que esta distinción es importante es simple. Una página bonita crea el ambiente, pero la pantalla de un producto o una campaña, en última instancia, funcionan dentro del contexto.

Referencia de diseño web: vea cómo las páginas persuaden

En lugar de copiar un estilo visual, las referencias de diseño web son buenas para ver el orden en que se presenta la información en una página. Al crear una página de destino, un portafolio o una página de presentación de producto, es más eficiente observar por separado las promesas en la primera pantalla, el ritmo de la descripción de la función y la ubicación que muestra confianza.

• Land-book: una galería seleccionada donde puedes explorar ejemplos de sitios web dividiéndolos en categorías y secciones.
• Awwwards: perfecto para comprobar los límites superiores de interacción y dirección de arte. Al aplicarlo a un proyecto real, la accesibilidad, el rendimiento y el alcance de la producción deben juzgarse por separado.
• One ​​​​Page Love: esto resulta útil cuando se visualiza el flujo de una página de destino que distribuye un mensaje en una página larga.

Qué leer a continuación

Guía del sitio de referencia de diseño web/UI
Este es un artículo de seguimiento que organiza los métodos de navegación por pantalla, componente y flujo. Lo vincularemos aquí después de la publicación.

Referencia de UI/UX: vea el flujo, no la pantalla

La parte frontal y posterior de la interfaz de usuario de una aplicación dice más que una sola captura de pantalla. Las escenas en las que los usuarios pueden dudar, como la incorporación, la búsqueda, el carrito de compras, el pago y las solicitudes de permiso, requieren una comparación lado a lado del flujo real.

• Mobbin: puede buscar referencias de UI/UX para aplicaciones móviles, aplicaciones web y sitios web por tipo de producto y flujo de pantalla.
• Refero: una excelente herramienta de referencia de interfaz de usuario para abrir al buscar y comparar características o patrones específicos.
• Behance: puedes ver no solo la pantalla de finalización, sino también en qué problemas y contexto consiste el proyecto.

Al guardar una referencia, es una buena idea anotar “en qué circunstancias se puede utilizar” junto con la imagen. Por ejemplo, si lo guarda como "un método para mostrar la comparación de precios primero en la conversión de suscripción" en lugar de "una buena pantalla de pago", será más fácil encontrarlo nuevamente en el siguiente proyecto.

Referencia de publicidad/marketing: dividir creatividades y campañas en curso

Hay dos tipos de referencias publicitarias. Estos son materiales en ejecución que se muestran en la plataforma ahora y archivos de campaña que permanecen con el tiempo. El primero tiene diferentes usos a la hora de leer mensajes, formatos y situaciones competitivas, mientras que el segundo tiene diferentes usos a la hora de interpretar ideas y métodos de producción.

• Meta Ad Library: le permite buscar anuncios que se publican en metaproductos.
• TikTok Creative Center: pueden explorar ejemplos publicitarios, tendencias y recursos creativos juntos.
• Ads of the World: un excelente archivo de anuncios para explorar campañas y colecciones por tema.

Artículos relacionados ya publicados

• Sitios de referencia creativa: cómo comprobar los anuncios de sus competidores
• Referencia de publicidad en vídeo: archivo de TVC y canal de YouTube

Al mirar un anuncio, en lugar de simplemente "¿es bonito?", tome nota de lo que promete en la primera escena y el orden en que aparecen el producto, el cliente y la CTA. Ese registro se convierte en el resumen del siguiente material.

Marca/Paquete/Referencia de edición: vea escenas de aplicación en lugar de resultados

Una vez que una referencia de marca termina con un solo logotipo, es difícil traducirlo en un trabajo real. Es mejor comprobar si el color, el tipo, la imagen, la frase, el paquete, el espacio y la pantalla digital apuntan en la misma dirección.

• Nuevo: los proyectos de logotipo, identidad y marca se cubren centrándose en ejemplos y opiniones.
• Embalaje del mundo: puede encontrar ejemplos de envases basados ​​en la línea de productos, el país y la información del diseñador.
• Behance: lea toda la solicitud del proyecto de marca junto con las descripciones del proceso.

Artículos relacionados ya publicados

• Poster/Editorial Design Studio: Un listado que lee los resultados del trabajo

Qué leer a continuación

Guía del sitio de referencia sobre diseño de marcas/paquetes
Este es un artículo de seguimiento que organiza los estándares para observar productos, paquetes, ediciones y puntos de contacto digitales como un solo sistema, no solo logotipos. Lo vincularemos aquí después de la publicación.

Cómo importar referencias a mi trabajo

Las referencias no son hojas de respuestas. Una vez que haya guardado un caso, escriba las tres cosas siguientes:

1. Lo que te llamó la atención: elementos observables como color, tipografía, imágenes y movimiento.
2. Por qué era la opción adecuada: la naturaleza de la marca, el contexto del usuario, las limitaciones del medio.
3. ¿Qué es necesario cambiar en mi proyecto?: ¿presuposiciones que no se pueden incorporar tal como están y condiciones que se deben establecer de nuevo?

Después de estos tres pasos, su referencia se convierte en material de juicio en lugar de chatarra. Al abrir primero el archivo del campo que necesita y leer no solo una escena, sino la estructura que hizo posible esa escena, podrá decidir la siguiente pantalla y la siguiente campaña más rápidamente.