11 diseños de sitios web que hicieron brillar el contenido en 2017

¿Por qué la gente realmente visita sitios web? En la mayoría de los casos, la razón principal detrás de cada visita es el contenido. El contenido es de suma importancia y cada diseñador quiere presentarlo de la manera más útil e intuitiva. No es sorprendente, entonces, que seleccionar un diseño para su contenido sea una de las primeras cosas que hacen los diseñadores cuando comienzan un nuevo proyecto.

Muchos diseñadores creen que el diseño de cada sitio web en el que trabajan debe ser completamente único para satisfacer los objetivos del proyecto; esto está lejos de ser verdad. Si visita sitios web populares, notará que muchos de ellos usan diseños similares. Esto no es una coincidencia o hecho por pereza, es porque estos diseños tienen tres ventajas significativas:

  • Son utilizables. Los diseños comunes se han vuelto tan comunes porque han demostrado que los usuarios pueden trabajar con ellos.
  • Son familiares Se crea una buena experiencia de usuario al crear un sentido de familiaridad con los usuarios. Los visitantes sienten una placentera sensación de deja-vu cuando ven las características familiares establecidas como es de esperar. Como resultado, las personas dedicarán tiempo a digerir el contenido en lugar de centrarse en el diseño único de la página.
  • Ellos ahorran dinero. Reutilizar los diseños existentes es un ahorro de tiempo. Los diseñadores pasarán menos tiempo experimentando con el diseño y se centrarán más en la jerarquía visual y otros aspectos del diseño que tienen un impacto directo en la experiencia del usuario.

Si bien cada proyecto es único y requiere un enfoque individual, es útil estar familiarizado con los diseños comunes. En este artículo, veremos 11 diseños muy comunes que puedes encontrar en innumerables sitios hoy.

1. Columna única.

Los diseños de una sola columna presentan el contenido principal en una sola columna vertical. Este tipo de diseño es quizás el más simple de esta lista y es el más fácil de navegar para los usuarios. Los visitantes simplemente se desplazan hacia abajo para ver más contenido.

A pesar de su simplicidad, los diseños de una sola columna son bastante populares entre muchos sitios web. La revolución móvil también tuvo su impacto en la popularidad de este tipo de diseño: los diseños de una sola columna se ajustan perfectamente a las pantallas móviles.

Cuando usarlo

Este diseño encuentra aplicación en muchos blogs personales basados ​​en principios de diseño minimalistas. Este es un diseño común para microblogs como Tumblr.

Medium, una popular plataforma de blogs, utiliza este tipo de diseño para presentar sus historias. Todos los artículos en Medium se presentan en un diseño de columna única.

Consejos de diseño

  • Considere los menús "fijos" para páginas largas. Dado que el diseño de una sola columna se usa a menudo para páginas de desplazamiento largo, es esencial mantener la navegación siempre a la vista. La "navegación fija" lo ayuda a evitar que los visitantes necesiten desplazarse hasta la parte superior de la página para navegar.
Fuente de la imagen: codemyui

2. Pantalla dividida

Un diseño de pantalla dividida (o una pantalla dividida en dos) es perfecto para una página que tiene dos piezas principales de contenido de igual importancia. Permite a los diseñadores mostrar ambos elementos simultáneamente mientras les da la misma consideración.

Se muestran dos elementos centrales simultáneamente. Fuente de la imagen: 62 modelos

Cuando usarlo

Los diseños de pantalla dividida son perfectos cuando su sitio ofrece dos variaciones drásticamente diferentes del recorrido del usuario, como dos tipos diferentes de instrucciones como vemos en el ejemplo de Dropbox a continuación.

Los diseños de pantalla dividida también son ideales para el contraste, y es por eso que los diseñadores a menudo usan este diseño para poner dos elementos uno contra el otro.

Las características opuestas de la dualidad (colores opuestos). Fuente de la imagen: Personalizaciones de Google Star Wars

Consejos de diseño.

  • Evite usar demasiado contenido en secciones divididas. Los diseños de pantalla dividida no se expanden bien a medida que el contenido crece, por lo que es mejor evitar elegir este tipo de diseño si necesita proporcionar mucha información textual o visual en secciones divididas.
  • Considera agregar animación. Puede crear una experiencia más dinámica incorporando detalles animados.
Fuente de la imagen: Chéjov está vivo

La asimetría es la falta de igualdad entre dos lados del diseño. La asimetría es una técnica favorita desde hace mucho tiempo en el mundo del arte, y recientemente se ha vuelto popular entre los diseñadores web.

Muchas personas confunden la asimetría con el desequilibrio, pero, de hecho, el objetivo de la asimetría es crear un equilibrio cuando es imposible o no deseable usar el mismo peso para dos secciones. El uso de la asimetría permite crear tensión y dinamismo, y la asimetría facilita un mejor comportamiento de escaneo al enfocar la atención del usuario en objetos individuales (puntos focales). Al cambiar el ancho, la escala y el color de cada contenido asimétrico, el diseñador insta al visitante a mantenerse visualmente comprometido.

Cuando usarlo

Este tipo de diseño se puede usar cuando los diseñadores desean crear diseños interesantes e inesperados, sin dejar de proporcionar un énfasis direccional. Aplicada adecuadamente, la asimetría puede crear un espacio activo que guía el ojo de un elemento a otro, incluso a través del vacío. Considere cómo Dropbox muestra claramente los puntos de enfoque en el siguiente ejemplo.

La asimetría hace que la página de inicio de Dropbox parezca más enérgica.

Consejos de diseño.

  • Asegúrese de que su contenido se pueda presentar en un diseño asimétrico. Un diseño asimétrico no es práctico para todos los sitios. Es probable que funcione mejor para diseños minimalistas.
  • Agrega foco con color. La asimetría se basa en la idea de que un objeto con más peso visual llamará la atención primero. Puede usar elementos con alto contraste de color para agregar peso visual a partes específicas del diseño.
El alto contraste de color agrega peso visual a partes específicas del diseño. Fuente de la imagen: Cultura PL

4. Una cuadrícula de cartas.

Las tarjetas son excelentes contenedores para información en la que se puede hacer clic, ya que permiten a los diseñadores presentar una gran cantidad de información de manera digerible. Las vistas previas del tamaño de un bocado (generalmente una imagen y una breve descripción) ayudan a los visitantes a encontrar el contenido que les gusta y a profundizar en los detalles haciendo clic o tocando la tarjeta.

Lo más importante sobre una cuadrícula de tarjetas es que este tipo de diseño es casi infinitamente manipulable. Las cuadrículas pueden variar en tamaño, espacio y el número de columnas, y el estilo de las tarjetas puede variar según el tamaño de la pantalla (las tarjetas se pueden reorganizar para adaptarse a cualquier pantalla). Es por eso que las cuadrículas de tarjetas funcionan tan bien con diseños receptivos.

Cuando usarlo

Un diseño de cuadrícula de tarjetas es bueno para sitios con mucho contenido que muestran muchos elementos con la misma jerarquía.

YouTube tiene un diseño de cuadrícula estricto; Las filas rectas de tarjetas se agrupan en categorías.Cada pin en el tablero de Pinterest se representa como una tarjeta.

Consejos de diseño.

  • Haga que se pueda hacer clic en toda la tarjeta, no solo en partes específicas. La interacción del usuario con una tarjeta es mucho más cómoda cuando los usuarios no tienen que hacer clic con precisión en el título o la imagen de una tarjeta para acceder a los detalles del contenido.
  • Si su tarjeta contiene una imagen, considere cómo se verá en una pantalla más pequeña. Una imagen que no se escala bien y se vuelve ilegible en pantallas pequeñas crea una mala experiencia de usuario.
  • Presta atención al espacio en blanco entre las tarjetas porque influye en cómo navegan los visitantes. Más espacio entre las tarjetas hace que la navegación sea más lenta, pero los visitantes prestarán más atención a cada tarjeta. El espacio mínimo permite un escaneo rápido, pero también aumenta los riesgos de que los visitantes puedan pasar por alto algún contenido.
  • Es posible incorporar comentarios animados. La tarjeta aparecerá como un elemento en el que se puede hacer clic.
Smashing Magazine tiene excelentes comentarios animados para sus tarjetas.

Este es quizás el diseño más complejo mencionado en esta publicación. Como su nombre lo indica, este diseño se popularizó inicialmente en periódicos y revistas, que tenían problemas para presentar grandes cantidades de información al lector de una manera fácil de seguir. Los diseñadores de impresión utilizaron el sistema de cuadrícula para este propósito. El diseño se construye utilizando una cuadrícula modular que permite flexibilidad: un diseño de varias columnas utiliza un peso visual diferente para priorizar la información.

El diseño de la revista permite a los lectores escanear, leer. y entender una página rápidamente Fuente de la imagen: New York Times

Al igual que las revistas en papel, las revistas digitales utilizan una cuadrícula de varias columnas que le permite crear una jerarquía compleja e integrar texto e ilustraciones. El objetivo principal es el mismo: los visitantes deben poder escanear, leer y comprender una página rápidamente. Los diseñadores se esfuerzan por crear un ritmo visual. Intentan que sea más fácil para el ojo escanear las secciones de la página y permitir que el ojo viaje naturalmente de un bloque a otro. Al mismo tiempo, el diseñador intenta evitar que los diferentes bloques compitan por la atención.

Cuando usarlo

El diseño de la revista es una buena opción para publicaciones que tienen una jerarquía compleja con grandes cantidades de contenido en una página. Sin el uso efectivo de una cuadrícula, es probable que todo el contenido de la página de inicio parezca más desordenado y menos organizado.

Un diseño estilo revista es el mejor para los sitios de noticias que tienen una gran cantidad de contenido actualizado regularmente en varias categorías.

Consejos de diseño.

  • Este diseño enfatiza los titulares y las imágenes. El tamaño del título / imagen está directamente relacionado con la atención que recibe. Los elementos más destacados atraen la atención de un usuario más rápido que el menos destacado. Tome el New York Times, por ejemplo: el contenido más importante de la página tiene miniaturas más grandes, titulares más grandes y texto más detallado.
The New York Times utiliza un tamaño diferente para el texto para crear un sentido de importancia: los tamaños de texto varían para crear una jerarquía visual.
  • Diseñar una cuadrícula requiere atención tanto en los ritmos horizontales como verticales, y son igualmente importantes si desea crear un buen diseño. Considere la diferencia entre los siguientes ejemplos. En el primer ejemplo, la cuadrícula es consistente con el ancho de columna y el espaciado horizontal, pero el espaciado vertical variado crea ruido visual. En el segundo caso, el espaciado horizontal de la columna y el espaciado vertical del elemento son consistentes, y esto hace que la estructura general parezca más limpia y más cómoda para el usuario que consume visualmente el contenido.

6. Cajas.

Este diseño tiene un cuadro grande de ancho de encabezado y algunos cuadros más pequeños que ocupan una parte del espacio de la pantalla del cuadro más grande. El número de cajas más pequeñas puede variar de dos a cinco. Cada uno de los cuadros puede ser un enlace que conduce a una página más grande y compleja.

Cuando usarlo

Este es un diseño bastante versátil que se puede usar tanto para sitios similares a carteras individuales como para sitios web corporativos / de comercio electrónico.

Fuente de la imagen: mrporter

Consejos de diseño.

  • Conecte cajas para contar una historia. La caja grande se puede utilizar para exhibir productos, mientras que las cajas más pequeñas pueden ofrecer más información sobre el producto.
Fuente de la imagen: Microsoft Surface

La navegación es una parte crítica de cualquier sitio web: el menú principal es lo primero que buscan la mayoría de los usuarios cuando quieren navegar. Junto con la navegación horizontal en la parte superior, es posible mantener a la vista las opciones del menú colocándolo en una barra lateral fija. La barra lateral es una columna vertical en la parte izquierda o derecha de la página. Para este diseño, la barra lateral permanece estacionaria y siempre permanece visible mientras el resto de la página cambia a medida que los usuarios desplazan la página hacia abajo. De esta manera, la navegación permanece accesible.

Cuando usarlo

Este diseño funciona bien para sitios web con un número relativamente limitado de opciones de navegación. Es preferible que todas las opciones estén a la vista cuando un usuario ingrese a la página.

Fuente de la imagen: measponte

Consejos de diseño.

  • Las barras laterales también pueden contener contenido que no sea o además de un menú, como enlaces de redes sociales, información de contacto o cualquier otra cosa que desee que los visitantes encuentren fácilmente.
Trefecta proporciona opciones de cambio de idioma y uso compartido de páginas en la barra lateral.

Este diseño se basa en la idea de que usar imágenes en el diseño es la forma más rápida de vender un producto. Las imágenes tienen la oportunidad de crear una conexión emocional con los visitantes: una fotografía o ilustración grande y audaz de un objeto hace una declaración contundente y crea una primera impresión sorprendente.

Cuando usarlo

Este diseño es excelente cuando necesita demostrar un solo producto / servicio y centrar toda la atención del usuario en él.

La falta de otros elementos en este diseño dirige la atención del usuario hacia el producto.

Con este tipo de diseño, es posible construir una experiencia emocional realmente inmersiva. Un gran ejemplo es Species in Pieces, que ofrece una experiencia rica y crea conciencia sobre las especies en peligro de extinción.

Fuente de la imagen: Especies en pedazos

Consejos de diseño.

  • Asegúrate de que tu gráfico sea lo suficientemente bueno como para aparecer destacado. La imagen, la foto o la ilustración deben ser relevantes para el mensaje que desea entregar y de alta calidad.
  • Considera la tipografía. La tipografía acompaña a la imagen. El tamaño, el peso de la tipografía y el color son propiedades de una tipografía que deben usarse para reforzar el diseño.

9. Diseño en forma de F.

