Metodologia de Garret

(1)

METODOLOGIA PROJETUAL EM COMUNICAÇÃO

DIGITAL

por Regis Alvim Junot

Introdução

Nos

Nos prproceocessossos s de de plaplanejnejamamentento, o, crcriaçiação ão e e prproduoduçãção o de de sitsites es e e aplaplicaicativtivos os parparaa diversas plataform

diversas plataformas digitais as digitais (W(Web, Mobile, eb, Mobile, T interativa etc!" # T interativa etc!" # necess$rnecess$rio io adotar umaadotar uma metodologia! %entre in&meras metodologias pes'uisadas, tomamos como

metodologia! %entre in&meras metodologias pes'uisadas, tomamos como referreferncia oncia o )*rojeto +), uma metodologia proposta por Meurer  -.ablu/ (0112", baseada em um )*rojeto +), uma metodologia proposta por Meurer  -.ablu/ (0112", baseada em um modelo sugerido por

modelo sugerido por 3arr3arrett (0114", 'ue ett (0114", 'ue tem aplicação pr$tica no tem aplicação pr$tica no desenvolvimendesenvolvimento deto de projetos de m5dias interativas e #

projetos de m5dias interativas e # composta por seis etapas projetuais!composta por seis etapas projetuais!

Etapas Projetuas

T

Todas odas as as etapas etapas começam com começam com a a letra letra +, +, da5 da5 o o nome nome )*r)*rojeto ojeto +)! +)! -egundo -egundo MeurMeurer er  -.ablu/ (0112", estas etapas devem ser i

-.ablu/ (0112", estas etapas devem ser interprnterpretadas como um etadas como um procedimeprocedimento padrão,nto padrão, um protocolo! +sta metodologia

um protocolo! +sta metodologia # uma # uma referreferncia para planejar, prever, julgar, decidir,ncia para planejar, prever, julgar, decidir, criar e produ.ir, orientando de forma sistmica a pes'uisa, a investigação, a an$lise, a criar e produ.ir, orientando de forma sistmica a pes'uisa, a investigação, a an$lise, a veri6cação, a escol7a, a geração de m&ltiplas alternativas, o desen7o, a modelagem, veri6cação, a escol7a, a geração de m&ltiplas alternativas, o desen7o, a modelagem, a produção e o

a produção e o desenvolvimentdesenvolvimento!o!

Resu!o das Etapas

"# Estrat$%a

"# Estrat$%a 8 A partir de um 9rie6ng, inicia8se o planejamento com um projeto 8 A partir de um 9rie6ng, inicia8se o planejamento com um projeto preliminar, onde se apresentam justi6cativas e objetivos! +m seguida, reali.a8se a preliminar, onde se apresentam justi6cativas e objetivos! +m seguida, reali.a8se a con

contete:tu:tualiali.aç.ação, ão, conconsidsidererandando o cencen$r$riosios, , sitsituauaç;eç;es s e e fafatortores es prprojeojetuatuais! is! %ep%epoisois,, reali.a8se a an$lise de produtos concorrentes<similares e veri6cam8se possibilidades, reali.a8se a an$lise de produtos concorrentes<similares e veri6cam8se possibilidades, restriç;es e re'uisitos!

restriç;es e re'uisitos!

&# Es'opo

&# Es'opo 8 8 Nesta etapa ocorrNesta etapa ocorre o e o processprocesso criativo, onde o criativo, onde se elaboram assuntos, itens,se elaboram assuntos, itens, subitens e se de6nem 'uais serão os conte&dos, recursos, especi6caç;es funcionais e subitens e se de6nem 'uais serão os conte&dos, recursos, especi6caç;es funcionais e linguagens!

linguagens!

(# Estrutura

(# Estrutura 8 8 NeNesta etasta etapa se pa se de6de6ne como ne como serser$ $ a a arar'ui'uitettetura da ura da infinforormaçmação ão e e oo desig

design n de de inteinteraçãração! o! AtrAtrav#av#s s de de um um orgaorganogranograma<ma<=u:=u:ograograma ma se se estaestabelebelecem cem osos camin7os 'ue o usu$rio percorrer$ para c7egar ao conte&do desejado e para onde camin7os 'ue o usu$rio percorrer$ para c7egar ao conte&do desejado e para onde poder$ ir a partir da5!

poder$ ir a partir da5!

)#

)# Es*Es*ue+ue+etoeto 8 8 > > umuma a etetapapa a ininiciciaial l de de didiagagraramamaçãção o e e cocompmpososiçiçãoão, , ononde de sãsãoo co

consnstrtru5u5dodos s os os ?i?irrefefraramemes s (e(esbsboçoços os 6#6#is is dadas s tetelalas"s", , prprevevenendo do cocomo mo totododos s osos elementos de interface (pain#is, menus, bot;es, 5cones etc!" e conte&dos multim5dia elementos de interface (pain#is, menus, bot;es, 5cones etc!" e conte&dos multim5dia (v5deos, animaç;es, fotos, gr$6cos, te:tos etc!" serão dispostos nas telas!

(v5deos, animaç;es, fotos, gr$6cos, te:tos etc!" serão dispostos nas telas!

,# Est$t'a

,# Est$t'a 8 8 > > uma etapuma etapa a avavançançadada a de de ararte, diagrte, diagramamaçãação o e e comcomposposiçãição, o, ondonde e aa e'

e'uiuipe pe de de desdesigigneners rs rreaeali.li.a a o o dedesesen7n7o o de de elelememenentotos s de de ininteterfrfacaces es grgr$6$6cacas s emem soft?ares apropriados! Neste momento, o projeto começa a tomar uma forma real, soft?ares apropriados! Neste momento, o projeto começa a tomar uma forma real, atrav#s de uma superf5cie com identidade visual!

atrav#s de uma superf5cie com identidade visual!

@nicia8se

@nicia8se com com a a elabora8se elabora8se o o de6ne8se de6ne8se a a constri8sconstri8se e o o desen7a8se desen7a8se aa 88

(2)

-# E.e'ução 8 > a etapa 6nal de produção, onde os elementos das interfaces gr$6cas e os conte&dos multim5dia são encamin7ados para a e'uipe de desenvolvedores, 'ue reali.a a programação da peça interativa! *or 6m, são reali.ados os testes de funcionamento, navegação, usabilidade e acessibilidade!

(3)

Deta+/a!ento das Etapas

"# Estrat$%a

B!B! *rojeto *reliminar

 %e6nição e delimitação do tema

 %e6nição de termos 8 vocabul$rio padroni.ado a ser utili.ado por todos sempre  Nome ou t5tulo do produto interativo e, se for o caso, endereço CRD

 *alavras8c7aves, introdução e resumo  Justi6cativa

• Antecedentes 8 projetuais (cases", pro6ssionais e pessoais (e:perincias

vividas"

• Motivaç;es 8 necessidades, desejos e pai:;es

• +stado da Arte 8 o 'ue 7$ de mel7or no conte:to em 'ue est$ inserido o

projetoE  Fbjetivos

• *rincipal 8 relacionado aos objetivos do cliente (aumento de vendas e

lucros"

• -ecund$rios 8 operacionais e atitudinais relacionados Gs aç;es do usu$rio • Acadmico 8 aprendi.ado, pes'uisa, e:perimentação etc!

 *rocesso criativo 8 descrição de etapas, processos, m#todos e t#cnicas  Hronograma 8 -emestral, mensal, semanal e di$rio

 Recursos

• Iumanos 8 identi6car 7abilidades e competncias dos pro6ssionais

envolvidos

• Materiais 8 dur$veis (e:! e'uipamentos" e consum5veis (e:! papel e tinta" • inanceiros 8 a'uisiç;es, locaç;es, terceiri.aç;es, alimentação, transporte

etc!

B!0! Honte:tuali.ação

 @denti6cação dos usu$rios 8 'ual(ais" p&blico(s"8alvo(s" do clienteE  Hen$rios

• Hen$rio atual 8 o 'ue o cliente j$ reali.ou<reali.a nas m5dias digitaisE • Hen$rio pretendido 8 o 'ue se pretende implementar nas m5dias digitaisE

 -ituaç;es

• -ituação inicial bem de6nida 8 brie6ng e6ciente junto ao cliente

• -ituação 6nal bem de6nida 8 aps o processo criativo, soluç;es 'ue 6'uem

claras para todos

 Kuest;es projetuais

• F 'ue fa.erE • *or 'ue fa.erE • Homo fa.erE • *ara 'uem fa.erE

• Kual tecnologia utili.arE

 +'uali.ação de fatores projetuais 8 por e:emploL

• Antropolgicos, 6los6cos, psicolgicos 8 'uem # o ser 7umano 'ue est$ do

outro lado da telaE

• +rgonmicos e tecnolgicos 8 'ual a intimidade do usu$rio com as

tecnologias digitais atuaisE

• Mercadolgicos e econmicos 8 como funciona o mercado na $rea de

atuação do clienteE

• +colgicos 8 'uais as pol5ticas de sustentabilidade do cliente relacionadas

aos produtos e serviços 'ue ele vendeE

 %e6nição da e'uipe e das respectivas atribuiç;es

• 3erente de projeto

• Ar'uiteto de informação • *rodutores de conte&do

(4)

• %esigners

• %esenvolvedores

B!4! An$lises de peças similares<concorrentes

 Mercadolgica 8 como as empresas similares<concorrentes divulgam e vendem seus produtos e serviços nas m5dias digitaisE (e:!L e8commerce, sites de compras coletivas, mercado livre, redes sociais, mobile apps, etc!"

 +stat5stica e investigativa 8 obter dados e interpret$8los  Dingu5stica

• %enotativa<conotativa 8 o 'ue # comunicado de forma objetiva e subjetivaE • %iacrnica<sincrnica 8 como as peças de comunicação do cliente

evoluiram atrav#s dos tempos e como estão nos tempos atuaisE  %esen75stica 8 desconstrução das peças

• +strutural 8 organi.ação das informaç;es e mal7a diagramacional (#

visualmente agrad$velE"

• uncional 8 =u:os das tarefas e casos de uso (# f$cil de usarE"

• erramental 8 ferramentas com mesma função em peças diferentes (#

redundanteE"

• @dentidade visual 8 iconogra6a, pictogra6a, tipogra6a, cromogra6a,

logogra6a e semntica Ieur5stica

• Ieur5sticas de Nielsen 8 identi6car problemas de usabilidade

B!O! eri6cação 8 resultado das an$lises 'ue orientarão as aç;es e as atividades das pr:imas etapas

 *ossibilidades 8 o 'ue de fato # poss5vel reali.arE

 Restriç;es 8 identi6cadas as possibilidades, 'uais seriam as eventuais restriç;es<di6culdadesE

 Re'uisitos 8 o 'ue # necess$rio para colocar o projeto em pr$ticaE

&# Es'opo

0!B! Hriação do produto

 Ctili.ação de ferramentas criativas (e:! brainstorm" 0!0! %e6nição da(s" peça(s"

 F 'ue ser$E (portal, site, 7otsite, blog, fanpage, aplicativo, jogo online, etc!"

 F 'ue conter$E (assuntos, itens, subitens, conte&dos, etc!"  Homo funcionar$E (recursos e funcionalidades oferecidas" 0!4! %e6nição de linguagens

 Homunicacional 8 formal ou informal, conservadora ou liberal, etc!E  isual 8 retr, cl$ssico, contemporneo, futurista, etc!E

 Mercadolgica 8 linguagem te:tual e visual focada em vendas, promoç;es, li'uidaç;es, etc!E

(# Estrutura

4!B! Ar'uitetura da informação

 Frgani.ação da 7ierar'uia de assuntos, itens, subitens, conte&dos, etc! 4!0! %esign de interação e navegação 8 organograma<=u:ograma

 lu:o das tarefas 8 camin7os a serem percorridos pelo usu$rio

• lu:ograma de bai:a 6delidade 8 rascun7o com l$pis e papel • lu:ograma de alta 6delidade 8 desen7ado em soft?are gr$6co

4!0! -torPboard (opcional"

 +sboços das telas 8 rascun7os sem diagramação ou ilustraç;es bem acabadas

(5)

)# Es*ue+eto

O!B! Wireframes

 +sboços das telas 8 com diagramação

 Ar'uitetural 8 organi.ação lgico8informacional das telas favorecendo o racioc5nio do usu$rio

 +strutural 8 organi.ação dos elementos nas telas tornando o ambiente visualmente agrad$vel

,# Est$t'a

Q!B! *rodução de elementos de arte e identidade visual  @conogra6a

 *ictogra6a  Tipogra6a  Hromogra6a  Dogogra6a

Q!0! +studo e de6nição das mal7as

 Ctili.ação de grades (grids", guias (guides" e r#guas (rulers" Q!4! %iagramação e composição

 Holocação dos elementos nas telas

-# E.e'ução

!B! -imulação

 Modelo naveg$vel não funcional

 *ode utili.ar elementos de arte com ou sem identidade visual  *ode utili.ar conte&dos provisrios

 *rogramação (n5vel b$sico a intermedi$rio" ou autoração  Meramente demonstrativa

!0! *rottipo

 Modelo naveg$vel funcional

 Não re'uer 'ual'uer elemento de arte visual  *ode utili.ar conte&dos provisrios

 *rogramação (n5vel avançado"  -imulação da navegação

 Testes iniciais de usabilidade e acessibilidade  Avaliação 7eur5stica por especialistas

!4! *eça 6nal

 @mplementação real do projeto

 Ajustes 6nais de programação (n5vel avançado"  Testes 6nais de usabilidade e acessibilidade  Manutenç;es

 Atuali.aç;es

E*upe e Atr0uç1es

Ao iniciar um projeto, # importante 'ue estejam de6nidas as atribuiç;es de cada membro da e'uipe!

Gerente de Projeto 8 *articipa ativamente das etapas +strat#gia e +scopo, reali.ando pes'uisas, an$lises, veri6caç;es e de6nição de aç;es! 3erencia as outras etapas, organi.ando a e'uipe e as reuni;es, validando processos, de6nindo pra.os e carga 7or$ria, identi6cando e obtendo recursos 7umanos e 6nanceiros! Reali.a a documentação de todas as etapas!

(6)

+strutura e +s'ueleto, reali.ando pes'uisas, an$lises, veri6caç;es, ar'uitetura da informação, design de interação, interface e de navegação! Holabora na etapa +st#tica prestando consultoria nos ajustes!

Produtores de Conte3do 8 A partir da etapa +scopo at# o 6m do projeto, atuam paralelamente produ.indo conte&dos multim5dia como $udios, v5deos, animaç;es, fotos, ilustraç;es, gr$6cos, te:tos e outros!

Des%ners 8 *articipam ativamente das etapas +s'ueleto e +st#tica, reali.ando design de interface, navegação e comunicação! -ão respons$veis pela arte e pela identidade visual do projeto!

Desen4o+4edores 8 Holaboram nas etapas +s'ueleto e +st#tica prestando consultoria de programação e soft?are! Na etapa +:ecução, são respons$veis por montar e testar simulaç;es, prottipos e produto 6nal!

A tabela a seguir apresenta um referencial de funç;es e cronograma de atividades de cada função!

(7)

(8)

Ar*utetura da In2or!ação 5e.e!p+o6

 Menu Honte&do do Menu  Ite! " Honte&do do item B • 7u08te! "#a

Honte&do do sub8item B!a  Ite! &

Honte&do do @tem 0

• 7u08te! &#a

Honte&do do sub8item 0!a

• 7u08te! &#0 Honte&do do sub8item 0!b • 7u08te! &#' Honte&do do sub8item 0!c  Ite! ( Honte&do do item 4 • 7u08te! (#a

Honte&do do sub8item 4!a

• 7u08te! (#0

Honte&do do sub8item 4!b

(9)

(10)

;re2ra!es para ap+'at4o Mo0+e 5e.e!p+os6

(11)

7tor=0oard 5e.e!p+o6

Menu

ArteL %escrever detal7es sobre design como imagens de fundo, cores, te:turas, elementos gr$6cos etc!! An!ação> %escrever como os elementos aparecem na tela, se as animaç;es acontecem automaticamente ou aps interação do usu$rio!

?udo> %escrever tril7a sonora, ru5dos incidentais, locuç;es etc!!

Te.to> %escrever os te:tos 'ue aparecerão na tela! Interat4dadeL %escrever menus, bot;es e como se darão as interaç;es do usu$rio atrav#s de mouse, teclado ou algum outro dispositivo!

NotaL %escrever as observaç;es necess$rias!

Ite! "

NotaL %escrever as observaç;es necess$rias! Ite! &

<@deo> %escrever inserção de ar'uivos de v5deo digital!

NotaL %escrever as observaç;es necess$rias!

F -torPboard fornece uma noção apro:imada do conte&do e da forma de apresentação de um produto interativo, seja este um ?eb site, um game, um %%, um aplicativo para celular, tablet, T interativa etc!! Hontem esboços de telas em forma de rascun7o e descriç;es te:tuais de conte&dos, efeitos visuais, transiç;es entre telas, animaç;es, letterings, te:tos para locução, tril7as e efeitos sonoros!

+ntradas e sa5das de elementos na tela, fades de imagens e sons e outros detal7es

podem ser especi6cados no -torPboard, mas o detal7amento e:cessivo pode torn$8lo confuso e di6cultar o trabal7o dos pro6ssionais envolvidos!

(12)

Re2ern'as

+RR+T, Joana! %esign Cniritter! %ispon5vel em S7ttpL<<???!joanaferret!com!

3ARR+TT, Jesse James! T7e elements of user e:perienceL user8centered design for t7e ?eb! Ne? Uor/L Ne?s Riders, 0114!

M+CR+R, IeliV -A9DCX, %aniela! *rojeto +L Metodologia *rojetual para Ambientes %igito8irtuais! %ispon5vel em