O poder do desenho com caneta e papel

Precisa projetar algo? Pode ser tentador começar com uma ferramenta baseada em computador, por exemplo, software de wireframing como Balsamiq, ou ferramentas de design como Photoshop ou Figma. Estes têm o seu lugar, mas eu recomendaria recuar e começar com a humilde caneta e papel.

Esboçar à mão pode parecer estranho e desconfortável para aqueles que não se sentem artisticamente inclinados, mas a flexibilidade dos esboços à mão combinada com nossa imaginação significa que podemos trabalhar com mais ideias e formar uma direção de design melhor mais rápido do que se tivéssemos começado com uma solução mais concreta, baseada em computador.

É certo que às vezes eu mesmo luto com isso; enquanto eu passei minha infância com um caderno perpetuamente na mão e me formei na universidade com um diploma de artes, o caderno de papel foi brevemente esquecido quando comecei minha carreira de web design. Levou anos de confusão através de conceitos pouco inspiradores e sentindo que não estava forçando meus limites antes de perceber o quão poderosa poderia ser a geração de ideias por meio de esboços físicos rápidos.

Este processo é recomendado mesmo que não estejamos projetando algo grande ou na capacidade de um designer. Todo mundo precisa ser um “designer” de vez em quando; desde a criação de uma página inicial pessoal rápida, uma página inicial para um novo projeto de código aberto ou a criação de slides bonitos para a próxima apresentação.

Pegue um pedaço de papel e uma caneta e vamos começar!

Por que começar com papel

Como estamos sempre em um computador (e acho que a maioria de nós está, hoje em dia), às vezes nem nos ocorre dar um passo atrás e tentar projetar algo fora da tela.

O esboço em papel pode parecer algo exclusivamente associado à arte visual ou design gráfico (por exemplo, o lendário designer de logotipo Saul Bass é conhecido por sua defesa do desenho), mas mesmo as primeiras ideias para interfaces de computador começaram com papel. Susan Kare, a designer dos ícones da interface gráfica do usuário do Macintosh, usou papel quadriculado para projetar suas ideias iniciais para a icônica arte em pixel.

O poder dos esboços em papel é a efemeridade do esboço e como eles parecem menos “reais” do que qualquer coisa que criamos rapidamente em um computador. Comece a mover palavras e botões na tela do computador, e é tentador cair em uma determinada direção e nunca explorar caminhos alternativos. Esboços de papel forçam nossa imaginação a preencher as lacunas – muito mais rapidamente do que se adicionássemos esses detalhes a uma maquete de computador.

Queremos experimentar muitas ideias diferentes ao trabalhar em um novo design. Embora as primeiras ideias possam parecer boas o suficiente, nossa quinta, sétima ou décima ideia pode ser ainda melhor . Trabalhar rápido e solto nos ajuda a passar por muitas ideias rapidamente. As ideias fluem mais rápido e podemos nos surpreender com o que aparece na página quando trabalhamos sem restrições.

Se você ainda não está familiarizado com ferramentas de design como Photoshop, Sketch ou Figma, pode ser difícil começar e aprender a usar uma ferramenta. Em vez de trabalhar com muitas ideias, acabamos gastando nosso tempo descobrindo qual botão faz o quê.

E ferramentas de wireframing como Balsamiq? Eles produzem ideias que parecem esboços – linhas onduladas, caixas imperfeitas – mas ainda nos apontam na direção de trabalhar em uma única ideia e mexer com ela até que fique perfeita, em vez de experimentar muitas ideias diferentes primeiro. É mais rápido começar com caneta e papel . As ferramentas de wireframe podem ser o próximo passo no processo (em vez do primeiro).

Os modelos “esboçados” também fazem um trabalho melhor ao expressar o tipo de feedback que procuramos ao apresentar aos revisores. Um mockup que é muito pixel-perfeito, muitas vezes, solicita detalhes irrelevantes, mas um esboço grosseiro resultará em conversas de alto nível sobre o layout.

Repita para si mesmo: solto, rápido, não precisa ser perfeito

Todos nós já vimos aqueles esboços de “design” que parecem lindos e detalhados. Esses não são o padrão para medir a si mesmo. Ignore-os. Nossos esboços devem ser rápidos sem muitos detalhes.

Em vez disso, usaremos linhas e caixas realmente rápidas, mantendo nossos esboços pequenos e rápidos.

Podemos usar esses pequenos esboços para experimentar várias versões de um layout de página inicial:

Esboçar é útil para praticamente qualquer tipo de tarefa de design: boletins informativos, logotipos, apresentações, widgets - qualquer coisa em que você precise pensar rapidamente em muitas ideias visuais. Como exemplo, que tal explorarmos algumas ideias para uma capa de e-book?

