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

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

FTIN - Módulo de WebDesign Prof. Ítalo Araújo. CRIANDO LAYOUTS PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA.

Apresentações semelhantes


Apresentação em tema: "FTIN - Módulo de WebDesign Prof. Ítalo Araújo. CRIANDO LAYOUTS PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA."— Transcrição da apresentação:

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

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

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

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

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

6 Como elaborar um Briefing Tarefa 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 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 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 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 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 Público-alvo – Descrição do público a ser atingido com a realização do projeto. – Ex: Adultos de 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. 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 Princípios da Tipografia na Web – Tamanho – Espaçamento e Margem – Constraste – Comprimento e Alinhamento

14 Tipografia Princípios da 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.

15 Tipografia Princípios da 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

16 Tipografia Princípios da 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

17 Tipografia Princípios da 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

18 Tipografia Sites para downloads de fonts: Sites para downloads de fonts: – – – –

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. 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 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. 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. 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. Devemos apenas colocar as páginas principais. Para subpáginas, criamos agrupamentos que formam um submenu, ou seja, um menu dentro de outro menu. 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 com Topo e Rodapé Layout Responsivo Layout Responsivo Layout de 2 colunas Layout de 2 colunas Layout de 3 colunas Layout de 3 colunas

23 Estrutura Básica de um Website Layout com Topo e Rodapé 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

24 Estrutura Básica de um Website Layout Responsivo 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 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:

26 Estrutura Básica de um Website Layout de 3 colunas 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:

27 ATIVIDADE 1)Crie um briefing para uma empresa fictícia que vende produtos de beleza e deseja criar um site. 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 que poderiam melhorar e o que você encontrou de errado neles.

28 Atividade Prazo para postagem: 14/07/12 até às 23:55h 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; Apostilas e vídeos do AVASIS; Fórum durante o módulo, com resposta em até 6 horas úteis; Fórum durante o módulo, com resposta em até 6 horas úteis; do professor: 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: Na próxima aula: – Criando Layouts para Web Siga-me: Siga-me: – – Facebook.com/italoj.araujo – Twitter.com/italoj


Carregar ppt "FTIN - Módulo de WebDesign Prof. Ítalo Araújo. CRIANDO LAYOUTS PARA WEB FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA."

Apresentações semelhantes


Anúncios Google