Your SlideShare is downloading. ×
0
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Web Design > Aula 00
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Design > Aula 00

1,374

Published on

Curso de Web Design

Curso de Web Design

Published in: Design
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,374
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
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. Web Designhttp://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 Webdesignersão coisas diferentes.
  • 4. Web DesignPode ser visto como uma extensão da práticado design, onde o foco do projeto é a criaçãode web sites e documentos disponíveis noambiente da web.(fonte Wikipédia)
  • 5. Web Design(...) O web design tende à multidisciplinaridade,uma vez que a construção de páginas webrequer subsídios de diversas áreas técnicas,além do design propriamente dito. Áreas comoa 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 HabitatExistêm diversos tipos de empresasresponsáveis por atender o mercadopublicitário, propaganda e marketing, mas àsresponsáveis pela conceitualização e a criaçãodas peças e ações são as Agências.
  • 8. Agência web, o HabitatAgê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 HabitatAgência digital, também conhecida poragência web, é um empresa especializada emprestar serviços na área do desenvolvimentotécnico e criativo de produtos relacionados coma internet.(fonte: Wikipédia)
  • 10. Agência web, o HabitatSão agências digitais:● Ag2 Publicis● Cappuccino Digital● Ginga● KAUS● Publicidade Interativa● Sirius Interativa● e muito mais.
  • 11. Agência web, o HabitatMas... como é por dentro?
  • 12. Agência web, o HabitatPessoas, pessoas, pessoasSomos atendimento, diretorescriativos, designers, redatores,planners, analistas de redessociais, programadores...
  • 13. Agência web, o HabitatCriando uma nuvem criativa de idéias econceitos, e funcionando graças aoprocesso de trabalho (job workflow).
  • 14. WebsiteHipertexto, 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 websiteHipertexto, é um formato digital que agregainformações (textos, imagens, sons...) e sãointeligados através de referências, oshiperlinks.HTTP, é protocolo de comunicação para trocardados de hipermídia (Hipertexto).
  • 17. O website, do que é feito?Os websites (ou sites), podem serdesenvolvidos utilizando diversas linguagensde programação, e a mais elementar delas, oHTML (Linguagem de Marcação de Hipertexto).
  • 18. O website, camadas...E podemos dizer que todo website sãoconstituidos 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çãoCorresponde a todo conteúdo do site(texto, imagens, sonos, vídeos...)
  • 21. O website, camadas...LógicaCorresponde às regras e diretrizescondicionais aos comportamentos de interaçãodo usuário com o Conteúdo do website.
  • 22. O website, #comofaz?Mas antes, o método.A receita para desenvolver um website deveseguir 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 conhecidocomo briefing, é nesse documento que sãoidentificados/definidos o público-alvo, oconteúdo que vai ser publicado, a frequênciade atualização, detalhes técnicos de linguageme recursos de interação disponíveis.
  • 24. O website, #comofaz?Wireframe, é o esqueleto do website. Tambémdefine como vai ficar distribuido o conteúdo, eseus recursos de interação com usuário.O wireframe, também pode ser caracterizadocomo o esboço do website.
  • 25. O website, #comofaz?Layout, é feito logo após o wireframe, ecorresponde a identidade visual do website.Um bom layout deve estar sempre de acordocom os objetivos do cliente, e integrado aoseus valores visuais de maneira clara eobjetiva.
  • 26. O website, #comofaz?Programação, corresponde aos códigos elógicas presentes no website. É a fase onde oas instruções de interação do wireframe e ospadrões visuais do layout são convertidos emcódigos, que serão interpretados pelosNavegadores (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 lojaApresentação do serviço de banho&tosaContatos (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 oferecidoInfraestrutura disponível (configuração computadores, e etc)Horários de funcionamentoContatos (email, telefone, endereço)Mãos à obra! - wireframe
  • 32. Obrigado!;)

×