La presentación inicial se apoya en una gran imagen arquitectónica situada junto a varias zonas de texto, entre ellas una introducción, una lista de cuatro puntos y un botón «Leer más». En pantallas más estrechas, la relación entre el tamaño de la imagen, el ancho del texto, el espaciado de la lista y la ubicación del botón debe revisarse minuciosamente, ya que las variaciones en el espacio disponible pueden alterar la primera impresión deseada. La navegación principal y su menú móvil desplegable también requieren atención para que Inicio, Quiénes somos y Contacto sigan siendo fáciles de identificar sin sobrecargar la cabecera.
Las dos secciones de proyectos destacados forman otro patrón sensible al diseño adaptativo. Sus columnas de imagen y texto se alternan de una sección a otra, por lo que el orden de la fotografía, la descripción y el botón debe seguir siendo intuitivo cuando las columnas se apilen. Las seis tarjetas de capacidades aportan una densidad de contenido recurrente, mientras que la galería de ocho imágenes crea una zona visual aún más densa. La revisión debe centrarse en la escala de las imágenes, los espacios entre ellas, el texto al pasar el cursor y el comportamiento de las imágenes ampliadas, de modo que la galería no sobrecargue el contenido circundante en pantallas más pequeñas.
La parte inferior de la página añade tres tarjetas de perfil, un formulario horizontal de suscripción al boletín y un área de contacto de tres columnas con un formulario de consulta independiente. Conviene revisar estas zonas en cuanto al tamaño de los retratos, el ancho de los campos, el apilamiento de columnas y la relación entre los datos de contacto y los enlaces a los servicios. La sección de suscripción en oro pálido y el pie de página oscuro ofrecen además puntos de contraste muy útiles al evaluar la presentación adaptativa completa.
Al utilizar Creador de maquetas de sitios web, podrá ajustar los colores, las fuentes, el encabezado y el pie de página, el diseño, las columnas y otros elementos de diseño, así como el contenido y las imágenes.
Usa los Modos adaptables para ver cómo se ve el diseño web en pantallas grandes, ordenadores de escritorio, portátiles, tabletas y teléfonos. Cambia entre las vistas disponibles para comparar el mismo diseño en diferentes anchos de pantalla y revisa cómo la tipografía, las imágenes, el espaciado, la navegación y otros contenidos se adaptan a cada dispositivo.
Nicepage ofrece herramientas de diseño web adaptable para ajustar las vistas de cada dispositivo cuando el diseño inicial necesita ajustes. Puedes personalizar las vistas móviles por separado, cambiar el tamaño y la posición de los elementos, adaptar cuadrículas, listas y galerías, y ocultar elementos o bloques seleccionados en tamaños de pantalla específicos. Esto permite desarrollar una maqueta web adaptable en lugar de evaluar el diseño en un único tamaño de escritorio fijo.
Usa Vista previa de página en vivo para revisar el diseño sin la interfaz de edición. La vista previa instantánea puede ocultar el Navegador de páginas, el Panel de propiedades, las selecciones y los marcos, lo que facilita la evaluación de la presentación general, la jerarquía del contenido y el diseño adaptable tal como lo vería un visitante.
Este flujo de trabajo convierte la plantilla en una útil maqueta de sitio web adaptable para visualizar, comparar y perfeccionar cómo se verá el mismo diseño en diferentes tamaños de pantalla.