A nova geração da web karen lowhany

Sumário

• A nova geração da Web
• Arquitetura da Informação
• Webdesign

Arquitetura da Informação e Webdesign

A nova geração da Web

Percebe-se o aumento exagerado de
informações disponibilizadas em
ambientes digitais.

E muitas vezes, apresentadas de forma
desorganizada.


A NOVA GERAÇÃO DA WEB
exige uma mudança
e um repensar no
processo de desenvolvimento de
ambientes informacionais
digitais.


A Web 2.0 é A NOVA GERAÇÃO
DA WEB, que traz novas
regras e serviços baseados
na Web como plataforma.

Ela busca a interação
entre usuários, com a
criação e o compartilhamento de
conteúdo.

Mapa de Noções
da Web 2.0

Fonte: www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html. Acesso em: 05/05/2008


Arquitetura da Informação

Foi criada por Saul Wurman em 1976, com o objetivo de
organizar a informação, tornando simples o que é complexo.

É o estudo que se aplica em website, buscando um
balanceamento entre usuário-conteúdo-contexto, facilitando
para as pessoas o acesso a informação.


Sistemas da Arquitetura da Informação

A Arquitetura da Informação possui 4 sistemas, onde cada um
possui suas próprias regras e características, e quando
reunidas servem para organizar o ambiente informacional de
um website. Rosenfeld e Morville (2006).

Esses sistemas são:


Sistema de Organização: Maneira de categorizar e organizar a
informação.

Esquema de Organização
Alfabética
Esquema de
Organização por
Tempo
Esquema de
Organização
por Assunto


Sistema de Rotulação:

Define a forma de representar a
informação.

São elementos fundamentais que
antecipam o que virá a seguir logo
após efetuar o clique em um link.


Sistema de Navegação: Determina o modo de navegar ou mover
no espaço Informacional (e hipertextual).


Sistema de Pesquisa:

Estabelece as dúvidas
(perguntas) executadas em uma
consulta de pesquisa e como elas
serão respondidas.


Documentos da AI: Blueprints
(fluxograma de navegação)
Sobre nós

Home
Serviços Detalhe-Serviço
Eles mostram as relações entre as
páginas e outros componentes e Produtos Detalhe-Produto
podem ser usada para retratar a
organização, navegação, etiquetagem Busca Resultados
de sistemas.
Contato

A imagem não pode ser exibida. Talv ez o computador não tenha memória suficiente para abrir a imagem ou talv ez ela esteja corrompida. Reinicie o computador e abra o arquiv o nov amente. Se ainda assim aparecer o x v ermelho, poderá ser necessário excluir a imagem e inseri-la nov amente.

Documentos da AI: Wireframe

O wireframe descreve o conteúdo e a
informação a ser incluída na arquitetura
relativamente a espaços confinados
bidimensional, conhecida como página.


Exemplo de wireframe e layout final de um website:

Navegação Global

Conteúdo Global

Conteúdo Local


Usabilidade:

Possui componentes múltiplos e é radicionalmente associada
com estes cinco atributos:

• Ser fácil de aprender;
• Ser eficiente na utilização;
• Ser fácil de ser recordado;
• Ter poucos erros;
• Ser subjetivamente agradável.
(Nilsen, 1993)


Usabilidade: Portanto um website...

Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e
foco na experiência
do usuário.


Webdesign:

É uma extensão da prática do
design, onde o foco do
projeto é a criação de
websites e documentos
disponíveis no ambiente da
Web.


Webdesign: O nascimento…

Ele surgiu de estudos, voltados ao visual da Internet,
feitos por designers gráficos que descobriram e
aperfeiçoaram o uso de ferramentas avançadas de criação
gráfica.

(Damasceno , 2003)


Webdesign: Seu objetivo

É planejar e criar a
organização funcional de
todo conteúdo que será
transmitido(apresentado),
permitindo que o usuário
compreenda rapidamente a
mensagem.

(Damasceno, 2003)


Arquiteto da Informação x Webdesigner

O Arquiteto da Informação projeta o site com diferentes
métodos atribuindo uma hierarquia entre as informações.

