SlideShare uma empresa Scribd logo
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ília 2008   Apresentação de Monografia Discente :  Danilo Rosisca Pereira Orientadora: Profa. Ms. Caroline Kraus Luvizotto Co-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 . E la  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 da Informação
Arquitetura da Informação e Webdesign A rquitetura da  I nformaçã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 S istemas da  A rquitetura da  I nformaçã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 por Tempo 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: Arquitetura da Informação e Webdesign Navega ç ão Global Conte ú do Global Conte ú do Local
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á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
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) Arquitetura da Informação e Webdesign
(Memória, 2005) Arquitetura da Informação e Webdesign ELEMENTO DE INTERFACE POSICIONAMENTO PESQUISADOR Marca da empresa Canto superior Nielsen, Adksson e Bernard Busca Parte superior Nielsen, Adksson e Bernard Navegação global Parte superior com  links na horizontal Nielsen, Adksson e Krug Navegação local Coluna da esquerda Nielsen, Adksson e Bernard Breadcrumbs Parte 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
Webdesign:  Convenções de desenho de Interface (MEMÓRIA, 2005) Arquitetura da Informação e Webdesign Marca Navegação local Breadcrumbs Conteúdo global  e contextual Conteúdo  relacionado buscar Navegação global 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. Arquitetura da Informação e Webdesign (Nielsen e Loranger, 2007) 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
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. Arquitetura da Informação e Webdesign Fonte serifada para título Fonte sem serifa para 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; Branco :  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 X Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008 Bloco de texto único Bloco de texto 1 Bloco de texto 2 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: Arquitetura da Informação e Webdesign Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008 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 ; 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 Muito Obrigado! 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.

Mais conteúdo relacionado

PPT
Arquitetura da Informacao
carlosremontti
 
PPT
Arquitetura da Informação em Projetos Web
Otaviano Silvério
 
PDF
O Papel da Arquitetura de Informação na Experiência do Usuário
Daniel Corrêa
 
PDF
Arquitetura da Informação: Conceitos e Objetivos
aiadufmg
 
PDF
Arquitetura da Informação
Karine Drumond
 
PDF
Introdução à Arquitetura de Informação
Instituto Faber-Ludens
 
PPTX
Explicando arquitetura de informação...
Elisa Volpato
 
PDF
Arquitetura de informação
renatamruiz
 
Arquitetura da Informacao
carlosremontti
 
Arquitetura da Informação em Projetos Web
Otaviano Silvério
 
O Papel da Arquitetura de Informação na Experiência do Usuário
Daniel Corrêa
 
Arquitetura da Informação: Conceitos e Objetivos
aiadufmg
 
Arquitetura da Informação
Karine Drumond
 
Introdução à Arquitetura de Informação
Instituto Faber-Ludens
 
Explicando arquitetura de informação...
Elisa Volpato
 
Arquitetura de informação
renatamruiz
 

Mais procurados (20)

PPT
Arquitetura de Informação
Melqui Jr
 
PDF
Arquitetura da Informacao na WEB
Fábio Flatschart
 
PPT
Por que Arquitetura de Informação e Usabilidade são importantes?
gestao em hipermídia Pós-graduação
 
PPTX
Arquitetura de informação
Guto Xavier
 
PDF
Arquitetura da Informação e Webdesign
Danilo Rosisca Pereira
 
PPT
Navegação e Arquitetura de Informação
Luiz Agner
 
PDF
Arquitetura de informação para Interface Digital
Marconi Pacheco
 
PDF
Arquitetura de Informação - Aulas 04 e 05
vincevader
 
PDF
Intensivo 80h - Arquitetura de informação e usabilidade
Escola do Marketing Digital
 
PDF
A nova geração da web karen lowhany
Karen Costa
 
PDF
Arquitetura da informação
Cristiane Mendes
 
PDF
Aula sobre Arquitetura de Informação
Dhiego Bicudo
 
PPTX
Introducao à Arquitetura de Informacao
duradez
 
PPT
Arquitetura da informação
Ana Luisa Vieira
 
PDF
Arquitetura de Informacao em Projetos de Design
Mauro Pinheiro
 
PDF
Sistemas de organização e rotulação
Instituto Faber-Ludens
 
PDF
Arquitetura da Informação- Origem e Desenvolvimento
aiadufmg
 
PDF
Arquitetura da Informação e Usabilidade
saspi2
 
PDF
Arquitetura de Informação (atualizado)
Luiz Agner
 
PPT
Navegação
Robson Santos
 
Arquitetura de Informação
Melqui Jr
 
Arquitetura da Informacao na WEB
Fábio Flatschart
 
Por que Arquitetura de Informação e Usabilidade são importantes?
gestao em hipermídia Pós-graduação
 
Arquitetura de informação
Guto Xavier
 
Arquitetura da Informação e Webdesign
Danilo Rosisca Pereira
 
Navegação e Arquitetura de Informação
Luiz Agner
 
Arquitetura de informação para Interface Digital
Marconi Pacheco
 
Arquitetura de Informação - Aulas 04 e 05
vincevader
 
Intensivo 80h - Arquitetura de informação e usabilidade
Escola do Marketing Digital
 
A nova geração da web karen lowhany
Karen Costa
 
Arquitetura da informação
Cristiane Mendes
 
Aula sobre Arquitetura de Informação
Dhiego Bicudo
 
Introducao à Arquitetura de Informacao
duradez
 
Arquitetura da informação
Ana Luisa Vieira
 
Arquitetura de Informacao em Projetos de Design
Mauro Pinheiro
 
Sistemas de organização e rotulação
Instituto Faber-Ludens
 
Arquitetura da Informação- Origem e Desenvolvimento
aiadufmg
 
Arquitetura da Informação e Usabilidade
saspi2
 
Arquitetura de Informação (atualizado)
Luiz Agner
 
Navegação
Robson Santos
 
Anúncio

Destaque (7)

PPT
Arquitetura Da Informação
Lorena Vieira
 
PDF
Padronizacao medicamentos 2011
Vanessa Rodrigues De Amorim
 
PDF
Aula 2 Webdesign
Danilo Rosisca Pereira
 
PPS
Usabilidade para Pequenos e Médios Projetos Web
Paulo Coimbra
 
PDF
Web Design > Gestalt e suas leis
Felipe Fernandes
 
PPTX
Arte do renascimento - arquitetura
Carlos Vieira
 
PPTX
TCC - Terapia Cognitiva Comportamental
Glaucia Lima de Magalhaes
 
Arquitetura Da Informação
Lorena Vieira
 
Padronizacao medicamentos 2011
Vanessa Rodrigues De Amorim
 
Aula 2 Webdesign
Danilo Rosisca Pereira
 
Usabilidade para Pequenos e Médios Projetos Web
Paulo Coimbra
 
Web Design > Gestalt e suas leis
Felipe Fernandes
 
Arte do renascimento - arquitetura
Carlos Vieira
 
TCC - Terapia Cognitiva Comportamental
Glaucia Lima de Magalhaes
 
Anúncio

Semelhante a Arquitetura da Informacao e Webdesign (20)

PDF
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
Danilo Rosisca Pereira
 
PPT
Aulas 03 e 04 - Arquitetura de Informação
vincevader
 
PPT
Arquiteturadeinformao apresentao2-03-05-10
Rafael Marinho
 
PDF
Arquiteturade informaçaoo senac-planetaweb
Dan
 
PPT
Introducao a arquitetura de informacao
eramos7senac
 
PPT
Apresentação - Arquitetura de Informação
Luiz Agner
 
DOC
PROJETO DE PESQUISA
Rafael Marinho
 
PPT
Arquitetura da informação
UNESP Marília
 
PDF
[Cinform] Arquitetura de Informacao - Artigo
Rafael Marinho
 
