Diseño e inspiración

Ningún diseñador parte de una hoja en blanco: todos buscan referencias. Antes de diseñar el sitio de un cliente, dedica 30 minutos a ver cómo resolvieron otros el mismo tipo de página (una landing de restaurante, una página de precios, un dashboard). Inspírate en patrones, no copies diseños completos.

Aquí encontrarás galerías de sitios premiados, colecciones de patrones de interfaz, guías de diseño y herramientas para diseñar aunque no seas diseñador.

Galerías de sitios web

AwwwardsLos sitios más creativos e innovadores, premiados a diario.CSS Design AwardsPremios a sitios por diseño, UX e innovación.Land-bookGalería de landing pages organizada por industria y estilo.Lapa NinjaMiles de landing pages como referencia.One Page LoveSitios de una sola página y plantillas.GodlySitios web con diseño espectacular, con video de cada uno.SiteInspireSitios curados por estilo, tipo y tema.HttpsterInspiración de sitios con diseño contemporáneo.SaaSFrameEjemplos de páginas y flujos de productos SaaS.LandingfolioLanding pages y componentes como referencia.Minimal GallerySitios minimalistas y bien diseñados.

Comunidades de diseñadores

DribbbleDiseños de interfaces, íconos e ilustración de todo el mundo.BehancePortafolios y casos de estudio completos de diseñadores.PinterestCrea tableros de referencias visuales para cada proyecto.Figma CommunityMiles de archivos, kits de UI y plugins gratuitos.

Patrones de interfaz (UI) y apps

MobbinPantallas y flujos reales de apps móviles y web.Collect UIInspiración diaria de componentes organizada por categoría.UI PatternsPatrones de diseño de interfaz explicados.The Component GalleryCómo resuelven cada componente los sistemas de diseño más conocidos.Page FlowsVideos de flujos completos de productos reales.Daily UIUn reto de diseño de interfaz al día durante 100 días.

Sistemas de diseño y guías

Material Design 3El sistema de diseño de Google.Apple HIGGuías de interfaz humana de Apple.Fluent 2El sistema de diseño de Microsoft.Carbon Design SystemSistema de diseño de IBM, muy bien documentado.Atlassian DesignSistema de diseño de Jira, Trello y Confluence.Shopify PolarisSistema de diseño para el ecosistema de Shopify.Design Systems RepoColección de sistemas de diseño públicos.Untitled UIKit de UI para Figma con versión gratuita.

Aprender diseño (para desarrolladores)

Refactoring UIConsejos de diseño prácticos para desarrolladores (libro de pago, artículos gratis).Laws of UXPrincipios de psicología aplicados al diseño de interfaces.Nielsen Norman GroupArtículos de investigación sobre usabilidad y UX.GoodUIPatrones de interfaz que mejoran la conversión.Checklist DesignListas de lo que debe tener cada página y componente.The A11Y ProjectGuías y checklist de accesibilidad web.Figma Resource LibraryArtículos de Figma sobre fundamentos de diseño.

Herramientas de diseño

FigmaEl estándar para diseñar interfaces y prototipos en equipo.PenpotAlternativa de código abierto a Figma.CanvaDiseños rápidos para redes, presentaciones y banners.FramerDiseña y publica sitios interactivos sin código.WebflowConstructor visual de sitios con control total del diseño.BalsamiqWireframes rápidos de baja fidelidad.WhimsicalWireframes, diagramas de flujo y mapas mentales.

Crea un tablero de referencias por proyecto

Antes de diseñar, junta de 10 a 15 capturas de sitios que resuelvan bien lo que necesitas (en Figma, Pinterest o una carpeta). Compártelo con el cliente en la primera fase: alinear expectativas visuales desde el principio evita rondas de revisión interminables.