O Webdesigner constrói o layout aplicando conceitos e
técnicas de design usando como guia o wireframe feito
pelo arquiteto.

(Rosenfeld e Morville, 2006)


A missão do design

Segundo Norman (2006), o design tem a missão de colaborar na

criação de produtos cada vez mais ÚTEIS, bons, bonitos,
baratos e eficazes.


Aparência não é
Importante!


A prática da
simplicidade!


Webdesign : Interface/Layout

Informação visual criada para comunicar, utilizando
influencias, sentimentos e experiência de quem a observa.

Estrutura que organiza informações dentro de um
determinado contexto, promovendo interação entre o
usuário e a informação.

(Cavichioli, 2008)


Webdesign: Os três elementos fundamentais de uma
interface

Design balanceado: equilíbrio e composição entre imagens, gráficos e
fontes tipográficas.

Contraste: integração entre os elementos do design.

Linhas invisíveis: são áreas criadas entre diferentes partes de um
design. Proporção de 70% para conteúdo e 30% para espaços em branco.


Webdesign: Convenções de desenho de Interface

A padronização das interfaces é um dos conceitos mais
importantes para se projetar websites.

Elas estão relacionadas a conceitos de psicologia cognitiva,
como facilidade de aprendizado e memorização, diminuindo as
chances de dúvidas e erros por parte dos usuários.

(Memória, 2005)


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, 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, Lynch e Horton

(Memória, 2005)


Webdesign: Convenções de desenho de Interface

Marca buscar

Navegação global

Breadcrumbs

Navegação local Conteúdo global Conteúdo
e contextual relacionado

Navegação rodapé

(MEMÓRIA, 2005)


Webdesign: Tipografia

É a arte, o processo de criação e a classificação do
desenho de letras do alfabeto e de caracteres usados para
formar palavras.

(CAVICHIOLI, 2008)



As fontes tipográficas
(ou apenas fontes) são
classificadas em 4 grupos
básicos: as com serifas, as
sem serifas, as cursivas e as
fontes dingbats.

Fonte: DigitalPaperWeb.com.br
Acessado em: 01 julho 2008



Fontes pré-instaladas:
Arial;
Arial black;
Comic Sans MS;
Courier New;
Georgia;
Impact;
Times New Roman;
Trebuchet MS;
Verdana.
(Nielsen e Loranger, 2007)


Webdesign: Fontes legíveis para web
Nome da Fonte Característica
Arial Moderna, limpa, básica.

Fonte com serifa projetada para leitura on-line.
Georgia Aparência Tradicional, visual mais moderno que Times
News Roman.

Trebuchet MS Moderna, simples.

Verdana Fonte on-line mais legivel, mesmo em texto pequeno

Todas com 10 pontos ou acima. (Nielsen e Loranger, 2007)


Webdesign: Legibilidade, textos existem para serem lidos.
Fonte serifada
Exemplo:
para título

Curiosidade, inovação e descoberta
A World Wide Web abriu fronteiras inacreditáveis: pela primeira vez os profissionais de
layout e artes gráficas têm acesso a um público enorme, que pode ver seus trabalhos a
qualquer instante.

Alguns dizem que o conjunto das tais “páginas pessoais” é a maior exposição pública de
arte da história.

Sob alguns aspectos, esse público é até maior que o dos publicitários, pois não tem
restrições de tempo.

Fonte sem serifa
para texto


Webdesign: Psicologia das cores

Desde os primórdios da
humanidade, a cor já é utilizada
como elemento de sinalização;

Para cada sociedade do planeta,
uma mesma cor possui diferentes
significados.

(Damasceno, 2003)


Webdesign: Psicologia das cores

As cores podem ter alguns significados, provocar lembranças e
sensações diferentes às pessoas dependendo de sua cultura:

Vermelho: paixão, força, energia, amor;
Azul: harmonia, confidência, monotonia, tecnologia;
Verde: natureza, primavera, fertilidade, riqueza, ganância;
Amarelo: otimismo, alegria, felicidade, riqueza (ouro), fraqueza;
Branco: pureza, inocência, paz, simplicidade, esterilidade;
Preto: poder, modernidade, sofisticação, morte, medo, mistério.