PPT
Thiago ribeiro arquitetura_informacao_usabilidade
Thiago M R Ribeiro
 
PPT
Arquitetura de Informação: desafios do profissional bibliotecário num mercado...
Rafael Marinho
 
PDF
Apresentacao arquitetura
Talk Relacionamento Digital
 
PPT
Apresentação PCC - Rodrigo Santiago
Rodrigo Correia
 
PPTX
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
Rio Info
 
PPSX
DESIGN DE INTERFACE
Andrea Dalforno
 
PDF
O que é Arquitetura da Informação?
heuew
 
PPT
Arquitetura de Informação - Personas e Cenários
posgraduacaorj
 
PDF
Ai congresso academico-ufal-2010 revisando
Zayr Silva
 
PDF
Ai congresso academico-ufal-2010 revisando
Zayr Silva
 
PPT
Conferência em Arquitetura da Informação.2013. Novos estratos do Tcc do autor.
Zayr Silva
 
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
Danilo Rosisca Pereira
 
Aulas 03 e 04 - Arquitetura de Informação
vincevader
 
Arquiteturadeinformao apresentao2-03-05-10
Rafael Marinho
 
Arquiteturade informaçaoo senac-planetaweb
Dan
 
Introducao a arquitetura de informacao
eramos7senac
 
Apresentação - Arquitetura de Informação
Luiz Agner
 
PROJETO DE PESQUISA
Rafael Marinho
 
Arquitetura da informação
UNESP Marília
 
[Cinform] Arquitetura de Informacao - Artigo
Rafael Marinho
 
Thiago ribeiro arquitetura_informacao_usabilidade
Thiago M R Ribeiro
 
Arquitetura de Informação: desafios do profissional bibliotecário num mercado...
Rafael Marinho
 
Apresentacao arquitetura
Talk Relacionamento Digital
 
Apresentação PCC - Rodrigo Santiago
Rodrigo Correia
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
Rio Info
 
DESIGN DE INTERFACE
Andrea Dalforno
 
O que é Arquitetura da Informação?
heuew
 
Arquitetura de Informação - Personas e Cenários
posgraduacaorj
 
Ai congresso academico-ufal-2010 revisando
Zayr Silva
 
Ai congresso academico-ufal-2010 revisando
Zayr Silva
 
Conferência em Arquitetura da Informação.2013. Novos estratos do Tcc do autor.
Zayr Silva
 

Último (7)

PPTX
Computacao-e-Tecnologias-Digitais-Por-Que-Aprender.pptx
RobertaOliveiradaFon1
 
PPTX
Desenvolvimento-de-Produtos-Inovadores.pptx
ssuser1d7565
 
PPTX
Gestão de Mudanças - Os maiores desafios da Gestão de Mudanças e Gestão de Pr...
Gateware Group
 
PDF
Certificado em Redes Neurais Artificiais em Python
CaioSilva506151
 
PPTX
Gestão de Mudanças - Fases do processo de mudança organizacional
Gateware Group
 
PPTX
aplicativopenseira.pptx Aplicativo que organiza Pensamentos - Peça Publicitária
StelaNorie1
 
PDF
Explorando o Futuro do Corpo: Implantes Neurais e o Biohacking dos Sentidos
cooperliora
 
Computacao-e-Tecnologias-Digitais-Por-Que-Aprender.pptx
RobertaOliveiradaFon1
 
Desenvolvimento-de-Produtos-Inovadores.pptx
ssuser1d7565
 
Gestão de Mudanças - Os maiores desafios da Gestão de Mudanças e Gestão de Pr...
Gateware Group
 
Certificado em Redes Neurais Artificiais em Python
CaioSilva506151
 
Gestão de Mudanças - Fases do processo de mudança organizacional
Gateware Group
 
aplicativopenseira.pptx Aplicativo que organiza Pensamentos - Peça Publicitária
StelaNorie1
 
