O documento apresenta os principais tópicos de um treinamento sobre webdesign, incluindo a história da internet, arquitetura da informação, briefing, wireframes, e introdução ao Photoshop. Os principais pontos abordados são a evolução da internet desde a ARPANET, a importância da arquitetura da informação para a usabilidade de sites, e os passos iniciais de desenvolvimento como briefing, wireframes e mapas de sites.

1. Treinamento de Webdesign
Instrutor: Danilo Rozisca O
Organização:
i ã
Fema-CEPEIN

2. Sumário
- Histórico d internet;
da
- Arquitetura da Informação;
- Briefing;
- Wireframes / Documentação;
- Na prática – 1ºs passos no Photoshop.

3. Treinamento de Webdesign - Aula I
Histórico da internet:
A Internet teve início em 1969 sob o nome de ARPANET
(USA). Composta de quatro computadores que tinha como
finalidade, demonstrar as potencialidades na construção de
redes usando computadores dispersos (espalhados) em uma
grande área.
A idéia foi boa, e em 1972, 50 universidades e instituições
militares já possuíam conexões
conexões.

4. Treinamento de Webdesign - Aula I
A Word Wide Web
As pessoas costumam falar em Internet e Web será a
Web,
mesma coisa?
Enfim a WEB é a interface gráfica
da Internet.

5. Treinamento de Webdesign - Aula I

6. Treinamento de Webdesign - Aula I
Arquitetura da Informação
Criada por Saul Wurman em 1976, para organizar a
1976
informação, tornando simples o que é complexo.
É um passo essencial na criação ou reformulação de uma
interface.

7. Treinamento de Webdesign - Aula I
A importância da AI
Um bom planejamento de todos os fluxos de informação e
das funcionalidades de um site tornam o produto final muito
mais usável e lucrativo.
Cerca de 27% das causas de insucesso das vendas de um
website de comércio eletrônico são porque o usuário
simplesmente não conseguiu encontrar o item que
procurava.
procurava NIELSEN NORMAN GROUP (2001)

8. Treinamento de Webdesign - Aula I
Arquiteto da Informação
É a pessoa que cria a estrutura ou mapa da informação que
permite que outros encontrem suas necessidades de
conhecimento.
É o profissional emergente do séc. XXI que, em última
análise, procura estudar as necessidades humanas e a
ciência que envolve a organização da informação.

9. Treinamento de Webdesign - Aula I
Critérios indispensáveis para os projetos na web
Heurísticas de Nielsen:
• Diálogos simples e naturais;
• F l a li g g
Falar linguagem d usuário;
do ái
• Minimizar a sobrecarga de memória do usuário (não abusar dos
itens de navegação e opções);
• Consistência(cores, fontes e outros);
ê
• Feedback(a cada ação uma reação);
• Saídas claramente marcadas;
• Atalhos;
• Boas mensagens de erro;
• Prevenir erros(o sistema deve ser capaz de recusar erros humano).

10. Treinamento de Webdesign - Aula I
Princípios da AI para metodologias de projeto de
arquitetura de informação de websites:
• Sistema de Organização (Organization System)
• Sistema de Navegação (Navigation System)
• Sistema de Rotulação (Labeling System)
• Sistemas de Busca (Search System)

11. Treinamento de Webdesign - Aula I
Sistema d Organização (Organization System)
de
– Determina o agrupamento e a categorização do
conteúdo i f
t úd informacional.
i l

12. Treinamento de Webdesign - Aula I

13. Treinamento de Webdesign - Aula I
Sistema de N
Si t d Navegação (N i ti System)
ã (Navigation S t )
– Especifica as maneiras de navegar, de se mover pelo
espaço informacional e hipertextual
hipertextual.
Navegação por R
N g ã Rosenfeld e Morville
f ld M ill
– Navegação global
– Navegação local
– Navegação contextual

14. Treinamento de Webdesign - Aula I
Sistema d Rotulação (Labeling System)
de l i
Estabelece as formas de representação, de
apresentação d i f
t ã da informação, d fi i d signos para
ã definindo i
cada elemento informativo.

15. Treinamento de Webdesign - Aula I
Sistemas de Busca (Search System)
– Determina as perguntas que o usuário pode fazer e o
conjunto de respostas que irá obter.

16. Os componentes fundamentais da Arquitetura
de Informação

17. Treinamento de Webdesign - Aula I
5 fases para o desenvolvimento: ROSENFELD e MORVILLE (2002)
Pesquisa: fase em que são pesquisadas e analisadas as informações sobre os
usuários, suas necessidades e o seu ambiente visando definir o escopo e os
requisitos do projeto;
Estratégia: fase eminentemente criativa, na qual se concebe a visão macro
da solução;
Design: fase em que a visão macro da solução é detalhada em documentos e
diagramas que explicam como construir o website;
Implementação: fase em que o website é construído conforme especificado;
Administração: fase na qual o resultado do projeto é avaliado em f
Ad i i t ã f l lt d d j t li d função d
ã dos
seus objetivos iniciais para se registrar os acertos e erros.

