a nova geração da web karen lowhany
Post on 19-May-2015
325 Views
Preview:
DESCRIPTION
TRANSCRIPT
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çae um repensar noprocesso de desenvolvimento de ambientes informacionais digitais.
Web 2.0
A Web 2.0 é A NOVA GERAÇÃO
DA WEB, que traz novasregras e serviços baseadosna Web como plataforma.
Ela busca a interaçãoentre 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 por
Tempo
Esquema de Organizaçãopor 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.
A imagem não pode ser exibida. Talvez o computador não tenha memória suficiente para abrir a imagem ou talvez ela esteja corrompida. Reinicie o computador e abra o arquivo novamente. Se ainda assim aparecer o x vermelho, poderá ser necessário excluir a imagem e inseri-la novamente.
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á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 eaperfeiçoaram o uso de ferramentas avançadas de criaçãográ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, utilizandoinfluencias, sentimentos e experiência de quem a observa.
Estrutura que organiza informações dentro de umdeterminado contexto, promovendo interação entre ousuá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 inferior Nielsen, 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 globale contextual
Conteúdorelacionado
buscar
Navegação rodapé
Arquitetura da Informação e Webdesign
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)
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.
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
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 serifadapara título
Fonte sem serifapara 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 coressão pouco distintas, esse esquema émais versátil;
– Pode-se utilizar essa técnica paradiminuir 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
X
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
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
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
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.
top related