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