disenioweb.com

De dónde viene esto

Mi primer ordenador fue un Amstrad CPC 6128 con pantalla a color. Corría el año 1986 y yo ya estaba escribiendo mis primeros programas en BASIC, con el paradigma espagueti, saltando de línea en línea con GOTOs que hoy harían llorar a cualquier ingeniero de software. Tenía 10 años y ya sabía que lo mío iban a ser las pantallas.

Poco después fui una de las primeras personas en conectarse a internet en España. No al internet que conoces ahora: hablo de InfoVía, la plataforma de Telefónica que hacía de pasarela antes de que existiera la conexión directa. Internet de la prehistoria, donde cargar una imagen tardaba minutos y cada segundo de conexión costaba dinero. Pero ahí, en esa lentitud absurda, descubrí que se podían construir cosas con código y que otras personas podían verlas desde el otro lado del país.

Desde entonces no he parado. Aprendí HTML cuando las webs se hacían con tablas y GIFs animados. Toqué Visual Basic cuando Windows 98 era lo más moderno del mundo. Me metí con Python, con Java, con WordPress, con blogs. No de forma académica ni profesional — de forma autodidacta, por la noche, por curiosidad, porque no podía evitarlo. Llevaba más de 40 años programando en la sombra cuando decidí que era el momento de hacer algo con todo eso.

Así nació disenioweb.com: un estudio de diseño web freelance con una misión clara. Ofrecer calidad premium a precios honestos. Porque después de años viendo cómo agencias cobran 3.000€ por webs hechas con plantillas de WordPress, y cómo autónomos y pymes se quedan sin presencia digital decente porque "no les da el presupuesto", decidí que había un hueco enorme para alguien que supiera hacer las cosas bien, las hiciera desde cero, y no se escondiera detrás de un equipo ficticio ni de un pricing inflado.

El nombre: por qué "disenioweb" y no "diseñoweb"

Porque disenioweb dice más de lo que parece a primera vista.

No lleva "ñ". Y sin embargo, todo el mundo la lee. Tu cerebro la pone automáticamente, sin que nadie te lo pida. Eso es exactamente lo que hace un buen diseño: completar el mensaje sin necesidad de explicarlo todo.

El nombre juega con la imaginación del lector, suplantando una letra y transformándola en otra que consigue mantener el significado cambiando el significante. Es original, es transgresora, y aporta un halo de belleza al concepto de "diseño" con un simple cambio tipográfico. Es una declaración de intenciones condensada en una palabra: aquí no hacemos las cosas como las hace todo el mundo. Aquí pensamos cada detalle.

Y además, desde un punto de vista práctico: es un dominio limpio, internacional, fácil de recordar y de escribir en cualquier teclado del mundo. Sin caracteres especiales que rompan URLs, sin confusiones al dictarlo por teléfono. Funcional y bonito. Como las webs que hacemos.

Lo que creo

Creo que un autónomo de Madrid sur merece la misma calidad de web que una startup de Silicon Valley. Creo que "barato" y "bueno" no son antónimos, son una cuestión de estructura de costes. Creo que una web sin plantilla no tiene por qué costar 3.000€ si quien la hace es un freelance eficiente que no arrastra los gastos de una agencia con oficina en Chamberí, jefe de proyecto, account manager y máquina de café Nespresso.

Creo que el trato cercano no es un eslogan, es una ventaja competitiva real. Cuando hablas conmigo, hablas con la persona que va a diseñar, maquetar, optimizar y publicar tu web. No hay intermediarios, no hay juegos del teléfono, no hay "se lo paso al departamento técnico". Eso se traduce en mejor comunicación, menos errores, más agilidad y un precio más justo.

Y creo que el hosting no debería ser tu problema. Por eso lo incluyo. Tú te preocupas de tu negocio; yo me preocupo de que tu web esté viva, rápida y segura las 24 horas del día, los 365 días del año.

Proceso de creación

Con fases, con plazos y con un objetivo claro: que cualquier persona que llegue a esta web entienda en menos de 10 segundos qué hago, cómo lo hago y cuánto cuesta. Estas son las decisiones que tomé, sección por sección.

La paleta: oscuridad cálida

La primera decisión y la más arriesgada. En un sector donde el 90% de las webs de freelancers van en blanco, azul corporativo o gris neutro, elegí un fondo oscuro con acentos en cobre y dorado. Los fondos oscuros, cuando están bien ejecutados, transmiten elegancia, exclusividad y confianza. Es el mismo registro que usan marcas como Squarespace, Linear o el propio Apple en sus páginas de producto nocturnas.

Sobre un fondo marrón oscuro profundo, los textos en crema claro y los acentos en cobre generan una legibilidad excelente sin la fatiga visual que produce el blanco puro sobre negro puro. Es un contraste alto pero suave, que permite sesiones de lectura largas sin que el ojo proteste. Los degradados sutiles entre secciones crean una sensación de profundidad y movimiento vertical que invita a seguir bajando.

La cabecera: el logo "D" como sello

La cabecera usa un fondo con tratamiento glass semitranslúcido que deja entrever sutilmente el contenido al hacer scroll. En la esquina izquierda, el logo: una "D" estilizada sobre un cuadrado con esquinas redondeadas que funciona como un sello de autor, al estilo de los iconos de app de Apple. Es pequeño, contenido y reconocible.

