Autoração web aula 2 - o processo de web design - ticianne ribeiro
-
Upload
ticianne-darin -
Category
Documents
-
view
441 -
download
0
Transcript of Autoração web aula 2 - o processo de web design - ticianne ribeiro
![Page 1: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/1.jpg)
1
![Page 2: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/2.jpg)
2
![Page 3: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/3.jpg)
• Muitas vezes é
negligenciado
• Fácil de lembrar, único
• Passar confiança
• Demonstrar seu
trabalho
• Seja criativo!
3
Web
Designer
Portifolio
![Page 4: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/4.jpg)
• Categorizar seu
trabalho
• Esclareça com imagens
e palavras
• Que seja amigável de
buscar e de olhar
4
Boas coisas
a fazer
![Page 5: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/5.jpg)
5
Minimalista, elegante e direto.
![Page 6: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/6.jpg)
6
Artístico, ousado e bonito.
![Page 7: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/7.jpg)
7
Aposta em cores não usuais e
navegação horizontal.
![Page 8: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/8.jpg)
8
Criativo, pessoal e bastante
comercial.
![Page 9: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/9.jpg)
9
Divertido, comunicativo e
funcional.
![Page 10: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/10.jpg)
10
Simplicidade com boa
comunicabilidade. Criativo e
pessoal.
![Page 11: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/11.jpg)
• Sobrecarga de
informação
• Desperdício de espaço
• Não esqueça o contato!
• Mantenha a navegação
consistente.
11
Coisas a
evitar
![Page 12: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/12.jpg)
12
Background distrativo,
navegação confusa, perda de
informação, desperdício de
espaço
![Page 13: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/13.jpg)
13
Muita informação, legenda (?),
menu confuso, trabalhos são
similares
![Page 14: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/14.jpg)
14
Contraste ruim, quebra da
navegação, erro de CSS
![Page 15: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/15.jpg)
![Page 16: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/16.jpg)
Aula 2 – O processo de Web Design
prof. Ticianne Ribeiro
16
![Page 17: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/17.jpg)
Definição
17
![Page 18: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/18.jpg)
18
![Page 19: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/19.jpg)
• 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
![Page 20: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/20.jpg)
Passos do Processo de Web
Design
20
![Page 21: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/21.jpg)
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
![Page 22: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/22.jpg)
• Cada pessoa tem um
estilo
• Mas nunca pode faltar:
– Planejamento
–Design
–Desenvolvimento
–Lauch
–Manutenção
22
Mas há
coisas que
não podem
faltar
![Page 23: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/23.jpg)
• 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!
![Page 24: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/24.jpg)
– 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!
![Page 25: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/25.jpg)
• 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!
![Page 26: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/26.jpg)
• Desliga esse computador!
–Desenho e wireframe
• Paleta de cores
• Tipografia
• Identidade Visual
– Agrupamento, semelhança,
continuidade, pregnância...
26
Design
![Page 27: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/27.jpg)
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
![Page 28: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/28.jpg)
28
![Page 29: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/29.jpg)
• Criação de Mockups
–Photoshop, Illustrator,
Fireworks
• Aprovação do design
• Fatiar mockup
29
Design
![Page 30: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/30.jpg)
30
![Page 31: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/31.jpg)
• Codificar HTML e CSS
para design básico
• Construir templates
• Desenvolver elementos
interativos
• Preencher com conteúdo
• Testar links e
funcionalidades
31
Desenvol-
vimento
![Page 32: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/32.jpg)
• Preparar o site para
publicação
• Validação
• “Polimento”
• Transferir para servidor
Web permanente
• Teste no ambiente de
execução
32
Launch
![Page 33: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/33.jpg)
• Garanta a satisfação
• Entregar ao cliente
–Documentação
–Códigos-fonte
–Informação de contato e suporte
• Mantenha contato
33
Manutenção
![Page 34: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/34.jpg)
• 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...
![Page 35: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/35.jpg)
Aula Prática
35
![Page 36: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/36.jpg)
• Planejamento minimo do
seu portifólio
–Requisitos de dados
– sitemap
• Wireframe para seu
portifólio
36
Trazer
próxima
aula
![Page 37: Autoração web aula 2 - o processo de web design - ticianne ribeiro](https://reader031.fdocumentos.tips/reader031/viewer/2022030308/58f333ad1a28ab21288b4585/html5/thumbnails/37.jpg)
Algo mais?
37