A expressão é uma mistura bem humorada do termo sketch (esboço, rabisco) com o tão conhecido termo wireframe. Em muitos times de desenvolvimento já se tornou parte essencial do processo de desenho de interfaces, especialmente naquele momento do projeto em que as ideias começam a tomar forma e sair do etéreo mundo do powerpoint. A questão é que muita gente ainda tem receio de assumir o rabiscoframe como etapa da metodologia, seja por não dominar a técnica de desenho, seja por considerar o sketch algo muito imaturo e muitas vezes infiel ao resultado final da interface.
Li esses dias um artigo que tentava quebrar alguns tabus sobre a prática do sketching e salientar os pontos positivos de sua prática. Para mim, começar a utilizar esse método foi um exercício um tanto difícil, já que a comodidade dos softwares de prototipagem acabavam me levando direto à tela do computador na hora de representar uma interface.
Listei abaixo algumas lições aprendidas:
-
- Não saber desenhar não é um problema

O primeiro passo para começar a rabiscar uma ideia é se desprender da vergonha de não saber desenhar. Muita gente não nasceu com esse dom e, assim como eu, sempre tirou notas baixas nas tarefas de desenho livre da escola. A questão é que isso tem pouca importância na hora de rabiscar uma tela. Saber expressar ideias no papel se tornou uma questão de sobrevivência para quem quer evitar discussões pouco produtivas, onde cada um dos participantes tem uma imagem diferente na cabeça. O desenho é feito para ilustrar informalmente uma ideia e iniciar uma discussão. E só. Com o tempo os “rabiscadores” vão pegando a prática e perdendo a vergonha. Além disso, os rabiscoframes normalmente circulam apenas entre os próprios membros do time. Se você tem vergonha de mostrar uma ideia para um membro de seu próprio time, então o problema não é a falta de habilidade com desenhos.
-
- O rabiscoframe não é uma entrega

Os rabiscos raramente são entregues ao cliente ou a alguém da diretoria da empresa/agência onde você trabalha. Eles servem apenas para os próprios AIs, designers e desenvolvedores entenderem o que se espera de determinada interface, e não eliminam a necessidade de wireframes mais detalhados sobre seu conteúdo e funcionamento. Normalmente os rabiscos duram apenas alguns dias e, à medida em que as soluções desenhadas vão se aperfeiçoando, são deixados de lado e substituídos por protótipos mais completos.
-
- O sketching é um exercício coletivo

Poucas vezes fiz um rabiscoframe sozinho, sentado em minha mesa, tentando ilustrar algo que já estava decidido. A tática do lápis e papel normalmente se mostra necessária nas discussões entre arquitetos e designers no momento em que começam a sugir as primeiras dúvidas e divergências de opiniões sobre o como determinada tela deve se comportar. Se a solução já está definida e você só precisa documentá-la, sugiro ir direto aos softwares de prototipagem.
-
- A borracha é dispensável

Se você sente vontade de corrigir algo que acabou de desenhar, é sinal de que já está em um estágio de detalhamento posterior ao rabiscoframe. Ele exige uma boa dose de abstração de todas as partes envolvidas. Discussões como “menu horizontal ou vertical?” ou “imagem na esquerda ou na direita?” devem ser tomadas mais para frente, ou direto no photoshop.
-
- Tenha sempre um caderno à mão

Ter um caderno à mão em qualquer discussão ou brainstorm é uma boa dica para começar a fazer dos rabiscoframes um hábito. Instigue o designer a rabiscar aquilo que ele está sugerindo e ofereça a ele seu próprio caderno. Cadernos funcionam melhor do que folhas soltas, já que elas tendem a se perder no misterioso buraco negro das nossas mesas. E no fim há um certo orgulho em guardar aquele caderno cheio de rabiscos maneiros.
-
No ano passado desenvolvi um projeto para a Fiat duplando com o Diego Araújo, coordenador de design da agência. Revendo os primeiros rabiscoframes no caderno do Diego fui me dar conta do quanto cada tela mudou com a maturação das ideias. Recolhi alguns desenhos abaixo para ilustrar.






Espero que o post encoraje quem ainda tem receio de adotar o rabiscoframe como parte da metodologia. O tempo gasto é irrisório e até agora os resultados têm sido ótimos. Eu e o Diego estamos até pensando em largar a internet e seguir carreira de desenhistas =]
Alguns links sobre “sketching”:
- Pencils Before Pixels: A primer in hand-generated sketching
- Sketching in the Digital Age
- The Fine Art of Wireframes
- Shades of Grey: Thoughts on Sketching
- Sketch, Sketch, Sketch
- Telling your website’s story with sketchboarding
- Sketching: The Secret Sauce of Design
- Wireframe 101: Sketch First, Wireframe Later
- Bill Buxton: Sketching versus Sketchiness, what’s the difference for UX design?
- To Sketch or Not To Sketch? That is the Question
Perfeito! Simplesmente, “Quem não rabisca, não petisca”. Já dizia meu vô! =D
Parabéns, pois isso é o tipo de informação que vale a pena.
Esse post veio realmente a me encorajar, pq eu tinha esse medo de fazer rabiscoframe por não desenhar bem. Mas agora vou tentar levar essa prática para o meu dia a dia de trabalho.
Parabens pelo post. Fabricio
Pingback: uberVU - social comments
Pingback: Wireframe showcase | Arquitetura de Informação
Pingback: Exemplos de sketches e rabiscoframes | Arquitetura de Informação
Otima informação sobre por onde começar a organizar o site… e unir o grupo referente a uma idéia, afinal palavras se perdem no ar, mas rabiscos estaram sempre no caderno com você.
Pingback: A arquitetura de informação do carro do futuro | Arquitetura de Informação
Pingback: Teste de usabilidade, protótipos de papel e crianças | Arquitetura de Informação
Pingback: A caneta dos sonhos para rabiscoframes | Arquitetura de Informação
Pingback: Diferentes canetas para cada etapa do seu rabiscoframe | Arquitetura de Informação
Pingback: A composição de um time multidisciplinar de UX | Arquitetura de Informação
Pingback: Templates gratuitos para você fazer seus rabiscoframes – em PDF para download | Arquitetura de Informação
Pingback: Dica de app: POP (Prototyping On Paper) | Arquitetura de Informação
Pingback: Dotted Paper: um template gratuito para você criar seus rabiscoframes | Arquitetura de Informação
Pingback: Templates gratuitos para fazer rabiscoframes de interfaces mobile – em PDF para download | Arquitetura de Informação