Treinamento de Webdesign

Instrutor: Danilo Rozisca

Organizao: O i Fema-CEPEIN

Sumrio
Histrico d internet; da Arquitetura da Informao; Briefing; Wireframes / Documentao; Na prtica 1s passos no Photoshop.

Treinamento de Webdesign - Aula I

Histrico da internet: A Internet teve incio em 1969 sob o nome de ARPANET (USA). Composta de quatro computadores que tinha como finalidade, demonstrar as potencialidades na construo de redes usando computadores dispersos (espalhados) em uma grande rea. A idia foi boa, e em 1972, 50 universidades e instituies militares j possuam conexes conexes.

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

da Internet.

grfica

Treinamento de Webdesign - Aula I

Treinamento de Webdesign - Aula I

Arquitetura da Informao Criada por Saul Wurman em 1976, para organizar a 1976 informao, tornando simples o que complexo. um passo essencial na criao ou reformulao de uma interface.

Treinamento de Webdesign - Aula I

A importncia da AI Um bom planejamento de todos os fluxos de informao e das funcionalidades de um site tornam o produto final muito mais usvel e lucrativo. Cerca de 27% das causas de insucesso das vendas de um website de comrcio eletrnico so porque o usurio simplesmente no conseguiu encontrar o item que procurava. procurava NIELSEN NORMAN GROUP (2001)

Treinamento de Webdesign - Aula I

Arquiteto da Informao a pessoa que cria a estrutura ou mapa da informao que permite que outros encontrem suas necessidades de conhecimento. o profissional emergente do sc. XXI que, em ltima anlise, procura estudar as necessidades humanas e a cincia que envolve a organizao da informao.

Treinamento de Webdesign - Aula I

Critrios indispensveis para os projetos na web
Heursticas de Nielsen: Dilogos simples e naturais; F l a li g g Falar linguagem d usurio; do i Minimizar a sobrecarga de memria do usurio (no abusar dos itens de navegao e opes); Consistncia(cores, fontes e outros); Feedback(a cada ao uma reao); Sadas claramente marcadas; Atalhos; Boas mensagens de erro; Prevenir erros(o sistema deve ser capaz de recusar erros humano).

Treinamento de Webdesign - Aula I

Princpios da AI para metodologias de projeto de arquitetura de informao de websites:
Sistema de Organizao (Organization System) Sistema de Navegao (Navigation System) Sistema de Rotulao (Labeling System) Sistemas de Busca (Search System)

Treinamento de Webdesign - Aula I

Sistema d Organizao (Organization System) de Determina o agrupamento e a categorizao do contedo i f t d informacional. i l

Treinamento de Webdesign - Aula I

Treinamento de Webdesign - Aula I

Sistema de N Si t d Navegao (N i ti System) (Navigation S t ) Especifica as maneiras de navegar, de se mover pelo espao informacional e hipertextual hipertextual. Navegao por R N g Rosenfeld e Morville f ld M ill
Navegao global Navegao local Navegao contextual

Treinamento de Webdesign - Aula I

Sistema d Rotulao (Labeling System) de l i Estabelece as formas de representao, de apresentao d i f t da informao, d fi i d signos para definindo i cada elemento informativo.

Treinamento de Webdesign - Aula I

Sistemas de Busca (Search System) Determina as perguntas que o usurio pode fazer e o conjunto de respostas que ir obter.

Os componentes fundamentais da Arquitetura de Informao

Treinamento de Webdesign - Aula I

fases para o desenvolvimento: ROSENFELD e MORVILLE (2002)

Pesquisa: fase em que so pesquisadas e analisadas as informaes sobre os usurios, suas necessidades e o seu ambiente visando definir o escopo e os requisitos do projeto; Estratgia: fase eminentemente criativa, na qual se concebe a viso macro da soluo; Design: fase em que a viso macro da soluo detalhada em documentos e diagramas que explicam como construir o website; Implementao: fase em que o website construdo conforme especificado;

Administrao: fase na qual o resultado do projeto avaliado em f Ad i i t f l lt d d j t li d funo d dos seus objetivos iniciais para se registrar os acertos e erros.

