FTIN - Módulo de WebDesign

1. FTIN - Módulo de WebDesign Prof. Iran Pontes

2. FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA PHOTOSHOP

3. PHOTOSHOP - SLICE • Slice é uma ferramenta de recorte no Photoshop

4. PHOTOSHOP - SLICE • Selecionar a ferramenta > Pressionar com o mouse a área que será recortada.

5. PHOTOSHOP - SLICE • Selecionar a ferramenta > Pressionar com o mouse a área que será recortada.

6. PHOTOSHOP - SLICE Salvar as imagens recortadas: Menu file> Save for web

7. PHOTOSHOP - SLICE Formatação: JPEG > 72 (quality)> Save

8. PHOTOSHOP - SLICE Escolha a pasta > Imagesonly (salva apenas as imagens) HTML andImages (Salva html do layout e imagens) HTML Only (Salva apena o html)

9. PHOTOSHOP - SLICE

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

11. 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.

12. 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.

13. COMO ELABORAR UM BRIEFING • Tarefa • Projeto • Negócio • Comunicação • Estratégia • Publico-alvo

14. 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

15. 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.

16. 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.

17. 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)

18. 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.

19. 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

20. ARQUITETURA DA INFORMAÇÃO • “Organizo sites na internet para que usuários possam encontrar o que procuram.” Peter Morville • Ela é o esquema do site em cima do qual todos os outros aspectos são construídos forma, função, metáfora, navegação e interface, interação e design visual.” (SHIPLE, 2001)

21. ARQUITETURA DA INFORMAÇÃO UNIBRATEC – CARLOS JOSÉ

22. ARQUITETURA DA INFORMAÇÃO RESUMINDO: • Arquitetura de informação tem como objetivo a construção de websites fáceis de usar, que preencham necessidades dos clientes e objetivos dos usuários. (Carlos José)

23. ARQUITETURA DA INFORMAÇÃO - TAXONOMIA • Classificar informação em uma hierarquia (árvore),utilizando o relacionamento pai-filho (generalização ou “tipo-de”). Web Semântica - A internet do Futuro (Karin Breitman)

24. ARQUITETURA DA INFORMAÇÃO - WIREFRAME • É um desenho feito a mãe ou pelo computador que mostra como será seu site (disposição de cada elemento) orientando sobre a organização do site.

25. ARQUITETURA DA INFORMAÇÃO - WIREFRAME

26. ARQUITETURA DA INFORMAÇÃO - WIREFRAME

27. 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.

28. TIPOGRAFIA NA WEB • Princípios da Tipografia na Web • Tamanho • Espaçamento e Margem • Constraste • Comprimento e Alinhamento

29. TIPOGRAFIA NA WEB • 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.

30. TIPOGRAFIA NA WEB • 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

31. TIPOGRAFIA NA WEB • 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

32. TIPOGRAFIA NA WEB • 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

33. TIPOGRAFIA NA WEB • Sites para downloads de fonts: • www.1001freefonts.com • www.dafont.com • www.urbanfonts.com • www.fontsquirrel.com

34. 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”

35. 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.

36. 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.

37. ESTRUTURA BÁSICA DE UM WEBSITE • Layout com Topo e Rodapé • Layout Responsivo • Layout de 2 colunas • Layout de 3 colunas

38. 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

39. 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: www.designculture.com.br

40. ESTRUTURA BÁSICA DE UM WEBSITE

41. ESTRUTURA BÁSICA DE UM WEBSITE

42. 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/

43. ESTRUTURA BÁSICA DE UM WEBSITE

44. 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.

45. FLAT DESIGN Tendência que segue a linha da simplicidade, leveza, clean, minimalismo (menos é mais) ...

46. FLAT DESIGN

47. ATIVIDADE • Crie um briefing para uma empresa fictícia que está querendo desenvolver um site. Empresa: Lojão dos CabelosSegmento: Venda de produtos de beleza • 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 link dos sites. • Pesquise sobre flat design e explique com suas palavras do que se trata. Cada atividade é uma avaliação, dedique-se. Faça as atividades com suas palavras, não copie e cole da internet ou colegas.

48. ATIVIDADE Prazo para postagem: 21/09/2013 até às 23h55 • Evite enviar a postagem de sua atividade no último dia. • Imprevistos podem ocorrer; • Sua organização e pontualidade também estão sendo avaliadas; • Não plagie. Caso constatado, a atividade receberá conceito negativo (NSF).

49. DÚVIDAS... • Acesse o Fórum de dúvidas e discussões Diariamente. • Chat na Terça-Feira 17/09/2013 19h00 as 20h30

50. Ferramentas de apoio • Apostilas e vídeos do AVASIS; • Fórum durante o módulo com resposta em até 06 horas úteis; • Email do professor: iranpontes@hotmail.com