Webdesign - Diagramacao
9 gostaram3,854 visualizações
O documento discute princípios de diagramação para organizar informações em um site de forma clara e acessível para os usuários. Deve-se priorizar a comunicação sobre a decoração e evitar que os usuários passem por "florestas de botões" para encontrar informações simples. A diagramação deve distribuir elementos gráficos considerando o público-alvo, tamanho da tela, conteúdo e largura de banda.
Webdesign - Diagramacao
- 1. Diagramação Organizando o sistema de informação do site
- 2. Roger Blanck – 17/11/1997 “ O design não deve ser apenas uma mera decoração, ele precisa comunicar. O leitor nunca deve ter de passar por florestas de botões para obter uma simples notícia.”
- 3. O que é a diagramação ? É a distribuição de elementos gráficos em um espaço limitado, buscando a clareza, a organização e a confiabilidade das informações; Lógica visual, criando um perfeito equilíbrio entre a sensação visual e as informações gráficas; Informações relevantes para elaborar uma diagramação: Público alvo; Relação entre a página e o tamanho da tela; Conteúdo das informações; Largura de banda utilizada pelos usuários.
- 4. Processo de interpretação da informação As páginas são lidas como grandes massas de formatos e cores, com elementos do primeiro plano contrastando com a área de fundo; A primeira leitura identifica as informações específicas, iniciando pelos gráficos; Depois é realizada uma analise gramatical do texto e leitura das frases. Título As páginas são lidas como grandes massas de formatos e cores, com elementos do primeiro plano contrastando com a área de fundo. Identificação de informações específicas, iniciando pelos gráficos. Analise gramatical do texto e leitura das frases.
- 5. Simplicidade e coerência Usuários não se impressionam com a complexidade gratuita; Metáforas de interface devem ser simples, familiares e lógicas. Devem seguir convenções de navegação usuais; Os melhores designs tornam-se invisíveis durante a navegação, gerando uma adaptação ao seus recursos; O usuário deve se sentir confortável ao navegar pelo site; A identidade gráfica deve fornecer “pistas” para a continuidade das informações, utilizando elementos de repetição.
- 6. Contraste Impacto visual que deixa a página graficamente mais interessante, visando a motivação de sua leitura; Recurso de narrativa que orienta a leitura do usuário, atraindo sua atenção para uma determinada informação; Cuidados relevantes: Elementos muito pesados ou abuso de negrito podem distrair ou repelir o olhar do usuário; Excesso de elementos podem desapontar ou confundir o usuário; Atenção com a limitação tecnológica de acessibilidade: código (HTML, CSS, etc) e conexão.
- 7. Respiro Espaço reservado para o alívio visual que permitirá ao usuário assimilar as informações obtidas até o momento.
- 8. Narrativa Controle sobre a leitura do usuário; A diagramação deve ser criada para dar mais ênfase a informação ou recurso principal do site.
- 9. Área gráfica segura Exibição em uma tela 800x600 (com borda de 8 pixels no browser). 760 pixels de largura 410 pixels de altura
- 10. Área gráfica segura Impressão de uma tela 800x600 (com borda de 8 pixels no browser). 760 pixels de largura 410 pixels de altura 560 pixels de largura
- 11. Regras “convencionais” de diagramação O design não deve ser meramente decorativo ou alegórico, apresente conteúdo em todas as páginas; Branco, preto e vermelho são as cores que chamam mais atenção (Construtivismo Russo): fundo branco, texto preto e destaques em vermelho; Não distancie as letras minúsculas, pois quebra o ritmo da leitura e a integridade das letras. Nunca use uma grande quantidade de texto em maiúsculo. Lembre-se de que existem outros recursos tipológicos para facilitar a leitura. Use apenas uma ou duas famílias de tipos, combinando uma leve e a outra em negrito. A capa deve ser como um pôster. Uma simples imagem transmite muito mais informações do que várias imagens ou somente texto. Uma imagem parece melhor quando ampliada, principalmente quando é de mal gosto. Seja criativo!
- 12. Não faça isso ! Não altere o propósito do site. Não basta transpor o conteúdo para um ambiente digital, é preciso tirar proveito dele, explorando todas as suas possibilidades; Não confunda o usuário. Crie um design coerente, nas seções e páginas diferentes. As imagens e ferramentas de navegação devem ter o mesmo aspecto para evitar que o usuário se perca; Organize as informações de forma simples e clara. Não utilize links inúteis; Cuidado com o tamanho fixo ( pixel ) da página; Não utilize imagens “pesadas”, que demorem para carregar; Evite a tentação tecnológicas. Muitas cores, sombras e efeitos esfumaçados só atrapalham; Não use textos extensos. Com certeza, o único que lerá tudo será seu chefe; Cuidado com o tamanho dos textos. Tipos muito pequenos ou muito grandes incomodam; Lembre-se sempre de que, quando um usuário fica incomodado com um site, ele nunca mais o acessará.
- 13. Diagramação Organizando o sistema de informação do site