Web Designer - O Arquiteto da Informação

Web Designer O Arquiteto da Informação Digital

by Gustavo Zimmermann

Quem???

O que VEREMOS?

1. Design: conceito

2. Gerações na Internet

3. Web Gerações

4. Informação

5. Web Design

6. Como estragar um site

7. Posso ser um Web Designer? O que preciso saber?

8. Tendências

9. Finalização

O que é Web Design?

?

O QUE NÓS FAZEMOS?

Pergunte ao colega do lado

??? Responda

“Design é o resultado da produção humana pensada e analisada de

maneira eficiente”

Fernando Rosseto

1

“Design é transformar necessidades reais do ser humano em soluções de

fácil entendimento.”

Fernando Rosseto

2

O que é Web Design?

?

Calma, calma, não criemos pânico!

Tim Bernes-Lee •Criador da WWW

•Inventor do HTML

1º site da Web http://bit.ly/z1N8L

2012 634 milhões de sites

2009 175 milhões de sites

1982 315 sites na Internet

1975 100 sites na Arpanet

*Vídeo: A História da Internet: http://youtu.be/yyY_392Tn7Q

informação GERAÇÕES

Tradicionais até 1945

informação GERAÇÕES

Baby-Boomers 1946 a 1964

informação GERAÇÕES

Geração X 1965 a 1977

informação GERAÇÕES

Geração Y 1978 a 1990

informação GERAÇÕES

Geração z 1991 a ???

informação GERAÇÕES 2012

634 milhões de sites

2009 175 milhões de sites

1982 315 sites na Internet

1975 100 sites na Arpanet

53% dos internautas ativos

são homens;

Brasil INDICADORES

IBOPE/Nielsen http://bit.ly/1806PHu

47% dos internautas ativos são mulheres;

Brasil INDICADORES

IBOPE/Nielsen http://bit.ly/1806PHu

51,1%

Brasil INDICADORES

25 49 anos

IBOPE/Nielsen http://bit.ly/1806PHu

22,1%

Brasil INDICADORES

12 24 anos

IBOPE/Nielsen http://bit.ly/1806PHu

Viagens ANTIGAMENTE

Música ANTIGAMENTE

Celular ANTIGAMENTE

Hoje cabe NO BOLSO

LOUCOS POR INFORMAÇÃO

Web++ A EVOLUÇÃO DA INTERNET

Web 1.0 apresentação informação divulgação + =

Web 2.0 interação intuição feedback colaboração + = +

Web 3.0 analisar compreender feedback

web semântica

+ =

+

O que é Web Design?

?

“Design é transformar necessidades reais do ser humano em soluções de

fácil entendimento.”

Fernando Rosseto

INFORMAÇÃO

A preocupação fundamental do web designer é

agregar os conceitos de usabilidade com o

planejamento da pessoa em destaque através de

interface, garantindo que o usuário final atinja seus

objetivos de forma agradável e intuitiva. ”

“

EU POSSO

SER UM Web Designer?

VOCÊ AMA O

?

VOCÊ TEM

?

VOCÊ ACHA

atraentes?

ESTÁ DISPOSTO A

?

VOCÊ TEM UM

?

BLZA! Agora vamos

entender algumas coisas...

vs. Design Gráfico

DICAS DE COMO estragar

UM SITE:

10

Use IMAGENS AO INVÉS

de CSS

1

Esconda SEU E-MAIL

2

2

PLAGEIE 3

Não CANTE

4

Misture ANUNCIOS

5

Use INTRODUÇÃO

6

Tenha MÚSICA TOCANDO no site

7

Reinvente A NAVEGAÇÃO 8

USE muitos POP-UPs

9

Use HOSPEDAGEM gratuita

10

O QUE PRECISO Saber?

O QUE PRECISO Saber? • UX Design

• Layout

• Web standards

• Design Responsivo

• Cross-browser

• DHTML

O QUE PRECISO Saber?

User Interface

O QUE PRECISO Saber?

UX Design

• Freedback

• Implementação

• Interface proativa

• Intuição

• Eficiência

O QUE PRECISO Saber?

UX Design

RUSS UNGER

“Design de experiência do usuário é a

criação e sincronização dos elementos

que afetam a experiência dos usuários

com um produto. Com isso é possível

influenciar suas percepções e

comportamentos.”

O QUE PRECISO Saber?

UX Design

Dan Staffer http://bit.ly/14sx5FA

O QUE PRECISO Saber?

Layout

O QUE PRECISO Saber?

Web standards

O QUE PRECISO Saber?

Design Responsivo

2010

O QUE PRECISO Saber?

Cross-browser

*Vídeo: Guerra dos Navegadores: http://youtu.be/DeEafmwRk6A

no mundo NAVEGADORES set/2013

40,8%

28,56%

18,36%

8,52%

1,16%

Dados da StatCounter: http://bit.ly/1co0Vn0

no Brasil NAVEGADORES set/2013

64,45%

16,8%

13,95%

2,15%

0,6%

Dados da StatCounter: http://bit.ly/1aDzl1w

O QUE PRECISO Saber?

DHTML

01. Skeuomorphism

Tendências no momento

Tendências no momento 02. Flat Design (Design Plano)

Tendências no momento Skeuomorphism Flat Design vs.

03. Uso de cores e ícones simples

04. Tudo grande e muito espaço em branco

05. Layout dinâmico em grade

06. Grandes fotos como fundo

07. Desenhar com Fontes

2014 tendências

Flat Design

2014 tendências

Tipografias estilizadas

2014 tendências

Sites Aplicativos

2014 tendências

Design Responsivo

2014 tendências

Low Poly

TODO O super-herói

TEM INIMIGOS

UMA LUTA LENDÁRIA

O SOBRINHO

Finalizando • alinhamento • imagem • cor • tipografia

• alinhamento

• imagem

• cor

• tipografia

Referências imagens e conhecimentos

1. Blue Bus: http://www.bluebus.com.br/

2. Choco la Design: http://chocoladesign.com/

3. Des1gn’ON: http://www.des1gnon.com/

4. Design.blog: http://design.blog.br/

5. Wix Blog: http://pt.wix.com/blog/

1. Behance (portfolio online): http://www.behance.net/

2. Carbonmade (portfolio online): http://carbonmade.com/

3. Codepen (DHTML online): http://codepen.io/pen/

4. Codrops (frameworks jQuery): http://tympanus.net/codrops/

5. Cross Browser Testing : http://crossbrowsertesting.com/

Ferramentas vale a pena conferir :)

1. Creattica: http://creattica.com/

2. CSSelite.com: http://www.csselite.com/

3. CSS Mania: http://cssmania.com/

4. HTML5 Gallery: http://html5gallery.com/

5. Onextrapixel: http://www.onextrapixel.com/

6. Smashing Magazine: http://www.smashingmagazine.com/

7. Template Monster: http://www.templatemonster.com/

8. The CSS Awards: http://www.thecssawards.com/

9. ThemeForest: http://themeforest.net/

10. The FWA: http://thefwa.com/

Inspirações vale a pena conferir :)

</fim> Gustavo Zimmermann

site: gust4vo.com