Designers da Informação
A equipe de Design da Informação tem como principais responsabilidades arquitetar e realizar fluxos de informação na concepção de produtos, construção de interfaces gráficas e identidades visuais, bem como elaborar soluções criativas no que compete a usabilidade, navegabilidade e facilidade de interação, definir padrões reaproveitáveis e executar procedimentos práticos, assim como a codificação Front End (HTML/CSS), a fim de garantir a melhor experiência entre o produto concebido e o usuário final.
Site da equipe: http://design.mstech.com.br/
A equipe
Contamos com quatro designers altamente capacitados e versados nas mais diferentes aptidões que são necessárias para desempenhar o papel de Designer da Informação:
- Danilo Martinelli Pontechelle;
- Lucas Toledo Teixeira Evangelista;
- Miriam Midori Haga;
- Samuel de Aguiar Sabino.
Índice
- 1 Planejamento geral
- 2 Identidade Visual
- 3 Logo do produto
- 4 Iconografia
- 5 Acessibilidade
- 6 Fluxo de navegação
- 7 Mapa do site
- 8 Sketch
- 9 Wireframe
- 10 Mockup
- 11 Prototipagem
- 12 Telas de ajuda e tutorial
- 13 Pranchas de apresentação
- 14 Testes de usabilidade
- 15 HTML/CSS (front-end design)
- 16 Folha de estilos (biblioteca de padrões)
- 17 Interface animada
- 18 Validação técnica (designer)
- 19 Interface gamificada
Planejamento geral
O que é?
Análise de todos os requisitos relacionados ao projeto, tipos de plataforma envolvidas, objetivo do cliente, análise do público alvo, a fim de elaborar o planejamento da produção e também a concepção do produto.
Importância
Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.
Atividades relacionadas
- Análise de requisitos
- Análise do objetivo do cliente
- Análise do público alvo
- Concepção do produto
Identidade Visual
O que é?
Representa um produto/serviço por meio de símbolos, logotipos, fontes, áudios, animações, elementos gráficos e outros.
Importância
Caracteriza e diferencia um produto/serviço e é responsável pela comunicação de seus valores ao usuário/consumidor.
Atividades relacionadas
- Estudos (análise de similares, brainstorm, rascunhos de solução)
- Moodboard (prancha com paleta de cores e imagens de referência)
- Elementos gráficos (patterns, ícones, grafismos etc.)
- Layout (impresso, web, animação etc.)
- Guidelines
Logo do produto
O que é?
Representação visual de um conceito, cuja forma, cores e fonte dão identidade a um produto.
Importância
Caracteriza e diferencia o produto em relação aos concorrentes. Também simboliza a sua filosofia e forma de atuação no mercado.
Atividades relacionadas
- Pesquisa de referências de similares no mercado
- Definição do conceito principal e criação de um símbolo que traduza essa ideia
- Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas
Iconografia
O que é?
É o conjunto de ícones padrão de uma interface, signos visuais que representam outro objeto por força de semelhança. Ícones são signos substitutivos (podem ser usados no lugar da coisa representada) e fundamentais na interação dos usuários com os computadores, pois indicam as zonas de acionamento de comandos ou reforçam visualmente alguma ação que o sistema apresenta.
Importância
Uma iconografia bem projetada é essencial para qualquer interface. Suas vantagens são impressionantes, pois dispensam leitura, logo podem ser identificadas por analfabetos, estrangeiros, etc. São compreendidos rapidamente diminuindo o tempo de interação, são mais facilmente memorizados e otimizam o espaço nas telas.
Atividades relacionadas
- Ícones da interface (menus, funcionalidades, alertas, botões...)
- Ícones do produto (aplicativo, favicon, etc.)
Acessibilidade
O que é?
Acessibilidade é definida como a possibilidade de qualquer pessoa, independentemente de suas capacidades físicomotoras, perceptivas, culturais e sociais, usufruir os benefícios de uma vida em sociedade, tendo a possibilidade de participar de qualquer atividade, até as que incluem o uso de produtos, serviços e informações, com o mínimo de restrição possível.
Importância
Está ligado intimamente com a experiência do usuário e com toda a produção tanto de código quanto visual. É mais fácil e eficiente planejá-la desde o início para evitar retrabalho.
Atividades relacionadas
- Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)
- Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)
- Realizar avaliação de acessibilidade
O que é?
Uma representação visual do fluxo do usuário para completar tarefas dentro de um sistema. Exemplo: Em um site, o usuário começa pela na página inicial, segue para a página de um produto, depois vai até o carrinho de compras – e assim por diante. É a perspectiva do usuário sobre a organização do site, que ajuda a identificar quais passos precisam ser melhorados ou redesenhados. Importância
Define a navegação bem como a utilização de botões/menus/listas e outros componentes de interação.
Atividades relacionadas
- Simplificar processos
- Redefinir fluxos de interação
Mapa do site
O que é?
Consiste em um diagrama das páginas/seções de um site/app/sistema/etc organizadas hierarquicamente.
Importância
Ajuda a visualizar e compreender a estrutura básica e a navegação entre as diferentes partes do sistema. A partir dele podemos definir a navegação macro e ideal do usuário.
Atividades relacionadas
- Listagem de seções
- Montagem de mapa do site
Sketch
O que é?
Uma forma rápida de rabiscar uma nova interface usando papel e caneta sem compromisso com a fidelidade de formas, cores e detalhes dos elementos visuais.
Importância
Podem ser muito úteis para validar rapidamente conceitos de produtos e ideias de design com os outros membros da equipe e com usuários.
Atividades relacionadas
- Sketch manual
- Sketch digital
Wireframe
O que é?
Um guia visual que representa a estrutura da página, bem como sua hierarquia e os principais elementos que a compõem com maior fidelidade de proporções e posicionamento mais definidos dos elementos visuais.
Importância
Útil para discutir ideias com o time e com os clientes, e também para guiar o trabalho dos Diretores de Arte e Desenvolvedores.
Atividades relacionadas
- Planejamento
- Criação de wireframe
- Validação
Mockup
O que é?
Uma representação estática de média a alta fidelidade de um site/app/sistema/etc. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio produto final.
Importância
Úteis para vender a ideia do produto antes de ele estar pronto. Não possuem a resistência dos entregáveis de baixa fidelidade em apresentações e são ótimos coletores de feedback.
Atividades relacionadas
- Planejamento
- Desenvolvimento
- Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas
- Validação
Prototipagem
O que é?
Um protótipo é uma simulação da navegação e de algumas funcionalidades de um site/app/sistema, composto normalmente por sketch/wireframes/mockup clicáveis.
Importância
É uma forma rápida de validar e testar um produto antes de desenvolvê-lo do começo ao fim.
Atividades relacionadas
- Protótipo sketch
- Protótipo wireframe
- Protótipo mockup
Telas de ajuda e tutorial
O que é?
Montagem de imagens ou animações que mostram um passo a passo para guiar a utilização de um produto.
Importância
Identifica as ferramentas e funcionamento de um produto facilitando seu reconhecimento pelo usuário.
Atividades relacionadas
- Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto
- Simulações animadas interativas com instruções que guiam o usuário
- Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo
Pranchas de apresentação
O que é?
Documento para visualização e entendimento das telas e conceitos aplicados em um projeto ou produto.
Importância
Podem ser utilizadas em apresentações para auxiliar o cliente a visualizar o que foi planejado, por que foi planejado e sua importância para o produto.
Atividades relacionadas
- Proposta de sketch
- Proposta de wireframe
- Proposta de mapa de site
- Proposta de fluxograma de navegação
- Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)
- Proposta de iconografia
Testes de usabilidade
O que é?
Entrevista com o consumidor, onde pede-se que ele execute uma série de tarefas em um protótipo ou mesmo no produto final. À medida em que o consumidor interage com o produto, o pesquisador faz anotações sobre seu comportamento, dificuldades e suas opiniões.
Importância
Essencial para atualizações do produto. Ajuda a validar fluxos, layouts e funcionalidades aumentando a qualidade, o desempenho e a empatia pelo produto final.
Atividades relacionadas
- Análise de resultado dos testes aplicado ao usuário
- Planejamento de ações
- Produção
HTML/CSS (front-end design)
O que é?
Codificação em HTML/CSS/JQUERY do mockup do layout final.
Importância
Traduz o que foi planejado no mockup com fidelidade e estrutura para a equipe desenvolvimento implementar as interações e funcionalidades.
Atividades relacionadas
- Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)
- Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)
Folha de estilos (biblioteca de padrões)
O que é?
Uma lista prática com exemplos (e às vezes códigos) dos padrões visuais que serão utilizados em todo o site. É fundamental para a padronização dos elementos da interface, facilitando a produção e reprodução das demais telas.
Importância
Não só ajuda a manter o design consistente em diferentes telas, mas também facilita a vida dos desenvolvedores na hora de implementar os elementos.
Atividades relacionadas
- Componentes de interação (botões, listas suspensas, setas de navegação, etc.)
- Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)
- Componentes de marcação (HTML e CSS)
Interface animada
O que é?
Animações pontuais que têm a intenção de tornar a experiência do usuário mais amigável e familiar aos seus referenciais de interação analógica/digital. Podem ser aplicadas em ícones, transições, menus, janelas, botões, etc.
Importância
Animações de interface ajudam a envolver o usuário e encorajam uma exploração mais profunda de um app ou site. Auxilia na contextualização de uma sequência de ações. Instiga o usuário a questionar “O que vai acontecer se eu tocar isso?”, ”E depois disso?”.
Atividades relacionadas
- Planejamento de animação
- Guia de animação (documento com especificações de execução)
- Criação de animação codificada
Validação técnica (designer)
O que é?
Revisão e validação do produto funcional em relação ao que foi planejado.
Importância
Garantir que todo o planejamento, em todas as áreas competentes a equipe, tenha sido executado para que o produto chegue com a máxima qualidade para a análise do cliente.
Atividades relacionadas
- Validação de montagem HTML/CSS
- Validação pós back-end
- Validação de usabilidade básica no dispositivo/paltaforma final
Interface gamificada
O que é?
Uso de elementos visuais atrativos que auxiliam na exposição dos dados de desempenho do usuário/jogador. Adiciona uma experiência lúdica, mais próxima de um jogo que de um sistema.
Importância
Tem o objetivo de tornar a experiência de uso de um determinado produto diferenciado e instigante.
Atividades relacionadas
- Estudo de similares
- Pesquisa de interesses do público alvo
- Planejamento da gamificação
- Planejamento e mapeamento do impacto no layout