PANORAMA ATUAL E FERRAMENTAS DE
Arte: Andreas Levers
WORKSHOP
D a t a p r e v – C O P D
WEB DESIGN
FORMAÇÃO EM DESIGN GRÁFICO
ASSESSOR (DESIGNER) – CGTD /COPD
CEO & CRIATIVE DIRECTOR
SKILLS
Centro Universitário Belas Arte...
Foto: Andreas Levers
O fim do desenho de interfaces
WORKSHOP
D a t a p r e v – C O P D
WORKSHOP
D a t a p r e v – C O P D
VAMOS NOS SITUAR
NO TEMPO
WORKSHOP
D a t a p r e v – C O P D
ANOS
ESTAMOS FALANDO DOS
ÚLTIMOS
WORKSHOP
D a t a p r e v – C O P D
ANOS
ESTAMOS FALANDO DOS
ÚLTIMOS
WORKSHOP
D a t a p r e v – C O P D
ANOS
ESTAMOS FALANDO DOS
ÚLTIMOS
WORKSHOP
D a t a p r e v – C O P D
O PROFISSIONAL
DESIGNER
GRÁFICO
WORKSHOP
D a t a p r e v – C O P D
O PROFISSIONAL
DESIGNER
GRÁFICO
WEB
DESIGNER
WORKSHOP
D a t a p r e v – C O P D
O PROFISSIONAL
DESIGNER
GRÁFICO
WEB
DESIGNER
UI DESIGNER
WORKSHOP
D a t a p r e v – C O P D
O PROFISSIONAL
DESIGNER
GRÁFICO
WEB
DESIGNER
UI DESIGNER
VISUAL
DESIGNER
WORKSHOP
D a t a p r e v – C O P D
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
FERRAMENTAS
WORKSHOP
D a t a p r e v – C O P D
FERRAMENTAS
WORKSHOP
D a t a p r e v – C O P D
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
FERRAMENTAS
AFFINITY PHOTO AFFINITY DESIGNER
WORKSHOP
D a t a p r e v – C O P D
FERRAMENTAS
INKSCAPE GIMP
WORKSHOP
D a t a p r e v – C O P D
FERRAMENTAS
SKETCH APP FOR MAC
WORKSHOP
D a t a p r e v – C O P D
FERRAMENTAS
APLICAÇÃO INTEIRAMENTE VOLTADA PARA
CRIAÇÃO DE INTERFACES DIGITAIS
WORKSHOP
D a t a p r e v – C O P D
FERRAMENTAS
EXPERIENCE DESIGN
WORKSHOP
D a t a p r e v – C O P D
FERRAMENTAS
WORKSHOP
D a t a p r e v – C O P D
FERRAMENTAS
WORKSHOP
D a t a p r e v – C O P D
Arte: Andreas Levers
TENDÊNCIAS
WORKSHOP
D a t a p r e v – C O P D
ESTILOS DE INTERFACES
•	SKEUMORFISMO –IOS
• FLAT DESIGN –WIN 8
• MISCELANEA DE FLAT + SKEUMORFISMO
	 IOS7 & MATERIAL DESIG...
NAVEGAÇÃO
• A DECISÃO DE UMA ABORDAGEM DE
INTERFACE PARA MOBILE INFLUENCIA NO
DESKTOP
• AS PÁGINAS SÃO MAIS GESTUAIS E
MEN...
NAVEGAÇÃO
• VERTICALIZAÇÃO DAS PÁGINAS –
SCROOL INFINITO – EX: FACEBOOK, G1,
PINTEREST
• UTILIZAÇÃO DE LAYOUT’S EM CARDS -...
NAVEGAÇÃO
WORKSHOP
D a t a p r e v – C O P D
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 ...
WORKSHOP
D a t a p r e v – C O P D
WORKSHOP
D a t a p r e v – C O P D
USUÁRIOS
WORKSHOP
D a t a p r e v – C O P D
USUÁRIOS MAIS ESPERTOS
É NOIS MANO!
Toei Company
WORKSHOP
D a t a p r e v – C O P D
USUÁRIOS MAIS ESPERTOS
• USUÁRIOS MAIS EXPERIENTES REQUEREM PÁGINAS
MAIS ÁGEIS
• LEVEZA NOS LAYOUTS
• FLAT DESIGN – PERFOR...
BITMAP X VETOR
• IMAGENS BITMAP CEDEM ESPAÇO A GRÁFICOS
ESCALÁVEIS: CSS SHAPES, SVG, VETORES.
• AUMENTO NA DENSIDADE DE PI...
ANIMAÇÕES
WORKSHOP
D a t a p r e v – C O P D
ANIMAÇÕES
WORKSHOP
D a t a p r e v – C O P D
ANIMAÇÕES
• ANIMAÇÕES COMO ELEMENTOS DE SUPORTE À
EXPERIÊNCIA DO USUÁRIO.
• MOTION DESIGNERS!
• MAIS UMA TENDÊNCIA QUE MIG...
REDES SOCIAIS
• AS REDES SOCIAIS ESTÃO SATURANDO AS PESSOAS.
• AUMENTO DAS OPÇÕES DE PUBLICIDADES COM
CONTEÚDOS FOCADOS EM...
E O FUTURO?
Universal Pictures
WORKSHOP
D a t a p r e v – C O P D
DESENHAR CADA VEZ MENOS
INTERFACES
WORKSHOP
D a t a p r e v – C O P D
E A CULPA É DE QUEM?
WORKSHOP
D a t a p r e v – C O P D
É DESSES CARAS
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
GOOGLE NOW ON TAP
WORKSHOP
D a t a p r e v – C O P D
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
O QUE O DESIGNER ELABOROU
WORKSHOP
D a t a p r e v – C O P D
DO QUE O USUÁRIO PRECISA
WORKSHOP
D a t a p r e v – C O P D
E A CULPA É TAMBÉM DA
INTERNET DAS COISAS
Arte: Mashable
WORKSHOP
D a t a p r e v – C O P D
É O FIM DA CRIAÇÃO DE
INTERFACES?
WORKSHOP
D a t a p r e v – C O P D
É 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
AS NOTIFICAÇÕES, MENSAGENS, ALERTAS, CARDS, ETC.
FAZEM PARTE DE UM “SISTEMA DE DESIGN” QUE PRECISA
DE ALGUÉM PARA DESENVOL...
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
WORKSHOP
D a t a p r e v – C O P D
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
OBRIGADO !
©WARNER BROS. PICTURES
WORKSHOP
D a t a p r e v – C O P D
REFERÊNCIAS
•	 HTTP://ARQUITETURADEINFORMACAO.COM/USER-EXPERIENCE/NOSSO-TRABALHO-E-DESENHAR-CADA-VEZ-
MENOS-INTERFACES/
•	...
Próximos SlideShares
Carregando em…5
×

Workshop for COPD – Panorama Atual e Ferramentas de Web Design

173 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
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×