Una muestra de sitios web de una sola página
Al diseñar un sitio web con un número mínimo de páginas y no una tonelada de contenido, un diseño de una sola página puede ser una forma innovadora de diferenciar el sitio.
Los sitios web de una sola página a menudo utilizan JavaScript y Flash, junto con HTML y CSS para adaptarse a más contenido en una página sin aumentar sustancialmente los tiempos de carga.
La navegación debe tener especial consideración cuando se trata de sitios de una sola página, para asegurarse de que los visitantes puedan regresar a la sección de inicio de la página sin problemas y navegar desde cualquier sección a cualquier otra sección. Esto a menudo se logra a través de encabezados adhesivos o navegación repetitiva en cada sección.
Los siguientes sitios son excelentes ejemplos de sitios web de una sola página. Ambos son útiles y estéticamente agradables, y aprovechan al máximo el formato de una sola página.
Roaaar
El sitio web de Roaaar incluye un enlace "regresar al principio" al pie de cada sección, lo que facilita a los visitantes volver a la navegación en el encabezado.
Duplos por Ricardo Mestre
El sitio de Duplos toma un enfoque diferente, colocando el contenido principal en la parte inferior de la página. La navegación lo lleva más arriba en la página, en lugar de hacia abajo.
Grzegorz Kozak
El motivo del faro corre a lo largo de toda la página, desde el espacio hasta el nivel del suelo. Los banners que cuelgan de las ventanas del faro le devuelven a la parte superior de la página donde está la navegación.
Caleidoscopio
El sitio web de Caleidoscopio utiliza diferentes imágenes de fondo y texturas detrás de cada sección del sitio. Esto diferencia cada área de contenido de cada área de contenido.
Dan Scotton
Las páginas cortas como esta con contenido mínimo funcionan particularmente bien. La navegación permanece en la barra lateral cuando se desplaza hacia abajo de la página.
Viktor Shvaiko
Este sitio usa un control deslizante horizontal para cargar contenido nuevo, desplazándose a través de otro contenido para llegar a la página a la que ha navegado. La barra de navegación permanece en la parte superior independientemente de la página en la que se encuentre.
Jon Rundle
Los sitios de perfil simple y personal como este se adaptan perfectamente a un diseño de una sola página. Los íconos y colores decorativos agregan un poco más de interés visual al diseño, que de otra manera es muy neutral.
Jason Reed
Usar un efecto de acordeón para mostrar contenido nuevo funciona bien cuando el contenido no es demasiado largo. La imagen del encabezado ilustrada y el esquema de color gris y naranja hacen que el sitio se destaque.
Tweet CC
El uso de texturas e ilustraciones simples hace que el sitio de Tweet CC sea visualmente atractivo mientras que también se mantiene simple con un esquema de color monocromático.
Disposición PSD
Los sitios que ofrecen servicios sencillos pueden funcionar particularmente bien en un formato de una sola página. No hay demasiada información para ofrecer y mantener todo en una página facilita que los clientes potenciales encuentren rápidamente lo que necesitan.
Feelwire
El sitio Feelwire mantiene las cosas simples, y ofrece información adicional con información sobre herramientas. El fondo blanco lo mantiene minimalista y los iconos en negrita añaden interés visual.
Meteoro caliente
El sitio Hot Meteor utiliza un diseño gris, rojo y centrado en la tipografía. El encabezado es adhesivo, manteniendo la navegación en la parte superior de la página.
Mia Makila
El sitio de Mia Makila es un poco diferente que la mayoría de los otros sitios incluidos aquí, utilizando un diseño más tradicional de 3 columnas. JavaScript se usa para mostrar obras de arte en cada categoría.
Costas Theoharis
Este sitio utiliza un interesante efecto deslizante, con cada sección (el encabezado, el contenido principal y el pie de página) deslizándose por separado el uno del otro.
Javan Makhmali
El diseño de cuadrícula utilizado aquí no se ve muy a menudo en diseños de una sola página. Pero con un montón de espacio en blanco, funciona bien para incluir un montón de contenido diferente en un diseño muy simplificado.
Team Nomad
El diseño aquí es simple y directo, y el diseño de 2 columnas funciona bien para adaptarse a más contenido en la página sin que parezca pesado.
Jorge Fino
El sitio de Jorge Fino pone el foco directamente en los diseños. La navegación no existe (aparte de desplazarse) y la información de contacto se incluye tanto en el encabezado como en el pie de página.
Moly Yim
Aquí hay otro sitio sin navegación. Sin embargo, se mantiene a una distancia razonable, por lo que no es un problema.
Justin Tsang
La navegación aquí es un poco diferente. En lugar de incluir botones que lo llevan de regreso a la parte superior o navegación en cada pantalla, los botones se incluyen junto a cada proyecto y área de contenido para subir o bajar una pantalla. También hay una barra de navegación en la parte superior para saltar a cada sección principal.
Mogulista
Los sitios web temporales son un buen momento para usar un sitio de una sola página. Este sitio usa JavaScript para cargar contenido nuevo para cada "página" en el sitio.
Chirag Solanki
La navegación en este sitio combina navegación principal y enlaces al final de cada sección para devolver a los visitantes a la parte superior de la página. Los garabatos ilustrados unen cada sección, dando una sensación de continuidad a toda la página.
Deluge Studios
El diseño del sitio de Deluge Studios es uno de los más destacados aquí. Dos columnas proporcionan cinco áreas de contenido, todas vinculadas desde la navegación superior. La inclusión de secciones de contenido principal en la columna de estilo "barra lateral" más pequeña hace que la página sea significativamente más corta.
Stage 5 Studio
El sitio de Stage 5 Studio es corto, sin navegación. Los enlaces "Leer más" eliminan más información sobre cada proyecto, mientras que el resto del contenido se guarda en la "barra lateral".
SmartCube
El sitio de SmartCube usa un encabezado fijo para mantener la navegación en la pantalla en todo momento. También usa una combinación de diseños de 1 y 2 columnas, según el contenido.
Diseños Eclectique
Las secciones de contenido aquí están diferenciadas por texturas de fondo únicas. La tipografía reúne todo en la página y JavaScript se usa para mostrar productos adicionales sin ocupar más espacio.
Secretos dentro de una aplicación de iPhone
Este es uno de los sitios web de una sola página más largos que se muestran aquí. Utiliza un encabezado fijo con navegación para facilitar el paso de una sección a otra.
Mata al derrame
Mantener un sitio de caridad como este breve y al grano es casi seguro que aumentará el número de donaciones que ingresan. La tipografía en negrita, las imágenes gráficas y la inclusión de un formulario de donación en la parte inferior funcionan perfectamente juntos.
Emily Whitesmith
Aquí hay otro sitio que comienza en la parte inferior de la página. Al hacer clic en el enlace "obtener más información" se desplaza la página hasta un área de cartera. Las ventanas modales dan primeros planos de cada tela.
Volantes
Los sitios web de aplicaciones son adecuados para diseños de una sola página, ya que a menudo tienen contenido limitado y solo una captura de pantalla o dos para las imágenes.
Hayley Smith
Aquí hay otra página muy larga. La navegación se repite en la parte superior de cada sección, y el logotipo se desliza por la página a medida que se desplaza.
Conway Anderson
El sitio de Conway Anderson usa una combinación de controles deslizantes (para información sobre e información de contacto) y modales (para el trabajo) para mostrar contenido. El diseño simple basado en cuadrículas y el esquema de color monocromático mantienen las cosas simples y modernas.
Daniel Moir
El sitio de Daniel Moir es simple, con contenido mínimo y sin navegación. El diseño de 2 columnas organiza los diferentes tipos de contenido en el sitio y lo mantiene más corto.
Latte por día
Los sitios web de prelanzamiento son muy adecuados para diseños de una sola página, como se muestra aquí. Todavía no hay suficiente contenido para justificar un sitio de varias páginas.
El mercado de la colmena
Aquí hay otro sitio de una sola página más larga. El fondo amarillo brillante y las ilustraciones de las abejas unen todo el sitio, y la navegación se repite en la parte superior de cada sección.
Rubidine
El sitio de Rubidine usa un encabezado fijo con un fondo transparente que se mezcla con cada sección de contenido individual.
Jakub Szymanski
Este sitio usa JavaScript para cargar contenido nuevo y deslizar hacia abajo la página. Aparece un pie de página adhesivo después de la "página" de inicio con un enlace "volver al principio".
Tyler Termini
El sitio web de Tyler Termini es corto, con navegación solo en el encabezado. Debido a que no es una página muy larga, no es realmente un problema tener que volver a la parte superior (o simplemente desplazarse por cada sección sin usar la navegación).
Josh Sender
El esquema de color en escala de grises aquí se ve genial. El trabajo visualizado entra a todo color cuando se coloca sobre él, y cuando se hace clic en una ventana modal de color se abre con una versión más grande.
Escrito y compilado exclusivamente para WDD por Cameron Chapman .
¿Qué es lo que más te gusta de los sitios web de una sola página? ¿Tienes algún favorito que no fue presentado aquí? Por favor comparte en los comentarios a continuación ...