Diseño web Single One Page WordPress – Inspiración y tendencias 2020 + consejos

Según los objetivos, algunos sitios funcionan mejor con diseño web one page, también conocido como single page. Es decir, que incluyen todo lo necesario en una única página.

Estos proyectos son típicamente páginas de portafolio, sitios de productos, páginas de destino, y a veces páginas de la compañía también.

Es probable que necesite un sitio con poco contenido pero seguro que te gustaría mostrar una marca fuerte y ofrecer una navegación limpia. ¿Verdad?

Pero, ¿qué otras características hay que tener en cuenta en el diseño web one page?

¿Y cómo puedes diseñar un sitio single page que ofrezca la mejor experiencia a tus usuarios?

Si no sabes responder a estas y otras preguntas que debes tener en cuenta, lo mejor es que pidas presupuesto sin compromiso a todos nuestros diseñadores profesionales.

Tan sólo tienes que rellenar los 4 pasos del formulario que encontrarás en la cabecera o pulsando el siguiente botón verde:

Consejos para el diseño web one page

No hay una manera absolutamente «mejor» de crear un sitio de una sola página (one page).

Pero si usted sigue estas sugerencias, seguramente estará en el camino correcto.

Enlaces de navegación con desplazamiento automático

Una característica muy común que encontrará en los diseños de una sola página (one page) es la barra de navegación con desplazamiento automático.

Aquí es donde haces clic en un enlace y éste se desplaza automáticamente a esa sección de la página.

Funciona igual que un menú de navegación normal, excepto por el efecto de desplazamiento de animación personalizada que ofrece una experiencia de usuario realmente elegante.

Echa un vistazo a la página web de Hashtago para ver un ejemplo.

Este es un diseño muy simple con una barra de navegación con 4 enlaces diferentes.

La función de desplazamiento funciona tanto si hace clic en ellas como si se desplaza hacia abajo con la rueda del ratón.

Es un diseño muy simple, pero la animación puede parecer demasiado lenta para algunas personas.

Ese es el riesgo al que se enfrenta al forzar una animación personalizada en la navegación.

En lugar de eso, puedes hacer algo como el Club de Retenedores, que carga automáticamente diferentes páginas y se desplaza hacia nuevas secciones en la misma página.

Notará que los tiempos de carga son apreciablemente más rápidos con una transición mucho más suave.

Si lo que quieres es una experiencia de usuario sólida, entonces quieres una velocidad de animación suave.

No es fácil de conseguir, pero cuanto más diseñes, más verás lo que hace que funcione la animación»buena».

Ahora DangerousRobot es probablemente mi ejemplo favorito de esta función de desplazamiento automático de una sola página (one page).

Las secciones de la página se cargan a la vista muy rápidamente y la navegación también es fácil de leer.

Eso es lo que debería estar buscando cuando diseñe un elegante efecto de navegación con desplazamiento automático.

Etiquetas de navegación lateral

Si no desea que la navegación se fije en la parte superior de la página, siempre puede diseñar una navegación vertical.

Esto podría parecerse a este diseño en el sitio web de Playground.

Observe cómo los enlaces a la derecha le siguen a lo largo de la página.

Siguen funcionando como una barra de navegación típica, excepto que están un poco fuera del camino y son más accesibles en ese espacio.

No creo que esta técnica funcione bien para todos los sitios web.

No es la opción perfecta si tiene mucho texto o necesita admitir pantallas más pequeñas con el mismo menú vertical.

En su lugar, puede intentar cambiar a un menú accesible más fácil de usar con técnicas de respuesta.

Muchos sitios web también utilizan enlaces de navegación por puntos.

Estos no son geniales porque no te dicen qué sección de la página estás viendo en ese momento.

Pero ahorran mucho espacio y se ven muy elegantes.

Por ejemplo, el sitio de Interface Agency tiene tres pequeños botones de navegación por puntos.

Haga clic en ellos para desplazarse rápidamente por la página.

También hay un pequeño icono en la esquina superior que ofrece más páginas para mirar.

He visto algunas compañías como Ritual que se auto-animan a través de diferentes secciones.

Esto está bien, pero en mi opinión, no es la mejor opción para una página con mucho contenido.

Esto es mejor para añadir gráficos llamativos en diseños personalizados.

Las naves verticales funcionan bien si las puede incluir en su diseño.

Se trata de probar y ver lo que puede hacer funcionar, pero no de forzar sus ideas cuando no se vean bien.

Ideas para el diseño de single one page de un portfolio

Si usted está diseñando un sitio de portafolio entonces hay mucho que tener en cuenta.

