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

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

FTIN - Módulo de WebDesign

Apresentações semelhantes


Apresentação em tema: "FTIN - Módulo de WebDesign"— Transcrição da apresentação:

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 > 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 Criando layouts para web

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

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

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 Cabelos Segmento: 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 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; do professor:

51 POR HOJE É SÓ! PRÓXIMA AULA: SIGA-ME: Implementação HTML/CSS
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"

Apresentações semelhantes


Anúncios Google