Exibir código-fonte para 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:
<ul>
<li>Danilo Martinelli Pontechelle;</li>
<li>Lucas Toledo Teixeira Evangelista;</li>
<li>Miriam Midori Haga;</li>
<li>Samuel de Aguiar Sabino.</li>
</ul>
<br>
== Planejamento geral ==

       <p><strong>O que é?</strong></p>
                  <p class="ng-binding">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.</p>
                  <p><strong>Importância</strong></p>
                  <p class="ng-binding">Fase crucial para entendimento do que precisa ser produzido e como será produzido assim como suas características.</p>
                  <p><strong>Atividades relacionadas</strong></p>
                  <ul class="lista-padrao">
                    <!-- ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise de requisitos</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do objetivo do cliente</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Análise do público alvo</li><!-- end ngRepeat: relacionado in competencia.relacionados --><li class="ng-binding ng-scope" ng-repeat="relacionado in competencia.relacionados">Concepção do produto</li><!-- end ngRepeat: relacionado in competencia.relacionados -->
                  </ul>

== 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'''
<ul>
    <li>Estudos (análise de similares, brainstorm, rascunhos de solução)</li>
    <li>Moodboard (prancha com paleta de cores e imagens de referência)</li>
    <li>Elementos gráficos (patterns, ícones, grafismos etc.)</li>
    <li>Layout (impresso, web, animação etc.)</li>
   <li>Guidelines</li>
</ul>

== 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'''
<ul>
    <li>Pesquisa de referências de similares no mercado</li>
    <li>Definição do conceito principal e criação de um símbolo que traduza essa ideia</li>
    <li>Avaliação da consistência da identidade em diversos tamanhos e dispositivos/plataformas</li>
</ul>

== 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'''
<ul>
    <li>Ícones da interface (menus, funcionalidades, alertas, botões...)</li>
    <li>Ícones do produto (aplicativo, favicon, etc.)</li>
</ul>

== 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'''
<ul>
    <li>Seguir os padrões de desenvolvimento Web da W3C (cor, contraste, tamanhos etc.)</li>
    <li>Seguir diretrizes e recomendações de acessibilidade do WAI, WCAG e WAI-ARIA (navegabilidade, HTML, etc.)</li>
    <li>Realizar avaliação de acessibilidade</li>
</ul>

== 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'''
<ul>
    <li>Simplificar processos</li>
    <li>Redefinir fluxos de interação</li>
</ul>

== 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'''
<ul>
    <li>Listagem de seções</li>
    <li>Montagem de mapa do site</li>
</ul>

== 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'''
<ul>
    <li>Sketch manual</li>
    <li>Sketch digital</li>
</ul>

== 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'''
<ul>
    <li>Planejamento</li>
    <li>Criação de wireframe</li>
    <li>Validação</li>
</ul>

== 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'''
<ul>
    <li>Planejamento</li>
    <li>Desenvolvimento</li>
    <li>Avaliação da consistência da Identidade Visual em determinados dispositivos/plataformas</li>
    <li>Validação</li>
</ul>

== 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'''
<ul>
    <li>Protótipo sketch</li>
    <li>Protótipo wireframe</li>
    <li>Protótipo mockup</li>
</ul>

== 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'''
<ul>
    <li>Criação de pranchas que demonstrem o fluxo de navegação pelas telas do produto</li>
    <li>Simulações animadas interativas com instruções que guiam o usuário</li>
    <li>Telas de ajuda dentro do próprio produto com textos e indicações de como utilizá-lo</li>
</ul>

== 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'''
<ul>
    <li>Proposta de sketch</li>
    <li>Proposta de wireframe</li>
    <li>Proposta de mapa de site</li>
    <li>Proposta de fluxograma de navegação</li>
    <li>Proposta de identidade visual (logotipo, ícones, elementos gráficos etc.)</li>
    <li>Proposta de iconografia</li>
</ul>

== 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'''
<ul>
    <li>Análise de resultado dos testes aplicado ao usuário</li>
    <li>Planejamento de ações</li>
    <li>Produção</li>
</ul>

== 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'''
<ul>
    <li>Guia de montagemHTML/CSS (proporções, distâncias, tamanho de fonte, etc)</li>
    <li>Montagem HTML/CSS (estruturação, customização de componentes padrão, etc)</li>
</ul>

== 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'''
<ul>
    <li>Componentes de interação (botões, listas suspensas, setas de navegação, etc.)</li>
    <li>Componentes de formatação (fonte, cores, tamanhos, espaçamentos, etc.)</li>
    <li>Componentes de marcação (HTML e CSS)</li>
</ul>

== 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'''
<ul>
    <li>Planejamento de animação</li>
    <li>Guia de animação (documento com especificações de execução)</li>
    <li>Criação de animação codificada</li>
</ul>

== 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'''
<ul>
    <li>Validação de montagem HTML/CSS</li>
    <li>Validação pós back-end</li>
    <li>Validação de usabilidade básica no dispositivo/paltaforma final</li>
</ul>

== 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'''
<ul>
    <li>Estudo de similares</li>
    <li>Pesquisa de interesses do público alvo</li>
    <li>Planejamento da gamificação</li>
    <li>Planejamento e mapeamento do impacto no layout</li>
</ul>