La navegación central vive dentro de una píldora glass con fondo oscuro translúcido y bordes sutiles, agrupando los enlaces principales en un bloque cohesionado que flota visualmente sobre el contenido. Y a la derecha, el CTA principal: "Pide Presupuesto" en un botón de cobre sólido que rompe deliberadamente con el tono contenido del resto de la cabecera. Es el único elemento "gritón" de toda la barra, y lo es a propósito: es la acción que más importa.

El banner de oferta: urgencia elegante

Antes incluso de la cabecera, un banner fijo en la parte superior anuncia la oferta de lanzamiento. El precio antiguo aparece tachado, los tres puntos representan las plazas disponibles, y un botón cierra la pieza.

Es un recurso clásico de marketing directo —escasez + urgencia + precio tachado—, pero ejecutado con elegancia. No parece un banner de tienda de electrodomésticos: parece una notificación premium. Y lo más importante: se puede cerrar con una "✕" discreta, lo que respeta al visitante que ya lo ha visto.

El hero: tipografía como protagonista

El hero de disenioweb.com no lleva imagen de fondo, ni vídeo, ni ilustración. El protagonista es la tipografía. El titular ocupa el centro de la pantalla con un tratamiento deliberado: parte del texto va en una serif grande y blanca, elegante pero seria; y la palabra clave cambia a una serif cursiva en color cobre, más orgánica, más expresiva. Es un contraste tipográfico que transmite el mensaje antes de que lo leas: aquí se cuida hasta la forma de las letras.

Tres badges en formato píldora con icono —"Diseño a medida", "Precio transparente", "Soporte incluido"— condensan los tres diferenciales en una línea escaneable. No hay ruido, no hay stock photos, no hay animaciones forzadas. Solo tipografía, color y jerarquía.

El carrusel de inspiración

Justo debajo del hero, un carrusel horizontal de imágenes muestra capturas de diferentes webs con distintos estilos y temáticas. Es un efecto de desplazamiento continuo automático que genera una sensación de movimiento y abundancia sin requerir interacción. Las imágenes tienen esquinas redondeadas consistentes con el sistema de diseño. El carrusel no solo decora: educa al visitante sobre la variedad de estilos que puedo manejar.

El proceso: los 5 pasos con números gigantes

La sección "Cómo trabajamos" presenta cinco tarjetas en fila horizontal, cada una con un número de paso gigante en marca de agua de fondo en un tono apenas visible que crea profundidad sin competir con el contenido. Cada tarjeta lleva un icono custom en cobre en la parte superior, seguido del título en blanco y una descripción breve en gris claro. Entre cada tarjeta, una flecha → marca la progresión del flujo.

Las tarjetas de servicios: acordeón premium

La sección de servicios presenta tres columnas, cada una dentro de una tarjeta con bordes finos y esquinas redondeadas. Cada servicio incluido es un acordeón desplegable que permite al visitante profundizar solo en lo que le interesa sin saturarse. Es un patrón de progressive disclosure: muestras los titulares, dejas que el usuario decida cuánto quiere saber. Al final de cada tarjeta, el precio en la tipografía más grande de toda la sección, con el precio antiguo tachado generando un anclaje psicológico inmediato.

La sección "Sobre mí": cercanía sin sobreexposición

Una tarjeta con fondo ligeramente elevado contiene la foto de perfil a la izquierda y a la derecha, el texto de presentación. El texto es directo: quién soy, qué hago, cómo trabajo. Sin buzzwords. La cercanía no está en la cantidad de información personal, sino en el tono.

El portfolio: tres tarjetas, tres estados

La sección de portfolio muestra tres tarjetas que cuentan una historia de crecimiento: Pablo Bürmann (proyecto real), un proyecto en marcha, y "¿El siguiente eres tú?" (invitación). La progresión de llena → en progreso → vacía genera un efecto psicológico poderoso: hay sitio, pero no indefinidamente.

Las FAQ: acordeón limpio

Las preguntas frecuentes usan el mismo patrón de acordeón desplegable que la sección de servicios, generando coherencia visual. Las preguntas están ordenadas por el flujo mental natural de un prospecto: es un embudo de objeciones.

El formulario de contacto: mínima fricción

La sección "¿Hablamos?" tiene solo tres campos: nombre, email y mensaje. Cada campo extra reduce la tasa de conversión. El botón va en cobre sólido full-width. Debajo, la alternativa de email directo.

El footer: cierre limpio

El pie de página replica la navegación principal, muestra el logo junto al nombre "Disenio", el email de contacto y el copyright. Y la firma "Página web creada por disenioweb.com": cada web que entregamos es un backlink y un anuncio permanente.

Detalles técnicos transversales

• Tipografía dual: serif para titulares y momentos emocionales, sans-serif para cuerpo y elementos funcionales.
• Responsive completo: la web se adapta a móvil, tablet y escritorio.
• Scroll suavizado (scroll-behavior: smooth) en toda la navegación por anclas.
• Hosting en Cloudflare: CDN global, certificado SSL automático, protección DDoS y tiempos de carga mínimos.
• Formulario con validación y respuesta en menos de 24h como compromiso público.
• Optimización de imágenes para equilibrar calidad visual y rendimiento de carga.
• HTML + CSS + JS puro, sin frameworks: código limpio, sin dependencias, sin peso extra.