Bueno, en realidad sólo necesitas mostrar tu trabajo.

Pero un gran portafolio también tiene un toque de ti mezclado en el contenido.

Todo esto puede ser más fácil de consumir si está en una página.

No creo que cada portafolio deba ser de una sola página (one page).

Sin embargo, creo que puede funcionar bien en un sentido de diseño minimalista.

Por ejemplo, Pranesh Ravi ni siquiera tiene una navegación clara en esta página.

Es sólo un montón de secciones listadas juntas.

Si pasas el ratón por encima del logotipo en la esquina superior derecha, verás unos cuantos enlaces que saldrán a la luz.

Este es un efecto divertido, pero no sé si es genial por el bien de la usabilidad.

Echa un vistazo a la página web de Dice Sales para obtener otra idea para el diseño del portafolio de una sola página (one page).
Este diseño utiliza una navegación fija en la esquina inferior derecha de la pantalla.

Es perfecto para moverse entre las secciones de la página sin que los enlaces se interpongan en el camino.

El único inconveniente es que esos enlaces se ocultan en el móvil, por lo que no es la opción más accesible que existe.

Rogie King es uno de mis diseñadores favoritos y su portafolio es un testimonio de la calidad del diseño de una sola página (one page).
Es limpio y simple, pero muy divertido de ver.

Y no hay una barra de navegación a la vista.

Encuentra un estilo que funcione para tu portafolio y serás el mejor.

Añadir CTAs para páginas de ventas

Si estás vendiendo un producto o un curso digital, siempre es inteligente incluir un CTA en algún lugar de tu página.

Esto es especialmente cierto si está diseñando una página de aterrizaje donde es la única página que alguien puede ver.

Como en un diseño de una sola página (one page).
Por ejemplo, Hero Icons sólo tiene un par de CTAs por encima del pliegue sin ningún otro tipo de navegación.

Texto limpio, iconos simples, diseño realmente suave.

Pero no hay nada que impida que la gente vaya a otra parte del sitio.

Y eso está bien!
Porque su objetivo con este tipo de página es fomentar las conversiones.

Usted puede contar una «conversión» como un registro, una compra, un envío de correo electrónico o algo así.

En realidad no importa demasiado.

Si estás alcanzando tus metas, entonces sabes que estás en el camino correcto.

La página de inicio del plugin Sketch Confetti tiene otro ejemplo de un botón CTA muy limpio.
Esto utiliza un fondo rosa brillante para llamar la atención directamente debajo de un vídeo de demostración incrustado.

Mi única queja aquí es la posición del botón.

Cuando diseñas para la acción, quieres esa acción por encima del pliegue.

Especialmente para diseños de una sola página (one page).

Investigue un poco sobre las tendencias de diseño de CTA y vea lo que puede aprender.

Con grandes CTAs notará que la elección de la fuente, el tamaño, la posición y el color juegan un papel muy importante.

Por ejemplo, Midnight Sketch es otro plugin de Sketch con un hermoso diseño de una sola página (one page).

Los CTAs son brillantes y están justo en tu cara.

Ésos están destinados a hacer que la gente haga clic a primera vista.

Animaciones en la página de desplazamiento

Basado en el título de «animaciones en movimiento» se podría pensar que es lo mismo que las animaciones de navegación.

Pero es realmente su propia categoría y es definitivamente un buen efecto.
Puede agregar fácilmente elementos de la página que se animan a lo largo de la página mientras se desplaza.

Tenga en cuenta que es más fácil entender esto si mira un ejemplo en vivo, así que eche un vistazo a esta página.

Toggl tiene su propia aplicación de seguimiento de tiempo y su página de destino es fantástica.

A medida que se desplaza hacia abajo notará que los diferentes elementos de la página se animan a la vista.

Son bastante fáciles de ver, por lo que no se mueven demasiado rápido o demasiado lento, pero hay un movimiento claro.
La idea es captar la atención de la gente mientras se mueven para añadir algunas características dinámicas a su contenido.

Funciona mejor con gráficos y diferentes secciones de página, específicamente alternando secciones de página que cubriré más en la siguiente parte de este artículo.

La página de inicio de Yarn App también utiliza animaciones en movimiento en la parte inferior de su página.
Este efecto no altera radicalmente el comportamiento o la intención de la página.

Se trata sobre todo de una tendencia estética que hace que todo sea más fácil de observar.

¿Es genial para todos los sitios web? Por supuesto que no.

En la mayoría de los casos, esto funciona con páginas que tienen cantidades más pequeñas de contenido que se animan a medida que se avanza por la página.

