Arquitetura da Informacao e Webdesign

Arquitetura da Informação e Webdesign

Programa de Especialização em Sistemas para Internet – Centro Universitário Eurípides de Marília - Fundação Eurípides Soares da Rocha.

Marília2008

Apresentação de Monografia

Discente: Danilo Rosisca Pereira

Orientadora:Profa. Ms. Caroline Kraus LuvizottoCo-orientador: Prof. Ms. Elvis Fusco

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.



A NOVA GERAÇÃO DA WEB

exige uma mudança e um repensar no processo de desenvolvimento de ambientes informacionais digitais.

Web 2.0

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.


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 Alfabética

Esquema de Organização por

Tempo

Esquema de Organização por

Tempo

Esquema de Organização por Assunto

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)

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.

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áriousuá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 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

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 inferiorNielsen, 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 global e contextual

Conteúdo relacionado

buscar

Navegação rodapé


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

Todas com 10 pontos ou acima.

Nome da Fonte Característica

Arial Moderna, limpa, básica.

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

Trebuchet MS Moderna, simples.

VerdanaFonte 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 Fonte serifadaserifada

para títulopara título

Fonte Fonte serifadaserifada

para títulopara título

Fonte sem serifa Fonte sem serifa para textopara texto

Fonte sem serifa Fonte sem serifa para textopara 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;

BrancoBranco:: 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)


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

XX


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

EmpreenderEmpreender

UnicamenteUnicamente

No Estado do ParanáNo Estado do Paraná

Na eventualidade de Na eventualidade de

Durante o ano de 2005Durante o ano de 2005

Na época em que vivemosNa época em que vivemos

FazerFazer

SóSó

No ParanáNo Paraná

SeSe

Em 2005Em 2005

HojeHoje


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


MuitoObrigado!

Perguntas?


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.

Technology

Arquitetura da Informacao e Webdesign