25 Ejemplos de Diseños Web (Con Esquemas Anotados)
25 ejemplos de diseños web de la biblioteca de plantillas de We.Inc, cada uno con un esquema de cajas de la estructura de página, una vista previa del diseño, por qué funciona el diseño y a qué negocios se adapta. Incluye una guía para elegir un diseño.
El diseño de una página web es el orden y la disposición de las secciones en una página: qué aparece primero, qué va en paralelo y dónde está el botón principal. A continuación se muestran 25 diseños, cada uno representado como un esquema de cajas simple y una vista previa del diseño completo. Los 25 son diseños de plantillas de We.Inc, no sitios de clientes, agrupados según el tipo de negocio al que se adaptan. La caja azul en cada esquema es la llamada a la acción principal.
Cómo leer los esquemas
Cada fila de cajas es una banda de la página, de arriba a abajo según se desplaza. Las cajas en paralelo están una al lado de la otra en pantalla de escritorio; en móvil se apilan en el mismo orden, por lo que la caja de la izquierda aparece primero. Esta página trata sobre la disposición completa de la página. Para la parte superior específicamente, consulta ejemplos de sección hero; para menús, consulta ejemplos de navegación.
Cinco patrones de diseño en una tabla
| Patrón | Orden de secciones | Mejor cuando | Ejemplos abajo |
|---|---|---|---|
| Embudo de servicios | Hero, servicios, prueba, formulario | Los visitantes necesitan presupuesto o reserva | 1-8 |
| Visita | Hero, menú, historia, horario y mapa | La gente viene en persona | 9-14 |
| Reservar o unirse | Hero, precios u horario, reserva | Citas, clases, membresías | 15-19 |
| Cuadrícula | Hero, cuadrícula de elementos, detalle, consulta | Anuncios, productos, portfolio | 20-24 |
| Lector | Hero, trabajo, acerca de, registro | El objetivo es una audiencia recurrente | 25 |
Diseños para negocios de servicios
1. Oficio de emergencia: banda urgente bajo el hero
Plantilla: Ironpeak Roofing (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: Una banda de color a todo ancho justo bajo el hero capta a personas con un problema urgente (daños por tormenta) antes de que sigan desplazándose. Úsalo para: Techadores, restauración, cerrajeros, remolques.
2. Multi-oficio con bloque de zona de servicio
Plantilla: Summit Trades (un diseño de plantilla de We.Inc, no un sitio de cliente).
Why it works: Three equal service cards, then a named list of areas served, answers "do you do this, here?" in two scrolls. Use it for: Any business with a defined travel area.
3. Lista de servicios con especialidad destacada
Plantilla: Voltline Electric (un diseño de plantilla de We.Inc, no un sitio de cliente).
Why it works: One high-value service gets its own section, so the page sells the job you most want without hiding the rest. Use it for: Trades with one profitable specialty.
4. Lista de verificación y presupuesto inmediato
Plantilla: Brightwell Cleaning (un diseño de plantilla de We.Inc, no un sitio de cliente).
Why it works: A visible checklist of what every visit includes answers the main worry (what exactly do I get?) before the price form. Use it for: Cleaning, lawn care, pool service.
5. Historia de artesano local
Plantilla: Halden Woodworks (un diseño de plantilla de We.Inc, no un sitio de cliente).
Why it works: Naming the town in the headline and showing "how a job goes" builds trust for big, one-off jobs. Use it for: Carpenters, builders, remodelers.
6. Firma profesional: áreas de práctica y personas
Template: Sterling & Vance LLP (a We.Inc template design, not a customer site).
Por qué funciona: Las personas eligen una firma por área jurídica y luego por la persona; el diseño sigue ese orden. Úsalo para: Derecho, contabilidad, asesoría financiera.
7. Consultoría: prueba primero
Plantilla: Linden Consult (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: La prueba aparece justo tras el hero, luego la página presenta los servicios como problemas que el comprador reconoce. Úsalo para: Consultores, coaches, servicios B2B.
8. Página corta para contable
Plantilla: Ledgerline CPA (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: Cuatro secciones. Para un comprador que ya sabe que necesita un contable, menos es más rápido. Úsalo para: Cualquier servicio donde el comprador llega decidido.
Diseños para restauración y hostelería
9. Cafetería: menú, historia, visita
Template: Ember & Roast (a We.Inc template design, not a customer site).
Por qué funciona: Menú primero, visita al final: la gente comprueba qué sirves, luego dónde y cuándo. Úsalo para: Cafeterías, panaderías, bares.
10. Panadería con pedido anticipado
Template: Flour & Fern (a We.Inc template design, not a customer site).
Por qué funciona: Una sección dedicada a pedidos convierte la navegación en pedidos anticipados. Úsalo para: Panaderías, carnicerías, preparación de comidas.
11. Restaurante con scroll largo
Plantilla: Azafran (un diseño de plantilla de We.Inc, no un sitio de cliente).
Why it works: For a destination restaurant, atmosphere sells the booking, so the page tells a story before asking. Use it for: Fine dining, tasting menus, venues.
12. Restaurante en tres secciones
Plantilla: Crust (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: Hero, menú, visita. Las secciones mínimas que un restaurante puede tener y seguir respondiendo a todo. Úsalo para: Restaurantes informales, comida para llevar.
13. Horario primero
Plantilla: ROAM (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: Cuando la ubicación cambia a diario, "¿dónde estáis hoy?" es la pregunta principal, así que va justo bajo el hero. Úsalo para: Food trucks, mercados, pop-ups.
14. Servicio de eventos con formulario de consulta
Template: Harvest & Vine (a We.Inc template design, not a customer site).
Por qué funciona: Los tipos de eventos al principio permiten al visitante autoseleccionarse; un menú de muestra hace que el precio parezca concreto. Úsalo para: Caterings, organizadores, locales.
Diseños para reservas y membresías
15. Salón con reserva como eje
Template: Lumé Salon & Beauty Spa (a We.Inc template design, not a customer site).
Por qué funciona: Una lista de precios y un bloque de reservas es todo lo que necesita la mayoría de visitantes de un salón. Úsalo para: Salones, barberías, estudios de uñas y pestañas.
16. Horario de clases y precios
Plantilla: Tidewater Yoga (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: Horario, luego precios y luego una oferta para la primera visita sigue la decisión que toma un nuevo alumno. Úsalo para: Yoga, pilates, danza, artes marciales.
17. Gimnasio con programas y niveles
Plantilla: Iron (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: Los niveles de membresía en paralelo facilitan la comparación; una primera sesión gratuita reduce la barrera de entrada. Úsalo para: Gimnasios, clubes, membresías.
18. Clínica: atención, equipo, ubicación
Plantilla: Verdant Family Health (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: Los pacientes quieren saber qué tratas, a quién verán y cómo llegar. Úsalo para: Clínicas, dentistas, fisioterapeutas.
19. Veterinaria con aviso urgente
Plantilla: Meadowpaw Veterinary (un diseño de plantilla de We.Inc, no un sitio de cliente).
Why it works: The visit section tells urgent cases to phone, so the booking form is not used for emergencies. Use it for: Vets, urgent care, any service with emergencies.
Diseños en cuadrícula: anuncios, tiendas y portfolios
20. Cuadrícula de anuncios
Plantilla: Keystone Realty (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: Los compradores obtienen la cuadrícula; los vendedores obtienen su propia sección y una llamada a la acción separada. Úsalo para: Inmobiliarias, alquileres, concesionarios.
21. Página de producto único
Plantilla: Verre Halo (un diseño de plantilla de We.Inc, no un sitio de cliente).
Why it works: The price sits in the menu bar and at the end; everything between answers "is it worth it?" Use it for: One-product brands, launches, crowdfunded products.
22. Tienda de producción limitada
Template: Cellar & Rowan (a We.Inc template design, not a customer site).
Por qué funciona: Productos primero, luego la historia que justifica el precio y después un registro para el próximo lote. Úsalo para: Artesanos, velas, cerámica, alimentación.
23. Lanzamiento de producto
Plantilla: Loop (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: El próximo lanzamiento encabeza; la cuadrícula de la tienda sirve a quienes quieren algo ahora. Úsalo para: Ediciones limitadas, ropa, coleccionables.
24. Portfolio en cuadrícula al principio
Plantilla: Drafthouse (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: Seis proyectos justo tras el titular; el trabajo hace la venta. Úsalo para: Arquitectos, diseñadores, fotógrafos.
Diseños personales y de creadores
25. Escritor con boletín
Plantilla: Plume (un diseño de plantilla de We.Inc, no un sitio de cliente).
Por qué funciona: Trabajo, luego un registro de boletín: el objetivo son lectores que vuelvan, no una sola consulta. Úsalo para: Escritores, creadores, ponentes.
Cómo elegir un diseño
- Name the one action you want most visitors to take (call, book, buy, enquire, subscribe). That becomes the blue box.
- List the three questions a visitor asks before taking it (for example: do you cover my area, what does it cost, can I trust you). Each gets a section, in that order.
- Pick the pattern from the table above that matches.
- Cut sections you cannot fill with real content. An empty "Results" section or placeholder reviews do more harm than a shorter page.
- Check on a phone. Side-by-side boxes stack; make sure the main button still appears early (see mobile-first design).
Cuando una sola página se hace larga, divídela en varias páginas. Estructura web muestra cómo las secciones anteriores se convierten en un mapa del sitio.
Errores comunes de diseño
- Poner el formulario de contacto solo al final de una página larga, sin botón en la cabecera.
- Tres columnas de texto para una audiencia mobile-first; usa tarjetas que se apilen limpiamente.
- Mantener números de plantilla, reseñas o insignias que no puedes respaldar.
- Una galería antes de que el visitante sepa lo que haces.
Usa uno de estos diseños
Every layout here is a template in the We.Inc template library. On the free plan you can use up to 3 template sites on a we.inc address (no AI credits, no custom domain). Starter at $20/month adds AI building, so you can ask for changes such as "move reviews above services", and custom domains; see pricing. Mock up your version first with the website mockup generator, then check the result with the website grader.
Preguntas frecuentes
¿Qué es el diseño de una página web?
El orden y la disposición de las secciones en una página: qué aparece primero, qué va en paralelo y dónde está la llamada a la acción principal.
¿Cuál es el mejor diseño para el sitio web de una pequeña empresa?
Para la mayoría de los negocios de servicios: un hero con un botón claro, servicios, prueba social como reseñas y un formulario de contacto o presupuesto, con el botón repetido en la cabecera.
¿Cuántas secciones debe tener una página de inicio?
Las que haga falta para responder a las preguntas principales del visitante, y no más. Los ejemplos aquí van de cuatro a ocho secciones.
¿Son sitios web reales de empresas?
No. Los 25 son diseños de plantillas de We.Inc, usados para mostrar patrones de diseño.
¿Cómo cambian los diseños en móvil?
Las cajas en paralelo se apilan verticalmente en el mismo orden, así que pon el elemento más importante a la izquierda y mantén el botón principal cerca de la parte superior.
¿Cuál es la diferencia entre diseño y estructura?
El diseño es la disposición de una página. La estructura es cómo se conectan las páginas en todo el sitio: la jerarquía, las URL y los enlaces internos.
Empieza gratis · Sin tarjeta de crédito
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App