Ferramentas poderosas (além de simples e baratas), esboços ajudam a pensar e a compartilhar rapidamente problemas e soluções visuais e funcionais, dos mais abstratos aos mais tangíveis. No design de mídias digitais, têm importante acompanham desde as etapas embrionárias dos projetos até os estágios mais avançados.

Normalmente os esboços começam a ser criados depois da descrição do caso de uso para o cliente. Partem do que se conhece sobre os usuários, de ideias que vem à tona em conversas e pesquisas, percepções e impressões pessoais dos designers e demais stakeholders do projeto.

São importantes porque

Facilitam o processo de ideação de produtos, individual ou coletivo, permitindo entender as palavras de maneira diferente

Agilizam o detalhamento de ideias iniciais, facilitando seu aprofundamento

Permitem uma visão alinhada rápida de conjunto de produtos, processos, narrativas de uso, antes da criação dos layouts iniciais

Comunicam visualmente as ideias sobre produtos nas fases iniciais do projeto, para clientes e equipe

Não necessitam de ferramentas especiais, basta um lápis e uma folha de papel, às vezes borracha, canetas, marcadores, um quadro branco, e os desenhos são feitos rapidamente, em grande número, se sucedem, são aperfeiçoados, até que se chegue a ideias satisfatórs.

Às vezes são feitos onde menos se espera, no caminho para o trabalho, na mesa de um restaurante, na fila do mercado. Muitos designers e projetistas levam sempre consigo um caderninho no bolso ou na bolsa, caso precisem rabiscar uma ideia fora do horário ou lugar de trabalho.

Nem sempre as ideias são boas, também nem sempre são ruins. De modo geral, são desenhadas sem muito julgamento de valor – sua avaliação é posterior.

Podem não ser bonitos, alguns são até feios. Às vezes são compreensíveis apenas por quem os criou, e precisam ser explicados por meio de outros esboços mais bem acabados. Podem incluir recortes de revistas, fotos, detalhes de vídeos, visões gerais e de detalhes de produtos, comentários de pessoas. Muitas vezes se detêm apenas em uma parte do problema (um botão, uma tela), podem não propor uma solução completa (apenas uma etapa de compras online em um site de varejo, por exemplo). Como esboços, se identificam pela incompletude.

Esboços em projetos de mídias digitais

Por envolverem uma série de competências complementares, que se somam até a produção do resultado que vai ao ar, projetos de produtos digitais e de interfaces móveis na maioria dos casos são criações coletivas. É comum os esboços serem feitos por mais de uma pessoa, em mesas de reuniões, com marcas de diversas canetas e lápis, com traços diferentes. Em alguns casos, ficam registrados em quadros brancos, e ali descansam como material de consulta, até que não se precise mais deles e sejam fotografados e arquivados.

Mesmo que a maioria das pessoas da equipe afirme categoricamente que não é artista e não consegue desenhar, é importante deixar claro que os esboços são sobre o pensamento visual, e todos podem fazê-los. Podem usar traços com diferentes espessuras, cores para diferenciar usuários, símbolos para identificar funcionalidades, pedir ajuda a fotos e vídeos para ilustrar personas ou ações.

Produtos de projetos como wireframes começam como esboços na mesa do arquiteto da informação. E vão se transformando em mapas finalizados de percursos e processos online de usuários e sistemas.

Embora não cheguem ao detalhamento do layout da interface, precisam ser inteligíveis, legíveis e compreensíveis por um grupo de pessoas, não restritos aos seus criadores. Precisam ser também explicáveis. Neste caso, os esboços precisam se transformar em modelos de comunicação (e não só registros) de ideias – algumas vezes, são acompanhados de textos explicativos, dúvidas, problemas a resolver.

A criação do layout também pode começar com esboços, a partir de wireframes. Estes incluem os elementos necessários à interface, as relações entre eixos horizontais e verticais para a composição dos elementos, as variações do sentido vertical e paisagem da tela, cores, tipologias, tratamentos gráficos, elementos ocultos e como aparecem.

Caso tenham sido realizados testes de usabilidade com wireframes, o layout considera também a localização, o tamanho, os rótulos de elementos que os testes recomendam, que também já podem ser sinalizados nos esboços.

Mesmo sujeitos às exigências do negócio, do público-alvo, das diversas instâncias de decisão, de necessidades técnicas, das características de comunicação e linguagem, os esboços mantêm um caráter lúdico, um lado independente dos condicionantes que restringem o processo de criação.

Este aspecto solto, ágil, aproxima o esboço de uma interface de quem a utiliza – criar e usar estão bastante próximos. E quanto maior a proximidade, mais eficientemente a interface com o usuário se estabelece, como ponto de transição, mudança, lugar e momento de interlocução e conexão, expressão, afirmação individual e coletiva. Esboços e interfaces se afirmam e se realizam como caminho, que precisam se manter na perspectiva do produto, tanto na sua criação quanto em seu uso.

Depois de consultados e aplicados, caso possam ser usados em projetos novos, os esboços devem ser selecionados e guardados. Para que sejam facilmente consultados, devem ser claramente titulados – para facilitar a identificação –, numerados – para identificar a versão –, se impressos, dobrados em um mesmo tamanho – para facilitar o arquivamento em pastas – e fotografados e arquivados de maneira sistemática – para facilitar o acesso digital.

(Atualizado em 27.10.2017)

 

 

Ferramentas para a criação de esboços

Sketch, ferramenta (para Mac) para a criação de esboços para web sites e aplicativos (acesso em 27.10.2014)

Macaw, ferramenta para a criação de layouts visualização direta do layout e configuração de CSS (acesso em 20.9.2014)

Infogr.am:, ferramenta para a criação de infográficos (acesso em 8.9.2013)

Piktochart, app para a criação de infográficos (acesso em 8.9.2013)

Morpholio (app), inúmeros recursos para a criação de layouts e portfolios, inclusive com canal participativo, em que esboços e produtos podem ser atualizados por outros designers, acesso em 14.5.2013