Danilo Rosisca Pereira Especialista em Sistemas para Internet · Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e foco na experiência do usuário. Webdesign ... Webwriting

Danilo Rosisca PereiraDanilo Rosisca PereiraEspecialista em Sistemas para Internet

Arquitetura da Informação e Webdesign

O A d W b


O Avanço da Web

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

E muitas vezes apresentadas de forma E muitas vezes, apresentadas de forma desorganizada.

Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign

AA NOVA GERAÇÃO DA WEB

exige uma mudançaexige uma mudançae um repensar noprocesso de desenvolvimento de processo de desenvolvimento de ambientes informacionais digitais.d g ta s.


AA Web 2.0 é A NOVA GERAÇÃO DA WEB, que

traz novas regras e

serviços baseados serviços baseados na Web como plataforma.


AA Web 2.0 busca

i t ã t a interação entre usuários, com a criação e o compartilhamento de

conteúdoconteúdo.

Arquitetura daInformação


A i d I f ãArquitetura da Informação

Foi criada por Saul Wurman em 1976 com o objetivo de 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

i f ãpara as pessoas o acesso a informação.


Si d A i d I f ãSistemas da Arquitetura da Informação

A Arquitetura da Informação possui 4 sistemas onde cada um 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 p gum website. Rosenfeld e Morville (2006).

Esses sistemas são:


Si t d O i ã Sistema de Organização: Maneira de categorizar e organizar a informação.

1

Esquema de Organização Esquema de Organização

1

Esquema de Organização Alfabética

Esquema de Organização Alfabética

Esquema de Organização por

Tempo

Esquema de Organização por

TempoTempoTempo

Esquema de Organização por Assunto

Esquema de Organização por Assunto

23


Si t d R t l ã Sistema de Rotulação:

Define a forma de representar a Define a forma de representar a informação.

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


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


Si t d P i Sistema de Pesquisa:

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

(Exemplo de busca de fácil compreensão)


D t d AI Documentos da AI: Wireframe

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


Exemplo de wireframe e layout final de um website:

N ã Gl b lNavegação Global

Conteúdo Global

Conteúdo Local

UsabilidadeUsabilidade


U bilid dUsabilidade:

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

• Ser fácil de APRENDER;

• Ser eficiente na utilização;Ser eficiente na utilização;

• Ser fácil de ser recordado;

• Ter poucos erros;• Ter poucos erros;

• Ser subjetivamente agradável.

(Nilsen, 1993)


U bilid d P b i


Usabilidade: Portanto um website...

Bicicleta Convergente de Jacques Carelman.

Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e

foco na experiência foco na experiência do usuáriousuário.

WebdesignWebdesign


Webdesign:

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


Webdesign: Seu objetivo

É planejar e CRIAR a organização funcional de todo conteúdo que será transmitido(apresentado), permitindo que o usuário permitindo que o usuário compreenda rapidamente a mensagem. 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çõesinformaçõ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, ç p , , ,

baratos e eficazes.


Webdesign: Os três elementos fundamentais de um layout

D i b l d líb ã áf fDesign 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. p gProporção de 70% para conteúdo e 30% para espaços em branco.


Nem sempre aNem sempre a

Aparêncianão éAparêncianão éImportante!


A prática da

Si li id dSimplicidadeem layout paraem layout para

WEBWEB.


Webdesign C õ d d h d I t fWebdesign: Convenções de desenho de Interface

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

El tã l i d it d i l i iti 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.p p

(Memória, 2005)


Webdesign C õ d d h d I t fWebdesign: Convenções de desenho de Interface

Marca

Navegação global

buscar

Breadcrumbs

Navegação local Conteúdo globale contextual

Conteúdo relacionado

Navegação rodapéNavegação rodapé

(Memória, 2005)


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)(Cavichioli, 2008)


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.g

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


Webdesign: F t l í i b


Webdesign: Fontes legíveis para web

Nome da Fonte Característica

Arial Moderna, limpa, básica.

F t if j t d l it liGeorgia

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

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


Webdesign: Legibilidade, textos existem para serem lidos.

Exemplo:Fonte serifadaFonte serifada

í l í lFonte serifadaFonte serifada

í l í lExemplo:

Curiosidade, inovação e descoberta

para títulopara títulopara títulopara título

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 instantequalquer 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 semsem serifaserifapara para textotexto

Fonte Fonte semsem serifaserifapara para textotexto


Webdesign: P i l i d Webdesign: Psicologia das cores

As cores podem ter alguns significados provocar lembranças e 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;g

Verde: natureza, primavera, fertilidade, riqueza, ganância;

Amarelo: otimismo, alegria, felicidade, riqueza (ouro), fraqueza;Amarelo: otimismo, alegria, felicidade, riqueza (ouro), fraqueza;

BrancoBrancoBranco:: pureza, inocência, paz, simplicidade, esterilidade;

Preto: poder modernidade sofisticação morte medo mistérioPreto: poder, modernidade, sofisticação, morte, medo, mistério.

(Cavichioli, 2008)

WebstandardsWebstandards


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

tibilid d t bilid d d di iti 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;Desenvolvimento simplificado;Independência entre layout e conteúdo;Manutenção simplificada;Padrões Reaproveitáveis.

(Ferreira, 2005)

WebwritingWebwriting


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(curto), e não com menor quantidade de informações.

Deve ser objetivo / enxuto com frases e parágrafos curtosDeve 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 1Bloco de texto 1

Bloco de texto único Bloco de texto 2XX

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

EmpreenderEmpreender FazerFazer

UnicamenteUnicamente

No Estado do ParanáNo Estado do Paraná

SóSó

No ParanáNo Paraná

Na Na eventualidadeeventualidade de de

Durante o Durante o anoano de 2005de 2005

SeSe

EmEm 20052005

Na Na épocaépoca emem queque vivemosvivemos HojeHoje



Webdesign:Webwriting e suas vantagens

O texto torna‐se maisprático;

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

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


ConclusãoConclusão


Conclusão:

A A it t d I f ã t é d it A Arquitetura de Informação através de seus conceitos e planejamento das funcionalidades, visa a organização da informação de forma simples e compreensível para os informação, de forma simples e compreensível para os usuários.

O Webdesign é a técnica de design que se difere por sua funcionalidade e harmonia estética na distribuição dos l t d bi t i f i i di it ielementos de ambientes informacionais digitais.


[email protected]


REFERÊNCIAS BIBLIOGRÁFICAS 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 D i d di di Ri d J i R 2006NORMAN, 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.

Documents

Danilo Rosisca Pereira Especialista em Sistemas para Internet · Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e foco na experiência do usuário. Webdesign ... Webwriting