() translation by (you can also view the original English article)
Compartiré con ustedes una teoría de diseño en la que he estado trabajando he implementando, aún dentro de mi propio flujo de trabajo, durante los últimos dos años, se llama: composiciones de pixeles perfectos. Sin embargo, aunque para algunos podrá ser obvio, pero ha sido un principio tan importante para mi propio proceso de diseño, de hecho, ahora que lo menciono, ha sido, sencillamente, la mayor idea que he presentado en más de diez años de diseño.
Adoptar esta teoría no se trata de dar otro paso más en los procesos de diseño, se trata de un cambio de perspectiva que revolucionará la mente que, indudablemente, mejorará la calidad de todos y cada uno de los diseños que trabajes desde ahora. ¿Quieres ser un mejor diseñador de páginas web y asumir los trabajos de mayor envergadura? Entonces no debes perderte la oportunidad de seguir leyendo este artículo.
Los Diseños Estupendos Hieren
Fue hace algunos años en el SXSW de 2008, que se me presento por primera vez la idea de composiciones de diseño de “pixeles perfectos”. Michael Lopp (autor de varios libros estupendos de diseños y gerente de ingeniería de Apple) estaba en el panel durante una sesión titulada, “Los Diseños Estupendos Hieren”. Su discurso fue divertidísimo y tan lleno de malas palabras tanto como uno de los episodios de las series de Bill Maher. Entre sus puntos de la conferencia increíblemente interesantes estaba una pequeña gema que explico cómo en Apple, cada diseñador se dedica a la idea de: “composiciones de pixeles perfectas”. ¡Y eso es todo! Eso significa qué cada composición o maqueta que pasa a través de la compañía es tan precisa, tan original, tan detallada que un espectador casual no puede decir cuáles son las diferencias entre el diseño de la composición y una captura de pantalla totalmente codificada.
“…Eso significa qué cada composición que pasa a través de la compañía es tan precisa, tan original, tan detallada que un espectador casual no puede decir cuáles son las diferencias entre el diseño de la composición y una captura de pantalla totalmente codificado.”
“¡Eso es todo!”, creo que a eso me refería cuando pensé: “…la idea que va a revolucionar mi proceso de diseño”, y de hecho lo hizo.
Lo ve, empieza todos y cada uno de los proyectos de diseño y elabóralos con la intención de seguir así a través de los últimos cambios de cada pixel, para cubrir cada uno de los aspectos de los procesos de diseño. Incluso si actualmente no lo hace muy a menudo, la noción misma de haber iniciado el diseño con esa intención, tendrá efectos dramáticos en el producto final.
Después de un mes o dos implementando estos procesos, incluso mis PSD originales eran más limpios, mis archivos se movían mucho más rápido, mis proyectos dejaban de arrastrarse, por fin, en sus últimas etapas, y algo sumamente invaluable fue qué; pase mucho menos tiempo en el teléfono o inclusive escribiendo correos vía email a mis clientes tratando de explicarles las diferencias entre una maqueta de diseño en bruto y el producto terminado. Oh, y yo estaba contratado a más que terminar el producto, lo cual es una buena práctica de medidas para organizar, clasificar y categorizar su tiempo, sus tareas y el tiempo que invierte en cada una de ellas.
Pero, ¿qué es lo que hace una composición de pixel perfecto? Mmm… esencialmente es el diseño de una maqueta (una maqueta web, puede ser cualquier cosa), como al principio de tu diseño estas creando los estilos de código de tus páginas. Si has trabajado con HTML o CSS, sabes lo que eso significa. Esto incluye:
- Márgenes perfectos
- Rellenos perfectos
- Uso de las fuentes en forma perfecta y consistente
- Bordes y fondos perfectos
- Uso consistente del color
- Ligeras variaciones inteligentes y justificables de las primeras 5 reglas.
De todas formas, permíteme elaborar una mejor idea. Cuándo la mayoría de los diseñadores inicia un proyecto, ellos diseñan como si fuera solamente una maqueta. El conocimiento que tienen algún desarrollador o especialista en Control de Calidad, va a venir más tarde, no importa cuánto tiempo y esfuerzo pongan en cada diseño de forma individual, sobrepasará todos los límites.
Lo que sucede después es natural para la mayoría de los diseñadores: Los Clientes dicen que las imágenes y los iconos son únicamente “marcadores de posición”. Y que los textos Lorem Ipsum deberán ser usados en lugar del contenido real. ¡Cielos!, incluso la navegación y otros elementos importantes de la interfaz de los usuarios deberían de intercambiarse con “rellenos” de contenido hasta el momento del lanzamiento, en la mayoría de los casos.
¿Qué es “Perfecto?
“Perfecto”, significa que cada elemento de cada borrador o maqueta de diseño es exactamente lo que queremos que sea en el producto final programado. Y esto… ¿Qué significa? Mmm… Veamos de forma práctica:
Con los márgenes y rellenos (margins & paddings), esto significa que deben ser consistentes en el diseño del sitio web completo. Por ejemplo, si cada bloque de la barra lateral en el diseño se estimo que tendría un margen de 10px, entonces, cada vez que hay un bloque de la barra diséñelo de esa manera, es decir; con 10 pixeles de espacio. La consistencia crea uniformidad y la uniformidad crea relativamente… ¡perfección!
Con las fuentes y colores (fonts & colors); significa el uso constante en todo el sitio. Diseñar cada parte con una fuente como si fuera un elemento para vincular HTML (todas las etiquetas HTML h1 son siempre de 18px, van en negrillas con el estilo de letra Georgia, y generalmente usando el color de texto negro) Y esto… ¿qué significa? Bueno, que ¡NO se desvié! Como me dijo una vez uno de mis directores de proyectos favoritos: “¡En realidad, no deberían haber más de 3 ó 4 estilos de fuentes en una página a menos que tengas una muy buena razón para hacerlo!”. Con respecto al color; si estas usando un color especifico de rojo como resaltador de color en el sitio, por Dios Santo, asegúrate de que sea exactamente el mismo color de rojo en todas las páginas (a menos, claro esta, que tengas una excelente razón para que sea diferente).
Contornos, reglas HR y Fondos, también deberán ser consistentes —parece estar por demás hacer esta aclaración, pero he visto algunas composiciones en dónde cada contorno tiene diferentes tonos del mismo color, y lo que es aún más asombroso, pero en última instancia, las composiciones parecen descuidadas y poco profesionales. Para un ojo inexperto, es fácil ver cuándo un diseño esta hecho a medias… incluso si esa persona no puede poner su dedo sobre lo que exactamente esta mal.
Por último, use iconos, imágenes, títulos y texto que estén lo más cercano a las cosas reales cómo sean posibles. Si estas rediseñando un sitio web, use el contenido que ya habían publicado en lugar de usar texto Lorem Ipsun. Si el cliente te dice que tiene nuevos iconos he imágenes que quiere usar en el rediseño, pídeselos he inclúyelos en el diseño.
Recuerda que estamos tratando de crear composiciones de diseño que son tan precisas que se ven como una captura de pantalla en directo, real y codificado del producto que queremos ver como terminado.
El Argumento en contra de la Perfección
Antes de avanzar otro paso más, primero, vamos abordar los obvios contra-argumentos. ¿Cuáles son? Costos, Tiempo, Esfuerzo, Frustración… de hecho los argumentos que ya se formo en su mente, suenan así:
“Si me tomo el tiempo que se necesita meticulosamente para cada detalle de cada maqueta de diseño que pasa por mis manos, entonces voy a pasarme 3 horas, por lo menos, de mi tiempo cómo mínimo en cada diseño… y eso, sin mencionar el hecho que si al cliente no le gusta el diseño, todo eso se va a la basura”.
Un argumento justo, y uno que ciertamente tiene su merito, pero que no es suficiente para descartar este artículo, es: ¡SONRÍE!:) Recuerda que, el objetivo no es hacer, actualmente, todas las maquetas de diseños perfectas (eso sería una locura y muy costosa), entonces… ¿Cuál es el objetivo principal? ¡El objetivo es cambiar su enfoque de diseño! El hecho es que el enfoque preciso de los borradores o composiciones de pixel perfectas, ni siquiera son prácticas en la mayoría de los casos… pero eso no debería detenerte por alcanzarlo.
Ahora examinemos los beneficios de los borradores o las composiciones de pixel perfectas y entonces volvamos a este argumento.
Beneficios de las composiciones de pixel perfecto
Te obliga a ser más organizado: más organización significa pasar luchando menos tiempo con tus PSD y pasando más tiempo dándole su merecido al diseño.
No más explicaciones a los clientes: si has diseñado perfectamente una composición, eso es todo, y si todo esta en el lugar que lo planificaste, no tienes que explicarle a los clientes que lo que ellos ven en la composición de diseño no es lo que ellos verán en la composición final.
No más explicaciones a los desarrolladores: esto surge especialmente cuando el cliente envía tu composición de diseño a la papelera o a un equipo de desarrollo en la India en dónde largos correos electrónicos de explicación, simplemente no se pueden traducir. Si su único trabajo es exactamente; CODIFICAR LO QUE VEN EN LA COMPOSICIÓN, lo que reduce las posibilidades que mal interpreten las especificaciones de diseño. Y, por Dios Santo, es aún más fácil para los programadores con fluidez con los que trabajo; solamente tienen que centrarse en la programación y no en tratar de averiguar si quiero 10 ó 15 pixeles de márgenes.
Menos tiempo en Control de Calidad: si aún no estas familiarizado con ese termino, es el sonido de las uñas sobre la pizarra en las rondas finales del diseño en dónde regresas con una última “propuesta de diseño” y preparado para la presentación final. Para los desarrolladores, también tiene el nombre de ronda de “pre-lanzamiento”, en dónde se examina; cada detalle, cada error funcional o si se ha extraviado algún solo pixel. Claro que en proyectos pequeños nunca podrás pasar por un ciclo de Control de Calidad, pero en proyectos más grandes que cuentan con el presupuesto, simplemente, no te alejes de un proyecto hasta que este paso se completa y el archivo de código fuente limpio, por fin, es entregado al cliente.
Directores de Arte más felices = Clientes más felices: si tu director de arte (o cualquiera que sea su título) es capaz de pasar menos tiempo en los detalles pequeños de tu composición o borrador y más tiempo en dar instrucciones valiosas, entonces, su presión arterial (y sobre todo, la tuya), bajaran inevitablemente durante las reuniones de revisión de diseño.
Más profesionales buscan resultados finales: sí, eso sí es verdad. Tus composiciones lucirán mucho más profesionales. Ahora que pasas menos tiempo explicando o justificándote por maquetas descuidadas, ¡puedes dedicar más tiempo a elevar tu tasa de interés!
La Lucha contra el Golpe
Así qué; cómo una respuesta a los argumentos en contra de las composiciones o borradores de pixeles perfectos, haré estos puntos finales.
Tus composiciones ya deberían ser perfectas: esto es el objetivo final de cada proyecto de diseño y si no lo estas consiguiendo a tiempo… entonces puede que sea solamente por una razón: nunca pretendes estar en ese primer lugar.
Toma MENOS tiempo que el alternativo: escoge una sola maqueta, y luego: dedica 6 horas, por lo menos, diseñando meticulosamente una sola maqueta y obtendrás la aprobación del cliente rápidamente O gasta 4 horas en un diseño y 4 horas en otro, y 4 horas más corrigiendo errores tontos hasta que finalmente consigues que tu cliente te firme; un diseño, eso es una completa… pérdida de tiempo.
La edición y la revisión, pasan más rápido de esta manera, no más lento: si has diseñado tu maqueta usando esta mentalidad y tu PSD esta organizado para reflejar esto, entonces, cada conjunto de revisiones que el cliente solicite pasaran a la velocidad del rayo.
Excelentes composiciones, significa pasar menos tiempo en el desarrollo: y esto te ahorra a ti (o a tu cliente) dinero, porque todos sabemos que tiempo = dinero. Este es el principio básico de la creación de prototipos; ¡Haz las cosas bien antes de entrar en un ciclo de desarrollo costoso!
Esta es la mayor brecha entre los proyectos pequeños y los conciertos de grandes presupuestos: El simple hecho es que un reclutador busca profesionales independientes para tomar sus proyectos y utiliza su singular aptitud de: “atención a los detalles”, como la medida más indicativa de que un diseñador independiente es capaz de hacer frente a un proyecto web mucho más grande. Así que si tienes un portafolio lleno de composiciones descuidadas, entonces va a ser mucho más difícil demostrar que eres digno de confianza y capacidad.
Consideraciones finales y observaciones.
Lo dije antes, pero una vez más es mi punto final: En realidad, no vas alcanzar la perfección en cada pixel de una composición y eso esta bien. Hay un tiempo y un lugar para un borrador sin terminar y tú (y tu cliente) sabrán cuándo lo es. Esta teoría de; “composiciones de pixeles perfectos” no requiere resultados al 100% ni al 100% de tiempo, solamente dicta la actitud básica que tú llevarás a cada proyecto. Aún después de años de trabajar así en mis proyectos, finalmente puedo decir que: vale la pena el dolor.
¿Tienes un punto de vista diferente o un comentario? ¡Empieza ahora o sencillamente únete a la discusión abajo en la sección de comentarios!
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
