Arquitetura da Informação e Webdesign

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    Arquitetura da Informação e Webdesign - Presentation Transcript

    1. Danilo Rosisca Pereira Especialista em Sistemas para Internet
    2. Arquitetura da Informação e Webdesign OA Avanço d W b da Web Percebe-se o aumento exagerado de informações disponibilizadas em ambientes digitais digitais. E muitas vezes apresentadas de forma vezes, desorganizada.
    3. 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. d g ta s.
    4. Arquitetura da Informação e Webdesign A Web 2.0 é A NOVA GERAÇÃO DA WEB, que traz novas regras e serviços baseados na Web como plataforma.
    5. Arquitetura da Informação e Webdesign A Web 2.0 busca interação ai t ã entre t usuários, com a criação e o compartilhamento de conteúdo.
    6. Arquitetura da Informação
    7. Arquitetura da Informação e Webdesign Arquitetura d Informação i da f ã Foi criada por Saul Wurman em 1976 com o objetivo de 1976, 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 i f informação. ã
    8. Arquitetura da Informação e Webdesign Si istemas d Arquitetura d Informação da i da f ã A Arquitetura da Informação possui 4 sistemas, onde cada um sistemas possui suas próprias regras e características, e quando reunidas servem para organizar o ambiente informacional de p g um website. Rosenfeld e Morville (2006). Esses sistemas são:
    9. Arquitetura da Informação e Webdesign Sistema d O Si t de Organização: Maneira de categorizar e organizar a i ã informação. 1 Esquema de Organização Alfabética Esquema de Organização por Tempo 2 Esquema de Organização 3 por Assunto
    10. Arquitetura da Informação e Webdesign Sistema d R t l ã Si t de Rotulação: Define a forma de representar a informação. São l Sã elementos f d t fundamentais que t i antecipam o que virá a seguir logo após efetuar o clique em um link.
    11. Arquitetura da Informação e Webdesign Sistema d N Si t de Navegação: Determina o modo de navegar ou mover ã no espaço Informacional (e hipertextual).
    12. Arquitetura da Informação e Webdesign Sistema d P Si t de Pesquisa: i Estabelece as dú id dúvidas (perguntas) executadas em uma consulta de pesquisa e como elas serão respondidas. (Exemplo de busca de fácil compreensão)
    13. Arquitetura da Informação e Webdesign Documentos d AI: Wireframe D t da AI 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 página.
    14. Arquitetura da Informação e Webdesign Exemplo de wireframe e layout final de um website: N Navegação Gl b l ã Global Conteúdo Global Conteúdo Local
    15. Usabilidade
    16. Arquitetura da Informação e Webdesign Usabilidade: U bilid d Possui Poss i 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)
    17. Arquitetura da Informação e Webdesign Usabilidade: Portanto um website... U bilid d P b i Bicicleta Convergente de Jacques Carelman. Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e foco na experiência do usuário usuário.
    18. Webdesign
    19. Arquitetura da Informação e 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.
    20. 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)
    21. 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 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)
    22. 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  p ÚTEIS, bons, bonitos,  , , , baratos e  eficazes.
    23. Arquitetura da Informação e Webdesign Webdesign: Os três elementos fundamentais de um layout D i b l d Design balanceado: equilíbrio e composição entre imagens, gráficos e fontes  líb ã áf f tipográficas. Contraste: integração entre os elementos do design. Linhas invisíveis: são áreas criadas entre diferentes partes de um design.  p g Proporção de 70% para conteúdo e 30% para espaços em branco. 
    24. Arquitetura da Informação e Webdesign Nem sempre a Aparência não é Importante! 
    25. Arquitetura da Informação e Webdesign A prática da  Simplicidade Si li id d em layout para WEB.
    26. Arquitetura da Informação e Webdesign Webdesign  C Webdesign: Convenções de desenho de Interface õ  d  d h  d  I t f A padronização das interfaces é um dos conceitos mais importantes  para se projetar websites. El   tã   l i Elas estão relacionadas a conceitos de psicologia cognitiva, como   d     it  d   i l i   iti   facilidade de aprendizado e memorização, diminuindo as chances de  p p dúvidas e erros por parte dos usuários. (Memória, 2005)
    27. Arquitetura da Informação e Webdesign Webdesign: Convenções de desenho de Interface Webdesign  C õ  d  d h  d  I t f Marca buscar Navegação global Breadcrumbs Navegação local Conteúdo global Conteúdo e contextual relacionado Navegação rodapé (Memória, 2005)
    28. 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, (Cavichioli 2008)
    29. 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. g Fonte: DigitalPaperWeb.com.br Acessado em: 01 julho 2008
    30. Arquitetura da Informação e Webdesign Webdesign: F t l í i para web Fontes legíveis b Nome da Fonte Característica Arial Moderna, limpa, básica. Fonte F t com serifa projetada para l it if j t d leitura on-line. li Georgia 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)
    31. Arquitetura da Informação e Webdesign Webdesign: Legibilidade, textos existem para serem lidos. Fonte serifada Exemplo: para título í l 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. 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 sem serifa para texto
    32. Arquitetura da Informação e Webdesign Webdesign: P i l i das cores Psicologia d As cores podem ter alguns significados, provocar lembranças e significados 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; Branco: Branco: pureza, inocência, paz, simplicidade, esterilidade; Preto: poder modernidade, sofisticação, morte, medo mistério poder, modernidade sofisticação morte medo, mistério. (Cavichioli, 2008)
    33. Webstandards
    34. Arquitetura da Informação e Webdesign 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...   tibilid d     t bilid d     d  di iti (Ferreira, 2005, p. 12)
    35. 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) 
    36. Webwriting
    37. Arquitetura da Informação e Webdesign 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)
    38. 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 (curto), e não com menor quantidade de informações. Deve ser objetivo / enxuto – com frases e parágrafos curtos com frases e parágrafos curtos. Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
    39. Arquitetura da Informação e Webdesign Webdesign: Webwriting Parágrafos separados por espaços (“blocos de texto”); Bloco de texto 1 Bloco de texto único X Bloco de texto 2 Bloco de texto 3 Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
    40. Arquitetura da Informação e Webdesign 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 Empreender Fazer Unicamente Só No Estado do Paraná No Paraná Na eventualidade de Se Durante o ano de 2005 Em 2005 Na época em que vivemos Hoje Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
    41. Arquitetura da Informação e Webdesign 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; Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
    42. Conclusão
    43. Arquitetura da Informação e Webdesign Conclusão: A Arquitetura d I f A it t de Informação através d seus conceitos e ã t é de it planejamento das funcionalidades, visa a organização da informação de forma simples e compreensível para os informação, usuários. O Webdesign é a técnica de design que se difere por sua funcionalidade e harmonia estética na distribuição dos elementos de ambientes informacionais di it i l t d bi t i f i i digitais.
    44. Arquitetura da Informação e Webdesign Muito Obrigado! danilo@sitedodanilo.com.br
    45. 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. Design do dia-a-dia. Ri de Janeiro: Rocco, 2006. NORMAN D A O D i d di di Rio d J i R 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.

    + Danilo Rosisca PereiraDanilo Rosisca Pereira, 2 years ago

    custom

    900 views, 3 favs, 0 embeds more stats

    1ª Semana de Tecnologia em Palmital

    Danilo Rosi more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 900
      • 900 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 66
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories