Especialista em Sistemas para Internet

Transcrição

1 Danilo Rosisca Pereira Especialista em Sistemas para Internet

2

3 O Avanço da Web Percebe-se o aumento exagerado de informações disponibilizadas em ambientes digitais. E muitas vezes apresentadas de forma E muitas vezes, apresentadas de forma desorganizada.

4 A NOVA GERAÇÃO DA WEB exige uma mudança e um repensar no processo de desenvolvimento de ambientes informacionais digitais. dgtas.

5 A Web 2.0 é A NOVA GERAÇÃO DA WEB, que traz novas regras e serviços baseados serviços baseados na Web como plataforma.

6 A Web 2.0 busca a interação entre usuários, com a criação e o compartilhamento de conteúdo.

7

8

9

10 Arquitetura da Informação

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

12 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:

13 Arquitetura da Informação e Webdesign Si t Sistema d de O Organização: i ã Maneira de categorizar e organizar a informação. 1 Esquema de Organização Alfabética 2 Esquema de Organização por Tempo Esquema de Organização por Assunto 3

14 Sistema de Rotulação: 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.

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

16 Arquitetura da Informação e Webdesign Si t Sistema d de P Pesquisa: i dú id Estabelece as dúvidas (perguntas) executadas em uma consulta de pesquisa e como elas serão respondidas. (Exemplo de busca de fácil compreensão)

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

18 Exemplo de wireframe e layout final de um website: Navegação Global l Conteúdo Global Conteúdo Local

19 Usabilidade

20 Usabilidade: d 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)

21 Usabilidade: d Portanto um website... Bicicleta Convergente de Jacques Carelman. Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e foco na experiência do usuário.

22 Webdesign

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

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)

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)

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.

27 Webdesign: Os três elementos fundamentais de um layout 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.

28 Nem sempre a Aparêncianão é Importante!

29 Arquitetura da Informação e Webdesign A prática da Si li id d Simplicidade em layout para WEB.

30 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 i cognitiva, como facilidade de aprendizado e memorização, diminuindo as chances de dúvidas e erros por parte dos usuários. (Memória, 2005)

31 Webdesign: Convenções de desenho de Interface Marca buscar Navegação global Breadcrumbs Navegação local Conteúdo global e contextual Conteúdo relacionado Navegação rodapé (Memória, 2005)

32 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)

33 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

34 Webdesign: Fontes legíveis para web Nome da Fonte Arial Georgia Característica Moderna, limpa, básica. 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)

35 Webdesign: Legibilidade, textos existem para serem lidos. Exemplo: Curiosidade, inovação e descoberta Fonte serifada para 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 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

36 Webdesign: Pi Psicologia i 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)

37 Webstandards

38 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 d e portabilidade d com navegadores, dispositivos... iti (Ferreira, 2005, p. 12)

39 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)

40 Webwriting

41 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)

42 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. Fonte: Acessado em: 09/08/2008

43 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: Acessado em: 09/08/2008

44 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 Empreender Unicamente No Estado do Paraná Na eventualidade de Durante o ano de 2005 Na época em que vivemos USAR Fazer Só No Paraná Se Em 2005 Hoje Fonte: Acessado em: 09/08/2008

45 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: Acessado em: 09/08/2008

46 Conclusão

47 Conclusão: A Arquitetura t 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 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 i i digitais. it i

48 Muito Obrigado!

49 REFERÊNCIAS BIBLIOGRÁFICAS CAVICHIOLI, O. Tipografia, Teoria das Cores. Disponível em: < Acesso em em: 26/05/2008. DAMASCENO, A. Webdesign: Teoria e Prática. Florianópolis: Visual Books, FERREIRA, E. Produtividade Web 2.0. São Paulo: Visie, MEMÓRIA, F. Design para Internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, NIELSEN, J. Usabiliy Engineering. San Francisco: Academic Press, p. NIELSEN, J.; LORANGER, H. Usabilidade na web. Rio de Janeiro: Elsevier, NORMAN, D. A. O Design do dia-a-dia. Rio de Janeiro: Rocco, RODRIGUES, B. Webwriting: Redação & Informação na Web. Rio de Janeiro: Brasport, ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006.

50