Antigua Web

La nueva y próxima web de Promociones Ruve está, actualmente, en plena elaboración, a pesar que su actual web acosa claramente el rápido paso de los años ante la realidad del diseño en Internet y las nuevas tecnologías.

Es por eso que se decide realizar un completo lavado de cara y una mejora en la imagen de marca de la empresa.

Con esa idea se plantea un concepto de página basada únicamente en producto en stock. La crisis ha golpeado muy seriamente la industria de la construcción y necesita aguantar las últimas embestidas, por ello se define bien el modelo de negocio en internet, eliminando elementos superfluos y dirigiendo al cliente final donde interesa al constructor, sus obras en stock, esperando la oportunidad para crear nuevas promociones.

Qiero propone dar un tono homogéneo a la página, eliminar la dominancia de grises, recuperar el azul original de la marca, usando una sencilla gama cromática para que las imágenes adquieran importancia.

La nueva cabecera

La página de bienvenida se centra en la nueva imagen de la empresa, manteniendo su logotipo, pues hablamos de una constructora con tradición en la zona del Baix Llobregat y que todo el mundo conoce, pero volviendo al azul oscuro que la caracterizó en sus primeros años. El azul denota frialdad e inteligencia, y en estos momentos es lo que la empresa necesita, cabeza. Se usa, además un actualísimo verde pistacho para los enlaces, lo cual le aporta juventud, vida y espontaneidad.

La cabecera muestra lo que la empresa ha luchado, desde 1987, 30 años. Un valor añadido, en estos tiempos, en el sector de la construcción.

La ventana inicial de presentación de la página se adapta por formato a cualquier pantalla o dispositivo, y hace de introducción al navegante, para continuar con la visita siguiendo la flecha hacia abajo.

El producto

La propuesta para las obras nuevas de Ruve, o la obra estrella, se basa en mostrar bien el producto. La empresa ofrece pisos de acabados excepcionales, con diseño actual, maderas, colores claros con toques vivos, por tanto hay que mostrar ese producto en fotos de gran tamaño. Es lo que al cliente le va a entrar por la vista, es la primera referencia que va a tener tras esa pantalla azulada de introducción.

Las tipografías usadas son una mezcla bastante actual de tipos, y que reconozco ultimamente suelo utilizar bastante. Para los titulares uso una Palatino negrita cursiva. Para subtitulares, menus y textos pequeños, una Lato light, que es más legible y actual. No se entenderían en una web moderna unos textos en una serifa estilo Palatino, a no ser que el producto invitase a usarla.

Stock

La claridad y sencillez en las formas es la línea que se marca. Al haber tres tipos de productos, se definen en tres columnas y se hace un resumen de cada disponibilidad en la página inicial. Después se muestra cada elemento de forma más detallada una vez se ha hecho clic.

Gráficamente se utilizan filetes de 1 punto para separar items, y se redirige al usuario gracias a grandes botones azules con flechas blancas.

Cómo actúa el visitante en la página es un reto al diseñar la interfaz de navegación, y hay que hacerlo con coherencia.

En los extractos de producto invertimos el uso de las tipografías. Aquí para dar enfasis al titular usamos la sin serfia, que se lee mejor.

El footer

Hoy en día cada vez tiene mayor importancia el diseño de un pie de página o footer. En este caso, siguiendo con la filosofía que hemos implantado en la web de Ruve, lo sencillo se vuelve atractivo.

Usamos un color gris para el apartado del boletín de noticias, con unas cariñosas palabras para el visitante acerca de su privacidad, y un sencillo campo de ingreso de correo con llamativo botón de suscripción, para facilitar las conversiones en la página.

El pie lo rematamos con el azul de Ruve, unos sencillos menús llamando la atención sobre el blog, y una franja azul oscura para información sobre el copyright y el desarrollador.

La página de obra

El elemento estrella del sitio, además de la home, es la parte de producto, la página de obra.

Siguiendo la gráfica limpia y nítida, basada en fondos blancos y los nuevos azules, se plantea una estructura de un solo cuerpo que engloba todos los apartados que interesan al posible comprador.

La zona principal de la obra, muestra elementos como la dirección, la población, número de viviendas, locales y parkings. Una gran foto de obra, junto a su titular y la descripción, completan la primera parte de esta página. Hay que comentar que en esta sección se implementa un formulario de contacto, que como la obra se encuentra ya vendida, hemos eliminado para redirigir los mails al formulario principal de contacto.

La segunda sección, que no mostramos aquí, corresponde a la de tipologías de pisos.

La siguiente muestra la gama de precios de todos los pisos. Desde plantas mayores a menores. E intenta que sea lo más clara y objetiva posible. De un vistazo se aprecia qué pisos están vendidos y cuáles disponibles. Los planos pueden abrirse y visualizarse con más detalle desde el propio listado.

El cuarto punto de esta página muestra la ubicación de la obra, descripción de su acceso, tranportes públicos, y un plano basado en los mapas de Google.

Finalmente se remata la página de obra con una galería fotográfica de renders de interior y exterior, para que los posibles compradores puedan entender mejor el proyecto.

Histórico

Al "book" de la empresa, el tedioso y que a nadie interesa apartado de Histórico, se la ha aplicado un diseño diferente en cuanto a navegación, basado en un proyecto de Javascript

Se ha generado una especie de barra temporal donde al hacer clic en cada uno de los años, se desplazan horizontalmente las obras realizadas en la empresa. Un toque nuevo que rompe los esquemas de la navegación en páginas web.

A todas las fotografías se le ha subido el contraste, se le ha dado un poco más de intensidad en el color, y se le ha aplicado una capa blanca al 10% de transparencia, para adquirir una tonalidad más personalizada.

Compartir en Facebook
Compartir en Twitter