Roteirizao
METODOLOGIA PROJETUAL EM COMUNICAO DIGITALpor 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
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. Estratgia1.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
Desenvolvedores1.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 tela4.
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 agradvel5. 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
AtualizaesEquipe e AtribuiesAo 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)
MenuContedo do Menu Item 1 Contedo do item 1 Sub-item 1.aContedo
do sub-item 1.a Item 2
Contedo do Item 2 Sub-item 2.aContedo do sub-item 2.a Sub-item
2.bContedo do sub-item 2.b Sub-item 2.cContedo do sub-item 2.c Item
3
Contedo do item 3
Sub-item 3.aContedo do sub-item 3.a Sub-item 3.b
Contedo do sub-item 3.bOrganograma/Fluxograma (exemplo)
Wireframe para Web Site (exemplo)
Wireframes para aplicativo Mobile (exemplos)
Wireframe para aplicativo de TV interativa (exemplo)
Storyboard (exemplo)
MenuArte: 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 1Arte: 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 2Arte: 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. Referncias
FERRET, Joana. Design Uniritter. Disponvel em .
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 .
Inicia-se com a elabora-se o define-se a constri-se o desenha-se
a desenvolve-se a
PAGE 1
_1349688557.psd
_1387789433.psd
_1349688488.psd
_1349688378.psd