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.

Arquitetura da Informação e Webdesign

Arquitetura da Informação e Webdesign

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.

Arquitetura da Informação e Webdesign

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 e Webdesign

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.

Arquitetura da Informação e Webdesign

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:

Arquitetura da Informação e Webdesign

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

Arquitetura da Informação e Webdesign

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.

Arquitetura da Informação e Webdesign

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

Arquitetura da Informação e Webdesign

Sistema de Pesquisa:

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

Arquitetura da Informação e Webdesign

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

Arquitetura da Informação e Webdesign

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

Arquitetura da Informação e Webdesign

Usabilidade

Arquitetura da Informação e Webdesign

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.

Arquitetura da Informação e Webdesign

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.

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

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.

Arquitetura da Informação e Webdesign

Aparência não éImportante!

Arquitetura da Informação e Webdesign

A prática da

simplicidade!

Arquitetura da Informação e Webdesign

Arquitetura da Informação e Webdesign

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.

Arquitetura da Informação e Webdesign

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

Arquitetura da Informação e Webdesign

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é

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

Webdesign: Tipografia

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

Arquitetura da Informação e Webdesign

Webdesign: Tipografia

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

Arquitetura da Informação e Webdesign

(Nielsen e Loranger, 2007)

Arquitetura da Informação e Webdesign

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

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

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)

Arquitetura da Informação e Webdesign

Webdesign: Webwriting

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.

Arquitetura da Informação e Webdesign

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

Webdesign: Webwriting

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

Arquitetura da Informação e Webdesign

Bloco de texto único

Bloco de texto 1

Bloco de texto 2

Bloco de texto 3

XX

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

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:

Arquitetura da Informação e Webdesign

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

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

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;

Arquitetura da Informação e Webdesign

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

Conclusão

Arquitetura da Informação e Webdesign

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:

Arquitetura da Informação e Webdesign

Processo de desenvolvimento para website

Arquitetura da Informação e Webdesign

MuitoObrigado!

Perguntas?

Arquitetura da Informação e Webdesign

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.