PROTOTIPAGEM KIT DE CONTEÚDO TAKE A TIP. Inovação e Negócios

(1)

TAKE A TIP

Inovação e Negócios 1

KIT DE CONTEÚDO

(2)

SOBRE A

TAKE A TIP

A Take a Tip é uma consultoria boutique de inovação e negócios que surgiu do desejo

de construir uma relação próxima e personalizada com cada cliente.

Na prática, o trabalho da Take a Tip consiste em 3 pilares:

2

Para quem possui uma boa ideia na cabeça mas não consegue colocá-la no papel e transformá-la em um modelo de negócio viável e rentável.

TRANSFORMAR IDEIAS EM PROJETOS

Para pessoas que querem se tornar

mais inovadoras e criativas, através de treinamentos e cursos in company e out

company.

Para empresas de todos os portes que compreendem a importância de se

reinventar constantemente e desejam ter a cultura da inovação em seu DNA.

TRANSFORMAR PESSOAS

TRANSFORMAR NEGÓCIOS

TAKE A TIP

(3)

Em uma missão de disseminar o conhecimento e a cultura de

inovação, a Take a Tip lança seu primeiro kit de conteúdo.

Neste material você encontra conteúdo sobre o que é a

Prototipagem de Ideias e Projetos e qual a importância deste

processo para a inovação. Encontra também templates para

auxiliar na prototipagem em papel de interfaces de web e de

aplicativos.

Ao final deste material é possível conferir uma lista de

referências interessantes para auxiliar no aprendizado e na

aplicação do conceito de prototipagem no dia-a-dia.

A forma com que este kit foi criada é para que todos possam

compreender os conceitos apresentados que serão expostos de

maneira clara e objetiva. Caso surjam dúvidas, escreva para

[email protected] .

3

PROTOTIPAGEM

conceito templates referências

SOBRE O

KIT DE CONTEÚDO

TAKE A TIP

(4)

4

ÍNDICE

TAKE A TIP

Inovação e Negócios

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

(5)

5

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

Não seria incrível se toda vez que você tivesse uma ideia genial todos pudessem ver, tocar, sentir, e testar sua ideia sem que você tivesse que investir recursos para desenvolvê-la?

Imagine como isso aumentaria as chances de convencer seu chefe a aprovar o investimento para produção da sua ideia, ou então

como você poderia testar sua ideia já com o consumidor e fazer ajustes para lançar um produto ou serviço mais alinhado com as necessidades e expectativas do mercado?

Pois esta prática já existe, é adotada por muitas empresas, e recebe o nome de Prototipagem.

(6)

6

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

O QUE É PROTOTIPAGEM? O termo Protótipo vem do grego [PROTÓS=PRIMEIRO] e [TYPOS=TIPO], ou seja,

primeiro tipo, primeiro modelo.

A Prototipagem é uma técnica para desenvolver, testar e

melhorar ideias em um

estágio inicial, antes que se invista em recursos para

sua implementação. É um jeito de você experimentar, avaliar, aprender, aperfeiçoar e se

adaptar, garantindo que as ideias sejam totalmente

exploradas antes da tomada final de decisão.

POR QUE PROTOTIPAR?

Algumas razões para prototipar: • Você pode envolver várias

pessoas relevantes numa fase inicial da ideia

• Pode testar as ideias com as pessoas que trarão respostas para os dilemas do seu projeto • É uma maneira de tornar as ideias tangíveis

• Auxilia na tomada de decisões refinando as ideias

• Em comparação a um piloto, é um processo de baixo custo e pode ser feito dentro de um prazo menor

• É um processo vivo de

aprendizagem, onde você pode alterar e testar novas abordagens em tempo real.

O QUE PROTOTIPAR?

Você pode prototipar um novo produto, um novo serviço, um novo aplicativo ou interface.

Pode até prototipar uma receita, testando ingredientes; prototipar um novo caminho para o

trabalho; enfim, tudo que se é possível testar e fazer melhor, é algo que se pode prototipar e muitas vezes não chamamos de protótipo.

Para cada situação existem

melhores técnicas e ferramentas que podem te auxiliar.

(7)

7

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

PROTOTIPAGEM EM PAPEL

Uma das formas mais comuns de realizar um protótipo é a Prototipagem em Papel. Rápida e barata,

colocar sua ideia em um papel é o primeiro passo para qualquer outra forma de prototipagem.

