Workshop for COPD – Panorama Atual e Ferramentas de Web Design

146 visualizações

Publicada em

The slideshow presented by me in workshop for developers, project managers and designers at DATAPREV – IT Company of Brazilian Government.

You can see the font of references and links in material.

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
146
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Workshop for COPD – Panorama Atual e Ferramentas de Web Design

  1. 1. PANORAMA ATUAL E FERRAMENTAS DE Arte: Andreas Levers WORKSHOP D a t a p r e v – C O P D WEB DESIGN
  2. 2. FORMAÇÃO EM DESIGN GRÁ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. 3. Foto: Andreas Levers O fim do desenho de interfaces WORKSHOP D a t a p r e v – C O P D
  4. 4. WORKSHOP D a t a p r e v – C O P D
  5. 5. VAMOS NOS SITUAR NO TEMPO WORKSHOP D a t a p r e v – C O P D
  6. 6. ANOS ESTAMOS FALANDO DOS ÚLTIMOS WORKSHOP D a t a p r e v – C O P D
  7. 7. ANOS ESTAMOS FALANDO DOS ÚLTIMOS WORKSHOP D a t a p r e v – C O P D
  8. 8. ANOS ESTAMOS FALANDO DOS ÚLTIMOS WORKSHOP D a t a p r e v – C O P D
  9. 9. O PROFISSIONAL DESIGNER GRÁFICO WORKSHOP D a t a p r e v – C O P D
  10. 10. O PROFISSIONAL DESIGNER GRÁFICO WEB DESIGNER WORKSHOP D a t a p r e v – C O P D
  11. 11. O PROFISSIONAL DESIGNER GRÁFICO WEB DESIGNER UI DESIGNER WORKSHOP D a t a p r e v – C O P D
  12. 12. O PROFISSIONAL DESIGNER GRÁFICO WEB DESIGNER UI DESIGNER VISUAL DESIGNER WORKSHOP D a t a p r e v – C O P D
  13. 13. O PROFISSIONAL DESIGNER GRÁFICO WEB DESIGNER UI DESIGNER UX DESIGNER VISUAL DESIGNER WORKSHOP D a t a p r e v – C O P D
  14. 14. FERRAMENTAS WORKSHOP D a t a p r e v – C O P D
  15. 15. FERRAMENTAS WORKSHOP D a t a p r e v – C O P D
  16. 16. FERRAMENTAS GRÁFICOS VETORIAIS LANÇAMENTO EM 1987 GRÁFICOS BITMAP LANÇAMENTO EM 1990 WORKSHOP D a t a p r e v – C O P D
  17. 17. FERRAMENTAS AFFINITY PHOTO AFFINITY DESIGNER WORKSHOP D a t a p r e v – C O P D
  18. 18. FERRAMENTAS INKSCAPE GIMP WORKSHOP D a t a p r e v – C O P D
  19. 19. FERRAMENTAS SKETCH APP FOR MAC WORKSHOP D a t a p r e v – C O P D
  20. 20. FERRAMENTAS APLICAÇÃO INTEIRAMENTE VOLTADA PARA CRIAÇÃO DE INTERFACES DIGITAIS WORKSHOP D a t a p r e v – C O P D
  21. 21. FERRAMENTAS EXPERIENCE DESIGN WORKSHOP D a t a p r e v – C O P D
  22. 22. FERRAMENTAS WORKSHOP D a t a p r e v – C O P D
  23. 23. FERRAMENTAS WORKSHOP D a t a p r e v – C O P D
  24. 24. Arte: Andreas Levers TENDÊNCIAS WORKSHOP D a t a p r e v – C O P D
  25. 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. 26. NAVEGAÇÃO • A DECISÃO DE 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. 27. NAVEGAÇÃO • VERTICALIZAÇÃO DAS PÁ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. 28. NAVEGAÇÃO WORKSHOP D a t a p r e v – C O P D
  29. 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. 30. WORKSHOP D a t a p r e v – C O P D
  31. 31. WORKSHOP D a t a p r e v – C O P D
  32. 32. USUÁRIOS WORKSHOP D a t a p r e v – C O P D
  33. 33. USUÁRIOS MAIS ESPERTOS É NOIS MANO! Toei Company WORKSHOP D a t a p r e v – C O P D
  34. 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. 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. 36. ANIMAÇÕES WORKSHOP D a t a p r e v – C O P D
  37. 37. ANIMAÇÕES WORKSHOP D a t a p r e v – C O P D
  38. 38. ANIMAÇÕES • ANIMAÇÕES COMO ELEMENTOS 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. 39. REDES SOCIAIS • AS REDES 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. 40. E O FUTURO? Universal Pictures WORKSHOP D a t a p r e v – C O P D
  41. 41. DESENHAR CADA VEZ MENOS INTERFACES WORKSHOP D a t a p r e v – C O P D
  42. 42. E A CULPA É DE QUEM? WORKSHOP D a t a p r e v – C O P D
  43. 43. É DESSES CARAS
  44. 44. DA INTELIGÊNCIA ARTIFICIAL E AS EXPERIÊNCIAS PRÓ-ATIVAS GOOGLE NOW WORKSHOP D a t a p r e v – C O P D
  45. 45. GOOGLE NOW ON TAP WORKSHOP D a t a p r e v – C O P D
  46. 46. RESPONDENDO UMA MENSAGEM DE TEXTO DA PRÓPRIA CENTRAL DE NOTIFICAÇÕES WORKSHOP D a t a p r e v – C O P D
  47. 47. O QUE O DESIGNER ELABOROU WORKSHOP D a t a p r e v – C O P D
  48. 48. DO QUE O USUÁRIO PRECISA WORKSHOP D a t a p r e v – C O P D
  49. 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. 50. É O FIM DA CRIAÇÃO DE INTERFACES? WORKSHOP D a t a p r e v – C O P D
  51. 51. É O FIM DA 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. 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. 53. AS EMPRESAS CONTINUARÃO PRECISANDO REFORÇAR SUAS MARCAS E SEUS POSICIONAMENTOS WORKSHOP D a t a p r e v – C O P D
  54. 54. WORKSHOP D a t a p r e v – C O P D
  55. 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. 56. OBRIGADO ! ©WARNER BROS. PICTURES WORKSHOP D a t a p r e v – C O P D
  57. 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

×