Un gran tweet es el ejemplo perfecto de esto.

Cada parte de la página utiliza animaciones diferentes, pero no hay bloques de párrafo masivos ni correcciones súper detalladas.

En la parte superior izquierda encontrará una navegación con la función de desplazamiento automático que mencioné anteriormente.

Sin duda, haciendo un buen uso de esa tendencia.

Este es probablemente uno de los mejores ejemplos de un diseño de una sola página (one page) que coloca la experiencia del usuario por encima de cualquier otra cosa.

Siempre diseñe primero para los usuarios.

Preocúpese por la estética más tarde.

Esa es una de las claves más grandes para un gran diseño de una sola página (one page).

Divida la página en secciones

Mencioné esto antes al hablar de la función de navegación con desplazamiento de una sola página (one page).

Pero es algo que debería ser cubierto con más detalle.

Cuando diseñas un solo diseño de página, quieres segmentar tu contenido.

Divídelo en secciones usando diferentes colores de fondo, estilos de encabezado, iconos, divisores, lo que sea.

Esto ayuda a los usuarios a consumir el contenido más rápido y fácil sin ningún problema.

Las secciones de esta página para un kit de interfaz de usuario de iOS 11 son sutiles pero notables.

Todos ellos tienen diferentes encabezados y tamaños de imagen alternados para crear una jerarquía visual.

En la parte inferior de la página verá una sección con diferentes colores y patrones de fondo.

Nada demasiado grande, pero llama la atención.
Típicamente me gusta más alternar colores de fondo como esta página.

Ofrece consejos sobre cómo usar Photoshop para personas que, bueno, no lo conocen.

Los fondos cambian entre oscuros y claros con colores alternados entre ellos.

Excelente para el contraste y claramente un estilo de diseño sólido para cualquiera que no esté seguro de cómo dividir las secciones de la página.
Pero usted puede ser un poco más colorido con tonos más brillantes, patrones diferentes, o incluso gráficos más grandes.

Tomemos por ejemplo esta página de destino creada por BARREL.

También divide la página en secciones, pero utiliza una técnica totalmente diferente para hacerlo.

Esto incluye fondos, colores, iconos y muchas fotos.
Usted puede probar esto con casi cualquier página y ver grandes resultados.

Se trata de combinar las opciones de color junto con los detalles de la página.

Parece complicado a primera vista, pero lo aprenderás cuanto más diseñes maquetas personalizadas.

Tendencias de una sola página (one page) de Parallax

Estoy seguro de que conoce el desplazamiento de paralaje y las muchas técnicas de paralaje que se utilizan en el diseño web.

Estos son todos demasiado comunes en estos días en toda la web y muchos sitios web a menudo van un poco demasiado lejos.

Es por eso que no siempre recomiendo técnicas de paralaje para diseños de páginas individuales.
Sin embargo, si va a añadir paralaje en su sitio, un diseño de una sola página (one page) es el lugar para hacerlo.

Echa un vistazo a DrawingArt para ver un ejemplo muy simple.

Desplácese por la página y, a medida que se desplaza, verá que los fondos se desplazan con usted.

¡Bastante guay!

Este efecto puede ser replicado usando cualquier plugin de paralaje gratuito que encuentre en línea.

El objetivo es crear una ilusión de movimiento en la página con algunos elementos fijos, imágenes en movimiento y microinteracciones de la página con los movimientos del ratón.

Esa última opción es difícil de construir por su cuenta.

Pero el resultado final es magnífico.

También puede intentar hacer un diseño de fondo fijo como esta página de Winter Workweek.

No utiliza un diseño de una sola página (one page) exclusivamente ya que hay otras páginas en el sitio web.

Sin embargo, la función de paralaje animado se mezcla con un fondo fijo, lo que crea un efecto de movimiento realmente extraño a medida que te mueves por el contenido.

Esto significa que encontrarás una gran variedad de creativos, imágenes, contenido, encabezados….

todo ello unido al mismo diseño general de la página.

Un efecto bastante impresionante si se puede mezclar con su proyecto.

Conclusión: Inspiración diseño web single one page

Estas son sólo algunas de las técnicas que a menudo veo adjuntas a los diseños de una sola página (one page).

Pero no tome esto como un santo grial para diseñar sitios web one page.

Mantenga una mente abierta y esté dispuesto a experimentar con diferentes tendencias.

No hay dos sitios web exactamente iguales y hay mucho espacio para la experimentación.

Estudia otros diseños de una sola página (one page) que tengan cosas similares que te gusten y mézclalos para crear una pieza totalmente nueva de trabajo de diseño impresionante.