Utilizada para prototipar produtos, desenhando os primeiros traços da nova solução; serviços, ilustrando a interação dos clientes; e principalmente interfaces, onde é possível desenhar tela a tela e simular a

interação do usuário com a interface; a prototipagem em papel é uma ferramenta poderosa no dia-a-dia para impulsionar novas ideias.

Neste kit de conteúdo estamos trazendo templates específicos para a prototipagem em papel de interfaces, ou como dizem por aí, os “rabiscoframes”.

(8)

8

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

(9)

9

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

A criação de sketchs ou, como algumas pessoas chamam, “rabiscoframes”, possibilita visualizar com rapidez e

eficiência a solução que está sendo prototipada. É

possível, principalmente,

testar a solução sem que seja necessário investir muito

tempo ou recurso com a produção da mesma em algum editor gráfico.

Para utilizar as folhas no dia-a-dia não há muito mistério. Basta ter a ideia/projeto em

mente que deverá ser

realizado, definir para qual plataforma se está

prototipando (iPad, Android, iPhone, etc.) e então escolher o sketch ideal, imprimindo várias cópias dele.

Daí é só sentar com suas canetas (nas referências há um vídeo sobre quais canetas utilizar), e começar a rabiscar a solução.

(10)

10

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

As folhas de sketch, ou como algumas pessoas chamam, a etapa de realizar os

“rabiscoframes”,

possibilitam visualizar com rapidez e eficiência a solução que está sendo prototipada. É possível, principalmente,

testar a solução sem que seja necessário investir tempo ou recurso com a produção da mesma em algum editor gráfico.

Para utilizar as folhas no dia-a-dia não há muito mistério.

Basta ter a ideia/projeto em mente que deverá ser

realizado, definir para qual plataforma se está

prototipando (iPad, Android, iPhone, etc.) e então escolher o sketch ideal, imprimindo várias cópias dele.

Daí é só sentar com suas canetas (nas referências há um vídeo sobre quais canetas utilizar), e começar a rabiscar a solução.

DICA!

Você não está criando a Mona Lisa, então não precisa ser uma obra de arte. O mais importante é que você consiga

transmitir a mensagem principal e mostrar o caminho que será

percorrido, assim como suas interações, de

(11)

11

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

Wireframe Sketch Sheet - iPad

www.takeatip.com.br Título: Projeto: Designer: Anotações: Utilize a moldura compatível com seu projeto (se uma página de web, utilize o

wireframe de web; se é

um aplicativo para

iPhone, o wireframe de iPhone; etc.). No espaço destinado, ilustre tela a tela o caminho que o usuário deverá

percorrer.

Faça anotações

relevantes a respeito do protótipo que está

sendo desenhado,

principalmente pontos de atenção para o

momento de teste.

DICA!

Não poupe folhas. Tenha a certeza de ter pensado e

prototipado todas as telas. Da tela inicial ou de login, até a tela final e suas várias possibilidades de encerramento do aplicativo. Preencha com informações relativas ao projeto em execução

(12)

www.takeatip.com.br

Título:

Projeto:

Designer:

Anotações:

(13)

www.takeatip.com.br

Wireframe Sketch Sheet - iPad Título:

Projeto:

Designer:

(14)

Wireframe Sketch Sheet - iPad www.takeatip.com.br Título: Projeto: Designer: Anotações:

(15)

(16)

(17)

www.takeatip.com.br

Título:

Projeto:

Designer:

Anotações:

(18)

www.takeatip.com.br

Título:

Projeto:

Designer:

Anotações:

(19)

www.takeatip.com.br

Título:

Projeto:

Designer:

Anotações:

(20)

www.takeatip.com.br

Título:

Projeto:

Designer:

Anotações:

(21)

www.takeatip.com.br

Título:

Projeto:

Designer:

Anotações:

(22)

www.takeatip.com.br

Título:

Projeto:

Designer:

Anotações:

(23)

www.takeatip.com.br

Título:

Projeto:

Designer:

Anotações:

(24)

www.takeatip.com.br

Título:

Projeto:

Designer:

Anotações:

(25)

www.takeatip.com.br Título: Projeto: Designer: Anotações: Cenários Nome do Cenário:

Descrição da Situação: Objetivo Desejado:

(26)

www.takeatip.com.br Título: Projeto: Designer: Anotações: Storyboard

(27)

27

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

Para quem não tem muita habilidade com desenhos,

utilizar ícones prontos, copiando ou colando eles no seu protótipo, pode ser uma “ajudinha” extra. E para quem vai criar novos

