Un sitio web de una sola página no te deja dónde esconderte. No hay un menú donde ocultar una sección floja, ni una segunda página donde guardar lo que no pudiste incluir.
Todo lo que el visitante necesita se encuentra en un solo pergamino, en un orden específico. El orden constituye la base de todo el diseño.
Si lo haces bien, el sitio se leerá como una buena presentación. Si lo haces mal, se leerá como un texto interminable.
Los ocho ejemplos de sitios web de una sola página que se muestran a continuación funcionan a la perfección, cada uno a su manera. Algunos son páginas de marca personal diseñadas para conseguir un trabajo. Uno de ellos gestiona todo un negocio de diseño de interiores con una sola página web.
Lo que tienen en común es una función clara para cada pantalla. Adapta las partes que se ajusten a tu trabajo.
¿Qué es un sitio web de una sola página?
Un sitio web de una sola página coloca todo su contenido en una página continua. En lugar de hacer clic entre Inicio, Acerca de, Trabajo y Contacto, el visitante se desplaza por esas secciones en secuencia.
Una navegación fija suele saltar a cada página. También conocida como sitio de una sola página o de desplazamiento único, es la estructura más simple de la web: una URL, una carga, una ruta.
Los sitios web de una sola página son ideales para un mensaje conciso. Piensa en un profesional independiente que ofrece un solo servicio, un diseñador que muestra un solo trabajo o un estudio que quiere que las imágenes hablen por sí solas.
Si tienes cinco servicios distintos y un blog de 40 publicaciones, ese formato ya no te sirve. Si solo tienes una cosa que decir y quieres decirla bien, es difícil encontrar algo mejor.
La versión más enfocada del formato es una la landing page, construida en torno a una sola acción en lugar de una historia personal o de estudio completa.
¿Qué características debe tener un sitio web de una sola página?
En todos los ejemplos contundentes, aparece el mismo puñado de decisiones:
- Un mensaje, que aparece en la primera pantalla. El visitante debe saber quién eres y qué haces antes de que empiece a desplazarse por la página. Sin preámbulos.
- Un orden de desplazamiento que tenga algún significado. Los mejores sitios web de una sola página están estructurados como un argumento: gancho, prueba, personalidad, pregunta.
- Una acción principal. Contrátame, mira mi trabajo, ponte en contacto conmigo. Una llamada a la acción repetida es más efectiva que cinco de la competencia.
- Interrupciones visuales que fragmentan el desplazamiento. Los bloques de color, las imágenes a sangre completa o el espaciado generoso evitan que una página larga parezca una sola franja gris.
- Carga rápida. Una página web implica una sola oportunidad para causar una buena primera impresión. Los vídeos de presentación pesados y las imágenes sin comprimir son los puntos débiles de los sitios web de una sola página, que suelen perder visitantes.
Mientras lees, compara los ejemplos con esa lista.
Documentos de marca personal de una página que destacan por su tipografía
Cuando el producto es una persona, el tipo de letra es lo que realmente importa. En ambos sitios, el rol, y no el nombre, es lo más destacado de la página.
Jon Kirschner
Jon Kirschner Es estratega de marca y crecimiento, y su sitio web lo deja claro con letras cuatro veces más grandes que su propio nombre.
El nombre aparece en letra pequeña en una barra de navegación con forma de píldora, y las palabras "Estratega de Marca y Crecimiento" llenan la pantalla.
Debajo del pliegue, una introducción en lenguaje sencillo ("Creo marcas que convierten") marca la pauta.
Secciones como "En qué soy realmente bueno" y "Qué estoy leyendo" le dan un toque humano que la mayoría de los sitios web de estrategia omiten. Se lee como si fuera una persona, no una plantilla.
Toma prestado esto: Haz que la impresión que se lleven los visitantes sea más impactante que tu nombre. Vinieron a descubrir qué haces, así que empieza por ahí, con una tipografía que no pueda pasar por alto.
Jordon Melo
Jordon Melo, un estratega de planificación y compra de medios en Toronto, resuelve el problema clásico de una sola página: ¿cómo navegar por un desplazamiento largo? Él numera la navegación.
"01. Sobre mí, 02. Resumen del currículum, 03. Experiencia laboral, 04. Testimonios, 05. Contacto" se corresponde exactamente con el orden de desplazamiento, por lo que el menú también funciona como índice.
Un titular con serifa y un retrato arqueado le dan calidez a esta página de presentación. Se trata de un diseño web de una sola página que funciona como un sitio de varias páginas sin los tiempos de carga.
Toma prestado esto: Numera la navegación para que coincida con el orden de desplazamiento. Una página larga deja de parecerlo cuando el visitante puede ver en qué parte de ella se encuentra.
Documentos de una página con pantalla dividida y formato vertical
Dos sitios web, una idea: colocar a la persona y la acción en la primera pantalla, para que un visitante ocupado nunca tenga que desplazarse para interactuar.
Simrran Benvait
Simrran Benvait Es especialista en marketing en la Columbia Británica, y su héroe realiza todo el trabajo en una sola pantalla.
Un retrato ocupa la mitad izquierda, recortado con una suave onda hacia un panel color crema en la derecha. Ese panel muestra el saludo, el cargo y tres datos de contacto: correo electrónico, LinkedIn y teléfono.
Un reclutador puede leer quién es y enviarle un mensaje sin necesidad de desplazarse por la pantalla. El separador de ondas evita que la separación parezca la de dos cajas pegadas con cinta adhesiva.
Toma prestado esto: En la primera pantalla, indica tu cargo, ubicación y datos de contacto. En un documento de una sola página, tu tarjeta de presentación es la pieza clave, así que trátala como tal.
Noor Harajli
Noor Harajli, coordinadora de redes sociales y marketing con sede en Londres, crea su único desplazamiento de texto a partir de tarjetas rojas de gran tamaño sobre un fondo negro.
Cada sección, perfil, habilidad o trabajo, se ubica en su propio bloque redondeado, de modo que la página se lee como una serie de habitaciones en lugar de una tira larga.
La tipografía monoespaciada transmite una identidad técnico-creativa, y las tarjetas de "Producción de contenido" y "Diseño gráfico" enlazan directamente con proyectos reales. Esto demuestra que un sitio web de desplazamiento único puede incluir un currículum completo y un portafolio sin resultar recargado.
Toma prestado esto: Divide un texto largo en bloques de color redondeados. Una clara separación visual permite que una sola página contenga mucha información sin que el lector pierda el hilo.
Portafolios de una página basados en imágenes
Cuando el trabajo es la presentación principal, las imágenes ocupan toda la página y el texto queda en segundo plano. En ambos casos, la imagen principal ocupa toda la página.
Dillan Vanner
Dillan Vanner Es fotógrafo, y el sitio se abre como lo hace una buena impresión: una imagen a sangre completa, de borde a borde, antes de una sola palabra de texto.
Un fotograma de documental llena la primera pantalla, el logotipo aparece centrado y en tamaño pequeño, y el eslogan "Capturando el mundo y todo lo que contiene" subraya la idea.
Un menú de navegación minimalista (Inicio, Portafolio, Sobre mí) y una fila de iconos de contacto son los únicos detalles llamativos. La fotografía es la que vende.
Toma prestado esto: Para una página dedicada a la fotografía, deja que una imagen impactante ocupe toda la primera pantalla. Tu mejor encuadre es un gancho más efectivo que cualquier titular.
cmc designworks
cmc designworks, un estudio de arquitectura e interiorismo, prescinde del texto y deja que la obra sea la protagonista.
La página de inicio se abre con una cuadrícula fotográfica asimétrica que ocupa toda la pantalla: representaciones del edificio, tomas del interior, señalización, con una barra de navegación casi invisible flotando encima.
Para una disciplina visual, esta es la decisión acertada. Las imágenes venden, así que nada puede competir con ellas. Es uno de los ejemplos de sitios web con desplazamiento más limpios que encontrarás, precisamente porque confía en la fotografía.
Toma prestado esto: Si tu trabajo es visual, reduce el texto. Una cuadrícula de imágenes a sangre completa como elemento principal comunica mucho más que un párrafo.
Documentos informativos breves sobre servicios y talento.
Un sitio web de una sola página no es solo para personas que muestran su portafolio. Estos dos elementos se desplazan secuencialmente como en una presentación, de modo que todo el argumento se expone en una sola lectura.
Arrowood Design
Arrowood Design, una empresa de diseño de interiores del Área de la Bahía, gestiona todo su negocio de servicios en una sola página. El desplazamiento está secuenciado como una presentación de negocios.
La promesa de "Lujo atemporal" se sitúa sobre un mural pintado de una lechuza común en la parte superior, seguida de los servicios, el posicionamiento "No solo decoración", la historia de la fundadora ("¿Quién es Lisa?"), los proyectos y la información de contacto.
Las etiquetas editoriales en mayúsculas mantienen la coherencia. Al llegar al final, habrás leído una conversación de ventas completa, en orden, sin necesidad de hacer clic una sola vez.
Toma prestado esto: Una sola página puede representar todo un negocio de servicios. Organiza el documento como si fuera una presentación: promesa, servicios, pruebas, la persona a la que perteneces y, finalmente, la solicitud.
Kaitlyn Barry
Kaitlyn Barry Es actor, director e intérprete en Perth. El sitio se abre con el nombre a pantalla completa sobre un único retrato tomado al atardecer, de la misma manera que una foto de perfil encabeza un perfil de casting.
A partir de ahí, va directo al grano: un breve perfil, luego una lista de créditos recientes de trabajos en pantalla como The Twelve y Cephalopod, luego contacta.
El documento está organizado como se lee un resumen de casting: quiénes son, qué han hecho, cómo contactarlos. Nada lo impide.
Toma prestado esto: Si te contratan basándose en tu currículum, inclúyelo en la página. Destaca tu puesto, enumera tus logros y asegúrate de que la frase "disponible ahora" sea imposible de pasar por alto.
¿Qué tienen en común los mejores sitios web de una sola página?
Si observamos los ocho ejemplos en conjunto, el patrón es consistente. Los mejores sitios web de una sola página no son los más atractivos visualmente. Son aquellos donde cada pantalla cumple una función y estas funciones se ejecutan en el orden correcto.
Se comprometen con un único mensaje y repiten una sola acción. Utilizan un sistema visual real para estructurar el desplazamiento: navegación numerada, tarjetas con bloques de color, una cuadrícula de imágenes y una sección principal dividida.
Priorizan lo importante: el rol y el contacto para quienes buscan empleo, y el trabajo para los estudios.
Y optan por la sencillez, porque una página web de una sola página supone una descarga y una primera impresión. Los ejemplos de sitios web sencillos suelen tener más éxito que los elaborados. La clave está en la moderación.
Cuándo funciona un sitio web de una sola página (y cuándo necesitas más de una página)
Este formato tiene sus límites. Un sitio web de una sola página es adecuado cuando tu mensaje es conciso y tu contenido es limitado.
En el momento en que tienes varias audiencias distintas, un blog en crecimiento o un catálogo de servicios que merecen cada uno su propia presentación, un simple desplazamiento empieza a jugar en tu contra.
Si eres un artista tradicional en lugar de un diseñador, una configuración de varias páginas suele ser más adecuada para el trabajo. sitios web de portafolios de artistas Roundup cubre esa ruta. Esta es la versión honesta:
Si te ubicas en la columna derecha, crea páginas adicionales. Obligar a que todo quepa en una sola barra de desplazamiento para lograr un aspecto minimalista es una decisión que tus visitantes pagan.
Cómo crear tu propio sitio web de una sola página
No necesitas programar uno de estos. Empieza por escribir el código de desplazamiento antes de modificar la plantilla.
Enumera las secciones en el orden en que un desconocido debería encontrarlas y luego elimina una. La mayoría de los sitios web de una sola página tienen una sección de más.
Para la creación de un sitio web, un creador de sitios web centrado en portafolios te ofrece mejores resultados que uno general, ya que los diseños están pensados para un único desplazamiento controlado.
Pixpa's plantillas de sitios web de una página Te ofrecen una navegación fija anclada, secciones de imágenes a sangre completa y un bloque de contacto incorporado de serie. Puedes verlos en uso en el portafolios de una página galería.
El CSS personalizado está disponible si desea modificar el tipo o el espaciado. Jon Kirschner y Noor Harajli hice.
Si prefiere comparar primero las herramientas dedicadas de una sola página, consulte nuestro resumen de creadores de sitios web de una sola página es un punto de partida útil.
Cada sitio anterior fue construido sobre Pixpa, lo cual es una buena señal de cómo puede verse el formato sin un desarrollador.
Sea cual sea la base sobre la que construyas, mantén las imágenes comprimidas y las secciones concisas. La clave está en la sobriedad del diseño.
Lo más importante es...
Un sitio web de una sola página es una herramienta que impone una función. Te obliga a decidir qué es lo que realmente importa y a ordenarlo, porque no hay una segunda página que oculte el resto.
Los ejemplos que se presentan aquí abarcan a un estratega en búsqueda de empleo, un creativo londinense, un fotógrafo documental, un estudio de arquitectura, una empresa de diseño de interiores de lujo y un actor en activo.
Todas ellas funcionan por la misma razón: un mensaje claro, un desplazamiento deliberado, una cosa que hacer a continuación.
Redacta tu texto como si fuera un argumento, empieza con la idea principal y recorta hasta que solo queden los puntos esenciales.
Preguntas frecuentes sobre sitios web de una página
¿Qué es un sitio web de una sola página?
Un sitio web de una sola página coloca todo su contenido (sobre nosotros, trabajo, servicios, contacto) en una sola página con desplazamiento, en lugar de dividirlo en páginas separadas.
También conocido como sitio de una sola página o de desplazamiento único, es ideal para un mensaje conciso: un servicio, un portafolio o una presentación personal. Generalmente, una barra de navegación fija dirige al visitante directamente a cada sección.
¿Son las páginas web de una sola página buenas para el SEO?
Pueden posicionarse bien en los resultados de búsqueda para tu nombre y una o dos frases clave, que suele ser todo lo que necesita una marca personal o un negocio de un solo servicio.
Su principal dificultad radica en la amplitud. Dado que Google prioriza las páginas sobre los sitios web, una página solo puede posicionarse para un número limitado de palabras clave antes de que su contenido se vuelva contraproducente. Si se desea posicionar en diversos temas, se necesitan más páginas.
¿Cuántas secciones debería tener un sitio web de una sola página?
Basta con lo suficiente para presentar el caso y nada más. La mayoría de los sitios web de una sola página más sólidos constan de cinco a siete secciones: un titular principal, una breve descripción, el trabajo o los servicios, algunas pruebas y la información de contacto.
Si te encuentras añadiendo una octava página, comprueba si el sitio realmente requiere ser de varias páginas.
Una página o varias páginas: ¿cuál es mejor?
En abstracto, ninguna de las dos es mejor que la otra. Resuelven problemas diferentes.
Un diseño web de una sola página resulta ventajoso para mensajes concisos, decisiones rápidas y portafolios visuales.
Las páginas múltiples son una buena opción cuando tienes audiencias distintas, un blog en crecimiento o muchos servicios que merecen su propia página. Elige según la profundidad del contenido, no según su diseño más moderno.
¿Dónde puedo encontrar más ejemplos de sitios web de una sola página?
Más allá de las ocho que hay aquí, galerías como One Page Love y AwwwardsLas colecciones de una sola página merecen que se desplacen para inspirarse en el diseño.
Al navegar, no te fijes solo en lo visual: estudia el orden de desplazamiento y la llamada a la acción, porque esa es la parte que realmente necesitas copiar.
¿Cuánto cuesta una página web de una sola página?
Si lo creas tú mismo en un creador de sitios web, un sitio de una sola página cuesta lo mismo que cualquier sitio pequeño: aproximadamente el precio de un plan más un dominio. Consulta el Precios del último plan para conocer las cifras actuales.
Contratar a un diseñador para crear una página web personalizada puede costar desde unos cientos hasta unos miles de dólares, dependiendo del trabajo. Para la mayoría de las personas en esta lista, una plantilla fue suficiente.