Upload
decio-benicio
View
158
Download
0
Embed Size (px)
Citation preview
PANORAMA ATUAL E FERRAMENTAS DE
Arte: Andreas Levers
WORKSHOPD a t a p r e v C O P D
WEB DESIGN
FORMAO EM DESIGN GRFICO
ASSESSOR (DESIGNER) CGTD /COPD
CEO & CRIATIVE DIRECTOR
SKILLS
Centro Universitrio Belas Artes de So Paulo
Dataprev
Dcio Bencio Design
Design: Graphic, Web, UI, UX, MotionIlustrao
CSSHTML5
Wordpress ThemesBranding
DCIO BENCIO
Foto: Andreas Levers
O fim do desenho de interfaces
WORKSHOPD a t a p r e v C O P D
WORKSHOPD a t a p r e v C O P D
VAMOS NOS SITUAR NO TEMPO
WORKSHOPD a t a p r e v C O P D
ANOS
ESTAMOS FALANDO DOS LTIMOS
WORKSHOPD a t a p r e v C O P D
ANOS
ESTAMOS FALANDO DOS LTIMOS
WORKSHOPD a t a p r e v C O P D
ANOS
ESTAMOS FALANDO DOS LTIMOS
WORKSHOPD a t a p r e v C O P D
O PROFISSIONAL
DESIGNER GRFICO
WORKSHOPD a t a p r e v C O P D
O PROFISSIONAL
DESIGNER GRFICO
WEB DESIGNER
WORKSHOPD a t a p r e v C O P D
O PROFISSIONAL
DESIGNER GRFICO
WEB DESIGNER
UI DESIGNER
WORKSHOPD a t a p r e v C O P D
O PROFISSIONAL
DESIGNER GRFICO
WEB DESIGNER
UI DESIGNER
VISUAL DESIGNER
WORKSHOPD a t a p r e v C O P D
O PROFISSIONAL
DESIGNER GRFICO
WEB DESIGNER
UI DESIGNER
UX DESIGNER
VISUAL DESIGNER
WORKSHOPD a t a p r e v C O P D
FERRAMENTAS
WORKSHOPD a t a p r e v C O P D
FERRAMENTAS
WORKSHOPD a t a p r e v C O P D
FERRAMENTAS
GRFICOS VETORIAISLANAMENTO EM 1987
GRFICOS BITMAP LANAMENTO EM 1990
WORKSHOPD a t a p r e v C O P D
FERRAMENTAS
AFFINITY PHOTO AFFINITY DESIGNER
WORKSHOPD a t a p r e v C O P D
FERRAMENTAS
INKSCAPE GIMP
WORKSHOPD a t a p r e v C O P D
FERRAMENTAS
SKETCH APP FOR MAC
WORKSHOPD a t a p r e v C O P D
FERRAMENTAS
APLICAO INTEIRAMENTE VOLTADA PARA CRIAO DE INTERFACES DIGITAIS
WORKSHOPD a t a p r e v C O P D
FERRAMENTAS
EXPERIENCE DESIGN
WORKSHOPD a t a p r e v C O P D
FERRAMENTAS
WORKSHOPD a t a p r e v C O P D
FERRAMENTAS
WORKSHOPD a t a p r e v C O P D
Arte: Andreas Levers
TENDNCIAS
WORKSHOPD 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 DESIGN
O USO DE DISPOSITIVOS MVEIS ULTRAPASSOU OS DESKTOPS
E ISSO J PASSADO...
WORKSHOPD a t a p r e v C O P D
NAVEGAO
A DECISO DE UMA ABORDAGEM DE INTERFACE PARA MOBILE INFLUENCIA NO DESKTOP
AS PGINAS SO MAIS GESTUAIS E MENOS CLICVEIS
AUMENTO DA UTILIZAO DA ROLAGEM
INTERAES COM O LAYOUT
WORKSHOPD a t a p r e v C O P D
NAVEGAO
VERTICALIZAO DAS PGINAS SCROOL INFINITO EX: FACEBOOK, G1, PINTEREST
UTILIZAO DE LAYOUTS EM CARDS - PINTEREST, PORTAIS DE NOTCIAS
WORKSHOPD a t a p r e v C O P D
NAVEGAO
WORKSHOPD a t a p r e v C O P D
IMAGENS E VDEOS REDEFINIO DAS ESTRUTURAS DE CABEALHO
O DESIGN EDITORIAL FAZ ISSO H ANOS
WORKSHOPD a t a p r e v C O P D
WORKSHOPD a t a p r e v C O P D
WORKSHOPD a t a p r e v C O P D
USURIOS
WORKSHOPD a t a p r e v C O P D
USURIOS MAIS ESPERTOS
NOIS MANO!
Toei Company
WORKSHOPD a t a p r e v C O P D
USURIOS MAIS ESPERTOS
USURIOS MAIS EXPERIENTES REQUEREM PGINAS MAIS GEIS
LEVEZA NOS LAYOUTS
FLAT DESIGN PERFORMANCE E FLUIDEZ
INFOGRAFIA VALORIZAO DA TIPOGRAFIA
GHOST BUTTONS BOTES LEVES, COM CONTORNOS LEVES E BACKGROUNDS TRANSPARENTES
Toei Company
BUTTON
WORKSHOPD a t a p r e v C O P D
BITMAP X VETOR
IMAGENS BITMAP CEDEM ESPAO A GRFICOS ESCALVEIS: CSS SHAPES, SVG, VETORES.
AUMENTO NA DENSIDADE DE PIXELS:
TELAS RETINAS + SMARTPHONES
UTILIZAO DE CONES EM FONTES, SVG OU EM CSS
SUBSTITUIO DE IMAGENS POR ILUSTRAES MATERIAL DESIGN CARDS
WORKSHOPD a t a p r e v C O P D
ANIMAES
WORKSHOPD a t a p r e v C O P D
ANIMAES
WORKSHOPD a t a p r e v C O P D
ANIMAES
ANIMAES COMO ELEMENTOS DE SUPORTE EXPERINCIA DO USURIO.
MOTION DESIGNERS!
MAIS UMA TENDNCIA QUE MIGRA DO MOBILE PARA O DESKTOP
MATERIAL DESIGN COMO UM DOS EXEMPLOS MAIS CLAROS DESSA TENDNCIA
SUPORTE A ANIMAES NO CSS, DEIXAMOS DE NECESSITAR DE VARIADOS PLUGINS
WORKSHOPD a t a p r e v C O P D
REDES SOCIAIS
AS REDES SOCIAIS ESTO SATURANDO AS PESSOAS.
AUMENTO DAS OPES DE PUBLICIDADES COM CONTEDOS FOCADOS EM NICHOS
FACEBOOK ADS, TWITTER ADS, INSTAGRAM
INCREMENTO DAS LISTAS DE EMAILS = NOTIFICAES DE CONTEDOS QUE O PRPRIO
USURIO SELECIONA PARA LEITURA;
CONSEQUNCIA: NOTIFICAES DESSES CONTEDOS NA TELA DO DISPOSITIVO, SEJA ELE
MVEL OU DESKTOP;
WORKSHOPD a t a p r e v C O P D
E O FUTURO?
Universal Pictures
WORKSHOPD a t a p r e v C O P D
DESENHAR CADA VEZ MENOS INTERFACES
WORKSHOPD a t a p r e v C O P D
E A CULPA DE QUEM?
WORKSHOPD a t a p r e v C O P D
DESSES CARAS
DA INTELIGNCIA ARTIFICIAL E AS EXPERINCIAS PR-ATIVASGOOGLE NOW
WORKSHOPD a t a p r e v C O P D
GOOGLE NOW ON TAPWORKSHOPD a t a p r e v C O P D
RESPONDENDO UMA MENSAGEM DE TEXTO DA PRPRIA CENTRAL DE NOTIFICAES
WORKSHOPD a t a p r e v C O P D
O QUE O DESIGNER ELABOROUWORKSHOPD a t a p r e v C O P D
DO QUE O USURIO PRECISAWORKSHOPD a t a p r e v C O P D
E A CULPA TAMBM DAINTERNET DAS COISAS
Arte: Mashable
WORKSHOPD a t a p r e v C O P D
O FIM DA CRIAO DE INTERFACES?
WORKSHOPD a t a p r e v C O P D
O FIM DA CRIAO DE INTERFACES?
NO! O TRABALHO DO DESIGNER CONTINUA
WORKSHOPD a t a p r e v C O P D
AS NOTIFICAES, MENSAGENS, ALERTAS, CARDS, ETC. FAZEM PARTE DE UM SISTEMA DE DESIGN QUE PRECISA
DE ALGUM PARA DESENVOLV-LOS.
WORKSHOPD a t a p r e v C O P D
AS EMPRESAS CONTINUARO PRECISANDO REFORAR SUAS MARCAS E SEUS POSICIONAMENTOS
WORKSHOPD a t a p r e v C O P D
WORKSHOPD a t a p r e v C O P D
O ESCOPO MUDA, MAS A NECESSIDADE DA EXISTENCIA DE UM DESIGNER NO
WORKSHOPD a t a p r e v C O P D
OBRIGADO !WARNER BROS. PICTURES
WORKSHOPD a t a p r e v C O P D
REFERNCIAS
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
WORKSHOPD a t a p r e v C O P D