Los mejores diseños de sitios web para 2022

El diseño de su sitio web puede definir su éxito.

Obtenga el diseño incorrecto y la gente se confundirá y desorientará, destruyendo la experiencia del usuario. Es probable que se pierdan contenido crítico o que no vean una llamada a la acción.

Entonces, antes de crear un sitio web, asegúrese de tener la idea de diseño correcta.

Pero la importancia de su diseño va más allá. El diseño tiene que adaptarse al contenido de su sitio. Con el diseño correcto, su contenido puede brillar, pero con el contenido incorrecto puede volverse abarrotado, difícil de leer y poco inspirador.

En última instancia, todos los sitios tienen un sistema de cuadrícula que se encuentra debajo del diseño del sitio web. Estas columnas y filas proporcionan orden a su contenido y guían la vista del usuario por la página. Dentro de estas cuadrículas, puede crear una gran cantidad de enfoques diferentes. Cada sitio web tiene una cuadrícula subyacente sobre la cual el diseñador ha construido el diseño.

Sin embargo, cuando se trata de elegir el diseño de diseño adecuado para su sitio, hay varios puntos de partida comunes que puede usar para comenzar.

Vale la pena decir que no necesita ceñirse a un solo enfoque. Puede combinar fácilmente varios diseños en su sitio o incluso en una sola página, como una página de destino.

Dicho esto, echemos un vistazo a las opciones de diseño más comunes disponibles para usted.

1. Diseño de una sola columna

Aunque es el diseño menos complicado que encontrará, su popularidad ha crecido significativamente desde el crecimiento de la web móvil. Esto se debe a que el sitio web puede usar el mismo diseño en dispositivos móviles, tabletas y computadoras de escritorio, lo que reduce el tiempo de desarrollo.

Además, los diseños de una sola columna funcionan bien para crear una excelente experiencia de lectura porque enfoca al usuario en el contenido sin distracciones a ningún lado. Es por eso que el sitio de blogs Medio la adopta para todos sus artículos.

Finalmente, cuando se combina con imágenes, un diseño de una sola columna puede tener un gran impacto porque le permite mostrar esas imágenes lo más grandes posible. El complejo del océano es un gran ejemplo de esto en acción.

Con estos factores en mente, considere usar un diseño de una sola columna si desea que las personas pasen mucho tiempo leyendo en su sitio o si tiene imágenes que necesitan espacio para brillar.

Debido a su simplicidad, existen pocos desafíos en torno a un diseño de una sola columna. Sin embargo, debe considerar cuidadosamente el flujo de información. ¿En qué orden necesita el usuario ver tu contenido?

Por ejemplo, es útil dar a los usuarios un resumen de lo que cubre la página en la parte superior para atraerlos y ofrecer un claro llamado a la acción hacia el final.

Además, piense en cómo puede mantener al usuario desplazándose hacia abajo en la página. Los diseños de una sola columna tienden a ser más largos y no siempre es evidente para el usuario que hay más contenido debajo de la página. Un indicador visual, como una flecha, puede ayudar.

Si un diseño de una sola columna parece un poco restrictivo, pero aún tiene mucho contenido para comunicar, considere adoptar un diseño que se centre en el contenido.

2. Diseño centrado en el contenido

Los diseñadores web a menudo usan el diseño centrado en el contenido en sitios de noticias o blogs y, por lo general, tiene una columna principal para el contenido y una o más columnas laterales para información adicional.

La ventaja que tiene este diseño es que puede ayudarlo a administrar la longitud de línea del contenido central al variar el ancho de las columnas laterales. eso importa porque si la longitud de la línea del texto es demasiado larga o corta, se vuelve más difícil de leerreduciendo así la comprensión y retención de la información.

Sin embargo, si se hace bien, el diseño centrado en el contenido es ideal para cualquier sitio web centrado en la copia. El secreto es dividir el contenido dentro de este diseño en partes pequeñas y fáciles de digerir.

Por ejemplo, en mi blog, encontrará que mi publicación promedio está marcada por encabezados, listas, imágenes y citas extraídas. Todas estas son técnicas para ayudar al usuario a escanear el artículo y encontrar partes que sean de su interés.

También se debe prestar especial atención a las columnas laterales. Es esencial que el diseñador web coloque el contenido correcto en estas columnas y que visualmente tengan la ponderación correcta.

El problema es que los usuarios esperan encontrar contenido secundario en las columnas laterales y por eso les prestan menos atención. Por lo tanto, si planea incluir algo como un llamado a la acción en una columna lateral, debe ser lo suficientemente fuerte como para llamar la atención.

Por ejemplo, observe cómo Revista aplastante utiliza una ilustración colorida de un gato para llamar la atención sobre su formulario de suscripción al boletín en la columna de la derecha.

