autoração web aula 2 - o processo de web design - ticianne ribeiro
TRANSCRIPT
1
2
• Muitas vezes é
negligenciado
• Fácil de lembrar, único
• Passar confiança
• Demonstrar seu
trabalho
• Seja criativo!
3
Web
Designer
Portifolio
• Categorizar seu
trabalho
• Esclareça com imagens
e palavras
• Que seja amigável de
buscar e de olhar
4
Boas coisas
a fazer
5
Minimalista, elegante e direto.
6
Artístico, ousado e bonito.
7
Aposta em cores não usuais e
navegação horizontal.
8
Criativo, pessoal e bastante
comercial.
9
Divertido, comunicativo e
funcional.
10
Simplicidade com boa
comunicabilidade. Criativo e
pessoal.
• Sobrecarga de
informação
• Desperdício de espaço
• Não esqueça o contato!
• Mantenha a navegação
consistente.
11
Coisas a
evitar
12
Background distrativo,
navegação confusa, perda de
informação, desperdício de
espaço
13
Muita informação, legenda (?),
menu confuso, trabalhos são
similares
14
Contraste ruim, quebra da
navegação, erro de CSS
Aula 2 – O processo de Web Design
prof. Ticianne Ribeiro
16
Definição
17
18
• Arte ou processo?
• Criar páginas ou sites
• Definir estética e
mecânica do
funcionamento
• Concentrar-se no look
and feel
19
Web
Design
Passos do Processo de Web
Design
20
21
Você se sente assim como Web Designer? I've been through the desert on a horse with no name…
Comece pelo wireframe
Planeje primeiro
Consulte pessoas
Antes de tudo busque inspiração
Desenvolva vários mockups
Faça protótipos navegáveis
Escolha tamanho e cores
Selecione um tema e modifique
Fatie o layout Codifique o HTML e o CSS
• Cada pessoa tem um
estilo
• Mas nunca pode faltar:
– Planejamento
–Design
–Desenvolvimento
–Lauch
–Manutenção
22
Mas há
coisas que
não podem
faltar
• Conheça o problema!
– Sobre o que é o projeto?
– É um site pessoal ou um site
de negócios?
– Quando você planeja lançá-
lo? Defina um prazo.
– Quem é o público-alvo?
– Quanto de tráfego você está
esperando?
23
Planejamento
=
Pense!
– Com que rapidez este site poderá
crescer? Defina um ponto máximo.
– Será um blog? Um fórum? Um site
estático? Dinâmico?
– Existe conteúdo pronto para o site?
É um redesign de um site já
existente?
– Você vai querer postar vídeos,
áudios, outros arquivos de mídia?
– Você pretende rentabilizar o site?
Como? Com anúncios, venda de
produtos?
24
Planejamento
=
Pense!
• Determine os requisitos
• Anote todas as idéias!
• Consulte pessoas
• Busque inspiração
• Determine a arquitetura da
informação
• Sitemap
• Organize recursos necessários
25
Planejamento
=
Pense!
• Desliga esse computador!
–Desenho e wireframe
• Paleta de cores
• Tipografia
• Identidade Visual
– Agrupamento, semelhança,
continuidade, pregnância...
26
Design
Right way to Wireframe &
Time Lapse Web Design
27
http://www.youtube.com/watch?v=gLenYBX3Iqk&feature=related http://www.youtube.com/watch?v=vQn5J7fQYzY&feature=related
28
• Criação de Mockups
–Photoshop, Illustrator,
Fireworks
• Aprovação do design
• Fatiar mockup
29
Design
30
• Codificar HTML e CSS
para design básico
• Construir templates
• Desenvolver elementos
interativos
• Preencher com conteúdo
• Testar links e
funcionalidades
31
Desenvol-
vimento
• Preparar o site para
publicação
• Validação
• “Polimento”
• Transferir para servidor
Web permanente
• Teste no ambiente de
execução
32
Launch
• Garanta a satisfação
• Entregar ao cliente
–Documentação
–Códigos-fonte
–Informação de contato e suporte
• Mantenha contato
33
Manutenção
• Processo De Web Design Eficaz e Produtivo
– http://www.luisfilho.net/?p=252
• Top 5 Web Design Trends 2011 – http://www.labelmedia.co.uk/blog/posts/
top5webdesigntrends2011.html
• Following A Web Design Process – http://www.smashingmagazine.com/2011/
06/22/following-a-web-design-process/
• Boas práticas de Web Design – http://www.easylogics.com/artigos/webd
esign/boas-praticas-de-web-design
34
Pra dar
uma
olhada...
Aula Prática
35
• Planejamento minimo do
seu portifólio
–Requisitos de dados
– sitemap
• Wireframe para seu
portifólio
36
Trazer
próxima
aula
Algo mais?
37