workshop for copd – panorama atual e ferramentas de web design

57
PANORAMA ATUAL E FERRAMENTAS DE Arte: Andreas Levers WORKSHOP Dataprev – COPD WEB DESIGN

Upload: decio-benicio

Post on 27-Jan-2017

158 views

Category:

Design


0 download

TRANSCRIPT

  • 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