Baixar para ler offline
Workshop for COPD – Panorama Atual e Ferramentas de Web Design
- 1. PANORAMA ATUAL EFERRAMENTAS DE Arte: Andreas Levers WORKSHOP D a t a p r e v – C O P D WEB DESIGN
- 2. FORMAÇÃO EM DESIGNGRÁFICO ASSESSOR (DESIGNER) – CGTD /COPD CEO & CRIATIVE DIRECTOR SKILLS Centro Universitário Belas Artes de São Paulo Dataprev Décio Benício Design Design: Graphic, Web, UI, UX, Motion Ilustração CSS HTML5 Wordpress Themes Branding DÉCIO BENÍCIO
- 3. Foto: Andreas Levers Ofim do desenho de interfaces WORKSHOP D a t a p r e v – C O P D
- 4. WORKSHOP D a ta p r e v – C O P D
- 5. VAMOS NOS SITUAR NOTEMPO WORKSHOP D a t a p r e v – C O P D
- 6. ANOS ESTAMOS FALANDO DOS ÚLTIMOS WORKSHOP Da t a p r e v – C O P D
- 7. ANOS ESTAMOS FALANDO DOS ÚLTIMOS WORKSHOP Da t a p r e v – C O P D
- 8. ANOS ESTAMOS FALANDO DOS ÚLTIMOS WORKSHOP Da t a p r e v – C O P D
- 9. O PROFISSIONAL DESIGNER GRÁFICO WORKSHOP D at a p r e v – C O P D
- 10. O PROFISSIONAL DESIGNER GRÁFICO WEB DESIGNER WORKSHOP D at a p r e v – C O P D
- 11. O PROFISSIONAL DESIGNER GRÁFICO WEB DESIGNER UI DESIGNER WORKSHOP Da t a p r e v – C O P D
- 12. O PROFISSIONAL DESIGNER GRÁFICO WEB DESIGNER UI DESIGNER VISUAL DESIGNER WORKSHOP Da t a p r e v – C O P D
- 13. O PROFISSIONAL DESIGNER GRÁFICO WEB DESIGNER UI DESIGNER UXDESIGNER VISUAL DESIGNER WORKSHOP D a t a p r e v – C O P D
- 14. FERRAMENTAS WORKSHOP D a ta p r e v – C O P D
- 15. FERRAMENTAS WORKSHOP D a ta p r e v – C O P D
- 16. FERRAMENTAS GRÁFICOS VETORIAIS LANÇAMENTO EM1987 GRÁFICOS BITMAP LANÇAMENTO EM 1990 WORKSHOP D a t a p r e v – C O P D
- 17. FERRAMENTAS AFFINITY PHOTO AFFINITYDESIGNER WORKSHOP D a t a p r e v – C O P D
- 18. FERRAMENTAS INKSCAPE GIMP WORKSHOP D at a p r e v – C O P D
- 19. FERRAMENTAS SKETCH APP FORMAC WORKSHOP D a t a p r e v – C O P D
- 20. FERRAMENTAS APLICAÇÃO INTEIRAMENTE VOLTADAPARA CRIAÇÃO DE INTERFACES DIGITAIS WORKSHOP D a t a p r e v – C O P D
- 21. FERRAMENTAS EXPERIENCE DESIGN WORKSHOP D at a p r e v – C O P D
- 22. FERRAMENTAS WORKSHOP D a ta p r e v – C O P D
- 23. FERRAMENTAS WORKSHOP D a ta p r e v – C O P D
- 24. Arte: Andreas Levers TENDÊNCIAS WORKSHOP Da t a p r e v – C O P D
- 25. ESTILOS DE INTERFACES • SKEUMORFISMO–IOS • FLAT DESIGN –WIN 8 • MISCELANEA DE FLAT + SKEUMORFISMO IOS7 & MATERIAL DESIGN O USO DE DISPOSITIVOS MÓVEIS ULTRAPASSOU OS DESKTOPS E ISSO JÁ É PASSADO... WORKSHOP D a t a p r e v – C O P D
- 26. NAVEGAÇÃO • A DECISÃODE UMA ABORDAGEM DE INTERFACE PARA MOBILE INFLUENCIA NO DESKTOP • AS PÁGINAS SÃO MAIS GESTUAIS E MENOS CLICÁVEIS • AUMENTO DA UTILIZAÇÃO DA ROLAGEM • INTERAÇÕES COM O LAYOUT WORKSHOP D a t a p r e v – C O P D
- 27. NAVEGAÇÃO • VERTICALIZAÇÃO DASPÁGINAS – SCROOL INFINITO – EX: FACEBOOK, G1, PINTEREST • UTILIZAÇÃO DE LAYOUT’S EM CARDS - PINTEREST, PORTAIS DE NOTÍCIAS WORKSHOP D a t a p r e v – C O P D
- 28. NAVEGAÇÃO WORKSHOP D a ta p r e v – C O P D
- 29. IMAGENS E VÍDEOS •REDEFINIÇÃO DAS ESTRUTURAS DE CABEÇALHO • O DESIGN EDITORIAL FAZ ISSO HÁ ANOS WORKSHOP D a t a p r e v – C O P D
- 30. WORKSHOP D a ta p r e v – C O P D
- 31. WORKSHOP D a ta p r e v – C O P D
- 32. USUÁRIOS WORKSHOP D a ta p r e v – C O P D
- 33. USUÁRIOS MAIS ESPERTOS ÉNOIS MANO! Toei Company WORKSHOP D a t a p r e v – C O P D
- 34. USUÁRIOS MAIS ESPERTOS •USUÁRIOS MAIS EXPERIENTES REQUEREM PÁGINAS MAIS ÁGEIS • LEVEZA NOS LAYOUTS • FLAT DESIGN – PERFORMANCE E FLUIDEZ • INFOGRAFIA – VALORIZAÇÃO DA TIPOGRAFIA • GHOST BUTTONS – BOTÕES LEVES, COM CONTORNOS LEVES E BACKGROUNDS TRANSPARENTES Toei Company BUTTON WORKSHOP D a t a p r e v – C O P D
- 35. BITMAP X VETOR •IMAGENS BITMAP CEDEM ESPAÇO A GRÁFICOS ESCALÁVEIS: CSS SHAPES, SVG, VETORES. • AUMENTO NA DENSIDADE DE PIXELS: • TELAS RETINAS + SMARTPHONES • UTILIZAÇÃO DE ÍCONES EM FONTES, SVG OU EM CSS • SUBSTITUIÇÃO DE IMAGENS POR ILUSTRAÇÕES – MATERIAL DESIGN CARDS WORKSHOP D a t a p r e v – C O P D
- 36. ANIMAÇÕES WORKSHOP D a ta p r e v – C O P D
- 37. ANIMAÇÕES WORKSHOP D a ta p r e v – C O P D
- 38. ANIMAÇÕES • ANIMAÇÕES COMOELEMENTOS DE SUPORTE À EXPERIÊNCIA DO USUÁRIO. • MOTION DESIGNERS! • MAIS UMA TENDÊNCIA QUE MIGRA DO MOBILE PARA O DESKTOP • MATERIAL DESIGN COMO UM DOS EXEMPLOS MAIS CLAROS DESSA TENDÊNCIA • SUPORTE A ANIMAÇÕES NO CSS, DEIXAMOS DE NECESSITAR DE VARIADOS PLUGINS WORKSHOP D a t a p r e v – C O P D
- 39. REDES SOCIAIS • ASREDES SOCIAIS ESTÃO SATURANDO AS PESSOAS. • AUMENTO DAS OPÇÕES DE PUBLICIDADES COM CONTEÚDOS FOCADOS EM NICHOS • FACEBOOK ADS, TWITTER ADS, INSTAGRAM • INCREMENTO DAS LISTAS DE EMAILS = NOTIFICAÇÕES DE CONTEÚDOS QUE O PRÓPRIO USUÁRIO SELECIONA PARA LEITURA; • CONSEQUÊNCIA: NOTIFICAÇÕES DESSES CONTEÚDOS NA TELA DO DISPOSITIVO, SEJA ELE MÓVEL OU DESKTOP; WORKSHOP D a t a p r e v – C O P D
- 40. E O FUTURO? UniversalPictures WORKSHOP D a t a p r e v – C O P D
- 41. DESENHAR CADA VEZMENOS INTERFACES WORKSHOP D a t a p r e v – C O P D
- 42. E A CULPAÉ DE QUEM? WORKSHOP D a t a p r e v – C O P D
- 43.
- 44. DA INTELIGÊNCIA ARTIFICIALE AS EXPERIÊNCIAS PRÓ-ATIVAS GOOGLE NOW WORKSHOP D a t a p r e v – C O P D
- 45. GOOGLE NOW ONTAP WORKSHOP D a t a p r e v – C O P D
- 46. RESPONDENDO UMA MENSAGEMDE TEXTO DA PRÓPRIA CENTRAL DE NOTIFICAÇÕES WORKSHOP D a t a p r e v – C O P D
- 47. O QUE ODESIGNER ELABOROU WORKSHOP D a t a p r e v – C O P D
- 48. DO QUE OUSUÁRIO PRECISA WORKSHOP D a t a p r e v – C O P D
- 49. E A CULPAÉ TAMBÉM DA INTERNET DAS COISAS Arte: Mashable WORKSHOP D a t a p r e v – C O P D
- 50. É O FIMDA CRIAÇÃO DE INTERFACES? WORKSHOP D a t a p r e v – C O P D
- 51. É O FIMDA CRIAÇÃO DE INTERFACES? NÃO! O TRABALHO DO DESIGNER CONTINUA WORKSHOP D a t a p r e v – C O P D
- 52. AS NOTIFICAÇÕES, MENSAGENS,ALERTAS, CARDS, ETC. FAZEM PARTE DE UM “SISTEMA DE DESIGN” QUE PRECISA DE ALGUÉM PARA DESENVOLVÊ-LOS. WORKSHOP D a t a p r e v – C O P D
- 53. AS EMPRESAS CONTINUARÃOPRECISANDO REFORÇAR SUAS MARCAS E SEUS POSICIONAMENTOS WORKSHOP D a t a p r e v – C O P D
- 54. WORKSHOP D a ta p r e v – C O P D
- 55. O ESCOPO MUDA,MAS A NECESSIDADE DA EXISTENCIA DE UM DESIGNER NÃO WORKSHOP D a t a p r e v – C O P D
- 56. OBRIGADO ! ©WARNER BROS.PICTURES WORKSHOP D a t a p r e v – C O P D
- 57. REFERÊNCIAS • HTTP://ARQUITETURADEINFORMACAO.COM/USER-EXPERIENCE/NOSSO-TRABALHO-E-DESENHAR-CADA-VEZ- MENOS-INTERFACES/ • HTTPS://MEDIUM.COM/@JOWITAZIOBRO/7-FUTURE-WEB-DESIGN-TRENDS-FBA93EBA6355?_ HSENC=P2ANQTZ--SP2QTZCKVYMRCQZL27-OO23N2I4TT7BNM5DZWHVZJ17BYOEHB0YCOQV-8R- JLWRJJNNAUSHADYIVUPCJOXRLG0QXPPG&_HSMI=17833079#.X4ZP8ZJUB • HTTP://TABLELESS.COM.BR/O-DESIGN-ORDINARIO-OCO/#DISQUS_THREAD • HTTP://BLOG.INVISIONAPP.COM/2016-UX-DESIGN-TRENDS/ • HTTPS://BLOG.INTERCOM.IO/THE-DRIBBBLISATION-OF-DESIGN/ • HTTPS://WWW.GOOGLE.COM/DESIGN/SPEC/COMPONENTS/BUTTONS-FLOATING-ACTION-BUTTON.HTML • ANDREAS LEVERS – HTTPS://WWW.BEHANCE.NET/96DPI • HTTP://APPLE.COM WORKSHOP D a t a p r e v – C O P D