Projetando Interfaces de Apps
•
6 gefällt mir•1,150 views
O documento fornece uma introdução sobre como projetar a interface de um aplicativo móvel, abordando tópicos como briefing com o cliente, inspiração, rabisco inicial, prototipação, layout, recursos visuais, exportação e entrega do projeto. Lista diversas ferramentas e recursos online para cada etapa do processo.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Projetando Interfaces de Apps
Ähnlich wie Projetando Interfaces de Apps (20)
Projetando Interfaces de Apps
- 1. Projetando a Interface do seu App Na prática Samuel Menezes @samuelmenezes samuel@2thinkers.com dribbble.com/samuelmenezes Friday, July 26, 13
- 2. O QUE VEREMOS Quando o projeto chega • Briefing • Mão na massa! • • Inspiração - De onde vem? • Rabiscoframe: Papel + lápis e... Balsamiq! • Navegação e Prototipação colaborativa com InVision • Animações - Hype, Edge e After Effects Layout • Pixel perfect - Ferramentas • Conversores e templates • E se eu precisar de fotos? E de ícones? E de gente fingindo usar meu app? • Exportação - Cut and Slice • Entrega - Site HTML como o Google faz! • Friday, July 26, 13
- 3. BRIEFING "O briefing deve responder qual OBJETIVO do trabalho, deve descrever os problemas que indicam a necessidade do projeto e os possíveis benefícios com a sua implantação" http://www.scribd.com/doc/90516806/05-Briefing-para-Design-Grafico-completo Friday, July 26, 13
- 4. BRIEFING Cliente Friday, July 26, 13 • Características mercadógicas, comerciais, históricas etc. • Elementos que determinaram a existência da demanda. • Objetivos e benefícios a serem alcançados com o trabalho de Design (na visão do cliente). • Elementos e materiais gráficos de referência. • Informações sobre a identidade visual da empresa.
- 5. BRIEFING Problema Friday, July 26, 13 Qual é a situação de desajuste/insuficiência que leva a se necessitar de uma solução?
- 6. BRIEFING Público-alvo Friday, July 26, 13 • Características, delimitações, particularidades. • Idade, solteiro ou casado, filhos, onde reside.
- 7. BRIEFING Limitações Friday, July 26, 13 •Verba alocada •Investimento/custo-benefício •Limitação temporal (data limite) •Limitações tecnológicas
- 8. BRIEFING Avaliação de resultados Friday, July 26, 13 •Como se pretende avaliar se os objetivos foram alcançados? •Google Analytics •Teste A/B com clutch.io
- 9. BRIEFING Interlocução Friday, July 26, 13 • Como será a conversa entre cliente e designer? • Trello e Basecamp • Product Owner definido - apenas uma pessoa para tomar as decisões
- 10. INSPIRAÇÃO “De onde você tirou isso?” Friday, July 26, 13
- 11. Friday, July 26, 13 dribbble.com
- 12. Friday, July 26, 13 pinterest.com
- 13. Friday, July 26, 13 behance.net
- 14. Friday, July 26, 13 fromupnorth.com
- 15. Friday, July 26, 13 awwwards.com
- 16. Friday, July 26, 13 hobby
- 17. Friday, July 26, 13 hobby
- 18. Friday, July 26, 13 hobby
- 19. Friday, July 26, 13 hobby
- 20. Friday, July 26, 13 hobby
- 21. The Inebriator http://www.theinebriator.com Friday, July 26, 13 http://www.theinebriator.com
- 22. RABISCOFRAME http://www.flickr.com/photos/rodrigoquaresma/3931887952/in/photostream/ Friday, July 26, 13
- 24. Balsamiq https://www.youtube.com/watch? feature=player_embedded&v=v8AjVL4ZdS0 Friday, July 26, 13
- 25. Friday, July 26, 13 http://popapp.in
- 26. NAVEGAÇÃO E PROTOTIPAÇÃO De forma colaborativa Friday, July 26, 13
- 27. Friday, July 26, 13 invisionapp.com
- 28. Friday, July 26, 13 invisionapp.com
- 29. Friday, July 26, 13 invisionapp.com
- 30. ANIMAÇÕES Hype Friday, July 26, 13 Hype, Edge, After Effects Abrir HYPE! Adobe Edge Animate Adobe After Effects
- 31. LAYOUT Pixelmator $14.99 Adobe Photoshop $19.99 ou $49.99 CC Friday, July 26, 13 Adobe: Plano anual CC - 49.99 por mes e com direito a várias fonts (Entrando no proximo tema)
- 32. CONVERSORES E TEMPLATES teehan+lax - Pixel Density Converter teehan+lax - iOS 7 GUI PSD dribbble.com/meinhyperspeed - Freebie PSD: Android 4.0 UI Friday, July 26, 13
- 33. E SE EU PRECISAR DE FOTOS? Friday, July 26, 13
- 34. E SE EU PRECISAR DE FOTOS? Friday, July 26, 13
- 35. E SE EU PRECISAR DE FOTOS? Unsplash - 10 new photos every 10 days Flickr - Everyone gets a free terabyte Google Images Friday, July 26, 13 Sempre filtrar pelo tipo de licença.
- 36. OU ÍCONES? Friday, July 26, 13
- 37. OU ÍCONES? The Noun Project Icon Finder Friday, July 26, 13
- 38. E DE GENTE FINGINDO USAR MEU APP? Place It (Breezi) Friday, July 26, 13
- 39. E DE GENTE FINGINDO USAR MEU APP? Friday, July 26, 13 http://placeit.breezi.com
- 40. E DE GENTE FINGINDO USAR MEU APP? Friday, July 26, 13 http://placeit.breezi.com
- 41. Friday, July 26, 13 http://placeit.breezi.com
- 42. EXPORTAÇÃO Cut&Slice me - Free! Friday, July 26, 13
- 43. Friday, July 26, 13
- 44. Friday, July 26, 13
- 45. ENTREGA developer.android.com - Copie quem lhe ensina Friday, July 26, 13
- 46. OUTROS LINKS http://www.androidviews.net - Repositório de libs! Dica do Sérgio Faria http://androidniceties.tumblr.com http://androidux.com Geração de Modelo de Negócio (PDF) http://capptivate.co - Exemplos de animações http://proto.io - Prototipação rápida (teste no aparelhos) lorempixel - Placeholder images no tamanho que você mandar (via url) Testico - Exportação de ícones (iOS) Friday, July 26, 13