Diseño web vs desarrollo web: ¿cuál necesitas de verdad?

El diseño es lo que dice tu sitio y cómo se siente. El desarrollo es lo que hace tu sitio. La mayoría de los proyectos de negocios pequeños necesitan mucho de lo primero y poquito de lo segundo, y saber cuál es cuál te evita contratar a la persona equivocada o pagar por maquinaria que nunca vas a encender.

Esto se confunde porque los dos oficios se venden bajo la misma etiqueta. Busca 'diseñador web' en Wichita y te van a salir personas que solo mueven pixeles en Figma, personas que solo escriben código, y personas que hacen las dos cosas. Las tres se llaman igual. Aquí está cómo distinguirlas y saber cuál necesitas.

Qué abarca el diseño de verdad

El diseño no es decoración. Ese malentendido es el que más le cuesta a los dueños, porque los lleva a tratar el diseño como la capa bonita opcional encima del trabajo real.

El diseño es decidir qué ve primero un visitante, qué ve segundo y qué ve tercero. Qué va en la parte de arriba sin hacer scroll. Si el ojo cae en tu teléfono o en tu logo. Cuáles de tus seis servicios se nombran en la página principal y cuáles quedan enterrados. Cuánto texto va a leer de verdad un desconocido antes de decidir llamarte. Qué dicen tus colores y tus tipografías sobre si eres la opción barata o la cuidadosa. Es el acomodo, la jerarquía, la tipografía, el espacio y el flujo, y cada una de esas cosas es una decisión de negocio disfrazada de decisión visual.

Por aquí entré yo. Tomé dos años de clases formales de arte en California, de dibujo y pintura hasta storyboard, además de trabajo en Illustrator como parte de cursos de animación 3D, y aprendí teoría del color en serio y no escogiendo colores que se sentían bonitos. Es una base distinta a la que tiene la mayoría de la gente que hace sitios web, y se nota en si un sitio parece pertenecerle a tu negocio o parece una plantilla con tu logo encima.

Qué abarca el desarrollo de verdad

El desarrollo es la ingeniería. Es lo que hace que un sistema de reservaciones de verdad aparte el horario, que un pago de verdad se cobre, que un acceso de verdad deje fuera a quien no debe entrar, que una calculadora de verdad calcule.

La regla práctica: si la página solo muestra información, eso es casi todo diseño. En el momento en que la página tiene que recordar algo, revisar algo, cobrar algo o hablar con otro sistema, ya estás en desarrollo. Por eso el desarrollo cuesta más. Poner la tipografía equivocada da pena; cobrarle mal a una tarjeta es un problema real, así que el trabajo tiene que salir bien siempre, no casi siempre.

Para 3 Keys & Co la parte de desarrollo fueron herramientas para compradores, una calculadora hipotecaria y guías, viviendo dentro de lo que por lo demás es un sitio informativo de bienes raíces. Para un taller de vinil en Wichita fue una herramienta completa de medición y marcado donde suben la foto de un vehículo, dibujan medidas y etiquetas a escala, y exportan una cotización limpia en PNG. La usan a diario. Eso no es una función de sitio web, eso es software que casualmente vive en un navegador.

El traslape que nadie explica: el front-end

Aquí está la parte que confunde a los dueños que comparan cotizaciones. Entre el diseño y el desarrollo hay una tercera cosa: convertir el diseño en código que de verdad funcione en un navegador. Eso es el front-end, y ahí se decide casi toda la diferencia de calidad en los sitios de negocios pequeños.

Un diseño puede verse hermoso en Figma y desbaratarse en la vida real. Puede reacomodarse mal en el celular, cargar lento, ser imposible de usar con el pulgar, o ignorar a quien navega con un lector de pantalla. Nada de eso se ve en la maqueta, y nada de eso es lo que la mayoría entiende por desarrollo tampoco. Es la costura entre los dos, y ahí es donde los sitios fallan en silencio.

Por eso exactamente el sitio de Cloud 9 Slime podía verse perfectamente bien para sus dueñas mientras sacaba 35 en rendimiento y 52 en accesibilidad. La idea de diseño no tenía nada malo. El problema era la traducción a código, porque quien traducía era una plantilla pesada de catálogo.

Cuál necesita tu proyecto

Ubícate con honestidad en esta lista.

• Necesitas que los clientes te encuentren, entiendan qué haces, confíen en ti y te llamen: eso es diseño y front-end, con casi nada de desarrollo. Así es la mayoría de los negocios locales de servicio, y es la mayor parte de lo que construyo.
• Necesitas que los clientes aparten una cita, paguen un anticipo o entren a una cuenta: eso ya es desarrollo real encima del diseño.
• Vendes productos en línea: eso es de los dos, y la cantidad de desarrollo depende de qué tan lejos están tus necesidades de lo que hace una tienda de catálogo.
• Necesitas una herramienta que tu industria no tiene: eso es casi todo desarrollo, y es un proyecto de software, no un proyecto de sitio web. Presupuéstalo y planéalo como tal.
• Tu sitio se ve bien pero nadie te encuentra: eso no es ninguno de los dos. Eso es SEO y estructura, y pagarle a un diseñador para redecorar no lo va a arreglar.

Esa última importa más de lo que parece. Muchos dueños piden un rediseño cuando el problema real es que Google no sabe qué hacen ni dónde lo hacen. Myers AFP es el ejemplo. Su página única de GoDaddy no era principalmente una falla de diseño, era invisible. Si no sabes en qué grupo estás, revisa primero las cinco señales antes de gastar nada.

A dónde se va el dinero de verdad

En un proyecto típico de negocio local que arranca en $2,500, el presupuesto no se reparte como los dueños esperan. Muy poquito se gasta en hacer que las cosas se vean bonitas. El grueso se va en decidir qué tiene que lograr cada página, escribir o acomodar las palabras, y construirlo para que cargue rápido y funcione en el celular.

El costo de diseño crece con cuántos tipos de página verdaderamente distintos necesitas. Un sitio con página principal, una plantilla de servicios y una de contacto son tres problemas de diseño sin importar cuántos servicios vendas, porque los demás son la misma plantilla con otro contenido. Por eso contar páginas es una mala forma de estimar una cotización.

El costo de desarrollo crece con los casos raros, no con las funciones. 'Que los clientes aparten cita' suena a una función. Luego llegan las preguntas reales: qué pasa si dos personas apartan el mismo horario, qué pasa si alguien cancela, se sincroniza con tu calendario, cobras anticipo, qué pasa cuando una tarjeta se rechaza, qué le llega al cliente por correo. Son seis decisiones escondidas dentro de una frase, y por eso las cotizaciones de desarrollo se sienten impredecibles cuando la petición parecía simple. Si quieres algo a la medida, describe qué debería pasar cuando sale mal, no solo cuando sale bien. Vas a recibir un número mucho más preciso.

La trampa de contratar uno y necesitar el otro

La versión cara de este error va por uno de dos caminos.

Contratas a un diseñador puro, recibes maquetas hermosas, y luego descubres que construirlo es otro proyecto con otro presupuesto, y que quien lo construye toma cien decisiones chicas que el diseñador nunca especificó. O contratas a un programador puro, recibes algo que funciona perfecto y se ve como una forma de impuestos, y luego resulta que los visitantes no confían lo suficiente como para llamar.

Para un negocio pequeño, quien hace el trabajo debería poder cargar una decisión desde 'qué debe hacer sentir esta página' hasta 'aquí está el código que lo logra, y saca 100 en la prueba de Google'. No porque una sola persona sea mejor por naturaleza, sino porque cada entrega entre personas es un lugar donde se fuga la intención.

Qué preguntarle a quien vayas a contratar

Cuatro preguntas resuelven esto rápido.

• ¿Tú lo vas a diseñar, a construir, o las dos cosas? Si son las dos, pide ver algo que hayas llevado de principio a fin.
• ¿Qué calificación de rendimiento saca normalmente tu trabajo en Google PageSpeed, y puedo correr la prueba en un sitio que hayas hecho?
• ¿Quién se encarga de la versión móvil, y está diseñada primero para el teléfono o achicada después?
• Si después necesito algo a la medida, una calculadora, reservaciones, un portal, ¿lo construyes tú o se lo pasas a alguien más?

La segunda pregunta es la que separa el discurso del trabajo. Rush Fire Protection, 3 Keys & Co y F3 Wichita sacan un 100 perfecto, y Myers AFP saca 98. Son sitios públicos y puedes probarlos tú mismo en treinta segundos, que es justo el punto.

La respuesta corta

La mayoría de los negocios locales necesitan diseño excelente, front-end excelente y muy poco desarrollo. Lo que normalmente les venden es diseño mediocre, problemas invisibles de front-end, y desarrollo que nunca van a usar. Si no sabes cuál necesitas, ese es un lugar normal donde estar, y es una conversación de cinco minutos, no algo que debas resolver antes de llamar.

Dime qué quieres que haga el sitio, en tus propias palabras, y te digo con honestidad si es un trabajo de diseño, de desarrollo o de los dos, y más o menos cuánto costaría cada versión. Los proyectos arrancan en $2,500, y prefiero ubicarte en el correcto que en el grande.

Preguntas frecuentes