Mudanças entre as edições de "Designers da Informação"

Edição das 19h25min de 23 de junho de 2016 (ver código-fonte) Danilo.pontechelle (Discussão | contribs) (→‎Mapa do site) ← Edição anterior		Edição das 19h26min de 23 de junho de 2016 (ver código-fonte) Danilo.pontechelle (Discussão | contribs) (→‎Sketch) Edição posterior →
Linha 139:		Linha 139:
	'''Atividades relacionadas'''		'''Atividades relacionadas'''
−		+	<ul>
−	Sketch manual	+	<li>Sketch manual</li>
−	Sketch digital	+	<li>Sketch digital</li>
−		+	</ul>
−		+
−		+
	== Wireframe ==		== Wireframe ==

---

Edição das 19h26min de 23 de junho de 2016

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.

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