Web Design > Aula 00

2,190 views
1,738 views

Published on

Curso de Web Design

Published in: Design

Web Design > Aula 00

  1. 1. Web Designhttp://www...
  2. 2. Web...web...● Web design ou Webdesigner?● Uma agência web● O Website... Do que é feito?● #comofaz?● Go and get your job!
  3. 3. Web... O quê?É muito fácil confundir, mas não esqueça!Web Design e Webdesignersão coisas diferentes.
  4. 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. 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. 6. Webdesigner É o profissional competente para a elaboração do projeto estético e funcional de um web site. (fonte Wikipédia)
  7. 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. 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. 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. 10. Agência web, o HabitatSão agências digitais:● Ag2 Publicis● Cappuccino Digital● Ginga● KAUS● Publicidade Interativa● Sirius Interativa● e muito mais.
  11. 11. Agência web, o HabitatMas... como é por dentro?
  12. 12. Agência web, o HabitatPessoas, pessoas, pessoasSomos atendimento, diretorescriativos, designers, redatores,planners, analistas de redessociais, programadores...
  13. 13. Agência web, o HabitatCriando uma nuvem criativa de idéias econceitos, e funcionando graças aoprocesso de trabalho (job workflow).
  14. 14. WebsiteHipertexto, hiperlink, hiper..uipi!!!
  15. 15. O website É um conjunto de páginas web, isto é, de hipertextos acessíveis geralmente pelo protocolo HTTP na Internet. (fonte: Wikipédia)
  16. 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. 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. 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. 19. O website, camadas...Apresentação (layout)
  20. 20. O website, camadas...InformaçãoCorresponde a todo conteúdo do site(texto, imagens, sonos, vídeos...)
  21. 21. O website, camadas...LógicaCorresponde às regras e diretrizescondicionais aos comportamentos de interaçãodo usuário com o Conteúdo do website.
  22. 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. 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. 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. 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. 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. 27. Dúvidas?http://www...
  28. 28. Mãos à obra!http://www...
  29. 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. 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. 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. 32. Obrigado!;)

×