O documento discute conceitos relacionados ao web design, como a diferença entre web design e webdesigner. Explica que web design envolve a criação de sites e documentos na web de forma multidisciplinar, requerendo conhecimentos em áreas como arquitetura da informação e programação. Também aborda o funcionamento de agências web e como são desenvolvidos websites, desde a definição de objetivos até a programação.

1. Web Design
http://www...

2. Web...web...
● Web design ou Webdesigner?
● Uma agência web
● O Website... Do que é feito?
● #comofaz?
● Go and get your job!

3. Web... O quê?
É muito fácil confundir, mas não esqueça!
Web Design e Webdesigner
são coisas diferentes.

4. Web Design
Pode ser visto como uma extensão da prática
do design, onde o foco do projeto é a criação
de web sites e documentos disponíveis no
ambiente da web.
(fonte Wikipédia)

5. Web Design
(...) O web design tende à multidisciplinaridade,
uma vez que a construção de páginas web
requer subsídios de diversas áreas técnicas,
além do design propriamente dito. Áreas como
a arquitetura da informação, programação,
usabilidade, acessibilidade entre outros.
(fonte Wikipédia)

6. Webdesigner
É o profissional competente
para a elaboração do projeto
estético e funcional de um
web site.
(fonte Wikipédia)

7. Agência web, o Habitat
Existêm diversos tipos de empresas
responsáveis por atender o mercado
publicitário, propaganda e marketing, mas às
responsáveis pela conceitualização e a criação
das peças e ações são as Agências.

8. Agência web, o Habitat
Agências de publicidade podem:
● Criar embalagens; (design de produto)
● Criar marcas, logotipos... (branding)
● Criar spots e vinhetas de rádios, comerciais
de TV, folders, anúncios...; (tradicionais, full-service)
● e ...Criar Websites! (agência web, ou digital)

9. Agência web, o Habitat
Agência digital, também conhecida por
agência web, é um empresa especializada em
prestar serviços na área do desenvolvimento
técnico e criativo de produtos relacionados com
a internet.
(fonte: Wikipédia)

10. Agência web, o Habitat
São agências digitais:
● Ag2 Publicis
● Cappuccino Digital
● Ginga
● KAUS
● Publicidade Interativa
● Sirius Interativa
● e muito mais.

11. Agência web, o Habitat
Mas... como é por dentro?

12. Agência web, o Habitat
Pessoas, pessoas, pessoas
Somos atendimento, diretores
criativos, designers, redatores,
planners, analistas de redes
sociais, programadores...

13. Agência web, o Habitat
Criando uma nuvem criativa de idéias e
conceitos, e funcionando graças ao
processo de trabalho (job workflow).

14. Website
Hipertexto, hiperlink, hiper..uipi!!!

15. O website
É um conjunto de
páginas web, isto é, de
hipertextos acessíveis
geralmente pelo
protocolo HTTP na
Internet.
(fonte: Wikipédia)

16. O website
Hipertexto, é um formato digital que agrega
informações (textos, imagens, sons...) e são
inteligados através de referências, os
hiperlinks.
HTTP, é protocolo de comunicação para trocar
dados de hipermídia (Hipertexto).

17. O website, do que é feito?
Os websites (ou sites), podem ser
desenvolvidos utilizando diversas linguagens
de programação, e a mais elementar delas, o
HTML (Linguagem de Marcação de Hipertexto).

18. O website, camadas...
E podemos dizer que todo website são
constituidos por camadas de:
● Apresentação (layout)
● Informação (conteúdo)
● Lógica (programação)

19. O website, camadas...
Apresentação (layout)

20. O website, camadas...
Informação
Corresponde a todo conteúdo do site
(texto, imagens, sonos, vídeos...)

21. O website, camadas...
Lógica
Corresponde às regras e diretrizes
condicionais aos comportamentos de interação
do usuário com o Conteúdo do website.

22. O website, #comofaz?
Mas antes, o método.
A receita para desenvolver um website deve
seguir os passos, nesta ordem:
1. Objetivos do website;
2. Wireframe;
3. Layout;
4. Programação.

23. O website, #comofaz?
Os Objetivos do website, também conhecido
como briefing, é nesse documento que são
identificados/definidos o público-alvo, o
conteúdo que vai ser publicado, a frequência
de atualização, detalhes técnicos de linguagem
e recursos de interação disponíveis.

24. O website, #comofaz?
Wireframe, é o esqueleto do website. Também
define como vai ficar distribuido o conteúdo, e
seus recursos de interação com usuário.
O wireframe, também pode ser caracterizado
como o esboço do website.

25. O website, #comofaz?
Layout, é feito logo após o wireframe, e
corresponde a identidade visual do website.
Um bom layout deve estar sempre de acordo
com os objetivos do cliente, e integrado ao
seus valores visuais de maneira clara e
objetiva.

26. O website, #comofaz?
Programação, corresponde aos códigos e
lógicas presentes no website. É a fase onde o
as instruções de interação do wireframe e os
padrões visuais do layout são convertidos em
códigos, que serão interpretados pelos
Navegadores (browsers).

27. Dúvidas?
http://www...

28. Mãos à obra!
http://www...

29. Briefing:
Website pessoal (curriculo online)
Publico alvo:
Jovens e adultos.
Conteúdo:
Perfil profissional, Histórico profissional,
Habilidades/conhecimentos e Contato (formulário -
nome, email mensagem).
Mãos à obra! - wireframe

30. Briefing:
Website petshop "Meu Pet".
Publico alvo:
Jovens e adultos.
Conteúdo:
Apresentação dos produtos oferecidos na loja
Apresentação do serviço de banho&tosa
Contatos (email, telefone, endereço)
Mãos à obra! - wireframe

31. Briefing:
Lan house "GameShow"
Publico alvo:
Jovens e adultos. Foco em jovens.
Conteúdo:
Apresentação do serviço oferecido
Infraestrutura disponível (configuração computadores, e etc)
Horários de funcionamento
Contatos (email, telefone, endereço)
Mãos à obra! - wireframe

32. Obrigado!
;)