El poder de los bocetos con lápiz y papel

¿Necesitas diseñar algo? Puede ser tentador comenzar con una herramienta basada en computadora, por ejemplo, un software de creación de esquemas como Balsamiq, o herramientas de diseño como Photoshop o Figma. Estos tienen su lugar, pero recomendaría dar un paso atrás y comenzar con el humilde lápiz y papel.

Dibujar a mano puede parecer extraño e incómodo para aquellos que no se sienten inclinados artísticamente, pero la flexibilidad de los bocetos a mano combinados con nuestra imaginación significa que podemos trabajar con más ideas y formar una mejor dirección de diseño más rápido que si empezáramos. con una solución informática más concreta.

Es cierto que yo mismo lucho con eso a veces; Mientras pasé mi infancia con un cuaderno de bocetos perpetuamente en mi mano y me gradué de la universidad con un título en Artes, el cuaderno de bocetos de papel se olvidó brevemente cuando comencé mi carrera de diseño web. Me llevó años lidiar con conceptos poco inspiradores y sentir que no estaba superando mis límites antes de darme cuenta de lo poderosa que podía ser la generación de ideas a través de bocetos físicos rápidos.

Se recomienda este proceso incluso si no estamos diseñando algo grande o en calidad de diseñador. Todo el mundo necesita ser un "diseñador" de vez en cuando; desde crear una página de inicio personal rápida, una página de inicio para un nuevo proyecto de código abierto o crear diapositivas atractivas para su próxima presentación.

¡Toma una hoja de papel y un bolígrafo, y comencemos!

Por qué empezar con papel

Como siempre estamos en una computadora (y creo que la mayoría de nosotros lo estamos hoy en día), a veces ni siquiera se nos ocurre alejarnos e intentar diseñar algo fuera de la pantalla.

Los bocetos en papel pueden sentirse como algo asociado únicamente con el arte visual o el diseño gráfico (por ejemplo, el legendario diseñador de logotipos Saul Bass es bien conocido por su defensa del dibujo), pero incluso las primeras ideas para interfaces de computadora comenzaron con papel. Susan Kare, la diseñadora de los íconos para la interfaz gráfica de usuario de Macintosh, usó papel cuadriculado para diseñar sus ideas iniciales para el icónico pixel art inicial.

El poder de los bocetos en papel es lo efímero del boceto y cómo se sienten menos "reales" que cualquier cosa que creamos rápidamente en una computadora. Comience a mover palabras y botones en la pantalla de una computadora, y es tentador caer en una dirección determinada y nunca explorar caminos alternativos. Los bocetos en papel obligan a nuestra imaginación a llenar los espacios , mucho más rápido que si agregáramos esos detalles a una maqueta de computadora.

Queremos probar muchas ideas diferentes cuando trabajemos en un nuevo diseño. Si bien las primeras ideas pueden parecer lo suficientemente buenas, nuestra quinta, séptima o décima idea podría ser incluso mejor . Trabajar rápido y suelto nos ayuda a analizar muchas ideas rápidamente. Las ideas fluyen más rápido y es posible que nos sorprendamos con lo que aparece en la página cuando trabajamos sin restricciones.

Si aún no está familiarizado con las herramientas de diseño como Photoshop, Sketch o Figma, puede ser abrumador simplemente comenzar y aprender a usar una herramienta. En lugar de trabajar con muchas ideas, terminamos dedicando nuestro tiempo a descubrir qué botón hace qué.

¿Y herramientas de wireframing como Balsamiq? Producen ideas que parecen bocetos (líneas onduladas, cuadros imperfectos), pero aun así nos señalan la dirección de trabajar en una sola idea y jugar con ella hasta que sea perfecta en lugar de probar muchas ideas diferentes primero. Es más rápido empezar con lápiz y papel . Las herramientas de wireframing pueden ser el siguiente paso en el proceso (en lugar del primero).

Las maquetas "incompletas" también hacen un mejor trabajo al expresar el tipo de comentarios que buscamos cuando se presentan a los revisores. Una maqueta que es demasiado perfecta en píxeles a menudo provocará que se critiquen los detalles irrelevantes, pero un boceto aproximado dará como resultado conversaciones de mayor nivel sobre el diseño.

Repítase a sí mismo: suelto, rápido, no tiene que ser perfecto

Todos hemos visto esos bocetos de "diseño" que se ven hermosos y detallados. Esos no son el estándar con el que medirte. Ingnóralos. Nuestros bocetos deben ser rápidos y sin muchos detalles.

Más bien, usaremos líneas y cuadros realmente rápidos, manteniendo nuestros bocetos pequeños y rápidos.

Podemos usar estos pequeños bocetos para probar múltiples versiones de un diseño de página de inicio:

Dibujar es útil para casi cualquier tipo de tarea de diseño: boletines, logotipos, presentaciones, widgets, cualquier cosa en la que necesite pensar rápidamente en muchas ideas visuales. Como ejemplo, ¿qué tal si exploramos algunas ideas para la portada de un libro electrónico?

