Una buena web de fabricante no empieza con el lema «somos innovadores», sino con la respuesta a preguntas sencillas: qué es, de qué está hecho y cómo se pide. Para la marca ECODDC, de Bydgoszcz, preparamos un sitio así: ecoddc.pl. Es la web corporativa de un fabricante de organizadores de escritorio ecológicos de cartón ondulado, en la que el producto, el material y el contacto están a un clic de distancia. En este caso de éxito mostramos cómo la diseñamos para clientes empresariales.
En resumen: web corporativa de un fabricante de organizadores de oficina ecológicos
- Cliente: ECODDC, fabricante de organizadores de escritorio de cartón ondulado BC, Bydgoszcz
- Sector: productos de oficina, diseño ecológico, venta a empresas
- Alcance: diseño gráfico, web de varias páginas (página principal, dos fichas de producto, quiénes somos, contacto), formulario de consultas, banner de cookies, páginas legales
- Tecnologías: HTML5, CSS3, JavaScript, PHP (gestión del formulario)
- Dirección web: ecoddc.pl
El reto: explicar un material poco habitual y mostrar el producto a las empresas
Un organizador de cartón suena a muchas personas como una solución provisional. Sin embargo, según la descripción de la página Quiénes somos, la marca quiere demostrar que el cartón ondulado BC puede ser un elemento duradero y estético del puesto de trabajo. La web tenía que hacer dos cosas a la vez: generar confianza en el material y mostrar el producto de forma que se pudiera imaginar en el propio escritorio.
A ello se añadían rasgos que en la comunicación se diluyen con facilidad: el mecanizado CNC, la filosofía Zero Waste, la posibilidad de reciclaje y la personalización de colores. Si todo acabara en una sola página sin orden, el visitante no distinguiría el producto de los lemas de la marca. Del briefing salieron cuatro requisitos:
- separar con claridad la marca y los dos productos: EcoStack y StarLinkPanel,
- datos técnicos concretos en lugar de generalidades,
- un camino sencillo para consultar sobre un producto o su personalización,
- una web ligera y rápida, que se vea bien en el móvil y en el ordenador.
No es una web de servicios típica. ECODDC vende productos físicos, por eso subordinamos toda la estructura del sitio a la presentación del producto y no a un catálogo de servicios.
Cómo trabajamos en el proyecto
Empezamos ordenando los materiales del cliente: descripciones de productos, fotos y parámetros. De ahí salió una arquitectura de la información en la que la página principal explica la idea de la marca y cada producto tiene su propia subpágina con especificaciones y galería. A continuación preparamos un diseño gráfico basado en un verde sereno y en los colores naturales del cartón, lo implantamos en código y lo probamos en distintos anchos de pantalla. Al final comprobamos el formulario, el banner de cookies y las páginas legales.
La solución: una web que vende el producto explicándolo
El sitio consta de la página principal, las fichas de producto EcoStack y StarLinkPanel, la subpágina Quiénes somos y el contacto. El menú es corto y el botón de contacto está destacado en la cabecera, de modo que el visitante no tiene que buscar cómo escribir.
Página principal: tres pilares de la marca y dos productos
La primera pantalla muestra el producto en un entorno real y dos botones hacia las fichas de producto. Más abajo, la web presenta los tres pilares de la marca: la tecnología CNC, Zero Waste y el reciclaje. Se exponen de forma breve, en tres tarjetas, y solo después vienen los productos. Así, el visitante entiende primero la idea y luego ve cómo se traduce en productos concretos.
Esquema Zero Waste en lugar de una descripción larga
En lugar de un párrafo sobre la reducción de residuos, preparamos un esquema sencillo: la entrada es una plancha de cartón BC y la salida, el panel StarLinkPanel y tres organizadores adicionales (para tableta o teléfono, para cables y para bolígrafos). Según la web, estos productos adicionales salen de los espacios libres de la plancha. Esta visualización explica el concepto en unos segundos.
Fichas de producto con especificaciones y galería
Cada producto tiene su propia subpágina con descripción, lista de características, tabla de datos técnicos y una galería de fotos ampliables en un lightbox ligero. En la ficha de EcoStack se indica, por ejemplo, que el módulo para utensilios tiene 25 capas de cartón y el módulo para cables 6 capas, y que los módulos se pueden apilar o colocar uno al lado de otro. El conjunto se completa con el proceso «¿Cómo funciona?» en tres pasos: elección de módulos, elección de color y disposición según las necesidades.
Formulario de consultas con elección de producto
En la página de contacto hay un formulario: nombre, correo electrónico, teléfono y empresa (opcionales), lista de productos (EcoStack, StarLinkPanel, ambos, personalización u otra consulta) y mensaje. Al lado están los datos de contacto de la empresa y un mapa. El formulario se envía sin recargar la página, y el usuario ve al instante la confirmación o un mensaje de error.
La personalización de colores como parte de la oferta
Según la web, los productos se laminan con papel del color elegido, y en la página principal se muestra la paleta: kraft, azul, terracota, verde, violeta, rosa, grafito, paja y beige. Debajo de la paleta hay una invitación a consultar por otro color. Es una forma sencilla de mostrar la posibilidad de adaptar el producto a la identidad visual de la empresa sin construir un configurador.
Subpágina Quiénes somos: la filosofía de la marca en un solo lugar
Los contenidos sobre los valores de la marca no se dispersaron por todo el sitio. En la página Quiénes somos reunimos la filosofía de la empresa, la descripción del material BC y la lista de lo que, según la marca, la distingue: un método propio de pegado alterno, los conectores en forma de estrella de StarLinkPanel, la personalización y un ciclo cerrado de materiales. Así, la página principal y las fichas de producto siguen siendo concisas, y quien quiere saber más tiene adónde ir.
Diseño adaptable y accesibilidad
El diseño se ajusta al ancho de pantalla mediante un conjunto de reglas CSS para móviles y tabletas. Las fotos de las secciones inferiores se cargan de forma diferida, de modo que la primera pantalla no espera a toda la galería, y los usuarios que han desactivado las animaciones en el sistema no reciben efectos en movimiento. Los botones del lightbox tienen descripciones para lectores de pantalla, y los campos del formulario, etiquetas.
SEO, RGPD (RODO) y seguridad
Cada subpágina tiene su propio título y meta descripción, y la página principal tiene dirección canónica y etiquetas Open Graph, por lo que el enlace se ve bien al compartirlo. No prometemos posiciones en Google, porque dependen de muchos factores ajenos al código, pero el contenido está ordenado y descrito para que el buscador pueda entenderlo.
- RGPD (RODO): el formulario exige el consentimiento para el tratamiento de datos con el fin de responder a la consulta; la web tiene política de privacidad y términos y condiciones.
- Cookies: banner con las opciones «Aceptar todas», «Solo las necesarias» y «Gestionar ajustes», y un enlace para cambiar las preferencias en el pie de página.
- Formulario: validación en el servidor, campo oculto contra bots y rechazo de saltos de línea en los campos que acaban en las cabeceras del mensaje.
Tecnologías
La web no utiliza WordPress. Son subpáginas estáticas en HTML5 con estilos CSS, un único archivo JavaScript (animaciones de aparición de secciones, lightbox, envío del formulario y gestión de cookies) y un script PHP que recibe el formulario y envía el mensaje al buzón de la empresa. El mapa de contacto se carga de forma diferida y las fuentes proceden de Google Fonts. Esta elección tiene sentido con unas pocas subpáginas fijas: es rápido, sencillo y barato de mantener.
Por qué una web propia y no solo un catálogo de productos
Un fabricante que describe sus productos solo en ofertas de portales cede el control sobre cómo se presentan y compite en precio con artículos similares. Una web propia permite contar la historia del material y del proceso, mostrar los datos técnicos con la estructura que elige la marca y recibir consultas directamente, sin intermediario. En el caso de ECODDC esto es especialmente importante, porque el valor del producto está en cómo se fabrica, y eso es difícil de encajar en una descripción estándar de marketplace.
El resultado
El cliente obtuvo una web que separa con claridad la marca y los dos productos, explica un material poco habitual y conduce a la consulta. No damos cifras de ventas ni de visitas, porque no las publicamos. El efecto cualitativo se ve en la propia estructura: cada información tiene su lugar y el camino desde la foto del producto hasta el formulario son unos pocos clics. Las declaraciones sobre ecología y reciclaje proceden de la marca y así las presentamos. La web está lista para ampliarse: se pueden añadir más productos como nuevas fichas con el mismo diseño, sin rehacer el conjunto.
Para quién es esta solución
Este enfoque funciona con fabricantes y pequeñas manufacturas que tienen de uno a varios productos, venden a empresas y necesitan una web que explique la tecnología o el material. Si el producto requiere acordar detalles antes de la compra, por ejemplo el color, las dimensiones o la cantidad, un formulario de consultas es mejor que un carrito. Mira también nuestros servicios.
Web de fabricante para empresas: cómo mostrar el material y motivar la consulta
ECODDC es, según su descripción, una marca de Bydgoszcz que vende organizadores de cartón ondulado a empresas. Una oferta así necesita una web que explique el material, muestre los datos técnicos y recoja consultas, no que imite una tienda. Aquí funciona un orden concreto: primero la idea de la marca, luego los productos y por último el formulario con elección de producto y de personalización. En la venta B2B el cliente suele necesitar acordar detalles antes de comprar, como el color o la cantidad, por lo que la consulta resulta mejor que el carrito.
Esta web es estática, sin WordPress, y es una elección razonable con unas pocas subpáginas fijas: es rápida y sencilla de mantener. Cómo influye la velocidad en la percepción de un sitio lo explica el artículo sobre la optimización de la velocidad de las webs WordPress. Sobre la presentación del producto en pantallas de distintos tamaños escribimos en el texto sobre diseño de páginas web. Una filosofía similar de web de presentación ligera la encontrarás en el proyecto de la web del fabricante de zumos Sokoniada.
¿Quieres saber cuánto cuesta una web así? Usa el calculador de presupuestos, repasa los servicios o ponte en contacto con nosotros.
FAQ
¿Tiene que tener tienda online la web de un fabricante de productos para empresas?
No siempre. ECODDC muestra los productos, los parámetros y la posibilidad de personalización, y el pedido empieza con una consulta desde el formulario. En productos adaptados a la empresa, por ejemplo en el color, este modelo resulta más cómodo que un carrito, porque primero hay que acordar los detalles.
¿Por qué esta web no funciona en WordPress?
El sitio tiene unas pocas subpáginas fijas y poco contenido que cambie con el tiempo, así que un HTML estático con un único script PHP para el formulario es más que suficiente. Es rápido, sencillo de mantener y tiene una superficie de ataque menor que un CMS complejo. Cuando los contenidos empiecen a crecer, se puede migrar a WordPress.
¿Cómo describir un producto ecológico sin exagerar las afirmaciones?
Conviene ceñirse a lo que el fabricante puede justificar: material, método de producción, posibilidad de reciclaje. Lemas como «100 % ecológico» en la web de ECODDC son declaraciones de la marca y así los tratamos. De la veracidad de las afirmaciones responde la empresa, y nosotros nos ocupamos de presentarlas con claridad.
¿Qué aporta un formulario de consulta en lugar de solo una dirección de correo electrónico?
El formulario recoge de inmediato la información necesaria: datos de contacto, empresa y producto al que se refiere la consulta. Así la primera respuesta puede ser concreta. Además, funcionan la validación en el servidor, el consentimiento del RGPD (RODO) y un campo oculto contra bots.
¿Cuánto se tarda en preparar una web de presentación así para un fabricante?
El plazo depende del número de productos, de si las fotos y los textos están listos y de si hace falta alguna función adicional. Por eso no damos plazos rígidos sin hablar antes. Tras un breve briefing podemos definir el alcance y el calendario para una empresa concreta.
¿Buscas una web para un fabricante o una marca de producto? Mira nuestros servicios, consulta otros proyectos o escríbenos, y prepararemos una propuesta adaptada a tu empresa.
