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