5 Motivos por los que debes siempre debes empezar tu diseño en blanco y negro

Cuando nos disponemos a trabajar en un nuevo proyecto web, es bastante normal que nos enfrentemos al miedo al lienzo en blanco. Este miedo puede aparecer por varios motivos. Uno de ellos es que no sepamos muy bien por donde empezar, ya que no tenemos una idea clara de lo que queremos hacer. Pero otro razón es que tengamos tantas ideas en nuestra cabeza que queremos plasmar, que no sabemos por donde empezar. En ambos casos, os puede servir de ayuda un pequeño truco, y es el de empezar a diseñar en blanco y negro.

Con blanco y negro no nos referimos solo a estos dos tonos de color, también podemos utilizar una rango (pequeño) de grises. Pero la idea esencial es no empezar a diseñar directamente con colores, sepamos ya los colores finales del proyecto o no. Aunque pueda parecer incoherente («¿por qué no voy a diseñar con los colores que va a tener mi proyecto?»), no utilizar colores y centrarse en el blanco y negro nos va a dar muchos beneficios en las etapas iniciales del proyecto, y nos va a dar una mejor base para seguir adelante.

Es la mejor forma de empezar paso a paso

Cualquier diseño web se compone de multitud de elementos que, cuando los unimos, obtenemos nuestro diseño final. Nos referimos a la composición general, combinaciones de colores, tipografías, interacciones, relaciones entre los diferentes elementos de una página… Empezar un diseño queriendo llevar a la vez todos estos elementos es una tarea ardua.

Si solo vamos a trabajar con blanco y negro al inicio, tanto la elección de colores, como la implementación de dichos colores a los diferentes elementos es un proceso que sabemos de antemano que vamos a dejar para más adelante.

paleta de color inicial para diseñar en blanco y negro, con colores blanco, negro y tres tonos de grises
Ejemplo de paleta de color en blanco y negro, con tres tonalidades de grises para elementos intermedios

Vamos a crear más rápido nuestra primera idea

Al solo disponer de unas herramientas más limitadas con las que trabajar, vamos a tener menos distracciones al inicio. Si nuestro fondo es blanco, nuestros textos van a ser negros, y viceversa. Va a dar igual el color final de dicho texto, ni vamos a tener al lado una paleta de color a la que recurrir cada vez que añadamos un nuevo elemento, con el consumo de tiempo que eso nos va a llevar.

Nos centramos en la composición de elementos

Quitando de nuestra mente las distracciones provocadas por los colores, focalizaremos nuestros esfuerzos en pensar en el espaciado entre elementos y sus relaciones, el interlineado de los textos, o el ritmo que tiene que existir entre las diferentes secciones.

Una vez que hemos construido todo esto, y hemos corroborado que funciona, es cuando nos podemos meter de lleno en dar color a cada una de las partes. Pero ya partimos con la certeza de que todo funciona como debe, y que estamos construyendo sobre unos cimientos sólidos.

Si funciona en blanco y negro, va a funcionar en color

Aunque esta no es una certeza al 100%, si que la podemos aplicar en la mayoría de las ocasiones. Por ejemplo, para darnos cuenta que en ciertas secciones debemos cuidar el contraste. Si en una sección que sabemos que llevará dos colores, y hemos aplicado dos tonalidades de gris, veremos rápidamente que necesitamos cuidar el contraste al aplicar los colores definitivos, y estaremos atentos cuando lo hagamos.

Si aplicamos dichos colores definitivos desde el primer momento, quizás no veamos que el contraste no está funcionando, ya que muchas veces no nos daremos cuenta. Y para ello existen páginas como Contrast Checker para comprobarlo. Si usamos los tonos de grises, encenderá un aviso en nuestro cerebro de que algo va a pasar ahí.

No apuestes todo al color

Al crear un diseño, es bastante habitual distinguir elementos diferentes solo por el color. Pero esto nos puede llevar a confusión si dejamos que todo el trabajo caiga sobre la distinción de color, sobre todo por temas de accesibilidad.