Treinamento de Webdesign - Aula I

BRIEFING (Entrevista, Pblico Alvo, C l bl l Cultura) nada mais que u relatrio sob e o p oduto, se v o, ada a s um elat o sobre produto, servio, campanha, destacando situao, posicionamento e objetivos. O briefing nos d uma melhor viso do projeto, com isso possvel criar um oramento compatvel, fazer uma compatvel estimativa do tempo de produo e realizar a criao p p propriamente dita.

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, idia e projeto. 3. Quem seu pblico principal? 4. 4 Voc est imaginando uma certa aparncia e sensao para o site? 5. Voc tem padres existentes, como logos e cores, que devem ser incorporados? i d ? 6. Quais sero os itens do menu e as sees que devero compor o layout?

Treinamento de Webdesign - Aula I

Wireframes / Documentao. Wi f D t
O arquiteto de informao produz uma srie de documentos especficos que comunicam a soluo de interface para o cliente e para a equipe de produo: Mapa do site; Fluxogramas de navegao; Wireframes. Wireframes

Treinamento de Webdesign - Aula I

Mapa do site - diviso hierrquica do contedo do site site.

Mapa do site da Universidade Federal do Cear

Treinamento de Webdesign - Aula I

Fluxogramas d navegao (bl Fl de (blueprint) - d fi i d principais i ) definies dos i i i fluxos de informao do site.

Treinamento de Webdesign - Aula I

Wireframe O wireframe normalmente entregue ao cliente para aprovao antes de ficar pronto o design grfico. Wireframe no pra ser bonito, pra ser entendido. Sua funo apresentar os elementos que vo compor a pgina. p g

Treinamento de Webdesign - Aula I

O objetivo do uso de wireframes conseguir discutir e planejar a arquitetura de informao com o cliente sem que ele sofra influncias visuais. i i

Treinamento de Webdesign - Aula I

Outro exemplo d wireframe e d resultado fi l O l de i f do l d final.

Treinamento de Webdesign - Aula I

ELEMENTO DE INTERFACE
Marca da empresa Busca Navegao global Navegao local Breadcrumbs Contedo global e contextual Navegao de rodap

POSICIONAMENTO
Canto superior Parte superior Parte superior com links na horizontal Coluna da esquerda Parte superior, abaixo da marca da empresa rea central Parte inferior

PESQUISADOR
Nielsen, Adksson e Bernard Nielsen, Adksson e Bernard Nielsen, Nielsen Adksson e Krug Nielsen, Adksson e Bernard Adksson, Lida e Chaparro e Krug Bernard Nielsen, Krug, Nielsen Krug Lynch e Horton
MEMRIA (2005)

Treinamento de Webdesign - Aula I

Marca Navegao global Breadcrumbs buscar

Navegao local

Contedo global e contextual

Contedo relacionado

Navegao rodap d

MEMRIA (2005)

Treinamento de Webdesign - Aula I

Na Prtica 1s 1 passos no Ph t h Photoshop

Treinamento de Webdesign - Aula I

Muito Obrigado
Fim

Treinamento de Webdesign - Aula I

Referncias:
DAMASCENO, ANIELLE Webdesign: Teoria e Prtica; Visual Books; Florianpolis; 2003. MEMRIA, FELIPE Design para Internet: projetando a experincia 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 informao e o bibliotecrio do futuro; Revista de Biblioteconomia de Braslia, v.23/24, n.2, p.135-146; 1999/2000. RADFAHRER, LULI Design/Web/Design:2; 2 Edio; 2000; Formato: PDF; Disponibilizado no endereo: 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.

Treinamento de Webdesign - Aula I

Referncias (Sit ): Sites
CAVICHIOLI ODAIR JR http://cavichioli.blogspot.com/ Acessado: 26/05/2008 Slide - Design de Interface; - Tipografia; - Teoria das Cores; - Diagramao de Sites. MUNIZ, MUNIZ RODRIGO http://rodrigomuniz.com/blog/moda-no-design-para-a-web/ Acessado: 23/06/2008 - Influncia da Apple. WIKEPDIA 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