La fila superior es la primera relación que se debe inspeccionar en la maqueta de un sitio web. Cuatro tarjetas de contacto idénticas están dispuestas horizontalmente, por lo que un ancho de pantalla reducido puede afectar su espaciado, el ajuste de línea del texto y su capacidad para mantenerse visualmente diferenciadas. Las etiquetas y los datos de oficina, teléfono, fax y correo electrónico deben seguir leyéndose con claridad cuando las tarjetas cambien de proporción o se apilen. Su tratamiento blanco compartido también debe mantenerse equilibrado frente al fondo azul marino oscuro, en lugar de convertirse en una franja excesivamente densa.
El formulario inferior crea una segunda zona de revisión. Su panel cian contiene el encabezado «Contáctenos», campos de entrada para nombre y correo electrónico, un campo de mensaje y el control Enviar. En anchos más estrechos, la disposición de los campos y el relleno del panel deben preservar una secuencia clara desde el encabezado hasta la entrada de datos y el envío. El panel debe conservar suficiente contraste para seguir siendo una zona separada sin hacer que la sección sea innecesariamente alta. El enlace mailto de la tarjeta de correo electrónico debe seguir siendo identificable a medida que cambia el diseño de la tarjeta. Por lo tanto, la revisión de una maqueta adaptable se centra en aspectos concretos de presentación: cómo se apilan las cuatro tarjetas, cómo se ajustan los datos de contacto en varias líneas, qué tan anchos se muestran los campos del formulario y si el panel cian aún equilibra el fondo azul marino. Estas comprobaciones evalúan el comportamiento visual de este bloque dentro de la presentación más amplia de un sitio web, no la adaptabilidad de un sitio completo.
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.