Etapas do Processo Criativo

Neste artigo apresentarei um modelo que eu e mais alguns amigos designers utillizamos para conduzir nosso processo criativo. Tomarei como exemplo um projeto acadêmico (pós graduação), realizado em parceria com Amanda Freitas e Bruno Barros, dois ótimos designers e amigos que conheci no Infnet.

Como desafio de bloco, foi nos proposto um projeto que envolveria o redesign do site da SAPE – Sociedade dos Amigos da Pediatria do Hospital Gaffrée e Guinle. A SAPE é uma instituição filantrópica que baseia-se na assistência e na valorização das condições humanas de crianças (oriundas e atendidas no Hospital Gaffrée e Guinle) portadoras do vírus HIV ou filhos de mães soropositivo e as abandonadas, em especial as gravemente enfermas. Este projeto contemplaria o ciclo completo de produção para entrega do produto final, que era o novo site.

Briefing

Todo bom projeto – leia-se projeto funcional de qualidade -, passa pela fase de conhecimento do cliente, suas aspirações e necessidades, sua concorrência direta ou indireta, seus targets; e neste caso, para criação de um site, outros detalhes como requisitos tecnológicos são bem vindos. É nesta fase que o briefing é concebido, um documento com os dados essenciais para condução das etapas posteriores.

No nosso caso de exemplo, o briefing nos mostrou que o objetivo primário da SAPE era se posicionar no ambiente digital com um portal, se não o maior do Brasil, sobre a AIDS. Tal conclusão se deu ao fato de que 80% dos usuários do blog (até então essa era a sua presença na web), tomavam conhecimento e chegavam ao mesmo a partir de mecanismos de busca com termos como “informações sobre a AIDS”, entre outros do gênero. Ressalto aqui que a SAPE não possuía interesse em buscar doações online.

Veja alguns modelos de briefing.

Brainstorm

Após a aprovação do briefing é hora de colocar as ideias na mesa. Então a equipe criativa – em condições ideais – inicia uma “cerimônia” (atribuí esse nome pois considero esta fase um evento) onde em cima dos objetivos traçados no briefing, vão chegar a um conceito de comunicação estratégica e de criação.

Aqui todas as ideias são bem-vindas, não descarta-se nada apenas não se aproveita algumas ideias para a ocasião, se for caso. Neste projeto, fizemos o brainstorm pelo extinto Google Wave, que serviu muito bem como plataforma colaborativa.

Em agências esse processo pode variar muito, reunindo um grande grupo de criativos ou apenas os diretores de áreas: diretor de arte, diretor de planejamento, diretor de tecnologia, etc.

Gerência do Projeto

Neste momento o projeto tem início e dependendo de sua complexidade, é totalmente cabível a aplicação de uma metodologia para o gerenciamento de projetos. Algumas diretrizes conhecidas são as contidas no PMBOK, um guia de boas práticas para gerenciamento de projetos, editado pelo PMI. O Prince 2, o qual não tenho conhecimentos profundos, e as metodologias ágeis como o XP – Extreme Programming e o Scrum, que é mais um framework do que uma metodologia, que favorece o desenvolvimento ágil de software. Neste último eu possuo a certificação oficial de ScrumMaster – uma certificação da Scrum Alliance.

No nosso caso não usamos uma em específico. Mas é a partir da gerência de projetos que se estrutura cronogramas e se faz o acompanhamento da qualidade do projeto.

Arquitetura da Informação

Esta etapa é de suma importância e não deve ser ignorada. Esta fase é caracterizada pelo levantamento de dados e a estruturação adequada das informações no site, levando-se em conta a disposição de elementos, os nomes das seções, itens de menu, enfim, tudo o que leve a navegação ao estágio de satisfação, eficiência e efetividade.

Segue abaixo o fio condutor utilizado por nós para o projeto da SAPE:

  1. Levantamento de conteúdo
    • Inventário de texto, imagem, multimídia, etc.
    • Apontamento de necessidades de material
    • Identificar se há a necessidade de geração de conteúdo.
  2. Pesquisa de Usabilidade – Em cima do conceito de criação, a equipe de Arquitetos ou Designers com esse Expertise, adotam 1 ou mais metódos de pesquisa com o usuário. Usabilidade é o principal fundamento para tornar amigável e intuitiva a relação entre o usuário e o site. Portanto, pergunte-se sempre: “O que motiva meus usuários a retornarem ao meu site?” Leia mais sobre usabilidade.
    • Card Sorting - Método usado para descobrir como os usuários agrupam as informações de acordo com seu modelo mental. Este foi o método utilizado por nós. Na ocasião convidamos 9 pessoas para colaborar com a pesquisa.
    • Eye TrackingTécnica utilizada com equipamento tecnológico para identificar as áreas de maior interesse do usuário no seu site. Faz-se o registro do movimento dos olhos da pessoa afim de captar as áreas de maior repouso ou rejeição, entre outros dados. Basicamente, coleta-se dados de comportamento do usuário e sua relação com a navegação. Neste momento, o site já deve ter alcançado um nível de prototipagem adequado. Falaremos disso no próximo ponto.
    • SurveysPesquisas que são realizadas com o público-alvo para coletar dados relevantes para o projeto, até mesmo novas ideias.
    • Pesquisa de SimilaresUma análise sistemática sobre a forma como os concorrentes se apresentam.
      Exemplo de Card SortingExemplo de Card Sorting – SAPE
  3. Wireframe – Em cima do resultado do trabalho de Usabilidade, os Arquitetos juntamente com os Designers e o Diretor de Arte, irão preparar os protótipos.
    • Protótipo de baixa fidelidade – Nada mais é do que um rascunho de interface simplificada, onde o Designer pode verificar de forma rápida o que funciona ou não com os possíveis usuários do site.
    • Protótipo de alta fidelidade – Após a aprovação do protótipo de baixa fidelidade, é desenvolvido o protótipo de alta fidelidade cujo seu desenvolvimento apresenta navegação e interface simulando situações reais de uso; contendo somente as funcionalidades necessárias para os testes, como o Eye Tracking.

Exemplo de Wireframe

Protótipo de baixa fidelidade – SAPE

Planejamento de Mídia

Nesta fase a equipe de planejamento trabalha em cima das mídias online e offline viáveis e estratégicas para a veiculação. Para a SAPE, nós basicamente trabalhamos com a possibilidade de atuação nas redes sociais. Primeiramente fizemos um mapeamento de canais sociais, um planejamento editorial, a concepção estratégica de ações; entre outras tarefas relacionadas.

Paleta de cores

Paralelamente ao trabalho de Arquitetura de Informação, o Diretor de Arte deve definir a paleta de cores. No caso da SAPE, seu presidente não queria alterações drásticas na forma de apresentar sua marca, portanto as cores deveriam ser preservadas. Então tratamos de nos restringir a uma escala harmônica de cores, baseada em sua cor principal.

Paleta de cores

Tipografia

Os mesmos processos realizados na escolha da paleta de cores se aplicam à escolha da família de tipo. Há alguns padrões relacionados a este ponto, entre eles, não utilizar muitas famílias. Para a SAPE nós tínhamos total liberdade de escolha, desde que naturalmente estivesse associada ao conceito visual. É importante ressaltar, para aqueles que não conhecem, que agora é possível trabalhar com “embed” de fontes. Aumentando assim o leque de possibilidades tipográficas na web.

Identidade Visual

Nesta fase o Diretor de Arte aplica em cima dos protótipos de alta fidelidade, todos os conceitos visuais do projeto. Agrupamento, semelhança, continuidade e pregnância são algumas das Leis da Gestalt e fizeram parte do processo de criação desse projeto; resultando em interfaces harmônicas e funcionais. A partir da definição da IDV, as telas são concebidas pelos Web Designers.

Layout - Sape

Proposta de layout da Home do portal da SAPE

Desenvolvimento

Após a aprovação dos layouts, é preciso levar vida para os mesmos. Bem-vindos a etapa da implementação. Os Web Designers e Desenvolvedores deverão trabalhar juntos, e com ajuda dos Arquitetos de Informação para conferência de rotina e com o especialista em SEO para analisar a estrutura do código.

SEO (Otimização para os Mecanismos de Busca)

O site que criamos para a SAPE na verdade se tornou um portal, e como vimos no briefing do projeto, eles precisavam ser encontrados através de pesquisas por informações sobre a AIDS, nos mecanismos de busca. Então precisamos definir e aplicar técnicas que favorecessem a indexação nesses mecanismos, quando solicitados por informações sobre a doença. Veja aqui um ótimo artigo sobre SEO.

Teste e Homologação

Após todas as fases de planejamento, pesquisa, criação e implementação é chegada a fase de testes. Não podemos entregar um produto sem que o mesmo passe por uma inspeção de qualidade. E no nosso caso falamos de como o portal se comportaria nos browsers mais usados do mercado, e principalmente por nosso público-alvo: IE7, IE8, Firefox e Chrome. Algo que também deve ser realizado é o teste de validação de HTML e de CSS. Ambos podem ser realizados respectivamente nos links: http://validator.w3.org e http://jigsaw.w3.org/css-validator.

Ressalto aqui a importância desta etapa, que é basicamente um conjunto de práticas que favorecem o alto nível e qualidade de um projeto. Segundo o PMBOK, citado acima, Qualidade é uma das 12 áreas de conhecimento da gerência de projetos, portanto, atenção neste item.

E por fim a homologação. A fase onde o seu cliente faz a aprovação final do projeto ou produto. No nosso caso essa etapa basicamente não existiu, já que se tratou de um projeto acadêmico.

Bom, espero ter colaborado um pouco com essa experiência vivida por 3 Designers. Em breve farei uma publicação com ferramentas ideais para a concepção de cada etapa aqui descrita.

Um abraço a todos.

Comments (7)

  1. Tive a oportunidade de conhecer o Victor no Infnet e, pela seriedade e compromisso demonstrados, logo percebi que as aulas da Pós-Graduação seriam mais “ricas” com a sua presença.
    A comprovação disso veio com os relatos do Victor e com os trabalhos por ele realizados. Um excelente exemplo disso é o seu trabalho de conclusão de curso, compartilhado com mais dois amigos. Excelente “case”, organização, excelentes estratégias e excelente implementação.
    Parabéns e Sucesso!

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>