AGENDA • Posso sair programando antes de qualquer coisa? • Brainstorm serve para software também? • O que são protótipos? • Por onde começo? • Ferramentas de Prototipação • Interfaces Móveis e de Games são a mesma coisa? • Para Mobile / Web / Desktop • Para Jogos • Entregáveis de Mobile • Se organize (Ferramentas que podem te ajudar) • Você sabe o que é uma Style Guide? • Google Design Sprint • Artefatos que podem ajudar • Pixar Story Telling • Future Press Release • Hora de Integrar!

3. Agenda

4. Do que vamo falar?
Ementa
• Posso sair programando antes de qualquer coisa?
• Brainstorm serve para software também?
• O que são protótipos?
• Por onde começo?
• Ferramentas de Prototipação
• Interfaces Móveis e de Games são a mesma coisa?
4

5. ...
• Para Mobile / Web / Desktop
• Para Jogos
• Entregáveis de Mobile
• Se organize (Ferramentas que podem te ajudar)
• Você sabe o que é uma Style Guide?
5

6. ...
• Google Design Sprint
• Artefatos que podem ajudar
• Pixar Story Telling
• Future Press Release
• Hora de Integrar!
6

8. Programar?

9. Posso sair programando antes de
qualquer coisa?
Maior parte do tempo de um projeto é gasto planejando ao invés de
programando.
Autor Desconhecido“
9

11. O que é recomendando antes de começar a
Programar
• Filtar os requisitos antes de qualquer coisa (Brainstorm)
• Esboçar protótipos de baixa delidade
• Subir o nível de delidade dos protótipos
• Testar protótipos com o usuário antes de partir para codi cação
• Codi car primeiro os casos de uso mais importantes para a solução
• Funções Menores e de preferência atômicas
11

12. Por que não?
• Concentração alta de esforço
• Alta probabilidade de resolver o problema que o usuário acha que tem,
mas não o que de fato ele necessita
• Repetição de funcionalidades
• Os requisitos simplesmente mudam...
12

14. Um processo de design pode ajudar?
Brainstorm
• Auxilia nos processos de análise de requisitos
• Ressaltam ideias dentro da equipe
• Amadurece as Ideias
• Testa hipoteses antes que sejam produzidos produtos falhos
• Testa protótipos antes da implementação
14

15. Como Funciona
• Pode ser usado como uma Disciplina de Análise
• Não é um artefato usado só no Design
• Esta presente em software mais do que se imagina
• Muito usado em métodos ágeis
15

16. Protótipos

18. Para que servem estes artefatos?
Protótipos
• Transformar ideias em produto
• Mais baratos
• Mais rápidos
• Facilmente ajustável
18

21. Por onde começo?
• Brainstorm / Requisitos de Software
• Lápis e Papel
• Software de Desenho (Gimp / Photoshop / Corel / Illustrator / Qualquer
coisa)
• Testar com o cliente junto
21

22. Ferramentas

24. Gratuitas / Curva de Aprendizado
Ferramentas
• Adobe XD
• UXPin (7 Dias Grátis)*
• Figma
• Marvel
• InVision*
• JustMind*
24

25. Avaliações Pessoais
• Critérios da Ferramenta
• Curva de Aprendizado
• Comunicação Multiplataformas
• Usabilidade* (Webflow)
• Disponibilidade de Ambiente para Protótipos*
25

30. Outras
Ferramentas

31. Pagas e Interessantes
• Adobe Photoshop (Windows e MAC)
• Sketch (MAC)
31

32. Interfaces

33. Mobile / Game é a mesma coisa?
Interfaces
• NÃO
• Plataformas Diferentes
• Processos Diferentes
33

34. Game

35. Ferramentas para Prototipação
Games
• Blender
• Photoshop
• Adobe After E ects
• Adobe Premier
• Cinema 4D / Maya / ZBrush
35

36. Entregáveis

38. Artefatos Auxiliares
Entregáveis
• Sketches
• Sprintes
• Arquivos .psd / .xd / .png
• HTML / CSS / Javascript / jQuery
• Mobile: Android / Apple
38

39. Se Organize

40. Antes de Criar...
Organize-se
• Escolha uma ferramenta de Gestão (Trello / Asana)
• Separe seu planejamento por etapas
• Mantenha a ferramenta atualizada!
• Cumpra o prometido...
• Estipule metas...
• Mantenha e sempre busque FEEDBACK (Time e demais envolvidos)
40

41. Outras
Ferramentas

42. Além da Gestão
Outras Ferramentas
• Github / Bitbucket
• Dropbox / Google Drive
• Slack / Telegram
• MindMeister / XMind
• Cuckoo Team / Pomodoro
• Atom / Brackets
42

44. Style Guide

45. Você sabe para que serve
Style Guide
• O que é?
• Para que serve?
• Manter Padrões no decorrer do projeto
• Artefato de Design e de Código [Pattern Code / Design]
• Artefato Documental importante
• Como fazer? Quanto tempo leva? Compensa?
• Exemplo para Design
45

46. • Exemplo para Código
46

48. Como Utilizar
Google Design Sprint
• De onde vem a metodologia
• Qual o objetivo
• Por que usar em Desenvolvimento de Software?
• O pulo do gato sobre metodologias [Spoiler]
• De toda a metodologia, o que é importante usar?
• Consulta: Google Design Sprint (em Inglês)
48

49. Para saber mais sobre
Google Design Sprint
• Livro Google Design Sprint (Português Impresso)
• Livro Google Design Sprint (Português Digital)
• Artigo sobre Google Design Sprint (Português)
• Phases & Methods Artefato (Inglês)
• Curso Google Design Sprint (Português) Udacity
• Consulta: Google Design Sprint (em Inglês)
49

50. • Artigo Medium: O que é Design Sprint e como criamos um produto
novo em 3 dias (em Português)
• Você sabe o que é Design Sprint?
• DESIGN SPRINT REMOTO (COM RENATO CONTAIFER - STARTAÊ)
• Google Design Sprints | Bruno Mendes | Papo Reto
• Koji Pereira (Google) • User Experience, Google Design Sprint e Product
Design
50

51. Artefatos

52. Google Design Sprint
Artefatos
• Eu devo usar o que da metodologia?
• O que for mais importante para você!
• O que vou falar aqui são só produtos de escolha pessoal!
• Pixar Story Telling
• Future Press Release
• Não tem mais coisas???
52

54. Pixar Storytelling

55. Google Design Sprint
Pixar Storytelling
• De onde vem? (Storytelling)
• O que é?
• Para que serve?
• Quando eu devo usar?
• Vídeos
• Pixar in a Box: Introduction to Storytelling
• Pixar in a Box Season 3: The Art of Storytelling
55

57. Future Press
Release

58. Google Design Sprint
Future Press Release
• De onde vem? (Future Press Release)
• O que é?
• Para que serve?
• Quando eu devo usar?
• Artigos
• Como usei processos de UX para ajudar as pessoas a manterem
hábitos saudáveis de alimentação
• Try an Internal Press Release before starting new Products
58

60. Bora Integrar?

61. Por onde eu começo?
Hora de Integrar
• Consulte seu Style Guide e siga o uxo!
• Folhas de Estilo
• Padrões de Código (Backend / Frontend / HTML / CSS)
• Siga o Protótipo
• Protótipos não são contratos imutáveis!
• Servem para te ajudar a chegar a um objetivo!
61

62. Biblioteca

63. Design / Design Thinking / Service Design
Biblioteca
• A Book Apart Collection / Vários Autores / Site da Editora
• 100 Things Every Designer Needs to Know about People
• Con ança Criativa
• Design Thinking—Tim Brown
• Isto É Design Thinking de Serviços
• The Service Startup
63

64. Cursos

65. UI Design / Frontend / Design
Cursos
• Aela.io - Concept Design | Site do Curso (Online) | Valor do Curso:
R$4.000,00
• Udacity Nanodegree - Fundamentos Web Front-End | Site do Curso
(Online) | Valor do Curso: R$599,00
• Origamid - Vários Cursos | Site do Curso (Online) | Valor do Curso:
R$1.200,00
65

66. Mais cursos...
• Udemy - UX & Design Thinking | Site do Curso (Online) | Valor do
Curso: R$594,90
• Caio Vinicius - Concept Design | Site do Curso (Online) | Valor do
Curso: R$697,00
• Keven Jesus - Certi cação Bootstrap | Site do Curso (Online) | Valor do
Curso: R$297,90
66

67. Motion Design
Extra
• Vida de Motion - Element 3D | Site do Curso (Online) | Valor do Curso:
R$997,00
• LayerLemonade - Motion Design | Site do Curso (Online) | Valor do
Curso: R$970,00
67

68. Vaga

69. UI Design / Programador Visual
Vaga de Trabalho
• FACEPE - Fundação de Amparo a Pesquisa
• UI Designer Formulário de Inscrição
• Bolsa - à partir de: R$1.200,00
• Conhecimentos: Princípios de Design / HTML / CSS / Javascript (Básico)
/ Processos de Software (Análise de Requisitos, Etapas de
Desenvolvimento) / Git
69

71. Contato
Sérgio Bezerra da Silva
• Email: sergiobslva@gmail.com
• WhatsApp: +55(81)98426-6770
• Portfólio: Clique Aqui
• Facebook: Me mande mensagem!
71