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