Un ejemplo simple pero evidente es cuando queremos distinguir un número positivo de otro negativo, y solo lo hacemos poniéndole al primero un color verde, y al segundo un color rojo. Con esta elección, que puede parecer trivial, estamos dejando de lado a todo usuario con algún problema con la visión cromática. El diseñar en blanco y negro hace que pensemos mas allá de los colores, y usemos otro tipos de elementos para ayudar a nuestro contenido, como símbolo o iconos.

diferencias en diseno al agregar iconos a elementos para ayudar a su comprension
Diseñando en blanco y negro vemos de forma más directa la necesidad de agregar elementos tales como iconos para facilitar la compresión del contenido

Sobre este tema hay un capítulo muy específico en el libro Refactoring UI, de Adam Wathan y Steve Schoger, que os recomendamos echarle un vistazo.

El cliente se puede centrar en lo importante

Cuando presentamos cualquier proyecto por primera vez a un cliente, es bastante habitual que se centre en correcciones de elementos poco importantes, como que ese tono de rojo no es así, es un poco más oscuro, o que el color del fondo de un cuadro de texto no le gusta. Y si empezamos a sumar el tiempo de estas correcciones, se nos va la reunión entre los dedos sin discutir de lo importante.

Por ello, al quitarle el color como elemento de distracción, hacemos que las correcciones con el cliente se centre en lo que consideramos importante en las primeras etapas, como si le convence la composición general del diseño, o la posición de los texto. Porque una reunión con cualquier cliente siempre debemos estar preparados para que se traten los temas básicos del diseño, y no los puramente ornamentales o que se pueden corregir más adelante.

Conclusiones

Comenzar un diseño desde cero nunca es sencillo. Por eso, empezar poco a poco, y construyendo con menos elementos hacen que tengamos no solo menos distracciones y centrándonos en conceptos básicos, sino que nos ayudará a diseñar de forma más rápida. Quizás cuando ya tengamos muchos años de experiencia a nuestras espaldas, podamos pensar y diseñar en paralelo composiciones, colores, tipografías… Pero incluso los diseñadores más experimentados prefieren hacerlo paso a paso, y dejar cada situación para su momento.

Además, nos hará centrarnos en partes que muchas veces olvidamos porque pensamos que son secundarias o poco relevantes, cuando son básicas. Hablamos del espacio en blanco, el contraste, la accesibilidad o la legibilidad de los textos. Sin la distracción que nos produce el color, aunque sea de forma inconsciente, hará que nos centremos más en estos temas, y dispongamos de unas bases más sólidas sobre las que seguir diseñando.

Comentarios (2)

  1. Mi nombre es Alejandro y actualmente estoy cursando la carrera de diseño y desarrollo web. El post me pareció muy interesante. Muchas veces como principiante me siento abrumado por todos los elementos a tener en consideración al iniciar un proyecto, entre ellos la paleta de colores que es un constante dolor de cabeza si no se tiene el tiempo o la practica. Con los tips de este post, ya puedo tener una panorámica más clara al momento de comenzar un proyecto de diseño web. Gracias!

    1. Hola Alejandro!

      Lo primero, un placer que te haya servido de ayuda nuestro artículo. Es normal sentirse abrumado al principio de cualquier proyecto por la cantidad de elementos que hay que tener en cuenta para llevarlo a cabo. De hecho, muchos trabajos fallidos vienen precisamente por eso, por querer abarcar mucho más de lo que somos capaces, y al final se nos va de las manos. Y en cualquier diseño web, por pequeño que sea, siempre vamos a tener que estar trabajando con colores, tipografías, espacios en blanco, imágenes… y se nos puede hacer bola incluso antes de empezar. Por eso siempre lo mejor es crearse un roadmap (que irás perfeccionando con el tiempo, y seguramente cambiando según tu forma de trabajar) e ir yendo paso a paso. Al principio parecerá que vas muy lento, pero es mucho más eficiente tener una base sólida sobre la que construir todo nuestro proyecto, que ir volviendo atrás cada poco tiempo haciendo correcciones porque no tuvimos un buen inicio de proyecto.

      Un saludo, y suerte con tus estudios!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *