Validação

validacao

A etapa de validação diz respeito a avaliações e testes técnico-funcionais e com usuários. Geralmente, inicia-se logo após os primeiros resultados da etapa de reconstrução e prossegue no decorrer do planejamento do produto. Basicamente, ela visa identificar e corrigir possíveis erros de programação e de usabilidade.

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Desenvolvimento

desenvolvimento
A etapa de desenvolvimento inicia-se geralmente quando a etapa de verificação fornecer os requisitos, restrições e possibilidades do projeto. Na medida em que novas especificações estiverem disponíveis, o desenvolvimento poderá estabelecer a base de dados e as regras de negócio. Na maioria dos casos, a programação da interface só terá inicio no momento em que toda a arquitetura da informação estiver definida e quando o leiaute das principais telas do produto tiverem sido diagramadas e aprovadas. Como parte das definições que deverão ser comunicadas e discutidas com os profissionais do desenvolvimento, é de praxe os designers elaborarem um modelo funcional navegável (MFN) que simule perfeitamente as funcionalidades do produto (conforme figura abaixo). Quanto mais completo e detalhado for o MFN, mais fácil será observar e entender a lógica de interação. Isso permite um trabalho mais rápido e eficiente por parte dos desenvolvedores. Possibilita também que o MFN possa ser usado para avaliações heurísticas por parte de especialistas ou testes de interação com usuários.

É importante ressaltar que num ambiente acadêmico, muitas vezes as equipes não terão acesso a desenvolvedores. Isso não impede que eles possam planejar e simular uma situação real de desenvolvimento com base nos conhecimentos adquiridos em relação a como os procedimentos costumam acontecer no meio profissional.

 

desenvolvimento

Fonte da Figura: Henrique Beier. Design Uniritter, disciplina de Projeto Gráfico IV, 2012

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Diferenciação

diferenciacao
De caráter principalmente mercadológico, a diferenciação procura avaliar a personalidade visual definida e desenvolvida na etapa de identidade. Ela pode ser avaliada, de acordo com Memória (2005), através de um método chamado mapeamento de expressões. Apresenta-se ao usuário um quadro divido em quadrantes através do cruzamento de um eixo horizontal e vertical (X e Y). Em cada extremidade dos eixos são atribuídos pares de palavras com diferentes valores, como por exemplo, divertido/funcional em X e culto/popular em Y. Os produtos analisados na etapa de desconstrução podem ser distribuídos no plano de acordo com suas características e estilos. Pede-se aos usuários que posicionem o produto que está sendo projetado de acordo com sua percepção. Caso a posição pretendida pela equipe esteja muito distante das opiniões dos usuários, é um importante indício de que a identidade precisa ser revisada.

Outro método importante para avaliar a impressão do usuário em relação ao produto é o teste de resposta emocional. Na desconstrução, os usuários analisam os similares e referências. Neste momento do projeto, eles podem ser convidados a avaliar o produto em questão.

posicaoProduto

Fonte da Figura. Lucas Winck. Desenho de interface para ambiente virtual da nano-cervejaria Maniba

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Definição da Matriz Cromática

De acordo com Samara (2010), cores constituem um poderoso estimulo visual, e, portanto são muito úteis na comunicação gráfica e visual. A fisiologia que permite a percepção costuma ser universal entre os seres humanos. “O que fazemos com as cores logo que a vemos, porém, é outra história, e controlá-las visando à comunicação depende do entendimento de como suas qualidades ópticas se comportam” (SAMARA 2010, p.83). Igualmente importante é a definição de combinação de cores que promovam acessibilidade – o daltonismo, por exemplo, impede que determinadas cores sejam visualizadas, por isso algumas combinações de cor podem tornar textos ilegíveis para determinadas pessoas (Meurer e Szabluk, 2012).
Para Meurer e Szabluk (2012), as cores devem ser escolhidas de acordo com a identidade gráfico-visual considerando o contexto em que serão utilizadas. Por isso é importante definir a escala de participação (ou o quanto cada cor estará presente na interface), matiz e saturação de cada uma delas para obter um resultado harmônico. Podem ser importantes também na associação de links, botões e conteúdos, de modo que o usuário reconheça os acionamentos da interface através da cor.

cromografia

Fonte da Figura: Elaborado por Cristiano Menezes dos Santos.Projeto IV 2012 1. POC – Plataforma de Otimização de Consultas

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Definição da Imagética

Produtos digitais permitem a inclusão de conteúdos imagéticos de diferentes naturezas, estáticos e em movimento, tais com ilustrações, fotos, vídeos, infográficos, esquemas, pictogramas, etc. Quanto à função, a imagética pode ser parte integrante do leiaute da tela (ícones, pictogramas, botões e elementos decorativos) ou constituir conteúdos (fotos, vídeos, esquemas, infográficos, animações, etc.). Meurer e Szabluk (2012) recomendam que todos os conteúdos imagéticos sejam planejados e definidos de acordo com as proporções e ordenações do grid e buscando uma relação de coerência com a as regras visuais da identidade gráfico-visual. Mesmo que as informações gráficas sejam rapidamente atualizadas, como acontece em portais informacionais, a coerência gráfica e a harmonia estrutural devem ser mantidas. Na figura abaixo pode-se observar o aluno exercendo sua habilidade de expressão gráfica através do desenho de pictogramas para um sistema mobile.

imagetica

Fonte da Figura: Elaborado por Gustavo Bernardes Amara. Design Uniritter, Trabalho de conclusão de curso, 2011.

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Definição das Fontes Tipográficas

Conforme Meurer e Szabluk (2012) consiste na definição das fontes tipográficas e no padrão de aplicação das mesmas: corpo, estilos, pesos, entrelinhamentos, espaçamento dos caracteres e das margens para parágrafos de texto, títulos, citações, referências, quadros, tabelas, etc. Segundo os autores, há diferenças entre a leitura no papel e na tela, mas a função da tipografia permanece — por isso, a legibilidade e leiturabilidade devem ser consideradas requisitos.

tipo01

tipo02

tipo03

Fonte da Figura. Lucas Winck. Desenho de interface para ambiente virtual da nano-cervejaria Maniba

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Definição da Assinatura Visual

De acordo com Meurer e Szabluk (2010), é possível aproveitar uma assinatura pré-existente, como acontece quando o produto for um portal para uma empresa ou instituição. Em alguns casos a assinatura requer adaptações do seu desenho para que se adeque melhor. Em outros, a equipe terá a oportunidade de desenvolver uma identidade gráfico-visual totalmente nova, incluindo a assinatura. Poderá dessa forma, desenvolver suas habilidades na expressão gráfica, seu senso estético e estabelecer uma discussão para definir o conceito e buscar argumentação para defendê-lo. Devido à importância e à complexidade de se desenvolver uma assinatura apropriada, recomendam-se ainda que as equipes utilizem métodos e técnicas específicas definidas por autores da área, tais como Wheeler (2008), Strunck (2007) e outros.

identidadeGraficoVisual

Fonte da Figura: Desenhado pelo autor com auxílio de Daniela Szabluk.

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Editoração e Diagramação

Para que o processo de editoração e diagramação tenha início, autores como Götz (2002), Müller-Brockmann (2007), Lupton e Phillips (2008), Samara (2007 e 2010) e Elam (2010) recomendam categoricamente a elaboração e uso de grids (sistemas de malhas estruturais, modulares e diagramacionais). Gomes e Medeiros (2005) defendem o uso das malhas como auxílio “tanto na construção de estruturas geométricas e na adequação de proporções, quanto no projeto de diagramas que suportam a apresentação de desenhos para o produto industrial gráfico”. Segundo os autores, todo e qualquer produto deve ser, tanto no plano teórico (filosófico) quanto no plano prático (matemático), inserido em uma malha estrutural.

“Em primeiro lugar, um grid introduz uma ordem sistemática num leiaute, diferenciando tipos de informações e facilitando a navegação entre eles. O grid permite que o designer diagrame rapidamente uma quantidade enorme de informação. […] Ele também permite vários colaboradores no mesmo projeto, ou numa série de projetos correlatos ao longo do tempo, sem comprometer as qualidades visuais definidas ao se passar de um objeto para outro” (SAMARA, 2007 p.22).”

De acordo com Lupton e Phillips (2008) diferentes produtos, com formatos específicos e distintas funções requerem o uso de diferentes tipos de grids. Cabe à equipe investigar qual o melhor grid para o seu caso. Conforme Kalbach (2010) o design digital muitas vezes necessita atender a multiplataformas com variadas configurações de telas, o que possibilita o desenvolvimento de leiautes responsivos, ou seja, que se adaptam a essas variações. Para isso, é necessário também pensar em grids que atendam essas variações.

editoracao

Fonte da Figura: Elaborado por Gustavo Bernardes Amaral. Design Uniritter, Trabalho de conclusão de curso, 2011.

O projeto E como modelo de ABP recomenda que a editoração se baseie na arquitetura da informação estabelecida pelos wireframes arquiteturais definidos na reconstrução, de acordo com a identidade gráfico-visual que estará sendo desenvolvida simultaneamente ou então, já pré-existente.

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Identidade

identidade

Corresponde à etapa de estética do Projeto E, e é nela que os alunos também têm a oportunidade de desenvolver habilidades relativas ao design gráfico, tais como a expressão e a comunicação gráfica, o senso estético e os estilos de apresentação. Ela abrange, principalmente, métodos e técnicas relativas à editoração e diagramação e da identidade gráfico-visual. Segundo Meurer e Szabluk (2012 p. 239), “trata-se de um processo que requer atenção para diversos fatores que contribuirão para um produto esteticamente bem resolvido, equilibrado e harmonioso”. Para Samara (2010), um bom projeto gráfico é aquele no qual todos os elementos se comunicam e se relacionam harmoniosamente na mesma linguagem.
“Um bom design […] deve fazer com que todas as suas partes se reforcem, se reafirmem e se referenciem reciprocamente, não apenas em forma, peso ou posicionamento, mas também conceitualmente. Quando um elemento parece fora do lugar, ou sobra na composição, ele se desconecta dos demais, e a mensagem é enfraquecida” (SAMARA, 2010 p.13).”
Basicamente, a identidade confere aos wireframes arquiteturais, desenhados na etapa de reconstrução, as características visuais necessárias para que o produto transmita empatia, credibilidade e confiabilidade. Apesar de serem características subjetivas, de acordo com Norman (2005), pesquisas realizadas no Japão e em Israel apontaram para o fato de que usuários consideram produtos de estética superior 25% mais fáceis de serem usados do que seus similares menos interessantes. É um indício de que os requisitos estético-formais podem promover a usabilidade.
As técnicas apresentadas a seguir geralmente são executadas simultaneamente. Optou-se por apresentá-las separadamente no intuito de facilitar o seu entendimento.

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Wireframes, wireflows e casos de uso

Segundo Kalbach (2009), wireframes são esboços preliminares das telas do produto nas quais podem ser observadas a estrutura, organização, ordem e natureza dos elementos e a hierarquia e densidade da informação. Além disso, também facilitam a descoberta de possíveis problemas de ordem navegacional e de usabilidade. Para o autor, wireframes precedem o design visual e, portanto, não devem ser usados como parâmetro para análise dos elementos estético-formais. Por outro lado, quando o designer gráfico definir o leiaute das telas, terá que observar e manter a arquitetura da informação estabelecida nos wireframes. Em muitos casos, ela é aprovada pelos clientes através da apreciação dos wireframes e se for alterada, não corresponderá mais àquilo que foi planejado. Porém, o designer terá flexibilidade para desenvolver os estilos gráficos da identidade gráfico-visual, conforme será abordado na etapa de identidade.

De acordo com Meurer e Szabluk (2012), para representar os passos de uma tarefa ou a navegação dentro de determinado conteúdo, define-se uma sequência lógica de wireframes, chamada wireflow. Unger e Chandler (2009) e Cybis (2010) compreendem essa sequência como sendo uma espécie de protótipo. Em essência, segundo Meurer e Szabluk (2010), wireflows são importantes para orientar todos os profissionais envolvidos na equipe de projeto, pois exibem em detalhes, elementos e modelos interativos fundamentais que constituirão o produto final. Podem ser usados também para realização de testes de interação com usuários finais, pois já apresentam todas as metáforas necessárias para que os mesmos possam navegar e realizar tarefas. Recomenda-se aos alunos a realização sequencial das seguintes técnicas e métodos:
i. ‘Wireflows simplificados’ dos Cenários hipotéticos (modelos em papel). No intuito de motivar a habilidade do planejamento através da expressão gráfica e o trabalho em equipe, recomenda-se definir em papel, uma simulação simplificada e ordenada de toda estrutura informacional das telas e toda a navegação possível entre elas. É importante que os alunos demonstrem o fluxo das tarefas de ferramentas e funcionalidades, todos os conteúdos estruturados e hierarquizados e a inter-relação/navegação entre eles. Os acionamentos e conexões (botões, ícones e hiperlinks) devem ser de alguma maneira destacados para que remetam diretamente a ações do produto.
ii. Caso de uso relacionado ao wireflow simplificado. Possuem a função de explicar a função de cada wireframe e o que acontece entre eles. Ex. Usuário digita login e senha e em seguida, clica em entrar. Aplicação verifica dados do usuário e oferece menu de opções. Usuário escolhe ‘verificar exames’…
iii. Wireframes Arquiteturais detalhados. Recomenda-se escolher as principais telas de conteúdo e as ferramentas e funcionalidades mais importantes do produto e definir a arquitetura da informação através de wireflows detalhados e bastante precisos (figura 16). Estes wireframes apresentam riqueza de detalhes e são importantes para a realização de testes com usuários, validação junto aos clientes e para a documentação do produto. Pela sua complexidade estrutural, Meurer e Szbluk (2012) recomendam o uso de grids para desenhá-los.

wireflow

Fonte:Elaborado por Lucas Winck Santi. Design Uniritter, disciplina de Projeto Gráfico IV, 2012.

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL