Arquitetura da Informacao e Webdesign
-
Upload
danilo-rosisca-pereira -
Category
Technology
-
view
4.148 -
download
3
Transcript of 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.