ícones valem algumas dicas e pontos de atenção para criar um ícone eficiente.

Pictogramas nada mais são do que símbolos que representam algo (um objeto, uma ação, um conceito). Desde os anos 40, reforçou-se a crença de que o uso de símbolos é a maneira

mais efetiva de se comunicar, já

que apenas a visão de um pictograma faz com que a

informação seja compreendida, independente de habilidades e da língua de quem vê o símbolo. Apesar de todo esse potencial, criar um novo pictograma não é tão simples, já que a ideia

principal é de que seja um símbolo de compreensão universal.

Para isso a primeira dica é clara: seja simples. Não queira

complicar demais o design de um símbolo. Vale a máxima do

design: keep it simple.

A segunda dica: teste a eficácia do seu símbolo. Não inclua em seus projetos símbolos que você apenas acredita serem

eficientes, sem ao menos ter testado com os colegas ao lado. Segundo Tristan Cooke, um bom pictograma deve passar pelo

teste do 80/10, ou seja, para cada 10 pessoas que você mostrar seu pictograma, 8

devem compreender o conceito com facilidadee exatidão,

enquanto, no máximo, 1 pessoa poderá interpretar de forma

(28)

28

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

(29)

29

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

(30)

30

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

Para que você possa aprofundar seu conhecimento sobre o tema

Prototipagem, separamos algumas recomendações de leituras, vídeos, ferramentas e cursos que irão ampliar seu conhecimento sobre o assunto. ;)

(31)

31

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

VÍDEOS

Que caneta usar na sua prototipagem?

http://www.youtube.com/watch?v=TuQbzTwYHTA

Versão completa (e lenta) do vídeo acima

http://youtu.be/2w3gXXvUSGM

Acompanhe um teste de usabilidade

http://youtu.be/Bq1rkVTZLtU

Teste de usabilidade... com frutas

http://youtu.be/3Qg80qTfzgU

Como realizar um teste de usabilidade

http://youtu.be/BrVnBdW6_rE

Design Thinking - Take a Tip

http://youtu.be/uLjcAxfdSII

UX - O usuário está bêbado

http://youtu.be/r2CbbBLVaPk

(32)

32

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

APLICATIVOS E FERRAMENTAS

Para tornar o protótipo de papel “clicável” I

https://marvelapp.com/

Para tornar o protótipo de papel “clicável” II

https://popapp.in/

10 Free Wireframing tools

http://mashable.com/2010/07/15/wireframing-tools/

Para quem quer investir em ferramentas legais

http://www.uistencils.com/

Um super guia de Prototipagem

http://goo.gl/35p464

Para auxiliar no agendamento das entrevistas e testes de usabilidade

http://www.powwowapp.net/

Lista de ferramentas, softwares e links de UX com curadoria de Fabrício Teixeira

https://www.makesets.com/ux-tools-1/

(33)

33

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

CURSOS

Curso gratuito e online.

Obs: ok, o curso já rolou em Fev/13, por isso você não irá conseguir ver os vídeos anexados ao material, mas ainda assim você pode conferir todas as aulas e pegar várias referências bacanas.

http://inspiredm.com/prototyping-for-the-web-free-course/

Curso presencial na ESPM, abordando não só a prototipagem de web/em papel, mas também

prototipagem de produtos, serviços e modelos de negócio.

http://www.espm.br/inovacao/curso.asp?cursoID=91

Conteúdo da palestra, que vale por uma aula, do Fabrício Teixeira, sobre UX Design antes do

Wireframe.

http://goo.gl/rRXWJE

(34)

34

ÍNDICE

TAKE A TIP

O QUE É PROTOTIPAGEM?

FOLHAS DE SKETCH

PICTOGRAFIA

REFERÊNCIAS

SITES

Tudo o que você precisa saber sobre User Experience

http://arquiteturadeinformacao.com/

Agências e a prototipagem

http://goo.gl/cdBX40

Para prototipar na web ou depois do papel

https://moqups.com/

Leitura obrigatória - IDEO

http://goo.gl/DSPLUB

Guia de UX

http://www.usability.gov/

Ícones gratuitos (creative commons e licenças liberadas para uso comercial)

https://www.iconfinder.com/free_icons

Lista de eventos de UX

http://uxdesign.cc/ux-events/

Blog sobre inovação, criatividade e design

http://www.inovaqui.com.br

(35)

OBRIGADO :)

CONTATO

TAKE A TIP CONSULTORIA

www.takeatip.com.br