Multitech Auto Repair: diseño web en Figma y Framer para un taller especialista en coches europeos

Una web que se parece al taller

La home se abre sobre el propio taller: la puerta arriba, las luces encendidas, un coche en el foso y un solo botón naranja. Todo lo que el cliente ve a partir de aquí, del rótulo del edificio a la factura y a esta pantalla, es la misma marca.

De una plantilla a una marca

La web anterior era una plantilla genérica: fondo negro, un cian que no era de nadie, renders de stock de coches que el taller nunca había tocado. Buenos mecánicos con una presencia online invisible. Un especialista independiente en coches europeos compite con los servicios oficiales de los concesionarios sobre todo en una cosa, la confianza, y en internet la confianza es percepción. El encargo era simple: la web tenía que parecer tan precisa como el trabajo.

Primero el concepto, en Figma

Antes de construir nada, toda la web se diseñó en Figma: un moodboard y una exploración de color para comprobar que la paleta de la marca aguantaba en pantalla, y después la home. Trabajar sobre un concepto aprobado evitó sorpresas en Framer y ahorró rondas de revisión.

El móvil se diseñó a la vez, no después

La versión de móvil se dibujó al mismo tiempo que la de escritorio: la persiana abierta, las marcas y el mapa, todo en Figma antes de construir. La mayoría de los clientes de un taller local llegan desde el móvil, muchas veces de pie junto al coche, así que la maquetación móvil fue una decisión de diseño, no un ajuste de exportación. Más abajo verás las mismas pantallas tal y como salieron en Framer.

Un sistema de diseño heredado de la marca

La identidad ya fijaba la paleta y las tipografías: F37 Aria para los titulares, Geist Mono para la navegación y los datos técnicos, Geist para leer. Nueve colores con una función cada uno: Steel para las superficies, Carbon para el texto y las secciones oscuras, un único naranja Ignition reservado para las acciones. En la web esas reglas se convirtieron en tokens, estilos de texto y componentes, construidos una vez y usados en todas las páginas. El sistema completo está en el proyecto de identidad.

De Figma a Framer: qué cambió y por qué

A la izquierda, el concepto aprobado en Figma. A la derecha, la web publicada, sección a sección, Top Services incluido. El concepto es el mapa; la web se termina en el navegador. Top Services es el caso más claro: en Figma la tabla de servicios iba bajo el título y el chasis debajo. En producción la tabla subió encima del coche, porque el módulo queda fijo al hacer scroll y no puede crecer, y con la tabla arriba se libera la altura que necesita el chasis. El texto de relleno pasó a ser el copy real del taller y la nota de Google se actualizó a la real. Lo que no cambió es la idea que más importaba: la persiana del garaje llegó intacta del primer frame de Figma a la web publicada.

La segunda mitad de la página, antes y después de producción

Marcas destacadas, financiación, galería, reseñas y mapa. La estructura aguantó; los detalles se movieron. La sección de marcas ganó los cinco emblemas y el render real, el bloque de financiación incorporó los proveedores del taller y una llamada a la acción, y la galería pasó del stock al taller de verdad. Un archivo de Figma es una promesa; así es cuando se cumple.

Una primera impresión en movimiento

Seis fotogramas de un solo scroll: puerta cerrada, medio abierta, el coche a oscuras, las luces encendiéndose, el titular y el botón.

La home se abre sobre una persiana de garaje cerrada con el emblema encima. Al hacer scroll, la persiana sube, las luces se encienden y aparece el coche. Cuenta qué es el taller antes de leer una palabra, y no cuesta nada en tiempo de carga: no hay ningún archivo de vídeo, la página simplemente responde al scroll.

Los servicios se muestran sobre el coche, no en un menú

La mayoría de las webs de talleres esconden sus servicios en un desplegable. Aquí son la pieza central de la home. Eliges un servicio y un coche transparente ilumina las piezas que toca. En el móvil la tabla se convierte en un desplegable y el coche se pone en vertical; la idea es la misma.

Seis servicios, un coche

Fluidos y filtros, puesta a punto, motor y transmisión, frenos y suspensión, aire acondicionado y carga, inspección digital: seis estados del mismo chasis, cada uno con su fila de iconos de servicio debajo. Convierte una lista en algo que un cliente entiende en segundos. El coche transparente, los estados del chasis y el modelo 3D son CGI de Gabriel Naretto.

Toca una pieza, lee qué incluye y reserva ahí mismo

