FTIN - Módulo de WebDesign

Apresentação em tema: "FTIN - Módulo de WebDesign"— 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 Criando layouts para web

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.

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.

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

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

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:

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; 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: Siga-me: Criando Layouts para Web
Facebook.com/italoj.araujo Twitter.com/italoj