Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Criação Online - Euripedes Magalhães

1,652 views

Published on

Aula de Euripedes Magalhães no #integradigital - Diretor de arte com passagens pela Grey Interactive, Datamídia FCBi, Vollmer Design, submarino.com.br, GP7 Comunicação, A1.Brasil e atualmente Ideal Interactive.

Published in: Design
  • Be the first to comment

Criação Online - Euripedes Magalhães

  1. 1. CRIAÇÃO Euripedes Magalhães criação - @euripedesm 1
  2. 2. O QUE É CRIAR PARA A INTERNET Criar para a internet é desejar realizar, é desejar desenvolver algo que tem praticamente um alcance infinito. É a procura pelo novo, independente de onde quer que o projeto seja apresentado ou qual o target que ele procure, é um processo initerrupto. Acima de tudo é entender que cada detalhe pode fazer a diferença, e que as surpresas podem até ser bem-vindas. criação - @euripedesm 2
  3. 3. CRIAÇÃO ESTRATÉGICA criação - @euripedesm 3
  4. 4. CRIAÇÃO ESTRATÉGICA Criar estrategicamente é pensar como realizar o planejamento de forma global. É fazer com que todas as mídias utilizadas estejam relacionadas e integradas. É participar do processo junto com o planejamento, entender as necessidades e propor situações que complementem as possíveis ações para o cliente. criação - @euripedesm 4
  5. 5. CRIAÇÃO ESTRATÉGICA O profissional de criação deve entender que ele não faz mais parte do “grupo seleto” onde ele trabalha isoladamente trazendo a solução para um problema de comunicação. PRINCIPALMENTE NA INTERNET > INTERATIVIDADE Sem interação entre as equipes, não existe objetividade e nem interatividade no produto final. criação - @euripedesm 5
  6. 6. CRIAÇÃO ESTRATÉGICA É claro que o trabalho integrado não é novidade para ninguém, mas ele acontece na realidade? Pergunte se já aconteceu com você e qual a peridiocidade: > faça reuniões com a equipe toda antes do pensamento do planejamento ou da arquitetura de informação > uma solicitação da criação de agendamento com cliente para apresentação de proposta mostra pró-atividade > um planejamento ou arquitetura que venha da criação é um fator que fomenta a criatividade na agência criação - @euripedesm 6
  7. 7. COMO ENCARAR UM PLANEJAMENTO? Receber um projeto do planejamento para ser executado pode ser traumático caso a mente da criação esteja fechada. Conhecer como pensa a equipe, como a agência se posiciona é extremamente importante, e pode evitar muitas refações. > reúna-se com planejamento > solicite o tema antes da reunião e já procure referências > leia e releia, com calma > concorde, discorde, discuta, dê sugestões criação - @euripedesm 7
  8. 8. COMO ENCARAR UM PLANEJAMENTO? Algumas perguntas que deve-se fazer: Qual o objetivo do projeto? Qual o objetivo do cliente? Qual o SEU objetivo? Alguns projetos são executados, outros pensados, outros planejados, outros criados... O orgulho pode ser a força motriz da criatividade, e também a sua âncora. criação - @euripedesm 8
  9. 9. COMO ENCARAR UM PLANEJAMENTO? Como devemos pensar? > se o planejamento entende como o consumidor interage no mundo digital, a criação entende qual a linguagem que esse consumidor aprecia e absorve > se o planejamento traça a estratégia, a criação traça as metas e as maneiras com que o cliente deve se comunicar com seu consumidor > se o planejamento liga o consumidor a marca, a criação é essa linha de contato, a criação se utiliza das informações relevantes criadas e executa com a linguagem apropriada criação - @euripedesm 9
  10. 10. CRIAÇÃO A PARTIR DO BUDGET $$$ = IMPORTÂNCIA Mensure a importância do projeto a partir dos objetivos gerais, ela definirá em qual espaço a maior fatia financeira deve ser aplicada. criação - @euripedesm 10
  11. 11. CRIAÇÃO A PARTIR DO BUDGET $$$ IDEIAS: TECNOLÓGICA vs SINTÉTICA > quanto mais tecnologia mais tempo de trabalho > quanto mais tecnologia mais DINHEIRO aplicado > quanto mais profissionais mais DINHEIRO é necessário Por isso: = conhecer tecnologia = conhecer mercado = foco criação - @euripedesm 11
  12. 12. CRIAÇÃO A PARTIR DO BUDGET $$$ > uma ideia tecnológica pode ser sintética, mas não necessariamente uma ideia sintética precisa de tecnologia de ponta Sound of Streets Pjotro Pinóquio Poliflor criação - @euripedesm 12
  13. 13. CRIAÇÃO A PARTIR DO BUDGET $$$ > html é mais rápido e barato que flash > flash é mais rápido e barato que html Para jogos, interações com movimento e animações complexas use flash. Para formulários, conteúdos extensos, use html. Com o advento do html 5, será possível diminuir o uso do flash para animações e outras funcionalidades, estuda-se até mesmo um player de Youtube que não utiliza flash. criação - @euripedesm 13
  14. 14. PRAZOS E OBJETIVIDADE > conhecendo tecnologias você entende o tempo de execução de cada projeto Converse com os profissionais envolvidos antes de começar a criação, com a definição antecipada da tecnologia que será utilizada, muitos dos problemas podem ser resolvidos. A credibilidade da empresa pode nascer de vários fatores: > criatividade > prazo > inovação > objetividade COMPETÊNCIA criação - @euripedesm 14
  15. 15. TARGET/PÚBLICO/CLIENTE/OBJETIVO > o seu cliente é seu target muitas vezes > o tempo de permanência no ar do seu projeto define quanto tempo você deve se dedicar a ele > hotsites são mais importantes do que fan pages? criação - @euripedesm 15
  16. 16. TARGET/PÚBLICO/CLIENTE/OBJETIVO > uma rápida ação pode ser tão importante quando uma ideia desenvolvida com muitos detalhes > defenda seu projeto > defenda sua saúde > nem sempre o melhor para a marca é o que o cliente considera melhor (na maioria das vezes é isso) criação - @euripedesm 16
  17. 17. METODOLOGIA CRIATIVA criação - @euripedesm 17
  18. 18. COMO SER CRIATIVO > veja muitas referências > conheça o que o mercado está fazendo > seja entusiasta > pratique alguma atividade relacionada artes ou diversão (música, leitura, dança, teatro, cinema) “O norte do designer é a cultura” Claudio Ferlauto criação - @euripedesm 18
  19. 19. O PROCESSO CRIATIVO - METODOLOGIA Bruno Munari diz que o processo criativo é como uma receita de arroz. > moer cebola, alho e presunto > levar ao fogo com azeite deixando dourar > picar espinafre bem fino e cozinhar em bastante água > juntar o espinafre ao presunto, o alho e a cebola > separar um pouco do caldo e temperar com sal e pimenta > deixar ferver > juntar o arroz, acrescentando lentamente o caldo separado inicialmente > retirar do fogo quando o arroz estiver no ponto criação - @euripedesm 19
  20. 20. O PROCESSO CRIATIVO - METODOLOGIA Cozinhar também requer um conjunto de ações ordenadas, para que se alcance o melhor resultado com o menor esforço e disperdício, tal como na comunicação. Ações como não colocar o arroz na panela antes da água, ou tentar dourar o presunto e a cebola depois de cozinhar o arroz podem atrapalhar o resultado. Procurar logo a solução sem pensar no método certamente trará resultados desastrosos. criação - @euripedesm 20
  21. 21. METODOLOGIA Projetar não trava a criatividade, pelo contrário, a estimula, pois dá subsídios e informações para que se possa fazer uma maior interligação de fatos e possibilidades. O método e o processo não precisa ser FECHADO E IMUTÁVEL, mas pode se modificar de acordo com alguma necessidade ou caso algum novo valor possa melhorar o processo criativo. criação - @euripedesm 21
  22. 22. METODOLOGIA definição do problema > qual a funcionalidade do produto/serviço? > qual o objetivo final desse produto/serviço? > qual o objetivo final da agência? criação - @euripedesm 22
  23. 23. METODOLOGIA DF coleta e análise de dados > existe algo no mercado? > qual o público? > o que já foi feito? > o que obteve sucesso relacionado a isso? criação - @euripedesm 23
  24. 24. METODOLOGIA DF CD criatividade > painel semântico > relações visuais > relações musicais > conceitos de design criação - @euripedesm 24
  25. 25. COMO BUSCAR REFERÊNCIAS Livros, internet, amigos, pesquisas compradas, pontos de venda, qualquer experiência ajuda no processo. O painel semântico pode ser uma ótima ferramenta, pois cria um padrão visual que auxilia na percepção das relações entre os assuntos. > anote tudo > guarde tudo criação - @euripedesm 25
  26. 26. PAINEL SEMÂNTICO Semântica é o estudo do significado da linguagem. O painel semântico é um guia de referências rápido, ele pode ser formatado de diversas maneiras de acordo com a necessidade do projeto ou área de atuação. Ele pode conter: > somente imagens (referências visuais) > somente textos (conceitos e palavras-chave) > imagens e textos interrelacionados criação - @euripedesm 26
  27. 27. PAINEL SEMÂNTICO Exemplos: PAINEL DE QUALIDADES PAINEL ICONOGRÁFICO fonte: http://1001cordeis.blogspot.com/2008/09/painel-semntico.html fonte: http://1001cordeis.blogspot.com/2008/09/painel-semntico.html criação - @euripedesm 27
  28. 28. PAINEL SEMÂNTICO Exemplos: EXPRESSÃO DO PRODUTO REFERÊNCIAS VISUAIS ESTILO DE VIDA fonte: http://www.arthursoares.com fonte: http://www.arthursoares.com via http://www.arthursoares.com criação - @euripedesm 28
  29. 29. PAINEL SEMÂNTICO Exemplos: fonte: http://fernandasegolin.wordpress.com criação - @euripedesm 29
  30. 30. PAINEL SEMÂNTICO - MODELO PALAVRAS MÚSICA CORES TIPOGRAFIA IMAGENS CONCEITOS PÚBLICO NECESSIDADES criação - @euripedesm 30
  31. 31. “Criar é associar dados nunca antes associados” Claudio Ferlauto criação - @euripedesm 31
  32. 32. WIREFRAME O wireframe é um dos melhores amigos do criativo e muitas vezes é um dos piores inimigos. > reuna-se com o arquiteto antes que ele execute o projeto > conheça arquitetura de informação > crie wireframes para obter experiência criação - @euripedesm 32
  33. 33. WIREFRAME Facilite a sua vida: > wires tem que ser proporcionais > wire é um guia de conteúdo ou um guia de interface? > um ser humano pensante não é um ser humano executor > faça a análise de todo o conteúdo do documento > procure soluções complementares criação - @euripedesm 33
  34. 34. WIREFRAME Vivo co-piloto: > sistema de celular com GPS > conceito de navegação, espaço, mapas, facilidade criação - @euripedesm 34
  35. 35. WIREFRAME criação - @euripedesm 35
  36. 36. WIREFRAME criação - @euripedesm 36
  37. 37. WIREFRAME criação - @euripedesm 37
  38. 38. O TRABALHO DA CRIAÇÃO O que fazemos: > sites, hotsites, portais > arquitetura de informação > banners > planejamento > atendimento > tecnologia criação - @euripedesm 38
  39. 39. O TRABALHO DA CRIAÇÃO > informativo > impactante > interativo > design > arte > publicidade > processo > velocidade > rotatividade > acessibilidade > intuição > provocação > tecnologia > tecnologia > tecnologia criação - @euripedesm 39
  40. 40. INTERATIVIDADE O que é interatividade? criação - @euripedesm 40
  41. 41. INTERATIVIDADE Interatividade se relaciona com a forma com que o usuário se comunica e se comporta com a peça, site, rede ou sistema de comunicação. > a Oi fm se diz interativa > existem banners que são somente pequenas vitrines animadas > redes sociais batem recordes de interatividade criação - @euripedesm 41
  42. 42. INTERATIVIDADE Acima de tudo, interatividade é: Internet se trata de experiência. > a Apple vende experiência > a televisão vende experiência Experimentar é participar, é testar, é contestar e poder realizar uma ação da forma que lhe é conveniente. criação - @euripedesm 42
  43. 43. INTERATIVIDADE O que será essa experiência? > antes absorvíamos sistemas feitos por profissionais de ciência da computação (mainframes), onde o usuário tinha que se adequar ao sistema 80’s > GUI (Graphical User Interface) designers criando interfaces, design de interação centrado no usuário 90’s > popularização do uso dos computadores, internet, messenger’s redes sociais, etc criação - @euripedesm 43
  44. 44. INTERATIVIDADE pesquisa seo design mídia planejamento branding EXPERIÊNCIA usabilidade arquitetura de informação tecnologia criação - @euripedesm 44
  45. 45. INTERATIVIDADE O que nos ajuda nesse processo? > convergência de mídias > múltiplos suportes para a mesma informação > portabilidade/mobilidade > tecnologia de transmissão de dados avançada > e muito mais... criação - @euripedesm 45
  46. 46. INTERATIVIDADE Mídias interativas não se resumem a telas de computador, hoje em dia, estão nos pulsos, nos bolsos, nas paredes, nos elevadores, em muitos outros dispositivos. > pense em integrar mídias > pense na integração, mas não somente adaptando o material principal, crie com objetivos PENSE EM UMA EXPERIÊNCIA FLUIDA criação - @euripedesm 46
  47. 47. INTERATIVIDADE Pensar uma experiência fluida é pensar em como atingir o público de forma integrada. > sites > aplicativos para iphone/celulares > jogos > ações integradas entre o meio físico e web > ações que se utilizam das redes sociais criação - @euripedesm 47
  48. 48. CRIAÇÃO CASES criação - @euripedesm 48
  49. 49. PORQUE CAFÉ Vídeo explicativo da história do café, agregador de redes sociais, áreas para consumidor, distribuidor e produtor. > fomentar o consumo de café entre os brasileiros > tornar conhecido o fato da importância do café brasileiro criação - @euripedesm 49
  50. 50. PORQUE CAFÉ Processo: > jogos para fomentar a visitação ao site criação - @euripedesm 50
  51. 51. PORQUE CAFÉ Processo: > definição do uso das redes sociais > definição da linguagem a ser usada criação - @euripedesm 51
  52. 52. PORQUE CAFÉ Processo: > definição do traço de ilustração > locução e animação 60’s inspiration criação - @euripedesm 52
  53. 53. PORQUE CAFÉ Processo: > produção e animação em flash > hotsite funcionando com a tag #cafebr e #cofee criação - @euripedesm 53
  54. 54. PORQUE CAFÉ Divulgação: > Fóruns > Blogs parceiros > Sites de crowdsourcing > E-groups criação - @euripedesm 54
  55. 55. PORQUE CAFÉ - RESULTADOS > Em blogs, 49 posts divulgando o portal foram publicados, sendo 23 espontâneos > Comentários em 96 comunidades, impactando cerca de 300.000 membros > No Twitter, mais de 200 mensagens no portal de microblogging, mostrando o interesse dos usuários na rede > 80 mil acessos ao portal (3 meses de ação) criação - @euripedesm 55
  56. 56. PORQUE CAFÉ O site: http://www.porquecafe.com.br/ criação - @euripedesm 56
  57. 57. CASA FIESTA Hotsite de apresentação da marca e dos produtos que começariam a ser vendidos no Brasil. > fazer a apresentação dos produtos > fomentar comentários sobre os produtos criação - @euripedesm 57
  58. 58. CASA FIESTA Processo: > definição do uso das redes sociais > definição da linguagem a ser usada criação - @euripedesm 58
  59. 59. CASA FIESTA Divulgação: > Fóruns > Blogs parceiros > Sites de crowdsourcing > E-groups > Vídeos no Youtube > Flickr criação - @euripedesm 59
  60. 60. CASA FIESTA Divulgação: > Concurso Cultural Viva Casa Fiesta. Produtos enviados aos blogueiros parceiros > Conteúdo da promoção abordado em seus espaços próprios – como no blog Cozinha Travessa > Jantar patrocinado aos participantes da promoção criação - @euripedesm 60
  61. 61. CASA FIESTA - RESULTADOS > 14 blogs participaram da campanha, sendo estes responsáveis por um total de 130 comentários sobre a ação; > Mais de 900 fotos foram publicadas no Flickr. Dentre estas, 528 fotos foram publicadas por 7 usuários e 283 fotos pertencem ao Flickr oficial de Casa Fiesta; > 14 fóruns abrigaram diferentes discussões sobre Casa Fiesta, onde alguns desses contaram com mais de um tópico gerado > 7 e-groups foram ativados, dando mais destaque às receitas nos grupos relacionados à gastronomia e aproveitando o aplicativo “Mariachi Yourself” nos grupos de entretenimento e variedades criação - @euripedesm 61
  62. 62. CASA FIESTA - RESULTADOS > Na 5º semana, foi registrado um excelente número de visualizações em fóruns: foram mais de 210 exibições dos tópicos criados, com 14 respostas espontâneas > 4.900 acessos semanais (1/5 mês de ação) criação - @euripedesm 62
  63. 63. CASA FIESTA O Site: http://www.vivacasafiesta.com.br/ criação - @euripedesm 63
  64. 64. OBRIGADO! > twitter.com/euripedesm > www.euripedes.com.br > euripedes@integracursos.com.br criação - @euripedesm 64

×