a nova geração da web karen lowhany

Sumário

• A nova geração da Web• Arquitetura da Informação• 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.

Arquitetura da Informação e Webdesign


A NOVA GERAÇÃO DA WEB

exige uma mudançae um repensar noprocesso de desenvolvimento de ambientes informacionais digitais.

Web 2.0

A Web 2.0 é A NOVA GERAÇÃO

DA WEB, que traz novasregras e serviços baseadosna Web como plataforma.

Ela busca a interaçãoentre usuários, com a criação e o compartilhamento de

conteúdo.


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

Mapa de Noções da Web 2.0

Arquitetura daInformação


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çãopor 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)

Eles mostram as relações entre as páginas e outros componentes e podem ser usada para retratar a organização, navegação, etiquetagem de sistemas.

Sobre nós

Home

Serviços

Produtos

Busca

Contato

Resultados

Detalhe-Produto

Detalhe-Serviço


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.

A imagem não pode ser exibida. Talvez o computador não tenha memória suficiente para abrir a imagem ou talvez ela esteja corrompida. Reinicie o computador e abra o arquivo novamente. Se ainda assim aparecer o x vermelho, poderá ser necessário excluir a imagem e inseri-la novamente.

Exemplo de wireframe e layout final de um website:

Navegação Global

Conteúdo Global

Conteúdo Local


Usabilidade


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

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 eaperfeiçoaram o uso de ferramentas avançadas de criaçãográ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, utilizandoinfluencias, sentimentos e experiência de quem a observa.

Estrutura que organiza informações dentro de umdeterminado contexto, promovendo interação entre ousuá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

Navegação globalParte superior com links na horizontal

Nielsen, Adksson e Krug

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

BreadcrumbsParte 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 Horton

(Memória, 2005)



Webdesign: Convenções de desenho de Interface

(MEMÓRIA, 2005)

Marca

Navegação global

Navegação local

Breadcrumbs

Conteúdo globale contextual

Conteúdorelacionado

buscar

Navegação rodapé


Webdesign: Tipografia

É a arte, o processo de criação e a classificação dodesenho de letras do alfabeto e de caracteres usados paraformar 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

Todas com 10 pontos ou acima.

Nome da Fonte Característica

Arial Moderna, limpa, básica.

Georgia

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

Trebuchet MS Moderna, simples.

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


(Nielsen e Loranger, 2007)


Webdesign: Legibilidade, textos existem para serem lidos.

Exemplo:

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 serifadapara título

Fonte sem serifapara 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 coressão pouco distintas, esse esquema émais versátil;

– Pode-se utilizar essa técnica paradiminuir a vibração óptica das cores.

(Cavichioli, 2008)


Webstandards

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)


Webwriting

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 único

Bloco de texto 1

Bloco de texto 2

Bloco de texto 3

X


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

Unicamente

No Estado do Paraná

Na eventualidade de

Durante o ano de 2005

Na época em que vivemos

Fazer

Só

No Paraná

Se

Em 2005

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


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

Documents