• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
200
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DWEB – Design para WebCurso Superior deTecnologia em DesignGrá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:131 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/carlosjoser2n2 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12
  • 3. DWEB – Design para Web / Carlos José Objetivo da Aulan 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é Agendan Por onde começar?n O que preciso aprender?n Frontend vs Backendn As camadasn Uma visão de futuro para webn Diagramação na web4 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ídia6 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 20108 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 webhttp://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 200912 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 201013 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.gs14 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.gs15 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.gs16 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.gs17 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.gs18 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.gs19 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 FinaisFonte: ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição23 Capítulo 2 - Por onde começar? Sunday, 29 de January de 12