Sobre a importância da prática de esboçar como ferramenta de definição e planejamento de projetos

1. Sketching
O ESBOÇO COMO RECURSO PARA
PROJETOS DE INTERFACES

2. Adreson
• Desenho Industrial, UFSM
• Artes Visuais, UFRGS
• Expressão Gráfica, PUC-RS (especialização)
→PROCERGS, designer

3. Porque falar de esboços?
Experiences in Visual thinking
Robert H McKim, 1980
Sketching User Experiences
Bill Buxton, 2007
Design Thinking
Tim Brown, 2008

4. Porque falar de esboços?
• problemas de design são cada vez mais complexos
• Interfaces mais complexas
• design de interface X design de interação UX
• Custos x prazos (economia/agilidade)

5. Porque falar de esboços?
• valorizar o ato de rabiscar sobre o papel
• mostrar que esboçar é um ato criativo importante

6. Márcia Tiburi
“O que é próprio ao gesto de desenhar: o
gesto de pensar como ato de criar conceito
por meio de traços.”

7. pensar de maneira estratégica
Design thinking

8. Pensamento
Intrínseco a natureza humana
fenômeno complexo e difícil de ser descrito
Observado através de suas manifestações: gestos, voz,
ou desenho (e escrita).
“a mente não processa informações de modo linear e
sequencial” Medeiros, 2004

9. Luis Vidal N. Gomes, 2001
“Quando se imagina, transmitem-se os
sentimentos, e quando se desenha, as
ideias”

10. Fernando Chuí
“O desenho é o gene do pensamento“

11. Isso aproxima à proposta de McKim, de que
pensamos através de imagens visuais.
Pensamento visual

12. Imagens visuais
o pensamento visual é
constituído por três tipos
de imagens visuais
iterações entre ver,
imaginar e desenhar

13. Imagens visuais
• Quando se pensa visualmente, se vê um problema
em vários ângulos, assim torna-se possível imaginar
soluções alternativas e para demonstrá-las, são
facilmente rabiscadas.
• Dondis também relaciona o pensamento à linguagem
verbal/visual, e a imaginação ao processo de geração
de ideias.

14. Ideação
fluidez de pensamento
exige flexibilidade e
rapidez na representação

15. Ideias
• McKim diz que são “construtos internos da
imaginação, percepção e pensamento”.
• [Design] tarefa cognitiva para procurar solucionar o
problema de um projeto.

16. Ideação
Dois modos da ideação gráfica
exploratória desenvolvimento
evolui a partir de um
imaginação e a
conceito potencial
memória de imagens
para uma forma
vagas e esquivas
consolidada

17. Ideação gráfica de desenvolvimento
Esboços da lâmpada de Thomas Alva Edison, 1880.
Exemplo de ideação gráfica com anotações para o
desenvolvimento da ideia.

18. Função da ideação
• a ideação gráfica tem objetivo principal é
comunicar e revelar o valor de uma ideia
• difere da comunicação gráfica por ser
específica e aberta à modificações
• dependem do contexto utilizado

19. Ideação
• ideação gráfica utiliza-se do esboçar,
delinear ideias com grafismos e anotações
• prática de exercícios de repetição gráfica
para melhorar flexibilidade e a fluência do
pensamento

20. Esboços
• Desde a idade média como recurso de projetos
• Muito mais fácil e rápido esboçar
(no papel) que utilizar um computador
• Objetivo do esboço é mais importante
que o material e a técnica utilizados
• Pensar desenho como estratégia, antes
de protótipos ou do layout no computador

21. Esboços
Bill Buxton mostra a importância do esboço ser visto, e não apenas imaginado, para
que a interpretação deste possa gerar novas ideias (além de conhecimento).

22. Robert McKim
“Desenhar, acima de tudo, estimula a ver”

23. Twitter
“Some things are
worth the wait .” Jack
Dorsey - Esboço do
Twitter em 2006.

24. twttr (07/2006).

25. Firefox
“Esboços iniciais para especificar os
elementos do site da campanha de
cinco anos do Firefox, concebido
por Sean Martell (2009) .

26. Firefox
detalhe do site
comemorativo de 5
anos do navegador
Firefox (2009

27. Esboço x protótipo
o esboço questiona e propõe, por outro lado o
protótipo testa e resolve.
esboço protótipo
ideação design e usabilidade
(geração de (descrição e
alternativas) funcionalidades)

28. Interfaces
• A interface do usuário é a parte que as
pessoas podem se comunicar através dos
sentidos humanos .
• Interfaces tem dois componentes :
Entrada e Saída

29. Interfaces
• O design de interface deve fazer com que
trabalhar com um computador seja agradável,
produtivo e rápido.
• As interfaces digitais rapidamente
transformaram as formas de comunicação e
de comportamento social.

30. Steve Johnson
“Vivemos numa sociedade cada vez
mais moldada por eventos que se
produzem no ciberespaço”

31. Interface gráfica do usuário
Exemplo de etapas de um projeto de interface -
iOS Human Interface Guidelines, Apple Inc. 2011

32. Interfaces
• a interface não deve desviar a atenção do
usuário
• se há alguma complexidade, esta deve ser
pertencente à tarefa e não à ferramenta

33. Writer
Interface do aplicativo Writer for
iPad - Information Architect (iA),
Tokyo, Japão

34. Alguns esboços e wireframes
Exemplos

35. Intranet
Rascunhos para intranet PROCERGS, 2010

36. Pró-Cultura RS

37. Pró-Cultura RS

38. Pró-Cultura RS

39. Pró-Cultura RS

40. Pró-Cultura RS

41. Pró-Cultura RS

42. Pró-Cultura RS

43. PPR PROCERGS

44. PPR

45. PPR

46. PPR

48. Da importância de esboçar como
ferramenta de definição e planejamento de projetos
O esboço é determinante no desenvolvimento de
novos produtos, e sua prática deve ser incentivada
em todo tipo de projeto que envolva criatividade e
inovação.

49. Por hoje é só!
Obrigado!
Adreson Vilson Vita Sá
adreson@gmail.com