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.

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

Fluxo de navegação

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