Este tipo de diseño se creó en función de la forma en que los usuarios leen el contenido en la web. El patrón de escaneo en forma de F, originalmente definido por NNGroup, establece que los usuarios suelen escanear bloques pesados ​​de contenido en un patrón que se parece a la letra F o E. Nuestros ojos comienzan en la esquina superior derecha de la página, escanean horizontalmente y luego desplácese a la línea siguiente y haga lo mismo una y otra vez hasta encontrar algo que nos llame la atención (contenido interesante). Este patrón de escaneo es relevante no solo para usuarios de escritorio sino también para usuarios móviles.

Cuando usarlo

Este diseño es bueno para las páginas que necesitan presentar muchas opciones diferentes y permiten a los usuarios escanearlas rápidamente. Los visitantes responderán mejor al diseño del patrón F, que imita el patrón de escaneo natural. Esto es útil para la página de inicio de un sitio de noticias o página que contiene resultados de búsqueda.

The New Yorker utiliza un diseño en forma de F en su página de inicio.

Consejos de diseño.

  • Ajuste el contenido de acuerdo con el comportamiento de escaneo. Vale la pena colocar el contenido más importante en los lados izquierdo y derecho de la página, donde el usuario comienza y finaliza su escaneo horizontal. Cuando los visitantes llegan al final de la fila, hacen una pausa por una fracción de segundo antes de pasar a la siguiente fila, y esta pausa le brinda la oportunidad de presentar el contenido.
  • Use señales visuales para guiar al visitante. Es posible enfocar la atención del usuario en un elemento específico al ponerle más peso visual. Por ejemplo, puede resaltar palabras clave dentro de un texto para enfocar la atención del usuario.

10. Diseño en forma de Z.

El diseño del patrón Z también imita los hábitos de escaneo naturales. Los visitantes del sitio (de las culturas occidentales) comienzan en la esquina superior izquierda. Escanean desde la parte superior izquierda a la parte superior derecha, formando una línea horizontal. Sin embargo, el siguiente paso es un poco diferente: en lugar de desplegarse directamente, como en el patrón en forma de F, sus ojos se desplazan hacia abajo y hacia el lado izquierdo de la página, creando una línea diagonal. Por último, la mirada de nuevo hacia la derecha nuevamente, formando una segunda línea horizontal.

Cuando usarlo

Mientras que el patrón F es mejor para escanear mucho contenido, el patrón Z es más adecuado para sitios con un objetivo singular y menos contenido. Este patrón es efectivo para dirigir la atención del usuario a puntos específicos mediante el uso de imágenes, texto y CTA bien ubicados.

Este diseño es excelente cuando un sitio tiene una agenda específica o un llamado a la acción con el que se supone que los usuarios deben interactuar. Fuente de la imagen: Basecamp

Consejos de diseño.

  • Involucre a los usuarios con un zigzag (o un patrón Z continuo). Es posible involucrar a los usuarios en el escaneo alternando texto e imágenes varias veces para crear un zigzag.
Un patrón de zig-zag es un patrón Z repetido varias veces en la misma página. Los zig-zags crean un ritmo que mantiene a los visitantes interesados. Fuente de la imagen: Evernote

El elemento central de este diseño es una gran foto que se utiliza como fondo para la página. Se utiliza para presentar a los visitantes el contenido del sitio. Este diseño tiene la oportunidad de crear una primera impresión fuerte y alienta la interacción del usuario.

Cuando usarlo

Este diseño es excelente cuando quieres decir menos y mostrar más.

Fuente de la imagen: Buscando Siria

Consejos de diseño.

  • Elija una imagen de fondo con cuidado. Dado que el diseño se basa en una sola imagen, es esencial seleccionar la correcta. Una imagen irrelevante puede confundir fácilmente a los visitantes.
  • Use videos en lugar de imágenes para atraer visitantes. Puede valer la pena usar un video en lugar de una foto, especialmente cuando necesitas demostrar algo en acción.
El video le brinda una mejor oportunidad para atraer a sus visitantes a través de una imagen estática. Fuente de la imagen: Tesla
  • No permita que el diseño reduzca la legibilidad. El texto que usa como una superposición sobre la imagen debe ser lo suficientemente contrastante como para poder leerlo. Si el texto no tiene suficiente contraste, considere agregar una superposición a la imagen.
Fuente de la imagen: Google Wallet

Al diseñar un sitio, es importante recordar que el contenido siempre es el rey. El objetivo principal del sitio web sigue siendo la publicación de contenido fácilmente digerible. Entre muchas variaciones de contenido, es esencial seleccionar el que haga brillar su contenido.

Publicado originalmente en theblog.adobe.com el 13 de diciembre de 2017.