FTIN - Módulo de WebDesign

Prof. Ítalo Araújo

CRIANDO LAYOUTS PARA WEBFTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

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

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.

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:– Criando Layouts para Web

• Siga-me:– www.italoaraujo.com– Facebook.com/italoj.araujo– Twitter.com/italoj