Cada servicio abre una tarjeta con el intervalo recomendado, qué cubre el trabajo y el botón de reserva. Nadie tiene que ir a buscar la página de citas.

Gira el coche

Un visor 3D permite al cliente girar el coche y ver dónde está cada pieza. Es el mismo modelo que mueve los seis estados, así que el módulo se mantiene ligero y coherente.

Un plan de mantenimiento que un cliente puede leer

Cada servicio por kilometraje, en una tabla que se lee de un vistazo y responde a la pregunta que de verdad se hace el dueño de un coche europeo: ¿qué necesita mi coche a los 100.000 kilómetros? En el móvil la tabla se desplaza en horizontal y conserva su leyenda.

Responder a las cuatro preguntas antes de pedir la cita

Un cliente con un coche europeo pregunta cuatro cosas: ¿me puedo fiar?, ¿conoces mi coche?, ¿cuánto me va a costar?, ¿dónde estás? La home las responde en ese orden. Primero, la confianza: certificaciones y partners, la garantía de 24 meses, el traslado gratuito a casa y la entrega del coche fuera de horario.

¿Conoces mi coche?

Las cinco marcas europeas en las que se especializa el taller, cada una con su sección y su fotografía. Arquitectura y coches en escala de grises, para que el único naranja de la página conserve su significado.

¿Cuánto me va a costar?

Financiación con Affirm, Sunbit y Klarna, explicada en tres pasos con los proveedores con los que trabaja el taller. Sin jerga y sin letra pequeña escondida.

El taller de verdad, no fotografía de stock

La galería muestra el foso real, el equipo real y los coches de sus clientes. En un oficio que se vende con confianza, el lugar real es la imagen más fuerte.

Nota real, reseñas reales

La nota de Google es la real y las reseñas se citan tal como se escribieron. Va colocada justo antes del mapa y de la reserva, para que haga su trabajo donde se toma la decisión.

¿Dónde estás y puedes mejorar este precio?

Un mapa en los colores de la marca y un formulario para subir un presupuesto del concesionario que el taller se compromete a mejorar. Solo entonces llega el botón de cita, en el único naranja que la web usa para las acciones, para que nunca pase desapercibido.

Sobre nosotros: el fundador y 25 años de oficio

La historia del taller y de la persona que hay detrás, contada con las fotografías del propio taller. Conocimiento técnico y responsabilidad personal, en ese orden.

Garantía: la cobertura en cifras claras

24 meses o 24.000 millas, con los niveles y las condiciones en una tabla. Una página de garantía que un cliente puede leer sin abogado también es parte de la confianza.

Contacto: un formulario de cita de verdad

Vehículo, servicio, fecha y hora preferidas, fotos de la avería, junto a los datos prácticos que un cliente necesita, de la sala de espera al buzón de llaves fuera de horario.

Construida primero para el móvil

La web se diseñó y comprobó en cinco tamaños de pantalla, del móvil al ultrapanorámico. En el móvil el módulo de servicios se pone en vertical, la tabla de mantenimiento se convierte en un desplegable y cada botón tiene el tamaño de un pulgar.

Fácil de mantener viva, y lo que aprendí

Como está construida en Framer sobre un sistema de diseño, el taller puede actualizar textos, fotografías y reseñas sin desarrollador, y las páginas nuevas siguen las mismas reglas. Entregado: concepto y prototipo en Figma, sistema de diseño, home con dos módulos interactivos, páginas de Sobre nosotros, Garantía, Contacto y Privacidad, responsive en cinco breakpoints, publicada en Framer.

Lo que me llevo: para un negocio local que vende confianza, la web tiene que responder a las preguntas del cliente en el orden en que las hace, y enseñar el trabajo en vez de describirlo. Y un concepto aprobado no es el final del diseño. Las mejores decisiones de esta web se tomaron mientras se construía.

Créditos: diseño y desarrollo en Framer, Miguel Recio. Identidad de marca, Miguel Recio. CGI, renders 3D y estados del chasis, Gabriel Naretto. Fotografía, del propio cliente.

Una web que trabaja tanto como el taller

Concepto en Figma, construida en Framer, viva en todas las pantallas: una persiana que se abre con el scroll, un módulo de servicios que un cliente entiende en segundos y un formulario de cita que convierte la confianza en reservas. Si tu taller, concesionario o negocio de automoción necesita una web que diga lo que vale tu trabajo, puedo ayudarte. Mira mis servicios de diseño web o reserva una llamada gratuita.