METODOLOGIA PROJETUAL EM COMUNICAÇÃO DIGITAL
por Regis Alvim Junot
Introdução Nos proce processo ssoss de planej planejam ament ento, o, criaç criação ão e produ produçã ção o de sites sites e aplica aplicativ tivos os para para diversas plataformas plataformas digitais (Web, (Web, Mobile, T interativa etc!" # necess$rio necess$rio adotar uma metodologia! %entre in&meras metodologias pes'uisadas, tomamos como referncia referncia o )*rojeto +), uma metodologia proposta por Meurer -.ablu/ (0112", baseada em um modelo sugerido por 3arrett 3arrett (0114", 'ue tem aplicação pr$tica no desenvolvimento desenvolvimento de projetos de m5dias interativas e # composta por seis etapas projetuais!
Etapas Projetuas @nicia8se com a 8
elabora8se o
de6ne8se a
constri8se constri8se o
desen7a8se a
Todas Todas as etapas começam com a letra +, da5 o nome )*rojeto )*rojeto +)! -egundo Meurer Meurer -.ablu/ (0112", estas etapas devem ser interpr i nterpretadas etadas como um procedimento procedimento padrão, um protocolo! +sta metodologia # uma referncia referncia para planejar, prever, julgar, decidir, criar e produ.ir, orientando de forma sistmica a pes'uisa, a investigação, a an$lise, a veri6cação, a escol7a, a geração de m<iplas alternativas, o desen7o, a modelagem, a produção e o desenvolvimento! desenvolvimento!
Resu!o das Etapas "# Estrat$%a 8 A partir de um 9rie6ng, inicia8se o planejamento com um projeto preliminar, onde se apresentam justi6cativas e objetivos! +m seguida, reali.a8se a conte conte:tu :tuali ali.aç .ação, ão, consid consider erand ando o cen$r cen$rios ios,, situa situaç;e ç;ess e fator fatores es proje projetua tuais! is! %epois %epois,, reali.a8se a an$lise de produtos concorrentes uma uma etap etapa a inic inicia iall de diag diagra rama maçã ção o e comp compos osiç ição ão,, onde onde são são cons constr tru5 u5do doss os ?ir ?irefra eframe mess (esb (esboç oços os 6# 6#is is das das tela telas" s",, prev preven endo do como como todo todoss os 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! ,# Est$t'a 8 > uma etapa etapa avanç avançad ada a de arte, arte, diagram diagramaçã ação o e compos composiçã ição, o, onde onde a e'ui e'uipe pe de desig designe ners rs reali. eali.a a o dese desen7 n7o o de elem elemen ento toss de inte interf rfac aces es gr$6 gr$6ca cass em soft?ares apropriados! Neste momento, o projeto começa a tomar uma forma real, atrav#s de uma superf5cie com identidade visual! 1
-# 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!
2
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:perincias 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 Acadmico 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 competncias 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
•
• •
•
• •
•
• •
• •
• •
• • • • •
•
•
•
•
• • •
3
%esigners %esenvolvedores B!4! An$lises de peças similares
Dingu5stica %enotativa
• •
•
• •
•
•
&# 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, contemporneo, futurista, etc!E Mercadolgica 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 %escriç;es te:tuais 8 conte&dos, interaç;es e eventos de tela
• •
4
)# Es*ue+eto O!B! Wireframes +sboços das telas 8 com diagramação Ar'uitetural 8 organi.ação lgico8informacional 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 provisrios *rogramação (n5vel b$sico a intermedi$rio" ou autoração Meramente demonstrativa !0! *rottipo Modelo naveg$vel funcional Não re'uer 'ual'uer elemento de arte visual *ode utili.ar conte&dos provisrios *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*upe e Atr0uç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! Ar*uteto da In2or!ação 8 *articipa ativamente das etapas +strat#gia, +scopo, 5
+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, prottipos e produto 6nal! A tabela a seguir apresenta um referencial de funç;es e cronograma de atividades de cada função!
6
7
Ar*utetura da In2or!ação 5e.e!p+o6
Menu Honte&do do Menu Ite! " Honte&do do item B 7u08te! "#a Honte&do do sub8item B!a Ite! & Honte&do do @tem 0 7u08te! &#a Honte&do do sub8item 0!a 7u08te! � Honte&do do sub8item 0!b 7u08te! &#' Honte&do do sub8item 0!c Ite! ( Honte&do do item 4 7u08te! (#a Honte&do do sub8item 4!a 7u08te! (#0 Honte&do do sub8item 4!b
•
•
•
•
•
•
Or%ano%ra!a9:+u.o%ra!a 5e.e!p+o6
8
;re2ra!e para ;e0 7te 5e.e!p+o6
9
;re2ra!es para ap+'at4o Mo0+e 5e.e!p+os6
;re2ra!e para ap+'at4o de T< nterat4a 5e.e!p+o6
10
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 aps interação do usu$rio! ?udo> %escrever tril7a sonora, ru5dos incidentais, locuç;es etc!! Te.to> %escrever os te:tos 'ue aparecerão na tela! Interat4dadeL %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! " 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 aps interação do usu$rio! ?udo> %escrever tril7a sonora, ru5dos incidentais, locuç;es etc!! Te.to> %escrever os te:tos 'ue aparecerão na tela! Interat4dadeL %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! & 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 aps interação do usu$rio! ?udo> %escrever tril7a sonora, ru5dos incidentais, locuç;es etc!! <@deo> %escrever inserção de ar'uivos de v5deo digital! Te.to> %escrever os te:tos 'ue aparecerão na tela! Interat4dadeL %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!
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!
11
Re2ern'as +RR+T, Joana! %esign Cniritter! %ispon5vel em S7ttpL<
12