No es que el diseño centrado en el contenido sea apropiado para cada página de su sitio. Los sitios web a menudo combinan este diseño con un diseño estilo revista.

3. Diseño de revista

Como su nombre lo indica, este enfoque de diseño se usa ampliamente en revistas o sitios de noticias para mostrar una gran cantidad de historias diferentes.

Inspirados en el diseño impreso, permiten la combinación de titulares e imágenes para presentar historias. Esa puede ser una forma atractiva de transmitir lo que es esencialmente una lista de enlaces.

También es un excelente diseño para resaltar contenido que cambia regularmente. Es por eso que los sitios web de noticias como el poste de washington así que favorécelo.

Sin embargo, el diseño no está exento de inconvenientes. El diseño de una revista puede ser un desafío para que sea receptivo y, a menudo, requiere un cambio completo en el diseño para dispositivos de pantalla más pequeños.

Este estilo de diseño de sitio web también puede ser algo abrumador, con una gran cantidad de imágenes y titulares que piden atención.

La forma más efectiva de abordar este problema es crear una jerarquía visual clara. En otras palabras, haga algunas de las 'historias' más grandes que otras.

Por ejemplo, observe cómo el Moda El sitio web centra la atención en la imagen de la izquierda haciéndola considerablemente más grande. De hecho, le están diciendo al usuario dónde buscar primero.

También ayuda que el resto de la interfaz de usuario sea sencilla, con una tipografía limpia y barras de navegación sencillas. Si va a utilizar el diseño de la revista, deberá trabajar duro para mantener las cosas simples.

Otra desventaja potencial del diseño de la revista es que puede parecer 'cuadrado' porque la cuadrícula que lo subyace es muy visible. Sin embargo, puede mitigar eso inspirándose en nuestro próximo tipo de diseño.

4. Diseño de ruptura de cuadrícula

Los diseños que parecen romper su cuadrícula subyacente pueden ser visualmente mucho más interesantes que los enfoques más tradicionales. También son excelentes para llamar la atención sobre elementos particulares de la pantalla que se salen de las columnas habituales.

Tomemos, por ejemplo, el Sitio web del Festival VR de Arlés. Observe cómo llaman su atención sobre su barra de navegación al superponer dos columnas.

Otro uso práctico del diseño de división de cuadrícula es usarlo para superponer texto en una imagen de tal manera que llame la atención sobre la copia. Cuando una página web se superpone por completo al texto de una imagen, a menudo se puede perder. Sin embargo, como puedes ver en el ejemplo a continuaciónsi el texto se superpone parcialmente a la imagen, se destaca mucho más.

La desventaja de los diseños que rompen la cuadrícula es que es difícil hacerlo bien, especialmente cuando los sitios web deben ser receptivos. En verdad, la mayoría de los diseños innovadores no son nada por el estilo. Todavía hay una cuadrícula subyacente y todos los elementos de la pantalla encajan en ella. Es solo que la cuadrícula es mucho más compleja y, por lo tanto, no es tan obvia. Eso los hace difíciles de diseñar.

Su complejidad inherente es la razón por la que tiende a verlos utilizados por empresas dirigidas por el diseño, como agencias de diseño o marcas de moda. Demuestran un grado de sofisticación de diseño que atrae a un público en particular.

Si un diseño que rompe la cuadrícula parece demasiado complicado para su situación, pero aún desea hacer algo más innovador e inusual, considere un diseño de pantalla completa.

5. Diseño de pantalla completa

Los diseños de pantalla completa, como sugiere el nombre, caben en una sola pantalla sin necesidad de que el usuario se desplace. Eso los hace ideales para narraciones o presentaciones.

Tomar como ejemplo, Especies en Trozos. Este rico e interactivo La experiencia de presentación cuenta las historias de 30 especies comprometidas.

Como puede ver, los diseños de pantalla completa son mejores cuando se acompañan de imágenes impactantes. Eso los convierte en una excelente opción para sitios web ricos en fotografías, ilustraciones o videos.

No es que tengas que apegarte estrictamente al enfoque de pantalla única. A primera vista, el Roux en el sitio web de Parliament Square parece ser un sitio web de pantalla completa en el mismo sentido que Species in Pieces. Sus magníficas imágenes llenan toda la ventana gráfica.

Sin embargo, es posible navegar más abajo en la página para ver contenido adicional. Desafortunadamente, eso resalta un posible inconveniente con este enfoque de diseño. Los usuarios no siempre se dan cuenta de que pueden desplazarse y, por lo tanto, pueden perderse contenido valioso.

