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

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

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.

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.

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

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

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.

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.

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)

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.

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

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.

Tipografia Princípios da Tipografia na Web Tamanho Espaçamento e Margem Constraste Comprimento e Alinhamento

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.

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

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

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

Tipografia Sites para downloads de fonts: www.1001freefonts.com www.dafont.com www.urbanfonts.com www.fontsquirrel.com

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”

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.

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.

Estrutura Básica de um Website Layout com Topo e Rodapé Layout Responsivo Layout de 2 colunas Layout de 3 colunas

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

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

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/

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: http://owltastic.com/

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.

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

Ferramentas de apoio Apostilas e vídeos do AVASIS; Fórum durante o módulo, com resposta em até 6 horas úteis; E-mail do professor:

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

Por hoje é só! Na próxima aula: Siga-me: Criando Layouts para Web www.italoaraujo.com Facebook.com/italoj.araujo Twitter.com/italoj