O documento descreve os primeiros passos para iniciar uma carreira em design para web, incluindo aprender sobre como a web funciona, as habilidades necessárias como design gráfico e programação, a diferença entre frontend e backend, as camadas estrutura, apresentação e comportamento, e o uso de sistemas de grade para diagramação na web.

1. DWEB – Design para Web
Curso Superior de
Tecnologia em Design
Gráfico
2 Por onde começar?
“Conserva o modelo das sãs palavras que de mim tens ouvido, na fé e no amor que há em Cristo Jesus.”
2 Timóteo 1:13
1 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

2. DWEB – Design para Web / Carlos José
Contato
Carlos José
carlosjose.unibratec@gmail.com
www.carlosjose.net
twitter.com/carlosjoser2n
2 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

3. DWEB – Design para Web / Carlos José
Objetivo da Aula
n Descrever a profissão de web
design, bem como suas atribuições
e realizações.
3 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

4. DWEB – Design para Web / Carlos José
Agenda
n Por onde começar?
n O que preciso aprender?
n Frontend vs Backend
n As camadas
n Uma visão de futuro para web
n Diagramação na web
4 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

5. DWEB – Design para Web / Carlos José
Começando...
n Introdução
î Desde que a web foi criada em meados de 1989
com suas motivações iniciais muita coisa mudou!
î A web como meio de comunicação e veículo
comercial, veio para ficar, sendo assim:
n Servecomo oportunidade de carreira;
n Um estimulo para acompanhar os concorrentes;
n Apenas uma possibilidade de conseguir mostrar para
o mundo o que você faz.
5 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

6. DWEB – Design para Web / Carlos José
Começando...
n Por onde começo?
î O primeiro passo é ter uma compreensão básica
de como a web funciona e seus documentos.
n O que preciso aprender?
î O web design combina várias habilidades:
n Design gráfico
n Design de informação + Arquitetura da informação
n Design de interface
n (x)HTML + CSS
n Programação
n Multimídia
6 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

7. DWEB – Design para Web / Carlos José
Começando...
n Frontend Vs Backend
î Frontend
n Refere-se a qualquer aspecto do processo de design
relacionado diretamente ao navegador (browser).
n Tarefas do frontend:
î Design gráfico
î Design de interface
î Design de informação
î Utilização dos Web Standards para produção de websites
§ (x)HTML + CSS + Javascript (jQuery)
7 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

8. DWEB – Design para Web / Carlos José
Começando...
n Frontend Vs Backend
Grandes empresas, como Yahoo!,
Google, Twitter, Microsoft e Adobe,
investem pesado em front-end
A falta de um profissional
especializado nessa área pode
representar risco ao projeto
O domínio de especialidades de front-
end pela equipe é essencial para o
sucesso de um produto na web
Edição 81 Novembro/Dezembro 2010
8 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

9. DWEB – Design para Web / Carlos José
Começando...
n Frontend Vs Backend
î backend
n Refere-se aos programas e scripts que rodam no
servidor web para tornar dos documentos web
dinâmicos e interativos.
n Tarefas do frontend:
î Design de informação relacionado a como a informação é
organizada no servidor web.
î Processamento de formulários eletrônicos
î Programação de banco de dados
î Sistemas de gerenciamento de conteúdo
î Programação web
§ PHP, ASP, JSP, Rubi on Rails, Java e etc.
9 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

10. DWEB – Design para Web / Carlos José
Começando...
n As camadas!
î O web design contemporâneo é composto de
três camadas:
n Camada de Estrutura
î O conteúdo do documento web com suas marcações
(X)HTML.
î É a base sobre a qual as outras camadas serão assentadas
n Camada de Apresentação
î Controlar
a aparência visual formatando com CSS todo o
conteúdo que deverá aparecer no navegador.
n Camada de Comportamento
î Inclui
os scripts jQuery de programação que tornam a
experiência do usuário interativa.
10 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

11. DWEB – Design para Web / Carlos José
Começando...
n Uma visão de futuro para a web
http://inspirationfeed.com/2011/01/20-inspiring-ted-videos-for-graphic-and-web-designers/
11 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

12. DWEB – Design para Web / Carlos José
Começando...
n Diagramação na web
Cada recomendação gerada em wireframe
foi pensada e tem uma razão de ser. Logo,
deve ser respeitada pelo designer.
Em qualquer tipo de interface, contraste,
ritmo, harmonia e equilíbrio estão
presentes na composição.
Agregaram-se então a arquitetura de
informação e a usabilidade como campos
de estudo do que podemos chamar de
“diagramação digital”.
Edição 71 Novembro 2009
12 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

13. DWEB – Design para Web / Carlos José
Começando...
n Diagramação na web: Grid System
Grids não são uma moda passageira: foram
criados antes dos tipos móveis.
Parece que todos os designers interativos
estão, pela primeira vez em suas carreiras,
olhando para os impressos e para a teoria
gráfica em busca de inspiração.
As pessoas justificam um projeto ruim
porque “não quebra o grid”, eles
esquecem que feio é sempre feio.
O grid é uma ajuda, não uma garantia.
Edição 125 Dezembro 2010
13 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

14. DWEB – Design para Web / Carlos José
Começando...
n Diagramação na web:– 960.gs
14 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

15. DWEB – Design para Web / Carlos José
Começando...
n Diagramação na web:– 960.gs
15 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

16. DWEB – Design para Web / Carlos José
Começando...
n Diagramação na web:– 960.gs
16 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

17. DWEB – Design para Web / Carlos José
Começando...
n Diagramação na web:– 960.gs
17 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

18. DWEB – Design para Web / Carlos José
Começando...
n Diagramação na web:– 960.gs
18 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

19. DWEB – Design para Web / Carlos José
Começando...
n Diagramação na web:– 960.gs
19 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

20. DWEB – Design para Web / Carlos José
Começando...
n Diagramação na web:– na prática!
20 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

21. DWEB – Design para Web / Carlos José
Começando...
n Diagramação na web:– na prática!
21 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

22. DWEB – Design para Web / Carlos José
Perguntas
?
22 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12

23. DWEB – Design para Web / Carlos José
Considerações Finais
Fonte: ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição
23 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12