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

Twitter

“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á adreson@gmail.com