Explorando o Futuro do Corpo: Implantes Neurais e o Biohacking dos Sentidos
cooperliora
 

Arquitetura da Informacao e Webdesign

  • 1. 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ília 2008 Apresentação de Monografia Discente : Danilo Rosisca Pereira Orientadora: Profa. Ms. Caroline Kraus Luvizotto Co-orientador: Prof. Ms. Elvis Fusco
  • 2. Sumário A nova geração da Web Arquitetura da Informação Webdesign
  • 3. 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
  • 4. 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.
  • 6. A Web 2.0 é A NOVA GERAÇÃO DA WEB, que traz novas regras e serviços baseados na Web como plataforma . E la busca a interação entre usuários, com a criação e o compartilhamento de conteúdo . Arquitetura da Informação e Webdesign
  • 9. Arquitetura da Informação e Webdesign A rquitetura da I nformaçã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.
  • 10. Arquitetura da Informação e Webdesign S istemas da A rquitetura da I nformaçã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:
  • 11. 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 por Tempo Esquema de Organização por Assunto
  • 12. 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.
  • 13. Arquitetura da Informação e Webdesign Sistema de Navegação: Determina o modo de navegar ou mover no espaço Informacional (e hipertextual).
  • 14. 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.
  • 15. 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
  • 16. 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.
  • 17. Exemplo de wireframe e layout final de um website: Arquitetura da Informação e Webdesign Navega ç ão Global Conte ú do Global Conte ú do Local
  • 19. 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)
  • 20. Usabilidade: Portanto um website... Deve ser fácil de usar ; Com simplicidade , OBJETIVIDADE e foco na experiência do usuário . Arquitetura da Informação e Webdesign
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. Aparência não é Importante! Arquitetura da Informação e Webdesign
  • 28. A prática da simplicidade! Arquitetura da Informação e Webdesign
  • 29. 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)
  • 30. 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
  • 31. 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) Arquitetura da Informação e Webdesign
  • 32. (Memória, 2005) Arquitetura da Informação e Webdesign ELEMENTO DE INTERFACE POSICIONAMENTO PESQUISADOR Marca da empresa Canto superior Nielsen, Adksson e Bernard Busca Parte superior Nielsen, Adksson e Bernard Navegação global Parte superior com links na horizontal Nielsen, Adksson e Krug Navegação local Coluna da esquerda Nielsen, Adksson e Bernard Breadcrumbs Parte 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
  • 33. Webdesign: Convenções de desenho de Interface (MEMÓRIA, 2005) Arquitetura da Informação e Webdesign Marca Navegação local Breadcrumbs Conteúdo global e contextual Conteúdo relacionado buscar Navegação global Navegação rodapé
  • 34. 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)
  • 35. 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
  • 36. 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)
  • 37. Webdesign: Fontes legíveis para web Todas com 10 pontos ou acima. Arquitetura da Informação e Webdesign (Nielsen e Loranger, 2007) 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
  • 38. 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. Arquitetura da Informação e Webdesign Fonte serifada para título Fonte sem serifa para texto
  • 39. 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)
  • 40. 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; Branco : pureza, inocência, paz, simplicidade, esterilidade; Preto: poder, modernidade, sofisticação, morte, medo, mistério. (Cavichioli, 2008)
  • 41. 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)
  • 42. 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
  • 44. 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
  • 45. 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
  • 47. 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
  • 48. 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
  • 49. Webdesign: Webwriting Parágrafos separados por espaços (“blocos de texto”); Arquitetura da Informação e Webdesign X Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008 Bloco de texto único Bloco de texto 1 Bloco de texto 2 Bloco de texto 3
  • 50. 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 Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008 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
  • 51. 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
  • 53. 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:
  • 54. Arquitetura da Informação e Webdesign Processo de desenvolvimento para website
  • 55. Arquitetura da Informação e Webdesign Muito Obrigado! Perguntas?
  • 56. 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.