Transferir como PDF, PPTX
![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
47](https://image.slidesharecdn.com/ui-mobile-e-game-unifg-2018-181108160433/85/UI-Design-para-Desenvolvimento-Mobile-Games-47-320.jpg)
![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)
50](https://image.slidesharecdn.com/ui-mobile-e-game-unifg-2018-181108160433/85/UI-Design-para-Desenvolvimento-Mobile-Games-50-320.jpg)
Carregado porSérgio Bezerra da Silva
UI Design para Desenvolvimento Mobile & Games
O documento aborda a importância do planejamento e da prototipação no desenvolvimento de software, enfatizando que a maior parte do tempo em projetos é dedicada à análise dos requisitos antes da programação. Discute ferramentas, técnicas e artefatos que podem ser utilizados para facilitar o processo, incluindo o design sprint do Google e storytelling da Pixar. Além disso, destaca a importância de manter uma style guide e a organização durante a criação de projetos digitais.
![[Palestra UNICAP] UX Design - Projetando Soluções e Experiências](https://cdn.slidesharecdn.com/ss_thumbnails/palestrauxunicap-140909213939-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
UI Design para Desenvolvimento Mobile & Games
- 3.
- 4. Do que vamofalar? 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 DesignSprint • Artefatos que podem ajudar • Pixar Story Telling • Future Press Release • Hora de Integrar! 6
- 8.
- 9. Posso sair programandoantes 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 dedesign 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 • Podeser 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.
- 18. Para que servemestes 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.
- 24. Gratuitas / Curvade Aprendizado Ferramentas • Adobe XD • UXPin (7 Dias Grátis)* • Figma • Marvel • InVision* • JustMind* 24
- 25. Introducing InVision Studio—theworld’s most powerful screen design tool
- 26.
- 27. Avaliações Pessoais • Critériosda Ferramenta • Curva de Aprendizado • Comunicação Multiplataformas • Usabilidade* (Webflow) • Disponibilidade de Ambiente para Protótipos* 27
- 32.
- 33. Pagas e Interessantes • Adobe Photoshop (Windows e MAC) • Sketch (MAC) 33
- 34.
- 35. Mobile / Gameé a mesma coisa? Interfaces • NÃO • Plataformas Diferentes • Processos Diferentes 35
- 36.
- 37. Ferramentas para Prototipação Games • Blender • Photoshop • Adobe After E ects • Adobe Premier • Cinema 4D / Maya / ZBrush 37
- 38.
- 40. Artefatos Auxiliares Entregáveis • Sketches • Sprintes • Arquivos .psd / .xd / .png • HTML / CSS / Javascript / jQuery • Mobile: Android / Apple 40
- 41.
- 42. 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... • Diga não quando for necessário! / Saia da sua zona de conforto • Mantenha e sempre busque FEEDBACK (Time e demais envolvidos) 42
- 43.
- 44. Além da Gestão OutrasFerramentas • Github / Bitbucket • Dropbox / Google Drive • Slack / Telegram • MindMeister / XMind • Cuckoo Team / Pomodoro • Atom / Brackets 44
- 46.
- 47. Você sabe paraque 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 47
- 48. • Exemplo paraCódigo 48
- 50. Como Utilizar Google DesignSprint • 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) 50
- 51. Para saber maissobre 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) 51
- 52. • 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 52
- 53.
- 54. 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??? 54
- 56.
- 57. Google Design Sprint PixarStorytelling • 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 57
- 59.
- 60. Google Design Sprint FuturePress Release • De onde vem? (Future Press Release) • O que é? • Para que serve? • Quando eu devo usar? • 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 60
- 62.
- 63. Por onde eucomeç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! 63
- 64.
- 65. Design / DesignThinking / 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 65
- 66.
- 67. 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 67
- 68. 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 68
- 69. Motion Design Extra • Vidade 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 69
- 70.
- 71. UI Design /Programador Visual Vaga de Trabalho • NECTAR: CIN - Centro de Informática UFPE • UI Designer: Formulário de Inscrição • Bolsa - entre R$300,00 e 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 71
- 73. Contato Sérgio Bezerra daSilva • Email: sergiobslva@gmail.com • WhatsApp: +55(81)98426-6770 • Portfólio: Clique Aqui • Facebook: Me mande mensagem! • Facebook: Acesse o meu GIT 73