(Cavichioli, 2008)


Webdesign: Combinação de cores

Círculo cromático - Método de representar o
espectro visível agrupando as cores na seqüência da
freqüência espectral;

Seu gráfico é conhecido também como Roda das
cores, Círculo das cores ou Círculo cromático.

(Cavichioli, 2008)


Webdesign: Círculo cromático

Esquema Triádico

– Combina três cores eqüidistantes
(triangulação);
– Como a intensidade entre as cores
são pouco distintas, esse esquema é
mais versátil;
– Pode-se utilizar essa técnica para
diminuir a vibração óptica das cores.

(Cavichioli, 2008)


Webdesign: Padrões Web (Webstandards)

Criados pelo W3C (World Wide Web Consortium), eles
separam o conteúdo em HTML da apresentação em CSS,
mantendo a compatibilidade e portabilidade com navegadores,
dispositivos...

(Ferreira, 2005, p. 12)


Webdesign: Padrões Web (Webstandards)

Os Padrões Web tornam o desenvolvimento mais simples e
produtivo, resultando em:

• Montagem Rápida do Layout;
• Desenvolvimento simplificado;
• Independência entre layout e conteúdo;
• Manutenção simplificada;
• Padrões Reaproveitáveis.

(Ferreira, 2005)


Webdesign: Webwriting

É o conjunto de técnicas que auxiliam na distribuição de
conteúdo informativo em ambientes digitais, tendo como
base a persuasão.

(Rodrigues, 2006)



O texto para Web deve ser apresentado mais conciso,
simplificado (curto), e não com menor quantidade de
informações.

Deve ser objetivo / enxuto – com frases e parágrafos curtos.

Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008



Parágrafos separados por espaços (“blocos de texto”);

Bloco de texto 1

Bloco de texto único X Bloco de texto 2

Bloco de texto 3



Webdesign: Webwriting – sujestões que podem ajudar

Entre dois sinônimos, escolha o mais curto.
Evite repetições, palavras inúteis, longas e excessivas. Ex:

EVITAR USAR
Empreender Fazer
Unicamente Só
No Estado do Paraná No Paraná
Na eventualidade de Se
Durante o ano de 2005 Em 2005
Na época em que vivemos Hoje


Webdesign: Webwriting e suas vantagens

• O texto torna-se mais prático;

• A compreensão do leitor é mais rápida e fácil;

• Facilita a criação de fidelidade com o visitante;



Conclusão:

Para apresentar conteúdos em Ambientes Informacionais
Digitais de forma eficiente, clara, compreensível, objetiva,
que valorize as informações, a partir de conceitos e
metodologias relacionadas a Arquitetura da Informação e
Webdesign. Sugere-se que seja utilizado o seguinte processo
de desenvolvimento para website:


Processo de desenvolvimento para website


REFERÊNCIAS BIBLIOGRÁFICAS

CAVICHIOLI, O. Tipografia, Teoria das Cores. Disponível em: <http://cavichioli.blogspot.com/>. Acesso em em: 26/05/2008.

DAMASCENO, A. Webdesign: Teoria e Prática. Florianópolis: Visual Books, 2003.

FERREIRA, E. Produtividade Web 2.0. São Paulo: Visie, 2005.

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

NIELSEN, J. Usabiliy Engineering. San Francisco: Academic Press, 1993. 361 p.

NIELSEN, J.; LORANGER, H. Usabilidade na web. Rio de Janeiro: Elsevier, 2007.

NORMAN, D. A. O Design do dia-a-dia. Rio de Janeiro: Rocco, 2006.

RODRIGUES, B. Webwriting: Redação & Informação na Web. Rio de Janeiro: Brasport, 2006.

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

A nova geração da web karen lowhany

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a A nova geração da web karen lowhany

Semelhante a A nova geração da web karen lowhany (20)

Mais de Karen Costa

Mais de Karen Costa (17)

A nova geração da web karen lowhany