18. Treinamento de Webdesign - Aula I
BRIEFING (Entrevista, Público Alvo, C l
úbl l Cultura)
É nada mais que u relatório sob e o p oduto, se v ço,
ada a s um elató o sobre produto, serviço,
campanha, destacando situação, posicionamento e
objetivos.
O briefing nos dá uma melhor visão do projeto, com isso é
possível criar um orçamento compatível, fazer uma
compatível
estimativa do tempo de produção e realizar a criação
p p
propriamente dita.

19. Treinamento de Webdesign - Aula I
Exemplo simples:
E l i l
1. Qual o nome do site?
2. Fale um pouco sobre a sua empresa, idéia e projeto.
3. Quem é seu público principal?
4.
4 Você está imaginando uma certa aparência e sensação para o site?
5. Você tem padrões existentes, como logos e cores, que devem ser
incorporados?
i d ?
6. Quais serão os itens do menu e as seções que deverão compor o
layout?

20. Treinamento de Webdesign - Aula I
Wireframes / Documentação.
Wi f D t ã
O arquiteto de informação produz uma série de documentos específicos
que comunicam a solução de interface para o cliente e para a equipe
de produção:
• Mapa do site;
• Fluxogramas de navegação;
• Wireframes.
Wireframes

21. Treinamento de Webdesign - Aula I
Mapa do site - divisão hierárquica do conteúdo do site
site.
Mapa do site da Universidade Federal do Ceará

22. Treinamento de Webdesign - Aula I
Fluxogramas d navegação (bl
Fl de ã (blueprint) - d fi i õ d principais
i ) definições dos i i i
fluxos de informação do site.

23. Treinamento de Webdesign - Aula I
Wireframe
O wireframe normalmente é entregue ao cliente para
aprovação antes de ficar pronto o design gráfico.
Wireframe não é pra ser bonito, é pra ser entendido.
Sua função é apresentar os elementos que vão compor
a página.
p g

24. Treinamento de Webdesign - Aula I
O objetivo do uso de wireframes é
conseguir discutir e planejar a
arquitetura de informação com o
cliente sem que ele sofra influências
visuais.
i i

26. Treinamento de Webdesign - Aula I
Outro exemplo d wireframe e d resultado fi l
O l de i f do l d final.

27. Treinamento de Webdesign - Aula I
ELEMENTO DE INTERFACE POSICIONAMENTO PESQUISADOR
Marca da empresa Canto superior Nielsen, Adksson e Bernard
Busca Parte superior Nielsen, Adksson e Bernard
Parte superior com
Navegação global Nielsen,
Nielsen Adksson e Krug
links na horizontal
Navegação local Coluna da esquerda Nielsen, Adksson e Bernard
Parte superior, abaixo da Adksson, Lida e Chaparro e
Breadcrumbs
marca da empresa Krug
Conteúdo global e contextual Área central Bernard
Navegação de rodapé Parte inferior Nielsen, Krug,
Nielsen Krug Lynch e Horton
MEMÓRIA (2005)

28. Treinamento de Webdesign - Aula I
Marca buscar
Navegação global
Breadcrumbs
Navegação local Conteúdo global Conteúdo
e contextual relacionado
Navegação rodapé
d é
MEMÓRIA (2005)

29. Treinamento de Webdesign - Aula I
Na Prática
1ºs
1º passos no Ph t h
Photoshop

30. Treinamento de Webdesign - Aula I
Muito Obrigado
Fim

31. Treinamento de Webdesign - Aula I
Referências:
DAMASCENO, ANIELLE
Webdesign: Teoria e Prática; Visual Books; Florianópolis; 2003.
MEMÓRIA, FELIPE
Design para Internet: projetando a experiência perfeita;
Rio de Janeiro; Elsevier; 2005.
MORROGH, EARL
Information Architecture: An Emerging 21st Century Profession;
New Jersey; Prentice Hall; 2003.
PEON ESPANTOSO, JOSE JUAN
ESPANTOSO
O arquiteto da informação e o bibliotecário do futuro; Revista de Biblioteconomia de Brasília, v.23/24, n.2, p.135-146;
1999/2000.
RADFAHRER, LULI
Design/Web/Design:2; 2ª Edição; 2000;
Formato: PDF;
Disponibilizado no endereço: http://www.luli.com.br/dwd2.
ROSENFELD, L. ; MO V
OS N , . MORVILLE, P ,
Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006.

32. Treinamento de Webdesign - Aula I
Referências (Sit ):
Sites
CAVICHIOLI ODAIR JR
http://cavichioli.blogspot.com/
Acessado: 26/05/2008
Slide - Design de Interface;
- Tipografia;
- Teoria das Cores;
- Diagramação de Sites.
MUNIZ,
MUNIZ RODRIGO
http://rodrigomuniz.com/blog/moda-no-design-para-a-web/
Acessado: 23/06/2008
- Influência da Apple.
WIKEPÉDIA
http://www.wikepedia.org
Acessado: 27/05/2008
- Webdesign.
DIGITAL PAPER
http://digitalpaperweb.com.br/ezine/tipografia/o que e tipografia
http://digitalpaperweb.com.br/ezine/tipografia/o-que-e-tipografia
Acessado: 01/06/2008
- Tipografia.
PINCELADAS DA WEB
http://www.pinceladasdaweb.com.br/blog/category/web-20/
Acessado: 26/06/2008
A d
- Web 2.0