Ejemplos de páginas web por tipo de negocio: qué diseños funcionan y por qué

Los ejemplos de páginas web se entienden mejor ordenados por tarea

Quien busca ejemplos de páginas web suele buscar un aspecto: un color, una tipografía, una imagen llamativa. Una panadería y un despacho de abogados pueden compartir paleta y nada más: una vende el pan de mañana y el otro necesita una primera llamada cuidadosa. Lo que sí se traslada es el patrón: qué hay en la primera pantalla, cuántos pasos llevan a la acción, dónde están los datos de contacto.

Por eso aquí los ejemplos se ordenan por tarea: vender un servicio, vender productos, tomar reservas, mostrar trabajos o informar. Los mejor documentados son los sistemas de diseño públicos, porque publican sus razones. El GOV.UK Design System, mantenido por un equipo del Government Digital Service británico, ofrece estilos, componentes y patrones. El US Web Design System se presenta como el sistema de diseño del Gobierno federal estadounidense.

Un sitio de servicios: la oferta, las pruebas y el bloque de contacto

Para un fontanero, una firma de contabilidad o una agencia de traducción, el diseño que funciona pone la oferta en la primera pantalla: qué haces, para quién, dónde y un botón para pedir presupuesto. Cada servicio tiene su página, porque cada uno se busca con sus propias palabras. Luego vienen pruebas concretas. La guía de Google sobre contenido pensado para las personas pregunta si es evidente quién escribió la página y si muestra experiencia de primera mano. En un sitio de servicios, eso son nombres y proyectos reales y condiciones por escrito.

Para el contacto, el patrón del GOV.UK Design System se puede copiar casi tal cual: teléfono con horario, correo con un plazo de respuesta esperado, los canales en el mismo orden en todas partes, las redes sociales al final y cualquier coste explicado. Una empresa que escribe cuánto tarda en responder hace una promesa que se le puede exigir.

Una tienda en línea: categorías, datos del producto y fotos reales

Una tienda tiene una estructura más profunda: inicio, categorías, fichas de producto, carrito y pago. La documentación de Google sobre la estructura de las tiendas en línea pide que las páginas se alcancen desde la navegación y que las importantes, como el producto más vendido, estén enlazadas desde el inicio. Su guía de datos estructurados de producto dice que los compradores pueden ver precio, disponibilidad, valoraciones y envío en los resultados, a criterio de Google. Lección de diseño: esos datos van en la página, junto al botón de compra.

Las fotos hacen buena parte de la venta. La guía de imágenes de Google dice que las fotos de alta calidad atraen más que las borrosas, recomienda colocarlas cerca del texto relacionado y prefiere un texto alternativo descriptivo, como «cachorro dálmata jugando a buscar la pelota», a un simple «cachorro». Para una tienda, eso son fotos reales del artículo desde varios ángulos, con una descripción al lado.

Reservar una cita: lo que enseña el servicio de examen de conducir de GOV.UK

Un ejemplo público de reserva muy claro es la página de GOV.UK donde los alumnos reservan el examen práctico de conducir. Antes de su único botón Start now («Empezar»), explica quién puede reservar, que las nuevas citas se publican cada lunes a las 6 de la mañana y que el servicio funciona de 6:00 a 23:40. Luego enumera lo necesario: el número del permiso de conducir británico, una tarjeta de crédito o débito y, si quieres, el número de tu instructor.

Según el GOV.UK Design System, la página de inicio de un servicio da la información justa para entender qué hace y si responde a la necesidad del usuario, incluidos el coste y el tiempo aproximado. Su patrón de páginas de preguntas aconseja una pregunta por página, un botón «Continuar» en lugar de «Siguiente» y nada de asteriscos en los campos obligatorios. Una clínica o un salón pueden seguir el mismo orden: servicio, fecha y hora, datos de contacto.

Para transacciones pequeñas y medianas, el Design System coloca una página de revisión de respuestas justo antes de la confirmación, con un enlace para cambiar cada respuesta. La confirmación da un número de referencia si lo hay, qué pasará después y cuándo, y los datos de contacto. Las WCAG 2.2 añaden un criterio afín, Redundant Entry: lo que el usuario ya indicó en el mismo proceso debe rellenarse solo u ofrecerse para elegir.

Portafolios y sitios de información pública: que hable primero el trabajo

Para un fotógrafo, un arquitecto o un estudio de diseño, el contenido es el trabajo, y el diseño debe apartarse. El patrón habitual es una cuadrícula de proyectos, cada uno con su página de imágenes grandes y un breve relato del encargo. La guía de imágenes de GOV.UK encaja bien con un portafolio: usa la fotografía cuando importa mostrar algo tal como es, evita la fotografía de stock genérica y las imágenes con texto dentro. Deja los pies de foto como texto real junto a las imágenes, legibles para personas y buscadores.

Los sitios que informan al público, como un ayuntamiento, una escuela o un centro de ayuda, sirven para encontrar rápido una respuesta. Los principios de diseño del Gobierno británico empiezan por las necesidades del usuario e incluyen «Esto es para todos», con la idea de que el diseño accesible es buen diseño. La guía de navegación del GOV.UK Design System añade que un menú no es un mapa del sitio y no tiene por qué listar cada parte del servicio.

Reglas de accesibilidad que cambian el diseño: contraste, botones y etiquetas

Las Pautas de Accesibilidad para el Contenido Web (WCAG) las elabora un grupo de trabajo de la Iniciativa de Accesibilidad Web del W3C. Las WCAG 2.2, publicadas el 5 de octubre de 2023, añaden nueve criterios a las WCAG 2.1. El criterio de contraste mínimo, de nivel AA, pide al menos 4,5:1 para el texto y 3:1 para el texto grande; el de tamaño del objetivo, al menos 24 por 24 píxeles CSS, salvo excepciones; y el texto debe poder ampliarse al 200 % sin perder contenido. Si cumplirlas es obligación legal para tu negocio depende del país y del sector: consúltalo con un especialista.

En formularios, el componente de campo de texto del GOV.UK Design System pide una etiqueta para cada campo, por lo general visible, y desaconseja sustituirla por un texto de ejemplo dentro del campo: desaparece en cuanto se empieza a escribir y los estilos por defecto del navegador a menudo no cumplen el contraste. También aconseja dar a cada campo el ancho del contenido que espera.

Qué hace que una web parezca moderna en 2026, más allá de la moda del año

La velocidad se nota antes que cualquier tipografía. La guía de Web Vitals de web.dev fija tres objetivos: Largest Contentful Paint en 2,5 segundos como máximo, Interaction to Next Paint de 200 milisegundos o menos y Cumulative Layout Shift de 0,1 o menos, medidos en el percentil 75 de las cargas. Google Search Central dice que sus sistemas de clasificación usan las Core Web Vitals, aunque buenas cifras no garantizan los primeros puestos y la relevancia va primero.

El teléfono es la pantalla principal, no una copia reducida. Según la documentación de Google sobre la indexación centrada en móviles, Google usa la versión móvil del contenido para indexar y clasificar, y pide en ella el mismo contenido, encabezados y texto alternativo que en escritorio. La guía de diseño adaptable de web.dev añade que no se debe bloquear el zoom y recuerda que la teoría clásica de legibilidad sugiere de 70 a 80 caracteres por línea. Desde GOV.UK Frontend 6.0.0, el texto principal de GOV.UK mide 19 píxeles también en pantallas pequeñas. Lo demás lo hacen fotos reales del producto, del equipo y del local.

De una carpeta de ejemplos a un brief que un diseñador pueda presupuestar

Reúne los ejemplos de páginas web como un tablero de patrones, no como una carpeta de capturas para clonar. La guía de GOV.UK sobre derechos de autor explica que en el Reino Unido la protección es automática y cubre las obras artísticas originales, incluida la fotografía, y las obras escritas como el software y el contenido web. El contenido ajeno no es, por tanto, materia prima. Una página de inicio con un solo botón es una solución común; ante un caso dudoso, consulta a un especialista en propiedad intelectual de tu país.

Bajo cada ejemplo escribe tres líneas: el enlace, la tarea de ese sitio y el patrón que quieres tomar. Añade lo que solo tú puedes aportar: la lista de páginas, la única acción de cada una, tus fotos y textos, los países e idiomas en los que vendes, y quién responde a una solicitud y en cuánto tiempo. Esa hoja describe una estructura, no un ambiente, y un diseñador puede presupuestarla.

Una plantilla es razonable cuando su patrón ya encaja con la tarea, como un portafolio sencillo o un sitio de servicios en un solo idioma. Encargar el diseño tiene sentido cuando la tarea necesita su propio flujo, como reservas, un catálogo o varios idiomas, cuando hay que cumplir reglas de contraste, velocidad y formularios, o cuando tu tiempo vale más en el negocio. VITON13 Studio diseña sitios web para empresas de cualquier país y trabaja en remoto. Lleva esa hoja; las guías enlazadas explican el coste y cómo revisar el portafolio de un estudio.