FTIN - Módulo de WebDesign
Prof. Iran Pontes
FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA
PHOTOSHOP
PHOTOSHOP - SLICE
• Slice é uma ferramenta de recorte no Photoshop
PHOTOSHOP - SLICE
• Selecionar a ferramenta > Pressionar com o mouse a área que será recortada.
PHOTOSHOP - SLICE
• Selecionar a ferramenta > Pressionar com o mouse a área que será recortada.
PHOTOSHOP - SLICE
Salvar as
imagens
recortadas:
Menu file>
Save for web
PHOTOSHOP - SLICE
Formatação:
JPEG >
72 (quality)>
Save
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)
PHOTOSHOP - SLICE
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
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)
ARQUITETURA DA INFORMAÇÃO
UNIBRATEC – CARLOS JOSÉ
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é)
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)
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.
ARQUITETURA DA INFORMAÇÃO - WIREFRAME
ARQUITETURA DA INFORMAÇÃO - WIREFRAME
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 NA WEB
• Princípios da Tipografia na Web
– Tamanho
– Espaçamento e Margem
– Constraste
– Comprimento e Alinhamento
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.
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
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
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
TIPOGRAFIA NA WEB
• 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: www.designculture.com.br
ESTRUTURA BÁSICA DE UM WEBSITE
ESTRUTURA BÁSICA DE UM WEBSITE
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
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.
FLAT DESIGN
Tendência que segue a linha da simplicidade, leveza, clean,
minimalismo (menos é mais) ...
FLAT DESIGN
ATIVIDADE
1)
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
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 link dos sites.
3)
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.
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).
DÚVIDAS...
Acesse o Fórum de dúvidas e discussões
Diariamente.
Chat na Terça-Feira 17/09/2013
19h00 as 20h30
FERRAMENTAS DE APOIO
• Apostilas e vídeos do AVASIS;
• Fórum durante o módulo com resposta em até
06 horas úteis;
• Email do professor: [email protected]
POR HOJE É SÓ!
• PRÓXIMA AULA:
– Implementação HTML/CSS
• SIGA-ME:
– Facebook.com/iranpontes
– Twitter.com/iranpontes
– www.designculture.com.br
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