Arquitetura de Informação - 7 Ferramentas para Web Design Prof. Ricardo Ferramentas para Web Design 1
Ícone Imagem Banner Logotipo Título 1 Título 2 Tabela Disclaimer Título 1 Título 2 Ícone Ícone Imagem Banner Logo Qual é o objetivo da etapa de Especificação? Biblioteca Básica - Texto Biblioteca Básica.vsd - pág. 1 de 2 Projeto: Biblioteca Site: Autor: Guilhermo Reis Última Atualização: 27/10/03 Chamada de Texto Texto de Corpo Biblioteca Básica - Texto Biblioteca Básica.vsd - pág. 1 de 2 Projeto: Biblioteca Site: Autor: Guilhermo Reis Última Atualização: 27/10/03 Chamada de Texto Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vel sapien vitae orci sodales ornare. Ut ornare sapien ac leo. Duis diam. Cras quis lacus. Nulla facilisi. Morbi tellus tortor, viverra sit amet, aliquam ut, aliquam at, nibh. Sed adipiscing dui sed risus. Sed pharetra, enim et condimentum tincidunt, metus metus cursus lorem, at venenatis enim nisl vel est. Duis imperdiet lorem non nibh adipiscing pellentesque. Nam vestibulum dictum arcu. Aliquam at dui. Nam mauris orci, aliquet et, condimentum non, commodo vel, nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a diam ac wisi scelerisque sollicitudin. Integer at augue vitae odio elementum volutpat. Nam sit amet sapien sit amet lectus iaculis porta. Donec vitae augue vulputate metus viverra convallis. 1- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 2- Duis a diam ac wisi scelerisque sollicitudin. 3- Integer at augue vitae odio elementum volutpat. 4- Nam sit amet sapien sit amet lectus iaculis porta. 5- Donec vitae augue vulputate metus viverra convallis. Lista com marcador Lista numerada Download de Arquivo Nota de Rodapé Este wireframe não tem nenhum compromisso com fontes, cores ou disposição dos elementos na página. Sua função é indicar o conteúdo de cada página do site. Nome do Arquivo.xxx (em arquivo xxx) 100 Kb 1- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eget sapien. Ut eros metus, ornare et, vehicula facilisis, congue a, libero. Curabitur facilisis diam a nibh. Nulla facilisi. Vivamus nulla mauris, consectetuer eu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eget sapien. Ut eros metus, ornare et, vehicula facilisis, congue a, libero. Curabitur facilisis diam a nibh. Nulla facilisi. Vivamus nulla mauris, consectetuer eu. Este wireframe não tem nenhum compromisso com fontes, cores ou disposição dos elementos na página. Sua função é indicar o conteúdo de cada página do site. PRnet/2012 Ferramentas para Web Design 2 Ferramentas para Web Design 2
Objetivo da etapa de Especificação na metodologia de projeto de Arquitetura de Informação: Detalhar e documentar toda a especificação do website para ele ser implementado. PRnet/2012 Ferramentas Ferramentas para para Web Web Design Design 3 3 Ferramentas para Web Design 3
Ícone Imagem Banner Logotipo Título 1 Título 2 Tabela Disclaimer Título 1 Título 2 Ícone Ícone Imagem Banner Logo Quais são as funções da etapa de Especificação? Biblioteca Básica - Texto Biblioteca Básica.vsd - pág. 1 de 2 Projeto: Biblioteca Site: Autor: Guilhermo Reis Última Atualização: 27/10/03 Chamada de Texto Texto de Corpo Biblioteca Básica - Texto Biblioteca Básica.vsd - pág. 1 de 2 Projeto: Biblioteca Site: Autor: Guilhermo Reis Última Atualização: 27/10/03 Chamada de Texto Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vel sapien vitae orci sodales ornare. Ut ornare sapien ac leo. Duis diam. Cras quis lacus. Nulla facilisi. Morbi tellus tortor, viverra sit amet, aliquam ut, aliquam at, nibh. Sed adipiscing dui sed risus. Sed pharetra, enim et condimentum tincidunt, metus metus cursus lorem, at venenatis enim nisl vel est. Duis imperdiet lorem non nibh adipiscing pellentesque. Nam vestibulum dictum arcu. Aliquam at dui. Nam mauris orci, aliquet et, condimentum non, commodo vel, nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a diam ac wisi scelerisque sollicitudin. Integer at augue vitae odio elementum volutpat. Nam sit amet sapien sit amet lectus iaculis porta. Donec vitae augue vulputate metus viverra convallis. 1- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 2- Duis a diam ac wisi scelerisque sollicitudin. 3- Integer at augue vitae odio elementum volutpat. 4- Nam sit amet sapien sit amet lectus iaculis porta. 5- Donec vitae augue vulputate metus viverra convallis. Lista com marcador Lista numerada Download de Arquivo Nota de Rodapé Este wireframe não tem nenhum compromisso com fontes, cores ou disposição dos elementos na página. Sua função é indicar o conteúdo de cada página do site. Nome do Arquivo.xxx (em arquivo xxx) 100 Kb 1- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eget sapien. Ut eros metus, ornare et, vehicula facilisis, congue a, libero. Curabitur facilisis diam a nibh. Nulla facilisi. Vivamus nulla mauris, consectetuer eu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eget sapien. Ut eros metus, ornare et, vehicula facilisis, congue a, libero. Curabitur facilisis diam a nibh. Nulla facilisi. Vivamus nulla mauris, consectetuer eu. Este wireframe não tem nenhum compromisso com fontes, cores ou disposição dos elementos na página. Sua função é indicar o conteúdo de cada página do site. PRnet/2012 Ferramentas para Web Design 4 Ferramentas para Web Design 4
Funções da etapa de Especificação Criar um modelo do website para prever seu comportamento. Validar se ele atende aos requisitos do projeto. Especificar detalhadamente como ele deve ser implementado. Estabelecer uma comunicação formal entre o arquiteto e os demais membros da equipe de projeto (webdesigners, redatores, programadores, cliente, etc.). PRnet/2012 Ferramentas Ferramentas para para Web Web Design Design 5 5 Ferramentas para Web Design 5
Ícone Imagem Banner Logotipo Título 1 Título 2 Tabela Disclaimer Título 1 Título 2 Ícone Ícone Imagem Banner Logo Quais são os tipos de documentos da especificação na Arquitetura de Informação? Biblioteca Básica - Texto Biblioteca Básica.vsd - pág. 1 de 2 Projeto: Biblioteca Site: Autor: Guilhermo Reis Última Atualização: 27/10/03 Chamada de Texto Texto de Corpo Biblioteca Básica - Texto Biblioteca Básica.vsd - pág. 1 de 2 Projeto: Biblioteca Site: Autor: Guilhermo Reis Última Atualização: 27/10/03 Chamada de Texto Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vel sapien vitae orci sodales ornare. Ut ornare sapien ac leo. Duis diam. Cras quis lacus. Nulla facilisi. Morbi tellus tortor, viverra sit amet, aliquam ut, aliquam at, nibh. Sed adipiscing dui sed risus. Sed pharetra, enim et condimentum tincidunt, metus metus cursus lorem, at venenatis enim nisl vel est. Duis imperdiet lorem non nibh adipiscing pellentesque. Nam vestibulum dictum arcu. Aliquam at dui. Nam mauris orci, aliquet et, condimentum non, commodo vel, nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a diam ac wisi scelerisque sollicitudin. Integer at augue vitae odio elementum volutpat. Nam sit amet sapien sit amet lectus iaculis porta. Donec vitae augue vulputate metus viverra convallis. 1- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 2- Duis a diam ac wisi scelerisque sollicitudin. 3- Integer at augue vitae odio elementum volutpat. 4- Nam sit amet sapien sit amet lectus iaculis porta. 5- Donec vitae augue vulputate metus viverra convallis. Lista com marcador Lista numerada Download de Arquivo Nota de Rodapé Este wireframe não tem nenhum compromisso com fontes, cores ou disposição dos elementos na página. Sua função é indicar o conteúdo de cada página do site. Nome do Arquivo.xxx (em arquivo xxx) 100 Kb 1- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eget sapien. Ut eros metus, ornare et, vehicula facilisis, congue a, libero. Curabitur facilisis diam a nibh. Nulla facilisi. Vivamus nulla mauris, consectetuer eu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus sed est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eget sapien. Ut eros metus, ornare et, vehicula facilisis, congue a, libero. Curabitur facilisis diam a nibh. Nulla facilisi. Vivamus nulla mauris, consectetuer eu. Este wireframe não tem nenhum compromisso com fontes, cores ou disposição dos elementos na página. Sua função é indicar o conteúdo de cada página do site. PRnet/2012 Ferramentas para Web Design 6 Ferramentas para Web Design 6
Existem quatro tipos de documentos que são elaborados para a especificação da Arquitetura de Informação de um website: Sitegrama Fluxo das Transações Wireframes Vocabulário Controlado PRnet/2012 Ferramentas Ferramentas para para Web Web Design Design 7 7 Ferramentas para Web Design 7
Cada tipo documento especifica características diferentes do website. Assim, em um projeto, nem sempre todos eles são necessários. Cabe ao arquiteto de informação decidir se deve ou não elaborar cada um desses documentos conforme a necessidade das pessoas que utilizarão as suas especificações. PRnet/2012 Ferramentas Ferramentas para para Web Web Design Design 8 8 Ferramentas para Web Design 8
Tipos de documentos de especificação na Arquitetura de Informação Sitegrama Diagrama que representa a organização hierárquica de um website. Contém todas as páginas de conteúdo e a entrada de todas as transações. Para representar a hierarquia, utiliza diagramas em árvore. PRnet/2012 Ferramentas Ferramentas para para Web Web Design Design 9 9 Ferramentas para Web Design 9
Tipos de documentos de especificação na Arquitetura de Informação Fluxo das Transações PRnet/2012 Diagrama que representa o modelo de interação do usuário com as transações do website. Contém todas as páginas das transações, incluindo mensagens de erro e sucesso. Para representar o modelo de interação utiliza fluxogramas indicando como ocorrem as transições entre as páginas. Ferramentas para Web Design 10 Ferramentas Ferramentas para para Web Web Design Design 10 10
Tipos de documentos de especificação na Arquitetura de Informação Wireframes Diagrama que representa todos os elementos de uma página, definindo esses elementos, a hierarquia entre eles, agrupamentos e suas importâncias relativas. Para representar os elementos utilizam-se esboços das páginas. PRnet/2012 Ferramentas Ferramentas para para Web Web Design Design 11 11 Ferramentas para Web Design 11
Tipos de documentos de especificação na Arquitetura de Informação Wireframes Seu objetivo é comunicar o conteúdo e as funções de cada página para discussão com a equipe de projeto e para orientar a implementação. O wireframe não representa o projeto gráfico do website, ele apenas apresenta uma versão simplificada da página sem elementos distrativos. PRnet/2012 Ferramentas Ferramentas para para Web Web Design Design 12 12 Ferramentas para Web Design 12
Tipos de documentos de especificação na Arquitetura de Informação Vocabulário Controlado Subconjunto definido da linguagem natural construído com base em um conjunto de regras prescritivas destinado a especificar os rótulos utilizados no website e os meta-dados utilizados na indexação dos conteúdos. PRnet/2012 Ferramentas para Web Design 13 Ferramentas Ferramentas para para Web Web Design Design 13 13
Os documentos de especificação são um contrato O sitegrama, o fluxo das transações/navegação e os wireframes são os documentos que especificam como será o trabalho das demais equipes envolvidas no projeto do website: Designers gráficos Programadores Redatores etc. Ferramentas para Web Design 14 Ferramentas para Web Design 14
Os documentos de especificação são um contrato Por isso trate esses documentos como um contrato: Evite ambigüidades. Seja detalhista. Não deixe nada subentendido. Não de margem a interpretação. Especifique o que está dentro do escopo e o que está fora. Tenha certeza que todos os documentos foram compreendidos completamente. Ferramentas para Web Design 15 Ferramentas para Web Design 15
O que é um Diagrama de Árvore? Ferramentas para Web Design 16 Ferramentas para Web Design 16
Diagrama de Árvore Diagrama de árvore é uma forma gráfica de representar organizações de maneira hierárquica. Ferramentas para Web Design 17 Ferramentas para Web Design 17
Diagrama de Árvore A Raiz Nível 0 Nó pai de E e F B C D Nível 1 E F G H I Nível 2 Nós filhos de B J K Nível 3 Sub-árvores Ferramentas para Web Design 18 Ferramentas para Web Design 18
Diagramas de Árvore Uma árvore é definida como um conjunto finito de nós com as seguintes características: Existe um nó especial chamado raiz (normalmente representa a Home-Page do site). Os demais nós são particionados em estruturas separadas de árvores, denominadas sub-árvores. Como são estruturas separadas um nó não aparecerá em mais de uma sub-árvore. A Raiz Nível 0 Nó pai de E e F B C D Nível 1 E F G H I Nível 2 Nós filhos de B J K Nível 3 Sub-árvores Ferramentas para Web Design 19 Ferramentas para Web Design 19
Diagramas de Árvore Nós filhos são definidos como as raízes das sub-árvores de um nó, que é o pai deles. Nós irmãos são os nós filhos que possuem o mesmo pai. Nível de um nó é a sua distância em relação a raiz da árvore. A Raiz Nível 0 Nó pai de E e F B C D Nível 1 E F G H I Nível 2 Nós filhos de B J K Nível 3 Sub-árvores Ferramentas para Web Design 20 Ferramentas para Web Design 20
O que é um Fluxograma? Ferramentas para Web Design 21 Ferramentas para Web Design 21
Fluxogramas Fluxograma é uma forma gráfica de representar atividades que devem ser executadas em seqüência, como em um processo. Um fluxograma é composto por símbolos que representam atividades (normalmente retângulos), símbolos que representam decisões (normalmente losângulos) e símbolos que representam o fluxo, a seqüência de execução das atividades (normalmente setas). Ferramentas para Web Design 22 Ferramentas para Web Design 22
Fluxogramas No fluxo das transações os símbolos atividades (retângulos) representam as páginas do website, como os nós do diagrama de árvore. Os símbolos decisões representam as decisões do sistema para escolher qual página apresentar e os símbolos de seqüência representam a passagem de uma página para outra. Ferramentas para Web Design 23 Ferramentas para Web Design 23
Fluxogramas Menu Fluxo Botão Cancelar Botão Cancelar Dados Senha Botão Formulário corretos Botão Sim Confirmação válida Sim Sucesso OK OK?? Não Não Decisão Páginas Ferramentas para Web Design 24 Ferramentas para Web Design 24
Público-alvo Vários públicos utilizam o sitegrama, o fluxo das transações e o wireframe para entender a organização, ter uma visão geral do website, dos elementos e funcionalidades das páginas do website, porém com propósitos diferentes. Ferramentas para Web Design 25 Ferramentas para Web Design 25
Quem é o Público-alvo do Sitegrama e do Fluxo das Transações? Ferramentas para Web Design 26 Ferramentas para Web Design 26
Público-alvo do Sitegrama e do Fluxo das Transações Arquitetos de Informação: usam para organizar as informações e especificar as páginas do website. Diretores de Arte: usam para definir o número de telas únicas (telas-tipo) e para desenhar o sistema de navegação do website. Redatores e produtores de conteúdo: usam para definir os requisitos de conteúdos do website. Programadores e Analistas: usam para definir os requisitos técnicos do projeto. Ferramentas para Web Design 27 Ferramentas para Web Design 27
Quem é o Público-alvo do Wireframe? Ferramentas para Web Design 28 Ferramentas para Web Design 28
Público-Alvo dos Wireframes Arquitetos de Informação: usam para especificar as páginas do website. Diretores de Arte: usam para definir a linha gráfica do website, o layout de cada página. Redatores e produtores de conteúdo: usam para especificar os conteúdos das páginas. Programadores e Analistas: usam para implementar as funcionalidades das aplicações. Clientes contratantes: usam para validar se o conteúdo das páginas está de acordo com os requisitos do projeto. Usuários: usam para simular o funcionamento do website em testes de usabilidade. Ferramentas para Web Design 29 Ferramentas para Web Design 29
Especificação do Wireframe A especificação completa de um wireframe é composta por três partes (camadas) diferentes: Identificação Camada que apresenta a identificação dos elementos, seus agrupamentos e a sua priorização. Representação Camada que apresenta exemplos de conteúdos ou exemplos das funcionalidades Descrição Especificação detalhada dos elementos e suas funcionalidades. Menu Lateral Logotipo Caixa de busca Cabeçalho Barra de navegação institucional Bread Crumb Título da Página Versão para impressão Envie para um amigo Área de Conteúdo Cross Content Logo Meus Artigos e Apresentações Útimas Atualizações Biblioteca Inserir nova referência GUILHERMO.com Página Inicial > Página Título Imagem Busca: OK Quem é Guilhermo Entre em Contato Versão para impressão Envie para um amigo Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris sit amet arcu at lectus feugiat sollicitudin. Etiam et libero eu magna facilisis consequat. Phasellus luctus pede quis turpis. Ut mi. Cras porttitor. Maecenas id mi. Suspendisse id diam id magna elementum sagittis. Cras semper tortor in magna. Título Cross Content Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Descrição do wireframe Página Interna (Modelo de Moldura) 6.1. Cross Content Definição: Lista com links para páginas com conteúdo relacionado ao apresentado. Deve ser usado Definição: Modelo para as páginas internas do website. apenas se houver conteúdo relacionado. Elemento Opcional: Sim Relação dos Elementos Observações: Verifique o cross content de cada página na planilha de descrição do sitegrama e fluxo de navegação. 1. Cabeçalho Definição: Cabeçalho de identificação do website. Deve estar presente em todas as páginas. 7. Menu Lateral Elemento Opcional: Não Definição: Contém links para as principais seções do website. Deve estar presente em todas as páginas internas. 1.1. Barra de navegação institucional Elemento Opcional: Não Definição: Contém os links para as seções institucionais do website. 8. Rodapé Elemento Opcional: Não Definição: Rodapé da página identificando o website e o copyright de diretos autorais. Deve estar 1.2. Caixa de busca presente em todas as páginas. Definição: Interface do sistema de busca do website. Elemento Opcional: Não Funcionalidade: Usuário digita uma ou mais palavras chaves e aperta o botão OK. São apresentadas todas as referências que contém a(s) palavra(s) digitada(s). Elemento Opcional: Não 1.3. Logotipo Definição: Logotipo para identificação do website. Funcionalidade: Contém link para a Home-Page. Elemento Opcional: Não 2. Bread Crumb Definição: Indica a página atual e todas as páginas hierarquicamente superiores. Deve estar presente em todas as páginas. Funcionalidade: Possui link para as páginas hierarquicamente superiores. Elemento Opcional: Não Observações: Verifique o bread crumb de cada página na planilha de descrição do sitegrama e fluxo de navegação. 3. Título da Página Definição: Título explicando o conteúdo da página. Elemento Opcional: Não 4. Versão para impressão Definição: Ao clicar no link apresenta uma versão da página preparada para impressão. Elemento Opcional: Sim Observações: A versão para impressão da página deve ser apresentada em uma nova janela popup. 5. Envie para um amigo Definição: Ao clicar no link apresenta um formulário para se enviar a página para um amigo por e- mail. Elemento Opcional: Sim 6. Área de Conteúdo Definição: Contém o conteúdo da página (texto, imagem, formulário, etc.). Elemento Opcional: Não Suspendisse sed est. Fusce mi enim, sollicitudin nec, pretium eu, tincidunt a, dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras a sapien at wisi vehicula placerat. Vivamus mattis. Pellentesque eu tellus mattis enim mollis porta. Quisque turpis lacus, adipiscing tincidunt, bibendum ut, tincidunt non, ante. Sed at est dignissim tellus suscipit porta. Nullam turpis arcu, lacinia at, volutpat non, rutrum non, quam. Aliquam consectetuer iaculis sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam in neque. Nunc lorem. Integer sed ante. PRnet/2012 Rodapé Quisque pretium dolor vehicula nisl. Sed sodales, lorem vitae placerat congue, dolor mauris nonummy massa, placerat blandit ligula diam eget nulla. Etiam ultricies magna ut mi. Nam ut nulla. Proin pellentesque, neque id scelerisque pretium, leo urna pulvinar urna, a convallis quam libero eget odio. Ut non neque. Ferramentas para Web Design 30 (c) GUILHERMO.com - 2004 Ferramentas para Web Design 30
Grau de detalhamento da especificação Outras formas especificar um wireframe Outras formas de especificar um wireframe podem ser utilizadas conforme as características do projeto. Estas outras formas diminuem o grau de detalhamento da especificação do wireframe, porém são mais fáceis de elaborar. Cabe ao arquiteto responsável pelo projeto definir qual forma de especificação utilizar em cada wireframe. Formas de especificar um wireframe Especificação Completa (Identificação, Representação e Descrição) Identificação e Representação Representação com observações Esboço do wireframe Print Screen com observações Indicação no Sitegrama ou Fluxo das Transações Facilidade de elaboração PRnet/2012 Ferramentas para Web Design 31 Ferramentas para Web Design 31
Alta Fidelidade X Baixa Fidelidade Wireframes podem ter a camada de Representação com diferentes graus de fidelidade. Quanto maior o grau de fidelidade mais o wireframe se aproxima do layout final da página, porém é mais trabalhoso para elaborá-lo. Proximidade do layout final da página Visão Abstrata Baixa Fidelidade Média Fidelidade Alta Fidelidade PRnet/2012 Esforço para elaborar o wireframe Ferramentas para Web Design 32 Ferramentas para Web Design 32 Toub, S. Evaluating Information Architecture: A practical guide to assessing web site organization, Argus, 2000. http://argus-acia.com/white_papers/evaluating_ia.pdf.
Alta Fidelidade X Baixa Fidelidade No projeto de um website o designer é o profissional responsável por definir o layout final da página (posição dos elementos, cores, fontes, etc.). Por isso para se elaborar wireframes com alta fidelidade é preciso que o designer gráfico e o arquiteto de informação trabalhem juntos. Ferramentas para Web Design 33 Ferramentas para Web Design 33
Alta Fidelidade X Baixa Fidelidade Independente do grau de fidelidade, o arquiteto de informação precisa informar a prioridade dos elementos na página, qual elemento precisa ter mais destaque. A priorização pode ser feita através da posição do elemento do desenho da camada de Representação, obedecendo a linha de leitura diagonal de uma página. Elementos situados no canto superior esquerdo são mais prioritários que os elementos situados no canto inferior direito. Essa regra de prioridade deve ser utilizada com critério, elementos como barras de navegação, menu e logotipos entre outros mesmo que não sejam prioritários podem possuir uma posição fixa no canto superior esquerdo da página. Ferramentas para para Web Web Design Design 34 34
Alta Fidelidade X Baixa Fidelidade Linha de prioridade dos elementos no wireframe Mais prioritário Menos prioritário Ferramentas para Web Design 35
Técnicas para elaboração de wireframes Técnicas para elaborar wireframes de produtos web. Verifique a resolução de tela a ser utilizada como referência Utilize como base o mapa estrutural Escolha a melhor forma para apresentar cada tipo de informação Menus Bread Crumb Trails Textos (títulos, sub-títulos, corpo de texto... Listas e tabelas Imagens (thumbnails, fotos, legendas, ícones, banners) Formulários Ferramenta de busca Ferramentas para Web Design 36 Ferramentas para Web Design 36
Resolução de Tela Verifique a resolução de tela mínima a qual o produto deve atender. Menus Com base na estrutura definida na fase anterior, devese analisar e definir a melhor forma de apresentar os diversos níveis de informação na tela. Existem algumas estruturas comuns, que podem ser tomadas como referência: Ferramentas para Web Design 37 Ferramentas para Web Design 37
Resolução de Tela Menu horizontal X Menu vertical O menu horizontal pode ser interessante quando existem poucos itens de menu e/ou se deseja liberar área útil para apresentação de conteúdo. O menu vertical oferece, em contrapartida, maior escalabilidade. Menus de segundo nível podem ser apresentados também na horizontal.ou na vertical, utilizando recursos como dhtmi ou flash. A mesma solução pode ser aplicada em menus verticais de primeiro nível. Existe ainda o recurso conhecido como "colapse menu", que apresenta os itens de níveis inferiores, empurrando os demais itens do menu. Ferramentas para Web Design 38 Ferramentas para Web Design 38
Bread Crumb Trails Apresenta a estrutura do site até a pagina atual Home Institucional Histórico Palavra do Presidente Diferente de histórico/tracking de navegação Ferramentas para Web Design 39 Ferramentas para Web Design 39
É preciso definir padrões para a apresentação de: Títulos Sub-títulos Textos Corpo de texto Textos longos? 0 que tem mais sentido? Rolar a página (scroll) ou criar paginação? Faz sentido imprimir o texto? Neste caso, deve-se prever uma versão específica para impressão? Links Destaques de conteúdo (highlights no corpo do texto) Nesta fase, não se deve definir fonte e cores. 0 importante é que sejam definidas as proporções e pesos que cada um dos elementos acima possui, bem como os comportamentos de interação. Ferramentas para Web Design 40 Ferramentas para Web Design 40
Listas e tabelas As informações vêm de banco de dados? Estudar o pior caso (número de caracteres, caixa alta/baixa, quantidade de informações) Priorizar informações a serem apresentadas Utilizar conceito drill-down (mostra detalhes em outra página/layer/pop) Prever paginação Alternar cores das linhas para facilitar leitura Ferramentas para Web Design 41 Ferramentas para Web Design 41
Imagens Prever a inclusão de imagens que têm a função de comunicar algo: fotos de produtos, mapas... Thumbnail X Imagem ampliada Verificar necessidade de inclusão de legenda Usar sempre ALT + Text (para permitir a leitura por softwares específicos para deficientes visuais) Ferramentas para Web Design 42 Ferramentas para Web Design 42
Thumbnails são versões reduzidas de imagens, usadas para tornar mais fácil o processo de procurar e reconhecer. - - Os motores de busca de imagem e programas de organização destas usam esta técnica, tal como alguns sistemas operacionais e ambientes de trabalho modernos, tais como o Windows XP, KDE e o GNOME. - Os thumbnails automáticos reduzem imagens grandes para um tamanho menor, o resultado pode não ter uma elevada qualidade, o que resulta de um redimensionamento da imagem. Ferramentas para Web Design 43 Ferramentas para Web Design 43
Formulários Oferecer indicações sobre preenchimento do campo. Em caso de erro de preenchimento, trazer de volta o formulário com campos pré-preenchidos e indicar o erro ao usuário. Prever erros de sistema e, caso ocorram, mostrar mensagem explicativa ao usuário. Ferramentas para Web Design 44 Ferramentas para Web Design 44
Banners e outros anúncios Têm formato padrão? Expand banner: como funciona nos diferentes browsers? Ferramentas para Web Design 45 Ferramentas para Web Design 45
Wireframe do site FOX Sports PRnet/2012 Ferramentas para Web Design 46 Ferramentas para Web Design 46
Versão final do site FOX Sports Ferramentas para Web Design 47 Ferramentas para Web Design 47
Comparação entre wireframe e resultado final Ferramentas para Web Design 48 Ferramentas para Web Design 48