METODOLOGIA PROJETUAL EM COMUNICAO

DIGITAL
por Regis Alvim Junot

Introduo
Nos processos de planejamento, criao e produo de sites e aplicativos para
diversas plataformas digitais (Web, Mobile, TV interativa etc.) necessrio adotar uma
metodologia. Dentre inmeras metodologias pesquisadas, tomamos como referncia o
"Projeto E", uma metodologia proposta por Meurer & Szabluk (2009), baseada em um
modelo sugerido por Garrett (2003), que tem aplicao prtica no desenvolvimento de
projetos de mdias interativas e composta por seis etapas projetuais.

Etapas Projetuais
Inicia-se com a
desenvolve-se a

elabora-se o

define-se a

constri-se o

desenha-se a

Todas as etapas comeam com a letra E, da o nome "Projeto E". Segundo Meurer &
Szabluk (2009), estas etapas devem ser interpretadas como um procedimento padro,
um protocolo. Esta metodologia uma referncia para planejar, prever, julgar, decidir,
criar e produzir, orientando de forma sistmica a pesquisa, a investigao, a anlise, a
verificao, a escolha, a gerao de mltiplas alternativas, o desenho, a modelagem,
a produo e o desenvolvimento.

Resumo das Etapas

1. Estratgia - A partir de um Briefing, inicia-se o planejamento com um projeto
preliminar, onde se apresentam justificativas e objetivos. Em seguida, realiza-se a
contextualizao, considerando cenrios, situaes e fatores projetuais. Depois,
realiza-se a anlise de produtos concorrentes/similares e verificam-se possibilidades,
restries e requisitos.
2. Escopo - Nesta etapa ocorre o processo criativo, onde se elaboram assuntos, itens,
subitens e se definem quais sero os contedos, recursos, especificaes funcionais e
linguagens.
3. Estrutura - Nesta etapa se define como ser a arquitetura da informao e o
design de interao. Atravs de um organograma/fluxograma se estabelecem os
caminhos que o usurio percorrer para chegar ao contedo desejado e para onde
poder ir a partir da.
4. Esqueleto - uma etapa inicial de diagramao e composio, onde so
construdos os wireframes (esboos fiis das telas), prevendo como todos os
elementos de interface (painis, menus, botes, cones etc.) e contedos multimdia
(vdeos, animaes, fotos, grficos, textos etc.) sero dispostos nas telas.
5. Esttica - uma etapa avanada de arte, diagramao e composio, onde a
equipe de designers realiza o desenho de elementos de interfaces grficas em
softwares apropriados. Neste momento, o projeto comea a tomar uma forma real,
atravs de uma superfcie com identidade visual.

6. Execuo - a etapa final de produo, onde os elementos das interfaces grficas

e os contedos multimdia so encaminhados para a equipe de desenvolvedores, que
realiza a programao da pea interativa. Por fim, so realizados os testes de
funcionamento, navegao, usabilidade e acessibilidade.

Detalhamento das Etapas

1. Estratgia
1.1. Projeto Preliminar
Definio e delimitao do tema
Definio de termos - vocabulrio padronizado a ser utilizado por todos sempre
Nome ou ttulo do produto interativo e, se for o caso, endereo URL
Palavras-chaves, introduo e resumo
Justificativa

Antecedentes - projetuais (cases), profissionais e pessoais (experincias

vividas)

Motivaes - necessidades, desejos e paixes

Estado da Arte - o que h de melhor no contexto em que est inserido o

projeto?
Objetivos

Principal - relacionado aos objetivos do cliente (aumento de vendas e

lucros)

Secundrios - operacionais e atitudinais relacionados s aes do usurio

Acadmico - aprendizado, pesquisa, experimentao etc.

Processo criativo - descrio de etapas, processos, mtodos e tcnicas
Cronograma - Semestral, mensal, semanal e dirio
Recursos

Humanos - identificar habilidades e competncias dos profissionais

envolvidos

Materiais - durveis (ex. equipamentos) e consumveis (ex. papel e tinta)

Financeiros - aquisies, locaes, terceirizaes, alimentao, transporte

etc.
1.2. Contextualizao

Identificao dos usurios - qual(ais) pblico(s)-alvo(s) do cliente?

Cenrios
Cenrio atual - o que o cliente j realizou/realiza nas mdias digitais?
Cenrio pretendido - o que se pretende implementar nas mdias digitais?

Situaes

Situao inicial bem definida - briefing eficiente junto ao cliente

Situao final bem definida - aps o processo criativo, solues que fiquem
claras para todos

Questes projetuais

O que fazer?

Por que fazer?

Como fazer?

Para quem fazer?

Qual tecnologia utilizar?

Equalizao de fatores projetuais - por exemplo:

Antropolgicos, filosficos, psicolgicos - quem o ser humano que est do

outro lado da tela?

Ergonmicos e tecnolgicos - qual a intimidade do usurio com as

tecnologias digitais atuais?

Mercadolgicos e econmicos - como funciona o mercado na rea de

atuao do cliente?

Ecolgicos - quais as polticas de sustentabilidade do cliente relacionadas

aos produtos e servios que ele vende?

Definio da equipe e das respectivas atribuies

Gerente de projeto
Arquiteto de informao
Produtores de contedo

Designers
Desenvolvedores
1.3. Anlises de peas similares/concorrentes

Mercadolgica - como as empresas similares/concorrentes divulgam e

vendem seus produtos e servios nas mdias digitais? (ex.: e-commerce, sites
de compras coletivas, mercado livre, redes sociais, mobile apps, etc.)

Estatstica e investigativa - obter dados e interpret-los

Lingustica

Denotativa/conotativa - o que comunicado de forma objetiva e subjetiva?

Diacrnica/sincrnica - como as peas de comunicao do cliente

evoluiram atravs dos tempos e como esto nos tempos atuais?

Desenhstica - desconstruo das peas

Estrutural - organizao das informaes e malha diagramacional (

visualmente agradvel?)

Funcional - fluxos das tarefas e casos de uso ( fcil de usar?)

Ferramental - ferramentas com mesma funo em peas diferentes (

redundante?)

Identidade visual - iconografia, pictografia, tipografia, cromografia,

logografia e semntica
Heurstica

Heursticas de Nielsen - identificar problemas de usabilidade

1.4. Verificao - resultado das anlises que orientaro as aes e as atividades das
prximas etapas

Possibilidades - o que de fato possvel realizar?

Restries - identificadas as possibilidades, quais seriam as eventuais

restries/dificuldades?

Requisitos - o que necessrio para colocar o projeto em prtica?

2. Escopo
2.1. Criao do produto

Utilizao de ferramentas criativas (ex. brainstorm)

2.2. Definio da(s) pea(s)

O que ser? (portal, site, hotsite, blog, fanpage, aplicativo, jogo online,
etc.)

O que conter? (assuntos, itens, subitens, contedos, etc.)

Como funcionar? (recursos e funcionalidades oferecidas)

2.3. Definio de linguagens

Comunicacional - formal ou informal, conservadora ou liberal, etc.?

Visual - retr, clssico, contemporneo, futurista, etc.?

Mercadolgica - linguagem textual e visual focada em vendas,

promoes, liquidaes, etc.?
3. Estrutura
3.1. Arquitetura da informao

Organizao da hierarquia de assuntos, itens, subitens, contedos, etc.

3.2. Design de interao e navegao - organograma/fluxograma

Fluxo das tarefas - caminhos a serem percorridos pelo usurio

Fluxograma de baixa fidelidade - rascunho com lpis e papel

Fluxograma de alta fidelidade - desenhado em software grfico

3.2. Storyboard (opcional)

Esboos das telas - rascunhos sem diagramao ou ilustraes bem

acabadas

Descries textuais - contedos, interaes e eventos de tela

4. Esqueleto
4.1. Wireframes

Esboos das telas - com diagramao

Arquitetural - organizao lgico-informacional das telas favorecendo o

raciocnio do usurio

Estrutural - organizao dos elementos nas telas tornando o ambiente

visualmente agradvel
5. Esttica
5.1. Produo de elementos de arte e identidade visual

Iconografia

Pictografia

Tipografia

Cromografia

Logografia
5.2. Estudo e definio das malhas

Utilizao de grades (grids), guias (guides) e rguas (rulers)

5.3. Diagramao e composio

Colocao dos elementos nas telas

6. Execuo
6.1. Simulao

Modelo navegvel no funcional

Pode utilizar elementos de arte com ou sem identidade visual

Pode utilizar contedos provisrios

Programao (nvel bsico a intermedirio) ou autorao

Meramente demonstrativa
6.2. Prottipo

Modelo navegvel funcional

No requer qualquer elemento de arte visual

Pode utilizar contedos provisrios

Programao (nvel avanado)

Simulao da navegao

Testes iniciais de usabilidade e acessibilidade

Avaliao heurstica por especialistas

6.3. Pea final

Implementao real do projeto

Ajustes finais de programao (nvel avanado)

Testes finais de usabilidade e acessibilidade

Manutenes

Atualizaes

Equipe e Atribuies
Ao iniciar um projeto, importante que estejam definidas as atribuies de cada
membro da equipe.
Gerente de Projeto - Participa ativamente das etapas Estratgia e Escopo,
realizando pesquisas, anlises, verificaes e definio de aes. Gerencia as outras
etapas, organizando a equipe e as reunies, validando processos, definindo prazos e
carga horria, identificando e obtendo recursos humanos e financeiros. Realiza a
documentao de todas as etapas.
Arquiteto da Informao - Participa ativamente das etapas Estratgia, Escopo,

