Web Design > Aula 00
19 gostaram•3,530 visualizações
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.
Web Design > Aula 00
- 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).
- 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).
- 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! ;)