Download - Sketching
Sketching O ESBOÇO COMO RECURSO PARA
PROJETOS DE INTERFACES
Adreson
• Desenho Industrial, UFSM
• Artes Visuais, UFRGS
• Expressão Gráfica, PUC-RS (especialização)
→PROCERGS, designer
Porque falar de esboços?
Experiences in Visual thinking Robert H McKim, 1980
Sketching User Experiences Bill Buxton, 2007
Design Thinking Tim Brown, 2008
• 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)
Porque falar de esboços?
• valorizar o ato de rabiscar sobre o papel
• mostrar que esboçar é um ato criativo importante
Porque falar de esboços?
“O que é próprio ao gesto de desenhar: o gesto de pensar como ato de criar conceito por meio de traços.”
Márcia Tiburi
Design thinking pensar de maneira estratégica
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
“Quando se imagina, transmitem-se os sentimentos, e quando se desenha, as ideias”
Luis Vidal N. Gomes, 2001
“O desenho é o gene do pensamento“
Fernando Chuí
Pensamento visual
Isso aproxima à proposta de McKim, de que pensamos através de imagens visuais.
Imagens visuais
o pensamento visual é constituído por três tipos de imagens visuais
iterações entre ver, imaginar e desenhar
• 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.
Imagens visuais
fluidez de pensamento exige flexibilidade e rapidez na representação
Ideação
• 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.
Ideias
imaginação e a memória de imagens
vagas e esquivas
evolui a partir de um conceito potencial
para uma forma consolidada
Dois modos da ideação gráfica
Ideação
desenvolvimento exploratória
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.
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
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
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
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).
“Desenhar, acima de tudo, estimula a ver”
Robert McKim
“Some things are worth the wait .” Jack
Dorsey - Esboço do Twitter em 2006.
twttr (07/2006).
Firefox
“Esboços iniciais para especificar os elementos do site da campanha de
cinco anos do Firefox, concebido por Sean Martell (2009) .
Firefox
detalhe do site comemorativo de 5 anos do navegador
Firefox (2009
ideação (geração de alternativas)
design e usabilidade (descrição e
funcionalidades)
o esboço questiona e propõe, por outro lado o protótipo testa e resolve.
Esboço x protótipo
protótipo esboço
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
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.
“Vivemos numa sociedade cada vez mais moldada por eventos que se produzem no ciberespaço”
Steve Johnson
Interface gráfica do usuário
Exemplo de etapas de um projeto de interface - iOS Human Interface Guidelines, Apple Inc. 2011
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
Writer
Interface do aplicativo Writer for iPad - Information Architect (iA),
Tokyo, Japão
Exemplos Alguns esboços e wireframes
Rascunhos para intranet PROCERGS, 2010
Intranet
Pró-Cultura RS
Pró-Cultura RS
Pró-Cultura RS
Pró-Cultura RS
Pró-Cultura RS
Pró-Cultura RS
Pró-Cultura RS
PPR PROCERGS
PPR
PPR
PPR
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.
Da importância de esboçar como ferramenta de definição e planejamento de projetos
Obrigado! Por hoje é só!
Adreson Vilson Vita Sá [email protected]