FELCO Construction

Contexto

FELCO General Construction trabaja en proyectos residenciales y comerciales en California. La web presenta la planificación de obra, la reforma y la gestión de proyectos. Para una oferta así no basta con enumerar servicios: también hay que mostrar el tipo de edificios en los que trabaja la empresa.

El reto

Unir una explicación clara de los servicios con ejemplos visuales de obra. Quien visita la web debe reconocer su tipo de proyecto, ver edificios parecidos y encontrar cómo hablar de él. La larga portada presenta la empresa paso a paso, y las galerías detalladas tienen páginas propias.

Qué hicimos

1. Tres líneas de servicio

   Preconstruction Planning, Remodeling and Updating y Construction Management tienen cada uno su tarjeta. Una foto, un título y una breve explicación ayudan a distinguir la planificación, la reforma y la dirección de obra.

2. La arquitectura en primer plano

   Una gran foto de un edificio terminado respalda el mensaje principal sobre construcción residencial y comercial. El titular se superpone a la imagen, así que se ve a la vez a qué se dedica la empresa y sobre qué trabaja.

3. Dos portfolios independientes

   La galería se divide en Residential Construction y Commercial Construction. Los tipos de edificio no se mezclan: cada visitante elige el área que le interesa y pasa a su propia selección.

4. Del primer vistazo a la consulta

   La portada recorre servicios, empresa, galería y contacto, y el menú salta directamente a cada bloque. Al final hay un formulario, un teléfono y la propuesta de hablar sobre un presupuesto.

Qué desarrollamos

Sistema visual

Un bloque amarillo de marca destaca sobre la navegación oscura y las secciones blancas. Las fotos de edificios y obras ocupan grandes superficies. Líneas amarillas bajo los títulos repiten el acento del logotipo y reúnen materiales muy distintos en un solo sistema.

Tipografía de la interfaz

Los tamaños de abajo se midieron en la web publicada con un viewport de 1180 × 757 px CSS, zoom al 100 % y DPR 1. Describen esa maquetación concreta, no tamaños fijos para todos los dispositivos.

Títulos

Avenir LT Heavy · archivo de peso propio; peso CSS 400

Titular de la primera pantalla

42 px / 46,2 px · espaciado 2,1 px (0,05 em)

Nombres de servicios

22 px / 24.2 px · Avenir LT Heavy

Texto principal

Helvetica Light · 15 px / 24 px · CSS weight 400

Navegación

Avenir LT Light · 14 px / 37 px

Títulos de sección

55 px · Avenir LT Heavy · line-height: normal

Logotipo y uso

El bloque de marca de la web es compuesto: un símbolo de casa con la letra F y el texto FELCO / GENERAL CONSTRUCTION compuesto aparte. Debajo se ve un fragmento real de la cabecera, por eso se mantienen las letras y espacios originales.

Imagen del símbolo

116 × 116 px · cuadrado 1:1

Tamaño del símbolo en la web

116 × 116 px CSS con un viewport de 1180 × 757

Texto FELCO

Bloque de texto 220 × 42 px CSS; letra 42 px / 42 px; espaciado 2,1 px

Línea GENERAL CONSTRUCTION

Bloque de texto 220 × 16,5 px CSS; letra 15 px / 16,5 px; espaciado 0,75 px

Los valores de color se comprobaron en el CSS de la web. Las muestras tipográficas son fragmentos de pantallas reales; los archivos de fuentes comerciales no se incluyen en este caso.

Recorridos y material

Primera pantalla → el servicio adecuado → galería residencial o comercial → Contact. Se puede leer la portada en orden o saltar desde el menú a la sección que interese. Las galerías separadas permiten ver las obras sin sobrecargar la página principal.

Promoción

Optimizamos la web para buscadores, configuramos una cuenta de Google Ads y pusimos en marcha la publicidad y la promoción en buscadores.

El resultado

Ya está online una web corporativa que presenta los servicios de construcción paso a paso, con galerías de obras separadas. Servicios, información de la empresa y puntos de contacto forman un recorrido claro; las fotos reales dan contexto visual a la oferta.