También debe considerar detenidamente cómo se adaptará el diseño a varios tamaños. Por ejemplo, ¿funcionará el enfoque de pantalla completa en un dispositivo móvil? Además, ¿las imágenes se recortarán a medida que cambie el tamaño de la pantalla o simplemente se reducirán? Puede encontrar rápidamente los puntos focales de las imágenes que se recortan fuera del área visible en tamaños más pequeños.

Dicho esto, si tiene imágenes impresionantes para mostrar, tendrá dificultades para encontrar un mejor diseño de diseño. Pero, si desea la opción de agregar alguna descripción y llamados a la acción junto con esas imágenes, puede considerar un diseño alternativo.

6. Diseño alternativo

El patrón de diseño alterno es uno de los más comunes en la web. Encontrará que se compone de una serie de bloques de contenido, cada uno de los cuales tiene un diseño de dos columnas. Los bloques suelen estar formados por una imagen en un lado y texto en el otro.

Lo que le da nombre es que la imagen alterna de lado. Entonces, el primer bloque tendrá el contenido a la izquierda y la imagen a la derecha, mientras que el siguiente bloque invierte ese diseño.

Es un enfoque de diseño especialmente favorecido cuando se explican las características o beneficios de un producto. Por ejemplo, productos de software como webydo utilizará la imagen para mostrar una característica y luego la copia para explicar cómo funciona o el beneficio que proporciona.

No es que estos bloques de contenido se limiten a imágenes y texto. A veces, los sitios reemplazan la imagen con un video. Del mismo modo, el lado del contenido del elemento podría incluir todo, desde íconos hasta testimonios o llamadas a la acción.

Por ejemplo, Kit de conversión incluye un testimonio y un llamado a la acción junto con su texto en cada bloque de contenido.

Parte de la razón por la que los bloques alternos son tan comunes es que son un enfoque de diseño simple con pocos inconvenientes. Si necesita comunicar varios puntos de venta, casi siempre es una opción de diseño confiable.

Por supuesto, sus requisitos pueden ser diferentes, por lo que otra opción a considerar es el diseño basado en tarjetas.

7. Diseños basados ​​en tarjetas

Los diseños de página basados ​​en tarjetas son otro enfoque de diseño común que verá en toda la web.

Los diseños basados ​​en tarjetas son una excelente manera de brindar a las personas una serie de opciones para que el usuario elija, presentándoles suficiente información sobre cada opción para tomar una decisión.

Eso los convierte en una opción popular para las páginas de listas de productos de los sitios de comercio electrónico. Permite que el sitio web muestre una imagen del producto, una descripción y el precio. Incluso puede agregar funciones como "guardar para más tarde", como puede ver en la Sitio web de Aso.

Sin embargo, encontrará sitios web que utilizan diseños basados ​​en tarjetas en cualquier situación en la que los usuarios necesiten seleccionar de una lista. Por ejemplo, otro uso típico sería mostrar una lista de artículos en un blog o sitio de noticias.

Un diseño basado en tarjetas le permite mostrar una imagen de la historia, el título y la descripción, así como cualquier detalle adicional sobre la publicación que desee incluir. Awwwards blog es un excelente ejemplo de este tipo de uso en acción.

Lo mejor de todo es que los diseños basados ​​en tarjetas funcionan bien de manera receptiva, y la cantidad de tarjetas en una fila se reduce lentamente a medida que disminuye el ancho disponible.

Sin embargo, hay un par de inconvenientes menores en el enfoque. Primero, las tarjetas funcionan mejor cuando incluyes la imagen. Eso significa que si tiene dificultades para encontrar fotos adecuadas para cada uno de los elementos de su lista, podría ser mejor con un diseño diferente.

El otro pequeño problema es con cantidades variables de contenido. Si una tarjeta tiene más contenido que otra, puede dejar un espacio en blanco dentro de la tarjeta o entre cada fila.

Una forma de mitigar este problema es no tratar de mantener las cartas en la misma fila, como se muestra en el siguiente ejemplo.

Sin embargo, este es un problema menor, lo que explica la adopción generalizada de este enfoque de diseño.

Otro diseño igualmente popular es el diseño de la imagen del héroe.

8. Disposición del héroe

El diseño de héroe lleva el nombre de las imágenes de héroe, esas imágenes grandes con superposiciones de texto que dominan las páginas de inicio en tantos sitios web. Apple hace un buen uso de la clásica imagen de héroe.
Pixave para MacOS lleva el diseño del héroe aún más al hacer que domine el diseño de su página de inicio.

Lo que hace que las imágenes destacadas sean tan predominantes es que te permiten diseñar tu propuesta de valor de manera impactante justo en el punto de entrada de su sitio web.