Una buena manera de comenzar a practicar este tipo de técnica de boceto es tomar un sitio web existente y aplicar ingeniería inversa al boceto. Esto no solo lo ayuda a sentirse cómodo con el acto de dibujar, sino que también comienza a tener una idea de los diferentes patrones de diseño.

Sea cual sea el enfoque que adopte, ¡llene su página con ideas! No te detengas incluso si se te ocurre una idea que realmente te emociona y quieres seguir adelante. Cuando llenes una página, pasa a la siguiente. Explore ideas alternativas en caso de que encuentre algo que le guste más.

Una vez que tenga muchas opciones, tómese un descanso para dejar que su mente descanse, luego regrese para marcar sus favoritos, refine y tal vez luego pase a hacer una maqueta. Tendrá más confianza en la dirección que elija, ya que sabe que ha probado y descartado muchas otras ideas.

Use la inspiración para ayudar en sus bocetos y generación de ideas

Los bocetos deben ir de la mano con la inspiración, ¡así que vuelve a sacar esa computadora! Impulse su propio proceso de diseño investigando otros diseños y busque detalles que crea que funcionarían por su cuenta.

Si no está seguro de por dónde empezar, busque inspiración en áreas relacionadas con lo que está trabajando. Para una página de inicio personal, es excelente comenzar a buscar en las páginas de inicio de sus pares en su industria. Si está atascado o desea una inspiración más general, consulte estos recursos:

• Dribbble, que es particularmente bueno para investigar ideas de diseño para elementos, como un formulario de inicio de sesión.
• SiteInspire, para ver cuáles son las tendencias actuales en diseño moderno.
• Land-book, para inspirarse en el diseño de la página de destino.
• Commerce Cream, para inspiración en el diseño de sitios web de comercio electrónico.
• Pttrns, para inspirarse en el diseño de aplicaciones móviles.

A medida que investiga, tenga en cuenta qué elementos le gustaría incluir en su propio diseño (¡y recuerde no copiar exactamente!). Por ejemplo, un buen diseño, una forma particular en que la inspiración combina el contenido con las imágenes, un formulario de contacto que parece particularmente fácil de usar. Probar múltiples ideas de navegación diferentes en bocetos en papel es mucho más rápido que crear maquetas completas o codificarlo todo.

A medida que encuentre elementos e ideas que le gustaría recordar, ¡ dibújelos ! Continúe agregando ideas a su hoja de bocetos y llene su página con todas sus ideas potenciales. Recuerde, trabaje en muchas opciones e ideas diferentes para comenzar, y reduzca sus ideas favoritas después.

¡Recuerda practicar!

Cualquier habilidad nueva se sentirá incómoda las primeras veces. Es normal. No dejes que te desanime. Cuanto más practique sus bocetos y utilice esta habilidad al diseñar, más natural se sentirá.

Para su próximo proyecto de diseño, guarde ese teclado y deje fluir su imaginación y creatividad comenzando con bocetos en lápiz y papel.

Repasemos lo que hemos cubierto:

• Los bocetos en papel son la forma más rápida de explorar las opciones de diseño.
  Podemos hacer mucho más en menos tiempo si nos alejamos del mouse.
• Utilice la inspiración cuando esté dibujando para impulsar la generación de ideas.
  No comience con una página en blanco; haga que sus ideas fluyan mirando el trabajo de diseño que le gustaría emular.
• Haz más bocetos y prueba más ideas de las que crees que deberías.
  A veces, la quinta idea puede parecer una buena dirección, pero luego encontrará que una idea posterior es aún mejor.
• La práctica hace la perfección.
  Cuantos más bocetos hagas, más rápido irá, más fácil se sentirá y mejor te irá.

¿Tienes otros recursos de inspiración? ¿Cómo son tus bocetos? ¡Me encantaría saber de ti en los comentarios!

Lectura adicional sobre la revista Smashing

• “Dibujando todo el día”, Alma Hoffmann
• "Bocetos a mano: cosas que no sabías que tus garabatos podían lograr", Laura Busche
• “Cómo crear un Porsche 911 con Sketch”, Nikola Lazarevic
• “Pasar de Photoshop e Illustrator a Sketch: algunos consejos para diseñadores de UI”, Lachezar Petkov
• "Letras con pincel: solo mejora después de la práctica", Alma Hoffmann
• “Ilustración moderna de mediados de siglo: creación de un libro de portada con Illustrator e InDesign”, Manuela Langella
• “Dibujando en vivo el viaje de un visitante del sitio para crear un mapa del sitio con su cliente”, Matt Orley
• "Pasar de Sketch a Figma: un estudio de caso de sistemas de diseño migratorios", Buzz Usborne
• “Liberando todo el potencial de los símbolos en Sketch”, Javier Cuello