Respuesta breve
No hay una única mejor página de inicio, pero los ejemplos públicos muestran dos patrones que funcionan. GOV.UK pone primero un buscador y las tareas más frecuentes; la plantilla del US Web Design System abre con un héroe, un lema, una lista corta de pruebas y una sola llamada a la acción. Elige el patrón según lo que hace primero tu visitante y cuida la velocidad en el móvil.
Qué debe lograr una página de inicio en su primera pantalla
Una página de inicio se lee en segundos, así que la primera pantalla decide si el visitante se queda. Debe decir para qué sirve el sitio, para quién y qué hacer a continuación. El US Web Design System describe su héroe justo así: marca el tono del sitio y cuenta de qué trata la marca, con un título, un párrafo breve de explicación y un botón de llamada a la acción.
La prueba es sencilla. Enseña la primera pantalla a una persona durante cinco segundos y pregúntale a qué se dedica la empresa y en qué pulsaría. Si la respuesta es vaga, la decoración de abajo no la arreglará. Los buenos ejemplos de página de inicio difieren en estilo, pero todos responden a esas dos preguntas sin desplazarse.
GOV.UK: una página construida en torno al buscador y las tareas comunes
La página de inicio de GOV.UK es un ejemplo útil porque su público es enorme y variado. Abre con un título sencillo, el mejor lugar para encontrar servicios e información del Gobierno, y un cuadro de búsqueda justo debajo. Sigue una lista titulada Popular en GOV.UK con enlaces como iniciar sesión en cuentas o consultar la previsión de la pensión estatal, de modo que las tareas más frecuentes quedan a un clic.
Más abajo, todo se agrupa bajo Servicios e información: prestaciones, negocios y autónomos, conducción y transporte, y una decena más. Cada grupo lleva una línea que dice qué incluye, por ejemplo impuesto de vehículos, ITV y permisos de conducir en conducción. La lección para una empresa es la línea bajo cada enlace. Una etiqueta desnuda como Servicios obliga a adivinar; una con una aclaración permite elegir bien.
El menú sigue la misma lógica. Su panel de navegación tiene dos grupos, Servicios e información y Actividad del Gobierno, y el segundo vuelve a dar a cada entrada una línea, como Investigación y estadísticas, descrita como informes, análisis y estadísticas oficiales. Dos grupos claros con una frase de ayuda superan a una lista larga y sin ordenar de etiquetas que solo entienden quienes las escribieron.
La plantilla de página de aterrizaje del US Web Design System, bloque a bloque
El US Web Design System publica una plantilla de página de aterrizaje, y es una imagen clara del patrón guiado por el mensaje. En orden: una cabecera con zona de logotipo, un héroe, una sección de lema, una lista gráfica en una cuadrícula de cuatro bloques con medios, una sección de introducción con un botón grande de llamada a la acción y un pie con navegación, redes sociales y el teléfono y el correo del organismo. El último elemento, el identificador, muestra el dominio, el organismo matriz y enlaces obligatorios como Acerca de, Soporte de accesibilidad y Política de privacidad.
Su propia guía es tan útil como el diseño. Dice que primero hay que investigar para decidir qué decir y qué necesitan los usuarios, mantener la sencillez sin añadir formularios ni navegación lateral, y quitar cualquier componente innecesario. Añade que la plantilla puede servir de modelo para una página de inicio y sugiere considerar quitar la cabecera si la página debe llevar a una sola llamada a la acción.
Los bloques que se repiten: valor, pruebas, rutas y contacto
Pon los dos ejemplos lado a lado y aparecen los mismos bloques con nombres distintos. La frase de valor es el título de GOV.UK o el héroe y el lema de USWDS. Las pruebas son la lista gráfica, que según la plantilla puede destacar valores, áreas de programa o resultados. Las rutas son los enlaces agrupados de GOV.UK y los bloques con medios de la plantilla. El contacto vive en el pie, donde la plantilla coloca un teléfono y un correo.
Para una empresa pequeña esto se traduce en una lista corta. Una frase que enuncie la oferta. Unos pocos hechos o trabajos terminados que la respalden. Rutas a las tres o cuatro páginas importantes, como servicios, precios y casos. Una forma visible de contactarte. Todo lo demás, desde un feed de noticias hasta una fila de insignias, tiene que ganarse su sitio frente a esos cuatro.
Guiada por el buscador o por el mensaje: qué estructura encaja con tu visitante
Los dos ejemplos son dos respuestas a una misma pregunta: ¿qué hace primero el visitante? En GOV.UK la gente llega con una tarea y a menudo con palabras en mente, así que van primero el buscador y la lista de tareas. En una plantilla de aterrizaje la gente llega para informarse y recibir una invitación, así que van primero un mensaje y un botón.
Una empresa con pocos servicios suele ir por el mensaje: explicar a qué te dedicas y enviar a la página de servicio adecuada. Una empresa con catálogo, muchos artículos o varios tipos de cliente necesita antes rutas y buscador. Elijas lo que elijas, una acción principal debe seguir a la vista, y el resto de la página debe apoyarla en vez de competir con ella.
Velocidad y móvil: las cifras de web.dev
Una página de inicio que se ve bien pero carga despacio pierde al visitante antes de que vea el diseño. web.dev nombra tres Core Web Vitals y sus umbrales buenos: Largest Contentful Paint de 2,5 segundos o menos, Interaction to Next Paint de 200 milisegundos o menos y Cumulative Layout Shift de 0,1 o menos. Se evalúan en el percentil 75 de las cargas de página, por separado en móvil y en escritorio.
En la página de inicio, el Largest Contentful Paint suele decidirlo el héroe. Según web.dev, informa del tiempo de renderizado de la imagen, bloque de texto o vídeo más grande visible en la ventana, y califica como malos los valores superiores a 4,0 segundos. En la práctica, lo primero que conviene revisar es una foto pesada en el héroe. Prueba en un móvil real con una conexión normal, no solo en un ordenador de oficina.
Las otras dos cifras también importan en la página de inicio. Una respuesta a un toque en 200 milisegundos o menos mantiene ágiles el menú y el botón de contacto. Un desplazamiento de diseño de 0,1 o menos significa que el botón no se escapa mientras carga una imagen, que es como la gente acaba pulsando lo que no quería.
Cómo medir la página de inicio una vez publicada
Las opiniones sobre una página de inicio son baratas; los números valen más. La ayuda de Google Search Console define las métricas del informe de rendimiento: impresiones, cuántas veces alguien vio un enlace a tu sitio en Google; clics, cuántas veces se hizo clic; porcentaje de clics, calculado como clics dividido entre impresiones; y posición media, donde 1 es la más alta. Puedes dividir los datos por dispositivo para ver si el móvil se comporta distinto.
Combínalas con tu propia medida de la acción que importa, como solicitudes enviadas o llamadas iniciadas, y cambia una sola cosa cada vez. Añade los Core Web Vitals de la misma página. Si reescribiste la primera pantalla y los clics desde la búsqueda siguen igual mientras suben las solicitudes, la reescritura funcionó con los visitantes; si bajan, revisa la velocidad y la primera pantalla antes de culpar al tráfico.
Qué preparar antes de encargar el diseño de una web corporativa
Puedes diseñar tú mismo una página de inicio si la oferta cabe en una frase y tienes unos pocos hechos reales que mostrar. Encargarla tiene sentido cuando el sitio debe sostener muchos servicios o páginas, funcionar bien en escritorio y móvil, y mantener un sistema visual en todas las plantillas. Prepara tu oferta con palabras sencillas, la lista de páginas que necesitas, las pruebas que puedes mostrar, tu logotipo y colores, y ejemplos de páginas de inicio que te gusten y por qué.
El diseño de web corporativa de VITON13 Studio, en su página de servicio, entrega un mapa del sitio de hasta 20 páginas y 6 plantillas para escritorio y móvil, con un kit de interfaz adaptable. El precio parte de $113 con ayuda de IA o de $173 con trabajo humano, con 7–12 días hábiles. Envía la oferta y la lista de páginas, y el alcance y el precio se confirman por escrito antes de empezar.
Lista práctica
- Escribe una frase que diga qué ofrece el sitio y a quién, y ponla en la primera pantalla.
- Elige una acción principal y mantenla visible sin desplazarse.
- Lista las tres o cuatro rutas que necesitan los visitantes y añade una línea bajo cada enlace.
- Prueba la página en un móvil y compárala con LCP 2,5 s, INP 200 ms y CLS 0,1.
- Abre Search Console, filtra por dispositivo y anota clics, impresiones y CTR.
Preguntas frecuentes
¿Cuál es el mejor ejemplo de diseño de página de inicio?
No hay uno para todos los negocios. GOV.UK es un buen modelo cuando los visitantes llegan con una tarea, y la plantilla de aterrizaje del US Web Design System lo es cuando hay que explicar una oferta e invitar a una acción.
¿Qué estructuras funcionan bien para una página de inicio?
Dos públicas: una guiada por el buscador, con lista de tareas y enlaces agrupados, como en GOV.UK, y otra guiada por el mensaje, con héroe, lema, lista corta de pruebas y botón de acción, como en la plantilla de USWDS.
¿Cómo debe verse mi página de inicio en el móvil?
Debe decir la oferta y la acción principal sin desplazarse, cargar rápido y no dar saltos. web.dev evalúa los Core Web Vitals por separado en móvil y escritorio, así que revisa la versión móvil por sí sola.
¿Debe tener formulario de contacto la página de inicio?
No necesariamente. La plantilla de USWDS aconseja mantener la sencillez y no añadir formularios ni navegación lateral. Muchas empresas enlazan a una página de contacto y ponen el teléfono y el correo en el pie.
¿Cómo sé si mi nueva página de inicio funciona?
Sigue la acción que buscas, como solicitudes enviadas, y lee en Search Console clics, impresiones, CTR y posición, filtrados por dispositivo. Compara las cifras antes y después de cada cambio por separado.