Como puedes ver desde el Pixave y Manzana Los sitios web que aparecen arriba suelen constar de una gran imagen de fondo, un título o eslogan y una descripción. Los diseños de héroe también suelen incluir una llamada a la acción destacada.

Si necesita explicar claramente lo que ofrece en su página de inicio o página de destino de una manera que llame la atención, entonces una imagen de héroe bien podría ser el camino a seguir. Sin embargo, ese es probablemente el alcance de su uso.

De vez en cuando verá el diseño de héroe utilizado en las páginas siguientes. Pero, en la mayoría de los casos, la imagen del héroe simplemente desvía la atención del contenido más valioso. Así que úsalo con cuidado.

Aparte de eso, hay un pequeño inconveniente en usar un diseño de héroe. Sí, son comunes, pero los usuarios están familiarizados con ellos y son efectivos.

Una opción de diseño considerablemente menos común es el diseño de pantalla dividida.

9. Diseño de pantalla dividida

Al igual que el diseño de pantalla completa, una pantalla dividida es una excelente manera de llamar la atención cuando los usuarios llegan por primera vez a su sitio web, como puede ver en la página de inicio de la empresa de diseño web abajo.

Lo que hace que el ejemplo anterior sea tan efectivo es que hay una razón clara para el diseño de pantalla dividida. El sitio web deja en claro que hay dos lados en su negocio: diseño y desarrollo.

Un ejemplo similar es cuando desea dar a los usuarios una opción binaria clara. Una pantalla dividida tiene mucho sentido en esa situación, ya que divide la pantalla en partes iguales entre las dos opciones.

Por ejemplo, la agencia de modelos. 62 Gestión utiliza una pantalla dividida para alentar a los usuarios a identificar si están buscando un modelo masculino o femenino.

Desafortunadamente, más allá de este número limitado de aplicaciones, hay pocas razones para adoptar un diseño de pantalla dividida. Es una opción de diseño relativamente limitante, y simplemente no hay muchos escenarios en los que sea apropiado. Sin embargo, en aquellos casos en los que lo es, es con diferencia la mejor opción.

Una opción similar que proporcionaría un poco más de flexibilidad es el diseño asimétrico.

10. Diseño asimétrico

Mientras que el diseño de pantalla dividida fuerza una división equitativa en el medio de la ventana gráfica, un diseño asimétrico le permite dividir la pantalla como mejor le parezca.

La ventaja de este diseño sobre la pantalla dividida es que permite agregar énfasis a un lado particular de la página. Cuanto más bienes raíces tiene un lado, más atención le das. Eso, a su vez, le permite identificar contenido primario y secundario.

Con la premisa de columnas primarias y secundarias en su lugar, puede utilizar el enfoque de varias maneras. Por ejemplo, Félix Lesouef usa el método en su sitio para dividir entre el contenido y la navegación.

Por el contrario, el Nutrir come El sitio web utiliza la segunda columna para permitirle ver la siguiente sección de su sitio web.

En muchos sentidos, el diseño asimétrico es una excelente opción. Es flexible, relativamente fácil de implementar y menos utilizado. Es una forma conveniente de hacer que su sitio web se vea diferente sin los dolores de cabeza de algunas de las otras opciones.

Cómo elegir un diseño

Al leer este artículo, ha dado el primer paso para elegir el diseño adecuado para su sitio. Ha aprendido qué tipo de opciones están disponibles para usted.

A continuación, debe tener una idea de qué opciones podrían ser apropiadas para su sitio. Una forma de hacerlo es mirar a sus competidores. Sin embargo, recomendaría no detenerse allí. El peligro es que los copie, y eso siempre lo pondrá un paso atrás.

En su lugar, eche un vistazo a los sitios de otros sectores que tienen tipos de contenido relacionados con el suyo. Si tiene un sitio web de folletos dirigido a una audiencia B2B, eche un vistazo a otros sitios similares. Del mismo modo, si tiene un sitio de comercio electrónico, observe el comercio electrónico en otros sectores.

A partir de ahí, trabaje con su diseñador para experimentar con algunos enfoques diferentes. Pídales que enmarquen algunas ideas basadas en diferentes diseños y vean cuál se adapta mejor a su contenido.

Si no puede tomar una decisión o le falta confianza en la dirección correcta, intente presentar las opciones a algunos usuarios y obtenga sus reacciones. No solo les preguntes qué prefieren, también pregúntales si detectaron contenido crítico o entendieron de qué se trataba la empresa.

En verdad, probablemente se encontrará seleccionando y eligiendo entre diferentes enfoques de diseño para diferentes partes de su sitio web, y eso está bien. Porque cuando se trata del diseño de un sitio web, es fundamental utilizar el diseño adecuado en el momento adecuado.