Uma boa maneira de começar a praticar esse tipo de técnica de esboço é pegar um site existente e fazer engenharia reversa do esboço. Isso não apenas ajuda você a se sentir confortável com o ato de desenhar, mas também começa a sentir os diferentes padrões de design.

Seja qual for a abordagem que você adotar, preencha sua página com ideias! Não pare, mesmo que você tenha uma ideia que realmente o empolgue e que queira seguir em frente. Ao preencher uma página, vá para a próxima. Explore ideias alternativas caso encontre algo que ame mais.

Depois de ter muitas opções, faça uma pausa para descansar a mente, depois volte para circular seus favoritos, refinar e talvez passar para a criação de uma maquete. Você terá mais confiança na direção que escolher, pois sabe que tentou e descartou muitas outras ideias.

Use a inspiração para ajudar no desenho e na geração de ideias

Os esboços devem andar de mãos dadas com a inspiração, então traga o computador de volta! Abasteça seu próprio processo de design pesquisando outros designs e procure detalhes que você acha que funcionariam por conta própria.

Se você não tiver certeza por onde começar, procure inspiração em áreas relacionadas ao que você está trabalhando. Para uma página inicial pessoal, é ótimo começar a olhar para as páginas iniciais de colegas do seu setor. Se você estiver travado ou quiser uma inspiração mais geral, confira estes recursos:

• Dribbble, que é particularmente bom para pesquisar ideias de design para elementos, como um formulário de login.
• SiteInspire, para ver quais são as tendências atuais do design moderno.
• Land-book, para inspiração de design de landing page.
• Commerce Cream, para inspiração de design de sites de comércio eletrônico.
• Pttrns, para inspiração de design de aplicativos móveis.

Ao pesquisar, observe quais elementos você gostaria de incluir em seu próprio design (e lembre-se de não copiar exatamente!). Por exemplo, um layout legal, uma maneira particular de a inspiração combinar conteúdo com imagens, um formulário de contato que parece particularmente fácil de usar. Experimentar várias ideias de navegação diferentes em esboços de papel é muito mais rápido do que criar maquetes completas ou codificar tudo.

À medida que você encontra elementos e ideias que gostaria de lembrar, esboce-os ! Continue adicionando ideias à sua folha de esboço e preencha sua página com todas as suas ideias em potencial. Lembre-se, trabalhe em muitas opções e ideias diferentes para começar e reduza suas ideias favoritas depois.

Lembre-se de praticar!

Qualquer nova habilidade vai parecer estranha nas primeiras vezes. É normal. Não deixe isso te desencorajar. Quanto mais você praticar seu esboço e utilizar essa habilidade ao projetar, mais natural parecerá.

Para o seu próximo projeto de design, deixe o teclado de lado e deixe sua imaginação e criatividade fluir começando com esboços de caneta e papel.

Vamos rever o que cobrimos:

• Os esboços de papel são a maneira mais rápida de explorar as opções de design.
  Podemos fazer muito mais em menos tempo afastando-nos do mouse.
• Utilize a inspiração quando estiver desenhando para impulsionar a geração de ideias.
  Não comece com uma página em branco; faça suas ideias fluírem olhando para o trabalho de design que você gostaria de emular.
• Faça mais esboços e tente mais ideias do que você acha que deveria.
  Às vezes, a quinta ideia pode parecer uma boa direção, mas você descobrirá que uma ideia posterior é ainda melhor.
• A prática leva à perfeição.
  Quanto mais esboços você fizer, mais rápido será, mais fácil será e melhor você ficará.

Tem outros recursos de inspiração? Como são seus esboços? Adoraria ouvir de você nos comentários!

Leitura adicional na revista Smashing

• “Desenhando imagens o dia todo”, Alma Hoffmann
• “Esboços à mão: coisas que você não sabia que seus rabiscos poderiam realizar”, Laura Busche
• “Como criar um Porsche 911 com esboço”, Nikola Lazarevic
• “Mudando do Photoshop e do Illustrator para o Sketch: algumas dicas para designers de interface do usuário”, Lachezar Petkov
• “Lettering de pincel: só fica melhor depois da prática”, Alma Hoffmann
• “Ilustração moderna do meio do século: criando um livro de capa com Illustrator e InDesign”, Manuela Langella
• “Esboçando ao vivo uma jornada do visitante do site para criar um mapa do site com seu cliente”, Matt Orley
• “Mudando do Sketch para o Figma: um estudo de caso da migração de sistemas de design”, Buzz Usborne
• “Liberando todo o potencial dos símbolos no esboço”, Javier Cuello