Mosaico Diseños de sitios web

Para estudios, fotógrafos y marcas visuales, un sitio web con diseño de mosaico requiere reglas reconocibles en lugar de una cuadrícula diferente en cada página. Las proporciones repetidas de los mosaicos, la tipografía y las relaciones de color mantienen el contenido variado dentro de un lenguaje de diseño coherente.

Más Diseños de sitios web de la categoría Diseño artístico

Otro Diseño artístico Diseños de sitios web

Sitio web completo con diseño moderno tipo mosaico

El sitio web de una agencia de diseño rara vez se limita a una sola pantalla. Incluye una página de inicio, una lista de proyectos y una página para cada caso. Las secciones "Acerca de" y "Contacto" se encuentran detrás de la misma navegación. El diseño tipo mosaico es lo que mantiene unificado todo: una misma escala tipográfica, una misma paleta de colores y una misma forma de tratar las imágenes desde la página de inicio hasta la sección más profunda.

Estilos globales que se mantienen en todas las páginas

Las páginas idénticas serían tediosas de navegar, por lo que la repetición reside en los estilos, mientras que los diseños permanecen libres. Lo que los visitantes reconocen se define una sola vez, a nivel de sitio web.

Un sistema de diseño tipo mosaico suele definir algunos elementos para todo el sitio:

  • Encabezados, texto principal y créditos tomados de una misma escala tipográfica.
  • Una paleta de colores que se repite en fondos, botones y superposiciones de imágenes.
  • Proporciones y espaciado que se repiten en cada listado.
  • Un tratamiento común para la acción principal, desde "Solicitar presupuesto" hasta "Contacto".

Nicepage mantiene esta capa en la configuración del tema, donde se definen las fuentes y los colores para todo el sitio. El encabezado y el pie de página se encuentran en el mismo lugar, por lo que un cambio realizado una vez se refleja en todas partes.

De la página de inicio a las secciones internas

Los visitantes rara vez se detienen en la página de inicio. La ruta suele dirigirse a un listado, luego a un caso de éxito y, finalmente, a la sección de contacto. Un sitio web se percibe coherente cuando cada paso parece una continuación del anterior.

Una agencia puede mantener la disposición más densa en la entrada y dejar que las secciones internas se desarrollen gradualmente. Un sitio web de fotografía suele hacer lo contrario, reservando las imágenes más grandes para las secciones internas. Un escaparate de productos puede mostrar un mosaico en las pantallas de categorías y cambiar a filas simples donde los precios son importantes.

Los diseños web completos se evalúan mejor en su conjunto. La página de inicio muestra el carácter del sitio, y las secciones internas demuestran si este se mantiene con textos más largos e imágenes más pequeñas.

Encabezado, pie de página y navegación fluida

La navegación cobra mayor importancia aquí, ya que gran parte del movimiento se realiza haciendo clic en las imágenes. El menú permanece en la misma posición en todo momento, y el pie de página repite las secciones principales, por lo que la navegación es predecible.

Los elementos recurrentes mantienen la cohesión del conjunto. Un estilo de tarjeta definido una sola vez aparece en el listado de trabajos, en los elementos relacionados y en el bloque de noticias, y todos se perciben como una misma familia.

La densidad es el elemento que varía entre las secciones. Una página de inicio puede estar recargada, una página de servicios puede estar casi vacía, y la diferencia sigue percibiéndose como un único diseño, con la tipografía, el espaciado y el tratamiento de las imágenes invariables.

Las adiciones posteriores siguen las mismas reglas. Un nuevo caso de estudio, un nuevo servicio o una sección de inicio de temporada heredan el encabezado, la escala tipográfica y las proporciones acordadas inicialmente.