Estrutura e Esqueleto, realizando pesquisas, anlises, verificaes, arquitetura da

informao, design de interao, interface e de navegao. Colabora na etapa Esttica
prestando consultoria nos ajustes.
Produtores de Contedo - A partir da etapa Escopo at o fim do projeto, atuam
paralelamente produzindo contedos multimdia como udios, vdeos, animaes,
fotos, ilustraes, grficos, textos e outros.
Designers - Participam ativamente das etapas Esqueleto e Esttica, realizando design
de interface, navegao e comunicao. So responsveis pela arte e pela identidade
visual do projeto.
Desenvolvedores - Colaboram nas etapas Esqueleto e Esttica prestando consultoria
de programao e software. Na etapa Execuo, so responsveis por montar e testar
simulaes, prottipos e produto final.
A tabela a seguir apresenta um referencial de funes e cronograma de atividades de
cada funo.

Arquitetura da Informao (exemplo)

Menu
Contedo do Menu

Item 1
Contedo do item 1

Sub-item 1.a
Contedo do sub-item 1.a

Item 2
Contedo do Item 2

Sub-item 2.a
Contedo do sub-item 2.a

Sub-item 2.b
Contedo do sub-item 2.b

Sub-item 2.c
Contedo do sub-item 2.c

Item 3
Contedo do item 3

Sub-item 3.a
Contedo do sub-item 3.a

Sub-item 3.b
Contedo do sub-item 3.b

Organograma/Fluxograma (exemplo)

Wireframe para Web Site (exemplo)

Wireframes para aplicativo Mobile (exemplos)

Wireframe para aplicativo de TV interativa (exemplo)

10

Storyboard (exemplo)
Menu
Arte: Descrever detalhes sobre design como imagens
de fundo, cores, texturas, elementos grficos etc..
Animao: Descrever como os elementos aparecem
na tela, se as animaes acontecem automaticamente
ou aps interao do usurio.
udio: Descrever trilha sonora, rudos incidentais,
locues etc..
Texto: Descrever os textos que aparecero na tela.
Interatividade: Descrever menus, botes e como se
daro as interaes do usurio atravs de mouse,
teclado ou algum outro dispositivo.
Nota: Descrever as observaes necessrias.

Item 1
Arte: Descrever detalhes sobre design como imagens
de fundo, cores, texturas, elementos grficos etc..
Animao: Descrever como os elementos aparecem
na tela, se as animaes acontecem automaticamente
ou aps interao do usurio.
udio: Descrever trilha sonora, rudos incidentais,
locues etc..
Texto: Descrever os textos que aparecero na tela.
Interatividade: Descrever menus, botes e como se
daro as interaes do usurio atravs de mouse,
teclado ou algum outro dispositivo.
Nota: Descrever as observaes necessrias.

Item 2
Arte: Descrever detalhes sobre design como imagens
de fundo, cores, texturas, elementos grficos etc..
Animao: Descrever como os elementos aparecem
na tela, se as animaes acontecem automaticamente
ou aps interao do usurio.
udio: Descrever trilha sonora, rudos incidentais,
locues etc..
Vdeo: Descrever insero de arquivos de vdeo
digital.
Texto: Descrever os textos que aparecero na tela.
Interatividade: Descrever menus, botes e como se
daro as interaes do usurio atravs de mouse,
teclado ou algum outro dispositivo.
Nota: Descrever as observaes necessrias.

O Storyboard fornece uma noo aproximada do contedo e da forma de

apresentao de um produto interativo, seja este um web site, um game, um DVD, um
aplicativo para celular, tablet, TV interativa etc.. Contem esboos de telas em forma
de rascunho e descries textuais de contedos, efeitos visuais, transies entre telas,
animaes, letterings, textos para locuo, trilhas e efeitos sonoros.
Entradas e sadas de elementos na tela, fades de imagens e sons e outros detalhes
podem ser especificados no Storyboard, mas o detalhamento excessivo pode torn-lo
confuso e dificultar o trabalho dos profissionais envolvidos.

11

Referncias
FERRET, Joana. Design Uniritter. Disponvel em <http://www.joanaferret.com>.
GARRETT, Jesse James. The elements of user experience: user-centered design for the
web. New York: News Riders, 2003.
MEURER, Heli; SZABLUK, Daniela. Projeto E: Metodologia Projetual para Ambientes
Digito-Virtuais. Disponvel em
<http://www.helimeurer.kinghost.net/projetoE_2/inicial.html>.

12