Cómo perdí $ 1000 en un píxel

Esta es la historia de cómo un cliente me hizo perder $1000 en mover cosas por 1px. Transformó mi carrera y nunca pedí que me devolvieran el dinero. También me dijo algo sobre cómo se transforma el desarrollo web y cómo podemos adaptarnos a estos cambios.

En el pasado, dirigía una agencia de redes sociales. Además de gestionar cuentas de redes sociales con un sistema interno de última generación, también organizamos concursos y creamos pequeñas aplicaciones de marketing para nuestros clientes.

A veces, un cliente venía sin idea, así que estábamos diseñando una aplicación desde cero. Solo en raras ocasiones teníamos clientes que venían con diseños listos para desarrollar una aplicación de marketing.

Por lo general, lo que hacía era seguir vagamente el diseño para ajustarlo al presupuesto del cliente. Todos estaban felices, los concursos fueron exitosos y les dieron a nuestros clientes muchos seguidores nuevos y una amplia conciencia de marca.

Fue el comienzo de las redes sociales, y era bastante fácil en comparación con cómo es ahora llegar a los clientes con actividades orgánicas.

Entonces, mi vida como desarrollador web fue bastante cómoda. Hasta que entró ese cliente. No quería tener un concurso. Quería tener una página de suscripción al boletín en su cuenta de redes sociales.

No mencionaré el nombre de la plataforma de redes sociales, pero en el pasado, podía crear una subpágina en su página de redes sociales con HTML, CSS y JS.

El presupuesto que negocié para la tarea era razonable; el cliente lo aceptó. Tuve tiempo suficiente para cumplir con el pedido sin prisas.

¿Olvidé mencionar? Llegó con su propio diseño para la página del boletín. Era hermoso y llamativo, superando en millas lo que era la idea de las aplicaciones de marketing en el pasado.

Para mí, facilitó la tarea porque solo tenía que redactar la página y pasar a otras tareas. Después de dos días mezclados con otras tareas, terminé la página de destino y se la envié al cliente satisfecho con los resultados.

Pero el cliente no compartió mi entusiasmo. Me dijo que la landing page difería del diseño. Bueno, lo hizo. El diseño fue solo una inspiración, y simplemente coloqué todo más o menos en el lugar correcto.

Pensé, está bien, lo ajustaré más. Mover un botón a la izquierda, imagen arriba, etc. Era bastante habitual para mí, porque a menudo, incluso al hacer una solución perfecta, algunos clientes pedían algunos cambios.

Es un paso natural e importante porque le da al cliente un sentimiento de participación y satisfacción por tener algo que quiere.

Después de algunos días más, ajusté la página de inicio del boletín y se la envié al cliente. Después de una hora, recibí una respuesta: "Todavía está sesgado".

Fue decepcionante para mí, porque la implementación fue *casi* una representación perfecta del diseño provisto, y me quedé sin presupuesto para este proyecto.

Fue en ese momento que decidí hacer una captura de pantalla de la implementación y superponerla sobre el diseño en la aplicación Paint.NET. Lo que reveló fue que, si bien la implementación era similar al diseño, los elementos estaban separados por píxeles del diseño en varias direcciones.

Hasta este momento de mi vida, estaba bastante feliz de no ver las diferencias de píxeles. Estaba frustrado. Pero tenía muchas ganas de terminar esta tarea que tomé. Así que he trabajado más en este proyecto. En total, he excedido el presupuesto por $300 al trabajar varias horas adicionales.

Esta vez, elijo un enfoque diferente. No intenté ajustar la implementación. Acabo de mover elementos, para que encajen al 100% con el diseño en Paint.NET. Fue mi primera implementación de píxeles perfectos.

En mi cabeza, estaba luchando entre "no tiene sentido" y "vamos a intentarlo". Finalmente, pude enviar la nueva versión al cliente. Una vez que fue perfecto en píxeles, el cliente aceptó el resultado.

Estaba planeando pasar a la siguiente tarea de inmediato, pero tenía curiosidad. ¿Cuál fue la diferencia? Abrí dos aplicaciones Paint.NET una al lado de la otra para comparar mi primera implementación y la perfecta en píxeles.

Lo que vio mi ecléctico ojo de ingeniero fue asombroso. ¡Mi implementación inicial se veía fea! Nunca lo había visto antes y pensé que estos 2 o 3 píxeles de diferencia no afectaban la percepción. Pero allí estaba yo, mirando el boletín Mona Lisa con un ojo pésimo.

Inicialmente quería cobrarle al cliente por esta tontería con píxeles. Sin embargo, teniendo en cuenta que estaba aprendiendo algo extremadamente importante, solo le cobré una tarifa básica.

Este momento y este cliente consolidaron mi transformación de desarrollador front-end a desarrollador de diseño. Desde entonces, he trabajado con muchos diseñadores, clientes y desarrolladores front-end.

No todo el mundo espera implementaciones perfectas en píxeles. No siempre es necesario y no siempre es sabio monetariamente. Pero a veces lo es, especialmente cuando quieres atraer clientes.

Los buenos diseños atraen los ojos de las personas. Los buenos diseños se esconden en ese 1px que ha agregado a su hoja CSS.

Para poder concentrarse en tales problemas, debe resolver los aspectos técnicos de su software. Para que se pueda poner más esfuerzo en los aspectos de marketing, negocios y experiencia de su tienda o aplicación de comercio electrónico.

Por eso me gusta lo que ofrece Elastic Path . Es una empresa que patrocina el concurso en el que estoy participando con este artículo. Ofrecen todas las funcionalidades operativas que necesita para configurar varios sitios de comercio electrónico.

Como desarrollador, me encanta la idea porque prefiero centrarme en las necesidades comerciales que en mantener y desarrollar catálogos de productos, sistemas de pago, etc. Ofrecen una API fácil de usar que puede aprovechar en su nuevo lugar de comercio electrónico. .

Si te gusta el artículo, haz clic en el ícono del corazón, comenta y comparte en las redes sociales. ¡Salud!