Aula 1 Webdesign

Treinamento de WebdesignTreinamento de Webdesign

O i ãInstrutor: Danilo Rozisca Organização:

Fema-CEPEIN

SumárioSumário

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

Treinamento de Webdesign - Aula ITreinamento de Webdesign Aula I

Histórico da internet:

A Internet teve início em 1969 sob o nome de ARPANET 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 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õesmilitares já possuíam conexões.


A Word Wide Web

As pessoas costumam falar em Internet e Web será a As pessoas costumam falar em Internet e Web, será a mesma coisa?

Enfim a WEB é a interface gráficada Internet.



Arquitetura da Informação

Criada por Saul Wurman em 1976 para organizar a Criada por Saul Wurman em 1976, para organizar a informação, tornando simples o que é complexo.

É um passo essencial na criação ou reformulação de uma interface.


A importância da AI

Um bom planejamento de todos os fluxos de informação e 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.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 NIELSEN NORMAN GROUP (2001)procurava. NIELSEN NORMAN GROUP (2001)


Arquiteto da Informação

É a pessoa que cria a estrutura ou mapa da informação que É a pessoa que cria a estrutura ou mapa da informação que permite que outros encontrem suas necessidades de conhecimento.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.


Critérios indispensáveis para os projetos na web

Heurísticas de Nielsen:Heurísticas de Nielsen:

• Diálogos simples e naturais;F l li g g d á i• Falar a linguagem do usuário;

• 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).Prevenir erros(o sistema deve ser capaz de recusar erros humano).


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 Navegação (Navigation System)

• Sistema de Rotulação (Labeling System)

• Sistemas de Busca (Search System)

Treinamento de Webdesign - Aula I

d

Treinamento de Webdesign Aula I

Sistema de Organização (Organization System)

– Determina o agrupamento e a categorização do t úd i f i lconteúdo informacional.



Si t d N ã (N i ti S t )


Sistema de Navegação (Navigation System)– Especifica as maneiras de navegar, de se mover pelo

espaço informacional e hipertextualespaço informacional e hipertextual.

N g ã R f ld M illNavegação por Rosenfeld e Morville– Navegação global– Navegação localNavegação local– Navegação contextual


d l i


Sistema de Rotulação (Labeling System)Estabelece as formas de representação, de

t ã d i f ã d fi i d iapresentação da informação, definindo signos paracada elemento informativo.


Sistemas de Busca (Search System)Determina as perguntas que o usuário pode fazer e o– Determina as perguntas que o usuário pode fazer e oconjunto de respostas que irá obter.

Os componentes fundamentais da Arquitetura de Informação



5 fases para o desenvolvimento: ROSENFELD e MORVILLE (2002)

Pesquisa: fase em que são pesquisadas e analisadas as informações sobre os 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;

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


BRIEFING úbl l C l


BRIEFING (Entrevista, Público Alvo, Cultura)

É nada mais que um relatório sobre o produto, serviço, ada a s que u elató o sob e o p oduto, se v ç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 possível criar um orçamento compatível, fazer uma estimativa do tempo de produção e realizar a criação propriamente dita.p p


E l i l


Exemplo simples:

1. Qual o nome do site?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 Você está imaginando uma certa aparência e sensação para o site?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 i d ?incorporados?

6. Quais serão os itens do menu e as seções que deverão compor o layout?


Wi f / D t ã


Wireframes / Documentação.

O arquiteto de informação produz uma série de documentos específicos 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.


Mapa do site divisão hierárquica do conteúdo do site


Mapa do site - divisão hierárquica do conteúdo do site.

Mapa do site da Universidade Federal do Ceará


Fl d ã (bl i ) d fi i õ d i i i


Fluxogramas de navegação (blueprint) - definições dos principaisfluxos de informação do site.


Wireframe

O wireframe normalmente é entregue ao cliente paraaprovaçã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


O objetivo do uso de wireframes é conseguir discutir e planejar a conseguir discutir e planejar a arquitetura de informação com o cliente sem que ele sofra influências i ivisuais.


O l d i f d l d fi l


Outro exemplo de wireframe e do resultado final.


ELEMENTO DE INTERFACE POSICIONAMENTO PESQUISADOR

Marca da empresa Canto superior Nielsen, Adksson e Bernard

Busca Parte superior Nielsen, Adksson e Bernard

Navegação globalParte superior com

Nielsen Adksson e KrugNavegação globallinks na horizontal

Nielsen, Adksson e Krug

Navegação local Coluna da esquerda Nielsen, Adksson e Bernard

Breadcrumbs Parte superior, abaixo da marca da empresa

Adksson, Lida e Chaparro e Krug

Conteúdo global e contextual Área central Bernard

Navegação de rodapé Parte inferior Nielsen Krug Lynch e HortonNavegação de rodapé Parte inferior Nielsen, Krug, Lynch e Horton

MEMÓRIA (2005)


Marca

Navegação global

buscar

Breadcrumbs

Navegação local Conteúdo globale contextual

Conteúdo relacionado

d éNavegação rodapé

MEMÓRIA (2005)


Na PráticaNa Prática

1º Ph t h1ºs passos no Photoshop


Muito ObrigadoMuito Obrigado

Fim


Referências:


Referências:

DAMASCENO, ANIELLEWebdesign: Teoria e Prática; Visual Books; Florianópolis; 2003.

MEMÓRIA, FELIPEDesign para Internet: projetando a experiência perfeita;Rio de Janeiro; Elsevier; 2005.

MORROGH, EARLInformation Architecture: An Emerging 21st Century Profession;New Jersey; Prentice Hall; 2003.

PEON ESPANTOSO JOSE JUANPEON ESPANTOSO, JOSE JUANO 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, LULIDesign/Web/Design:2; 2ª Edição; 2000;Formato: PDF;Disponibilizado no endereço: http://www.luli.com.br/dwd2.

ROSENFELD, L. ; MORVILLE, POS N , . ; MO V , Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006.


Referências (Sit ):


Referências (Sites):

CAVICHIOLI ODAIR JRhttp://cavichioli.blogspot.com/Acessado: 26/05/2008Slide - Design de Interface;- Tipografia;- Teoria das Cores;- Diagramação de Sites.

MUNIZ RODRIGOMUNIZ, RODRIGOhttp://rodrigomuniz.com/blog/moda-no-design-para-a-web/Acessado: 23/06/2008- Influência da Apple.

WIKEPÉDIAhttp://www.wikepedia.orgAcessado: 27/05/2008- Webdesign.

DIGITAL PAPERhttp://digitalpaperweb.com.br/ezine/tipografia/o-que-e-tipografiahttp://digitalpaperweb.com.br/ezine/tipografia/o que e tipografiaAcessado: 01/06/2008- Tipografia.

PINCELADAS DA WEBhttp://www.pinceladasdaweb.com.br/blog/category/web-20/A d 26/06/2008Acessado: 26/06/2008- Web 2.0

Technology

Aula 1 Webdesign