510 Separar Diseños de sitios web

Diseño web dividido único para una sección en dos partes coherente

El diseño web dividido (Split) se centra en cómo una sección en dos partes se integra en el lenguaje visual de un sitio web más amplio. El propio bloque se divide en dos mitades conectadas, combinando habitualmente una imagen potente con un encabezado, texto y un botón.

Este enfoque de diseño web no implica que cada página deba repetir el mismo diseño dividido. En su lugar, la sección debe aplicar los mismos principios de color, tipografía, espaciado, estilo de imágenes y jerarquía que aportan coherencia al resto del sitio.

Integrar el bloque dividido en el lenguaje visual del sitio web

Una sección dividida puede tener un tratamiento visual en la página de inicio y otro en una página interna, pero ambas pueden pertenecer al mismo sistema de diseño del sitio.

Por ejemplo:

• una mitad con imagen oscura puede situarse junto a un área de texto clara compartiendo la misma paleta del proyecto;
• una imagen editorial grande puede combinarse con la tipografía definida en el sistema tipográfico del sitio;
• un bloque asimétrico puede seguir el mismo ritmo de espaciado utilizado en otras secciones;
• una llamada a la acción (CTA) puede utilizar el mismo estilo de botón presente en otras partes del sitio.

El Grid Element de Nicepage permite definir la estructura subyacente de dos áreas dentro de la sección.

Equilibrar contraste y consistencia

Las dos mitades deben ser lo bastante diferentes como para que la composición dividida resulte visible, pero sin parecer elementos de sitios web desconectados entre sí.

El tratamiento de las imágenes, el color de fondo, la alineación del texto, el espaciado y el peso visual pueden variar entre ambos lados. La consistencia surge de reglas de diseño compartidas, no de hacer que ambas mitades sean idénticas.

Usar el sistema de diseño del sitio para apoyar la sección

La configuración del sitio de Nicepage admite colores de tema mediante una combinación de colores global, mientras que el esquema de fuentes y los estilos tipográficos ayudan a mantener un formato de texto coherente en todas las páginas del proyecto.

Una sección dividida puede aprovechar estos ajustes compartidos al tiempo que enfatiza uno de los lados. El sistema de diseño respalda el bloque; no obliga a que el patrón dividido se convierta en un motivo repetitivo en todo el sitio.

Mantener la flexibilidad del diseño dividido en distintas páginas

Las diferentes páginas pueden emplear distintas composiciones divididas según su contenido. Una página de inicio puede utilizar un bloque de imagen e introducción más amplio, mientras que una página de servicios o portafolio puede optar por una sección en dos partes más sobria y con otras proporciones.

Lo que debe mantenerse constante es el lenguaje visual global del sitio: tipografía, relaciones cromáticas, estilo de imágenes, lógica de espaciado y tratamiento de las llamadas a la acción.

Preguntas frecuentes sobre diseño web dividido

¿Pueden mantenerse consistentes los colores del sitio en todas las páginas de Nicepage?

Sí. Los colores del tema se pueden configurar en los ajustes del sitio y aplicarse mediante una combinación de colores global en todas las páginas de un proyecto de Nicepage.

¿Puedo utilizar Google Fonts en la tipografía del sitio web?

Sí. Nicepage incluye Google Fonts para su uso en los entornos de edición compatibles, incluidos Desktop Applications, el plugin para WordPress y la extensión para Joomla.

¿Debe verse idéntica cada sección dividida en todo el sitio web?

No. Las distintas páginas pueden variar la ubicación de las imágenes, las proporciones y la densidad del contenido sin dejar de utilizar las mismas reglas generales de tipografía, color, espaciado y estilo visual.

¿Implica el diseño web dividido que todo el sitio deba usar un diseño dividido?

No. El formato dividido es un patrón de sección. Puede utilizarlo donde sea adecuado, mientras que el resto del sitio web emplea otras estructuras basadas en el mismo sistema de diseño.

Integrar el bloque dividido en el sistema de diseño del sitio web

Elija una sección dividida adecuada al contenido y, a continuación, ajuste la imagen, el texto, el botón, las proporciones y el comportamiento responsive en el editor de Nicepage. Aplique la tipografía, los colores, el espaciado y el estilo visual ya establecidos para que el bloque resulte distintivo sin perder conexión con el resto del sitio web.