A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

FTIN - Módulo de WebDesign Prof. Iran Pontes. PHOTOSHOP FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.

Apresentações semelhantes


Apresentação em tema: "FTIN - Módulo de WebDesign Prof. Iran Pontes. PHOTOSHOP FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA."— Transcrição da apresentação:

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

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

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 > Images only (salva apenas as imagens) HTML and Images (Salva html do layout e imagens) HTML Only (Salva apena o html)

9 PHOTOSHOP - SLICE

10 CRIANDO LAYOUTS PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

11 BRIEFING Brief (eng) = Dossiê. O briefing ou brífingue[1] é um conjunto de informações, uma coleta de dados passadas em uma reunião para o desenvolvimento de um trabalho, documento, sendo muito utilizadas em Administração, Relações Públicas e na Publicidade.

12 BRIEFING O briefing é uma peça fundamental para a elaboração e desenvolvimento de um projeto. Um elemento chave para o planejamento 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 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

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: – – – –

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 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:

40 ESTRUTURA BÁSICA DE UM WEBSITE

41

42 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:

43 ESTRUTURA BÁSICA DE UM WEBSITE

44 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 1) 1)Crie um briefing para uma empresa fictícia que está querendo desenvolver um site. Empresa: Lojão dos Cabelos Segmento: Venda de produtos de beleza 2) 2)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. 3) 3)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/ h00 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; do professor:

51 POR HOJE É SÓ! PRÓXIMA AULA: – Implementação HTML/CSS SIGA-ME: – Facebook.com/iranpontes – Twitter.com/iranpontes –

52 POR HOJE É SÓ! "Qual de vocês, se quiser construir uma torre, primeiro não se assenta e calcula o preço, para ver se tem dinheiro suficiente para completá-la? Pois, se lançar o alicerce e não for capaz de terminá- la, todos os que a virem rirão dele, dizendo: Este homem começou a construir e não foi capaz de terminar. Lucas 14:28-30


Carregar ppt "FTIN - Módulo de WebDesign Prof. Iran Pontes. PHOTOSHOP FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA."

Apresentações semelhantes


Anúncios Google