FTIN - Módulo de WebDesign

1. FTIN - Módulo de WebDesign Prof. Ítalo Araújo

2. FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA Criando layouts para web

3. Briefing • Brief (eng) = Dossiê. O briefing ou brífingue[1] é um conjunto de informações, umacoleta de dados passadasemumareuniãoparaodesenvolvimento de um trabalho, documento, sendomuitoutilizadasemAdministração, RelaçõesPúblicasenaPublicidade.

4. Briefing • O briefing éumapeça fundamental para a elaboraçãoedesenvolvimento de um projeto. Um elementochaveparaoplanejamento de todas as etapas do projeto de acordo com as necessidades do cliente.

5. Como elaborar um Briefing • Tarefa • Projeto • Negócio • Comunicação • Estratégia • Publico-alvo

6. Como elaborar um Briefing • Tarefa • Informações detalhadas do que será realizado no projeto. • Ex: Criação do site institucional da Empresa MP - Móveis Planejados

7. Como elaborar um Briefing • Projeto • Objetivos do Projeto: Quais os principais objetivos que o projeto prente alcançar. Defina tópicos e metas que sejam cumpríveis baseando na finalidade • Ex: Expor o conteúdo institucional da empresa na internet para prospecção de clientes.

8. Como elaborar um Briefing • Negócio • Objetivos do Negócio: Qual a finalidade do negócio em questão, qual os produtos e serviços? • Ex: Ser uma empresa líder no mercado de móveis planejados. Móveis corporativos e Residencias de qualidade.

9. Como elaborar um Briefing • Comunicação • Quais os meios de comunicação será utilizado para atingir os objetivos do negócio. • Ex: Divulgação em Redes sociais (Twitter e Facebook)

10. Como elaborar um Briefing • Estratégia • Descrição sobre o que será feito para resolver o problema de marketing que levou o cliente a desenvolver esse projeto. • Ex: Criar e explorar novos mercados para a marca através do ambiente virtual. Criar relacionamento via redes sociais e divulgar o negócio seguindo o plano de comunicação.

11. Como elaborar um Briefing • Público-alvo • Descrição do público a ser atingido com a realização do projeto. • Ex: Adultos de 25-35 Anos, Masculino e Feminino

12. Tipografia • A tipografia (do grego typos — "forma" — e graphein — "escrita") é a arte e o processo de criação na composição de um texto, física ou digitalmente. Assim como no design gráfico em geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação impressa.

13. Tipografia • Princípios da Tipografia na Web • Tamanho • Espaçamento e Margem • Constraste • Comprimento e Alinhamento

14. Tipografia • Princípios da Tipografia na Web • Tamanho • 12 ou 13 pixels (Textos) • Para títulos, não temos um padrão, deve-se utilizar o bom senso para isso. • O ideal, é disponibilizar páginas que tenha a opção de aumentar e diminuir o tamanho da fonte.

15. Tipografia • Princípios da Tipografia na Web • Espaçamento e Margem • A tendencia da maioria das pessoas é ocupar o espaço disponível. Seja com textos ou fotos, e não é diferente em uma página web. • A Idéia é fazer com que a leitura seja flúida, focar o usuário no texto. • Distanciar o conteúdo das margens e bordas

16. Tipografia • Princípios da Tipografia na Web • Constraste • Fundo verde com letras vermelhas (NUNCA MAIS) • Combinar fundo branco com letras cinzas, você ajudará o leitor. • Enfatizar trechos do texto para facilitar a leitura rápida é extremamente aconselhável

17. Tipografia • Princípios da Tipografia na Web • Comprimento e Alinhamento • Um mal comum tanto em textos curtos quanto longos são linhas de texto longas de mais. • Existe um cálculo simples para saber a largura ideal de um bloco de texto. Basta multiplicar o tamanho da fonte por 30. Se a fonte tiver o tamanho de 12px, a largura do bloco não precisa passar de 360 pixels. • Texto deve ser alinhado a esquerda para facilitar a leitura

18. Tipografia • Sites para downloads de fonts: • www.1001freefonts.com • www.dafont.com • www.urbanfonts.com • www.fontsquirrel.com

19. Menu • A capacidade de utilização de zonas de “saltos”, ou simplesmente, links, é a função mais básica da internet e sua característica primordial. Ir de uma página a outra, viajar pelo mundo sem sair da frente do computador é realmente fantástico. • Navegação na web é definida pelos “Hyperlinks”

20. Menu • Hyperlinks é parte fundamental das linguagens utilizadas no desenvolvimento de uma página web e em outros meios digitais. São elementos clicáveis que podem ser textos ou imagens que levam a determinadas áreas de um documento ou nos leva para outro documento.

21. Menu • O Menu, é o agrupamento dos hyperlinks que formam o conjunto de páginas do website ou de qualquer outro projeto digital que está sendo desenvolvido. • Devemos apenas colocar as páginas principais. • Para subpáginas, criamos agrupamentos que formam um “submenu”, ou seja, um menu dentro de outro menu.

22. Estrutura Básica de um Website • Layout com Topo e Rodapé • Layout Responsivo • Layout de 2 colunas • Layout de 3 colunas

23. Estrutura Básica de um Website • Layout com Topo e Rodapé • O topo é uma área bastante comum e está presente em praticamente todos os sites. Geralmente comporta elementos importantes de um website como a logomarca da empresa e o menu da página. • Conteúdo sempre virá abaixo do topo. • Rodapé geralmente contem informações de contato (Endereço, E-mail e Telefone) e quando muito extensos, comporta todo o menu do site por questões de acessibilidade

24. Estrutura Básica de um Website • Layout Responsivo • Se adapta ao tamanho da tela do usuário • Tem voltado a ser o foco das anteções dos desenvolvedores para ser acessível pelos dispositivos móveis • Ex: globo.com

25. Estrutura Básica de um Website • Layout de 2 colunas • Característica em ter uma coluna lateral e uma coluna de conteúdo. • Muito comum em blogs, mais não necessariamente só se utiliza este formato em blogs. • Ex: http://freelanceswitch.com/

26. Estrutura Básica de um Website • Layout de 3 colunas • Característica em ter 2 colunas laterais e uma coluna de conteúdo. • Padrão bastante utilizado, mais já está caindo em desuso. • Ex: http://owltastic.com/

27. ATIVIDADE • Crie um briefing para uma empresa fictícia que vende produtos de beleza e deseja criar um site. • Procure exemplos de sites na internet que possuam a estrutura de layout Responsivo, de 2 Colunas de 3 Colunas e fale um pouco sobre eles, cite o que poderiam melhorar e o que você encontrou de errado neles.

28. Atividade Prazo para postagem: 14/07/12 até às 23:55h EVITE DEIXAR A POSTAGEM DE SUA ATIVIDADE PARA O ÚLTIMO DIA. FAZENDO ISSO, IMPREVISTOS NÃO VÃO LHE PREJUDICAR. * LEMBRANDO QUE SUA ORGANIZAÇÃO TAMBÉM ESTA SENDO AVALIADA

29. Ferramentas de apoio • Apostilas e vídeos do AVASIS; • Fórum durante o módulo, com resposta em até 6 horas úteis; • E-mail do professor:

30. DÚVIDAS... • Acesse o Fórum de dúvidas e discussões Diariamente • Chat na Terça-Feira: dia 10/07/12 no horário: das 19:00 às 20:30 h

31. Por hoje é só! • Na próxima aula: • Criando Layouts para Web • Siga-me: • www.italoaraujo.com • Facebook.com/italoj.araujo • Twitter.com/italoj