Digitalks producao

896 visualizações

Publicada em

Aula sobre produção Web para o Curso Digitalks, engloba os assuntos:

- Definição de objetivos
- Como definir estratégias de produção
- Briefing
- Arquitetura da informação de web sites
- Identidade visual e layout
- Noções básicas de html
- Como construir o site em plataforma CMS (wordpress)
- Administração do site
- Conceitos para criação de peças publicitárias: Mídia Display

Agradecimentos especiais ao Instituto Faber Ludens e a Jair Alves.

0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
896
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
81
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Digitalks producao

  1. 1. EURIPEDES MAGALHÃES - @EURIPEDESMProdução
  2. 2. DEFININDO OBJETIVOSToda e qualquer campanha e projeto deve terresultados claros, sejam os objetivos de venda,objetivos de marca, objetivos da agência ou objetivostecnológicos.
  3. 3. DEFININDO OBJETIVOSAlgumas 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, etambém a sua âncora.
  4. 4. DEFININDO OBJETIVOSÉ claro que o trabalho integrado não é novidade paraninguém, mas ele acontece na realidade?Pergunte se já aconteceu com você e qual aperidiocidade:> 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
  5. 5. ESTRATÉGIAS DE PRODUÇÃO - ESCOPOÉ a delimitação de todos os processos para garantirque o projeto obtenha sucesso.• Define o foco e os principais pontos de atenção.• É a base para o acompanhamento de todo o trabalho.
  6. 6. ESTRATÉGIAS DE PRODUÇÃO - ESCOPODeve-se entender os canais de comunicação, quaistecnologias esses canais aceitam e de que forma issopode impactar positivamente ou negativamente noprocesso de produção.HTML? JAVASCRIPT? HTML 5? FLASH? PHP? .NET?
  7. 7. ESTRATÉGIAS DE PRODUÇÃO - ESCOPO $ $ = importânciaMensure a importância do projeto a partir dosobjetivos gerais, ela definirá em qual espaço a maiorfatia financeira deve ser aplicada.
  8. 8. ESTRATÉGIAS DE PRODUÇÃO - ESCOPOIDEIAS:TECNOLÓGICA VS SINTÉTICA> quanto mais tecnologia mais tempo de trabalho> quanto mais tecnologia mais dinheiro aplicado> quanto mais profissionais mais dinheiro é necessárioPor isso: $ = conhecer tecnologia = conhecer mercado = foco
  9. 9. ESTRATÉGIAS DE PRODUÇÃO - ESCOPO Sound of Streets Pjotro Pinóquio Poliflor> uma ideia tecnológica pode ser sintética, mas não necessariamente uma ideia sintética precisa de tecnologia de ponta
  10. 10. ESTRATÉGIAS DE PRODUÇÃO - BUDGET> html é mais rápido e barato que flash> flash é mais rápido e barato que htmlPara jogos, interações com movimento e animaçõescomplexas use flash.Para formulários, conteúdos extensos, use html.Com o advento do html 5, será possível diminuir ouso do flash para animações e outras funcionalidades,estuda-se até mesmo um player de Youtube que nãoutiliza flash.
  11. 11. ESTRATÉGIAS DE PRODUÇÃO - BUDGET> conhecendo tecnologias você entende o tempo de execução de cada projetoConverse com os profissionais envolvidos antes decomeçar a criação, com a definição antecipada datecnologia que será utilizada, muitos dos problemaspodem ser resolvidos.A credibilidade da empresa pode nascer de váriosfatores:> CRIATIVIDADE > PRAZO > INOVAÇÃO > OBJETIVIDADE = COMPETÊNCIA
  12. 12. ESTRATÉGIAS DE PRODUÇÃO - GESTÃO DE TEMPO• defina objetivos• estabeleça prioridades entre os objetivos• fazer o importante, não somente o urgente• follow up diário de tarefas• cuidado com o perfeccionismo• diga não na hora correta• delegue o que for possívelÉ importante saber definir a diferença entre trabalhos“urgentes”, do dia-a-dia e trabalhos importantes.É importante ter uma experiência prévia, mas pensarem todas as hipóteses pode prevenir erros.
  13. 13. ESTRATÉGIAS DE PRODUÇÃO - TEMPO É DINHEIRO!Cada profissional pode ter um tempo diferente deprodução, um ritmo mais acelerado ou não.Obviamente a qualidade final e o desempenhotambém são diferentes em cada profissional.Por isso é importante conhecer o perfil de cadacolaborador para que se possa aproveitar o melhor decada pessoa.Definir média de horas e custo da equipe é importantee impacta diretamente no tópico acima, e em algunscasos é necessário reduzir o prazo, para isso pode-seaumentar o número de colaboradores.
  14. 14. ESTRATÉGIAS DE PRODUÇÃO - TEMPO É DINHEIRO!• 130h por mês - 1600h por ano (6 horas por dia, 5 dias por semana)• faixa salarial mensal em torno de R$ 3.000,00 - R$ 36.000,00 anuais• energia elétrica, internet, servidores, telefones, insumos, impostos etc• féria e 13º salário - cerca de R$ 7.000,00 anuais• atualização tecnológica de 2 (ou de 4) em 2 anos - R$ 4.000,00 anuais• total R$ 50.000,00 anuais• dividindo por 1600h anuais, é um custo deaproximadamente R$ 31,50 por hora por UM profissional
  15. 15. EURIPEDES MAGALHÃES - @EURIPEDESMBriefing
  16. 16. BRIEFINGÉ uma oportunidade para se conhecer melhor o cliente,seu negócio e levantar as principais informações paradefinir o escopo do projeto.Também é uma ocasião para se pensar em serviçosadicionais que podem ser contemplados na proposta.A experiência é importante para a produção de briefingsbem elaborados.
  17. 17. BRIEFING/PROPOSTA COMERCIALDeve conter:Detalhes e informações cadastrais(CNPJ, Endereço,condições de pagamento etc.) do cliente e seus.Código de controle ou nome do projeto, deverá ser omesmo em todos os documentos produzidos durante oprojeto.Espaço para assinatura dos participantes.
  18. 18. BRIEFING/PROPOSTA COMERCIALDeve absorver informações do CLIENTE como:• Ramo de atuação e negócio• Tempo de mercado• Número de filiais/franquias• Produtos e/ou serviços oferecidos• Vantagens/desvantagens sobre os concorrentes• Referências de sites (outras empresas)• Objetivos e expectativas do cliente• Público-alvo• Valores que a empresa quer transmitir (clean, formal, Informal, radical, tradição, modernidade, etc.)
  19. 19. BRIEFING/PROPOSTA COMERCIALDeve absorver informações do CLIENTE como:Documentação disponível (logotipos, folders, manuaisde identidade visual)Ferramentas de marketing e veículos de comunicaçãoutilizados recentemente.Objeções (não utilizar algo, alguma cor ou estilo)Verba/orçamento calculado
  20. 20. BRIEFINGDeve conter informações do PROJETO como:Objetivo a curto e a longo prazo da produção.Stakeholders e seus contatos [e-mail e telefone]incluindo quem aprova o quê, do que precisa ser feito.Prazo final – Problemas se o prazo não for cumprido.Imagens, textos e idéias pré-organizadas/produzidas.
  21. 21. CRONOGRAMAÉ a representação visual do relacionamento entre prazoe tarefas.É importante para a comunicação dos envolvidosno projeto e para organizar as fazes de aprovação etambém define responsabilidades de cada envolvido(steakholder). É importante entender o que cadaprofissional realiza para se definir um bom cronograma.
  22. 22. CRONOGRAMA
  23. 23. EURIPEDES MAGALHÃES - @EURIPEDESMArquitetura de Informação
  24. 24. ARQUITETURA DE INFORMAÇÃOO psicólogo britânico Davis Lewis batizou os efeitosfísicos, psicológicos e sociais da sobrecarga dainformação sobre um indivíduo de síndrome da fadigada informação. Alguns dos seus efeitos são estresse,tensão, distúrbios de sono, problemas digestivos,dificuldade de memorização, irritabilidade e sentimentode abandono.
  25. 25. ARQUITETURA DE INFORMAÇÃOTornar o complexo claro.WURMAN (1997)1. O design estrutural de ambientes de informaçãocompartilhados.2. A combinação dos esquemas de organização, derotulação, de busca e de navegação dentro dewebsites e intranets.3. A arte e a ciência de dar forma a produtos eexperiências de informação para suportar ausabilidade e a findability.4. Uma disciplina emergente e uma comunidade deprática focada em trazer princípios do design earquitetura ao espaço digital.ROSENFELD e MORVILLE (2006)
  26. 26. ARQUITETURA DE INFORMAÇÃOO objetivo da Arquitetura de Informação é criar asestruturas de organização da informação apresentadapor um website para que o usuário consiga encontrare compreender as informações que necessita edesempenhar suas tarefas com facilidade.Seu desafio é definir as regras de organização dowebsite, definir o modelo de interação do usuário coma informação e especificar todas as páginas do websitee os elementos que as compõem.
  27. 27. ARQUITETURA DE INFORMAÇÃONa prática o trabalho do arquiteto de informação ébalancear as características e as necessidades dosusuários, do conteúdo e do contexto. usuário conteúdo AI contexto
  28. 28. ARQUITETURA DE INFORMAÇÃOUsuário• Moradores de Tóquio.• Viajantes.• Turistas.Conteúdo• Seqüência e a identidade das paradas.• A linha circunda a cidade de Tóquio.Contexto• Para o usuário não importa as voltas e curvas que o trem faz.• Em Tóquio o Palácio Imperial é um importante ponto de referência.
  29. 29. ARQUITETURA DE INFORMAÇÃO“O diagrama acima [a esquerda], traçado com base na linha férrea de Yamanote, quecircunda Tóquio, é bastante abstrato quando comparado com mapas naturais, comono exemplo a direita. É muito mais fácil entender e lembrar que a rota do trem é umcírculo em volta da cidade do que lembrar que o percurso tem a forma aproximadade uma pêra amassada com uma saliência ou calombo embaixo, virado para a direita.Como normalmente você não consegue parar o trem nem subir e descer entre asparadas, de certa forma não importa que voltas e curvas os vagões façam. O queinteressa é a seqüência e a identidade das paradas.”WURMAN, R. Ansiedade de Informação. São Paulo: Cultura, 1991, pág. 286
  30. 30. ARQUITETURA DE INFORMAÇÃOALGUMAS PRÁTICAS COMUNS DEARQUITETOS DA INFORMAÇÃO• Análise Heurística (método científico);• Definição de critérios ergonômicos;• Inspeção baseada em padrões, guias de estilos ou guias de recomendações;• Inspeção por checklists;• Card Sorting• Estudo do Percurso Cognitivo(ou inspeção);• Teste de experiência (ou usabilidade) com usuários;• Pesquisas, entrevistas e questionários.• Taxonomia
  31. 31. ARQUITETURA DE INFORMAÇÃO
  32. 32. ARQUITETURA DE INFORMAÇÃO - WIREFRAMEO QUE ÉÉ um guia de informação sobre o conteúdo e funcionalidadedo projeto.Serve como instrumento de argumentação e de situaçãopara entendimento do projeto e identificação de possíveiserros e também é a base para a criação, seja na parte daredação ou na parte de layout.O que deve ser levado em conta:O wireframe é um guia e não regra, as informaçõesinstauradas nele demonstram hierarquia, relevância e pesode informações, mas podem e devem ser modificadas deacordo com a melhor sequência para o projeto.
  33. 33. ARQUITETURA DE INFORMAÇÃO - WIREFRAMEO QUE PODE SER LEVADO EM CONTA:• peso dos elementos• posicionamento (sugestão)• hierarquia• navegação• imagens, texto, intens de formulário e busca• itens de menu• espaços para flash• links externos
  34. 34. ARQUITETURA DE INFORMAÇÃO - WIREFRAMEVivo co-piloto:> sistema de celular com gps> conceito de navegação, espaço, mapas, facilidade
  35. 35. ARQUITETURA DE INFORMAÇÃO - WIREFRAME
  36. 36. ARQUITETURA DE INFORMAÇÃO - WIREFRAME
  37. 37. EURIPEDES MAGALHÃES - @EURIPEDESMUsabilidade
  38. 38. USABILIDADEPresente na Arquitetura de Informação, UXD e emqualquer lugar que uma pessoa use algo, usabilidadeajuda a deixar tudo melhor, ou pelo menos resolverproblemas sérios que podem gerar situaçõesperigosas.
  39. 39. VW FOXhttp://www.youtube.com/watch?v=gIeoKSm2TiU
  40. 40. MEMÓRIA HUMANA VS COMPUTACIONAL SELETIVA INDISCRIMINADA EVOLUTIVA ESTÁVEL ASSOCIATIVA DISCRETAFaber Ludens
  41. 41. Norman (2006) - Conhecimento na cabeça
  42. 42. Conhecimento no mundo
  43. 43. Conhecimento no mundo
  44. 44. Conhecimento no mundo
  45. 45. USABILIDADE - COMPONENTESAprendizagem - O quanto é difícil completar tarefasbásicas no primeiro encontro com a interface?Eficiência - Para os usuários que já tenham algumafamiliaridade com a interface, como podem fazer tarefasmais rápido?Lembrança - Depois de um tempo sem acessar a interface,o quanto será difícil para alcançar proeficiência no uso?Erros - Quantos erros os usuários fazem, o quanto sãopreocupantes esses erros e como eles são corrigidos?Satisfação - O quanto é prazeroso usar essa interface?
  46. 46. UXD - TRABALHANDO MELHORIASProjeto - Planeta Verde TangO que é - Uma “rede social” para criançasObjetivo - Melhorar o uso do siteAprendizados - A partir de testes, foi identificada adificuldade das crianças fazerem scroll no site
  47. 47. Click Tale
  48. 48. Depois
  49. 49. Antes - Recorde
  50. 50. Depois - Recorde
  51. 51. UXD - TRABALHANDO MELHORIASDepois de quase 22 dias de teste A/B, foi gerada massacritica suficiente para encerraramento do teste.Visitas - 3.220 (Que tiveram suas impressões divididas em50% para cada versão)Conversões - 70 (Que 40% gerado pela página original e60% pela versão B)E o resultado foi:53% de incremento no volume de envio de vídeos naversão B (botão abaixo do passo)sobre a versão A.69% superior à taxa de conversão da versão A no dia 13/09.
  52. 52. HEURÍSTICAS - JAKOB NIELSENAs heurísticas são uma série de “dicas”ou “regras” que ajudam no entendimentode situações comuns que acontecemdiariamente e que podem atrapalhar anavegação pelos usuários.
  53. 53. HEURÍSTICAS - JAKOB NIELSEN1) Feedback O sistema deve informar continuamente ao usuário sobre o que ele está fazendo. 10 segundos é o limite para manter a atenção do usuário focalizada no diálogo.2) Falar a linguagem do usuário A terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário.3) Saídas claramente demarcadas O usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior. Usabilidoido
  54. 54. HEURÍSTICAS - JAKOB NIELSEN4) Consistência Um mesmo comando ou ação deve ter sempre o mesmo efeito. A mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.5) Prevenir erros Evitar situações de erro. Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram.6) Minimizar a sobrecarga de memória do usuário O sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico. Usabilidoido
  55. 55. HEURÍSTICAS - JAKOB NIELSEN7) Atalhos Para usuários experientes executarem as operações mais rapidamente. Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto. Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal.8) Diálogos simples e naturais Deve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos. A seqüência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas. Usabilidoido
  56. 56. HEURÍSTICAS - JAKOB NIELSEN9) Boas mensagens de erro Linguagem clara e sem códigos. Devem ajudar o usuário a entender e resolver o problema. Não devem culpar ou intimidar o usuário.10) Ajuda e documentação O ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. Se for necessária a ajuda deve estar facilmente acessível on-line. Usabilidoido
  57. 57. CONCLUINDO...Em linhas gerais, sabemos que independente da técnicautilizada, o olhar deve ser voltado para o ser humano quevai utilizar essa criação.Partindo deste ponto, fica mais fácil perceber caminhosinteligentes para o desenvolvimento.Sair do senso comum e ir em busca de algo novo einteressante verdadeiramente.
  58. 58. EURIPEDES MAGALHÃES - @EURIPEDESMIdentidade Visual
  59. 59. CRIAÇÃO DE MARCA E IDENTIDADE VISUALO que define umaidentidade visual?
  60. 60. IDENTIDADE“Conjunto de características e circunstâncias quedistinguem uma pessoa ou uma coisa* e graças àsquais é possível individualizá-la”Dicionário Houaiss da Língua Portuguesa
  61. 61. PRA QUE SERVE IDENTIDADE VISUAL? IDENTIDADE VISUAL identificação interna identificação externa redução de custos incrementar vendas ATINGIR OBJETIVOS DO NEGÓCIOMarks of Excellence, 1997.
  62. 62. PRA QUE SERVE IDENTIDADE VISUAL?• Individualidade da marca - diferenciação.• Expressar visualmente que tipo de organização o cliente é. (ex. formal x informal)• Transmite atributos da marca. (segurança, confiança, etc)• Conecta o cliente a imagens e ideias. (apple= cool! - Harley=potência - Volvo=segurança)• Consistência nos canais de comunicação (sistematização)• Torna a compra / memorização mais fácil para o consumidorJair Alves
  63. 63. QUANDO PENSAR EM IDENTIDADE VISUAL?• Nova Empresa, novo produto, novo serviço.• Aquisição, Fusão• Reposicionamento• Novo mercado• Troca de nome• RevitalizaçãoJair Alves
  64. 64. ANTES - DEPOIS
  65. 65. INTERNET
  66. 66. EM QUAIS MATERIAIS CONSISTEM A ID?• Símbolo• Logotipo• Cor• Tipografia• Aplicações (papelaria, catálogos, produtos, embalagens, frota, uniformes, etc....)Jair Alves
  67. 67. ...E MAIS DO QUE NUNCA:
  68. 68. MARCAS NO MEIO DIGITALO design de marcas na era contemporânea deve pensar que ospixels são por vezes o suporte complementar da identidade epor vezes o suporte principal de apresentação da marca.E o meio digital não se resume obviamente à uma página web.
  69. 69. DESIGN LÍQUIDONo livro “DNA Empresarial”, a Profa. Dra. Lígia Fascione falasobre a identidade líquida. Aqui podemos citar as “marcaslíquidas”.Líquidos, fluidos se adequam ao espaço onde são inseridos, seadequando as formas do espaço e adentrando profundamenteem todas as reentrâncias existentes.
  70. 70. DESIGN LÍQUIDOTanto como nascer “offline” e se tornar “online”, a marca podesair do digital e partir para o físico, em expansões praticamenteinfinitas.Isso deve ser levado em consideração no design de marcas.Não é possível mais desassociar uma situação da outra.
  71. 71. INTERFACEO design de marcas não é só o design para um símbolo gráficoque vai estar em algum site, mas também design para sistemasintegrados digitais e gráficos, onde essa marca tem que seexpandir coerentemente e integralmente.
  72. 72. CULTURA DE CONSUMO DE DESIGNCulturalmente, o Brasil ainda não é um país acostumado aconsumir design de qualidade (não estou falando de designde carros).É papel do designer “educar” o cliente para que para que essacultura cresça e se solidifique.
  73. 73. O PROCESSO CRIATIVOMuitos profissionais divergem sobre a forma mais correta dedefinir uma estratégia, metodologia ou sequência de trabalhopara se definir o design de uma marca.
  74. 74. EXPERIMENTAÇÃO “Não sei se existe a inspiração, mas se ela vier, vai me encontrar trabalhando”. Pablo PicassoRafic Farah
  75. 75. CONCEITUAÇÃOO símbolo e o logotipo devem ter algum conceito relacionadoao tipo de negócio da empresa, deve refletir o que a marcaquer passar. Nike deusa grega da vitória. O símbolo desenhado por Carolyn Davidson, representa a abstração da asa de uma estátua desta deusa.
  76. 76. “O norte do designer é a cultura” Claudio Ferlauto
  77. 77. COMO SER CRIATIVOSegunda a Profa. Msc. e artista Martha Gabriel a criatividadeestá vinculada a bloqueios e preconceitos que fazem parte danossa formação cultural.Alguns fatores que inibem a criatividade segundo Martha.Gabriel, além da preguiça:• Rótulos• Riscos• Ego• Dinheiro• Ambiente
  78. 78. 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)
  79. 79. CAMINHOS“A solução mora no problema”Rico LinsDados, dados, dados, pesquisa, pesquisa, pesquisa. Todas asinformações que forem encontradas são importantes, entendera IDENTIDADE CORPORATIVA vai ajudar no design da marca.Dados de planejamento, objetivos de branding, pesquisa decomportamento do consumidor, tendências do seguimento...
  80. 80. PARA ANALISAR• Concorrentes• Mercado semelhante• Problemas da marca existente• Qualidades da marca existente• Objetivos primários e secundários
  81. 81. PROCESSO CRIATIVO POR BRUNO MUNARI DEFINIÇÃO DO PROBLEMA • QUAL A FUNCIONALIDADE DO PRODUTO/SERVIÇO? • QUAL O OBJETIVO FINAL DESSE PRODUTO/SERVIÇO?
  82. 82. PROCESSO CRIATIVO POR BRUNO MUNARI DF COLETA E ANÁLISE • EXISTE ALGO NO MERCADO? • QUAL O PÚBLICO? • O QUE JÁ FOI FEITO? • O QUE OBTEVE SUCESSO RELACIONADO A ISSO?
  83. 83. PROCESSO CRIATIVO POR BRUNO MUNARI DF CD CRIATIVIDADE • PAINEL SEMÂNTICO • RELAÇÕES VISUAIS • RELAÇÕES MUSICAIS • CONCEITOS DE DESIGN
  84. 84. COMO BUSCAR REFERÊNCIASLivros, internet, amigos, pesquisas compradas, pontos devenda, qualquer experiência ajuda no processo.O painel semântico pode ser uma ótima ferramenta, pois criaum padrão visual que auxilia na percepção das relações entreos assuntos.• Anote tudo• Guarde tudo
  85. 85. PAINEL SEMÂNTICOSemântica é o estudo do significado da linguagem.O painel semântico é um guia de referências rápido, elepode ser formatado de diversas maneiras de acordo com anecessidade 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
  86. 86. PAINEL SEMÂNTICO - EXEMPLOS EXPRESSÃO DO PRODUTO - REFERÊNCIAS VISUAIS - ESTILO DE VIDAFonte: http://www.arthursoares.com
  87. 87. PAINEL SEMÂNTICO - EXEMPLOSFonte: http://fernandasegolin.wordpress.com
  88. 88. CORESNão é necessário citar a importância das cores, que envolveestudos longos e importantes, mas também ela é fatordeterminante na apresentação coerente dos conceitosaplicados na marca.Existem significados psicológicos para cores, Modesto Farinaem seu livro cita essas sensações e possíveis aplicações emdiversos meios.Exemplo do azul:• associação material: montanhas longínquas, frio, mar, céu, gelo, feminilidade, águas tranquilas• associação afetiva: espaço, viagem, verdade, sentido, afeto, infinito, sentimento profundo, meditação
  89. 89. CORESLevar em consideraçãoCor RGB - TELACor CMYK - IMPRESSÃOCor Pantone - COR ESPECIALCada cor tem uma aplicaçãoespecífica, porém elas devemmanter a identidade emdiversos meios, por isso éimportante escolher cores ecriar cores que podem serfacilmente utilizadas tanto naweb quanto fora dela.
  90. 90. CORESCom aplicações simples dos símbolos da marca e com umfoco grande nas cores, conseguimos identificar facilmente umaempresa.Marcelo Trevisani defende: “Marca é a cultura e as experiênciasque residem na mente de cada consumidor a respeito de umproduto ou serviço de uma empresa.”.E as cores ajudam nesse processo.
  91. 91. CORESO designer Alexandre Wollner defende o uso de poucascores na criação de marcas, para que seja facilmenteidentificada e para que seja mais prática e barata nosprocessos de impressão.
  92. 92. A TIPOGRAFIA NAS MARCASTipografia vai além do simples desenho da fonte (caracteres).A tipografia tem relação com a forma com que a LETRA ÉUSADA, isso engloba diagramação, uso das cores e um fortepensamento em linguagem visual.
  93. 93. “A tipografia é acara da linguagem” Ellen Lupton
  94. 94. TIPOGRAFIACom tipografia é possível trazer situações visuais queenglobem as sensações desejadas.Trabalhe pesos e formas de acordo com a necessidade.
  95. 95. A TIPOGRAFIA NAS MARCAS Existem muitas marcas que são criadas somente com tipos.Marcas sempre presentes no ranking da Interbrand.
  96. 96. Simplicidade!!!
  97. 97. A TIPOGRAFIA NAS MARCASHoje já é possível embedar fontes no html ou hospedara fonte em servidores específicos, que pode facilitar ouaté mesmo acabar com a necessidade de utilizar fontessubstitutas no html.
  98. 98. TIPOGRAFIAUse famílias e suas variações na identidade visual.Se a fonte da marca for uma fonte específica, procure umafonte de apoio. Pode ser definida também uma fonte “display”para títulos e uma fonte mais voltada para leitura, texto.
  99. 99. EURIPEDES MAGALHÃES - @EURIPEDESMTecnologia
  100. 100. O QUE É HTMLHyperText Markup Language, é uma das linguagens utilizadaspara desenvolver páginas na internet, presente na maioria dossites, é a linguagem que faz o brownser entender o conteúdoque é apresentado no servidor.
  101. 101. HTMLDentro de um documento HTML temos elementos de marcaçãodenominados TAGS . Uma TAG é definida através de seu nomecercado pelos sinais de “menor” (<) e “maior” (>) e normalmente temuma TAG correspondente para finalização, com o mesmo nome eprecedido por uma barra (/).Ex.: <BODY> .... corpo do documento ... </BODY> (define o início e ofim do corpo do documento HTML)Algumas TAGS admitem de atributos (parâmetros) que alteram amaneira como o navegador deve interpretá-la e normalmente sãocolocados na TAG inicializadora.Ex.: <BODY BACKGROUND=”fundo.gif”> .... corpo do documento </BODY> (define que o documento HTMLterá como fundo a figura fundo.gif )
  102. 102. HTMLNo código HTML se inserem as informções de tagueamentos etambém de códigos para SEO e SEM.Hoje dia existe o HTML 5 e os sites que contém animações via essescódigos e também os sites que chamamos de “design responsivo”.
  103. 103. HTML - DESIGN RESPONSIVO
  104. 104. CMS Os sistemas de CMS (Content Managment System) ou simplificadamente chamados de Gerenciadores de Conteúdo, são softwares online que permitem um rápido desenvolvimento e controle completo sobre todo o conteúdo a ser inserido em um website ou loja virtual. Os dispositivos de CMS são recomendados para clientes que preferem ter uma facilidade na atualização dos seus sites, sem terem de acessar diversos sistemas diferenciados e sem precisar conhecer um código sequer. Os gerenciadores de conteúdo permitem que você possa atualizar o seu site de qualquer lugar. Se você está em um evento e tirou algumas fotos, pode postá-las em seu website até mesmo através do celular, bastando acessar o seu painel de controle para isto. A disseminação de conteúdo não deve ter barreiras.fonte: http://www.agenciasoft.com.br/desenvolvimento-web/adaptacao-para-sites-dinamicos-cms/
  105. 105. CMS Uma das grandes vantagens de websites confeccionados sob plataformas de CMS, é que possuem total infraestrutura técnica para serem integrados com mecanismos de buscas como o Google e Bing. Toda a estrutura de códigos dos sistemas foi feita sob medida para receber visitas dos sistemas automáticos de buscas e a melhor a sua indexação, ou seja, o aparecimento nas páginas de resultados.fonte: http://www.agenciasoft.com.br/desenvolvimento-web/adaptacao-para-sites-dinamicos-cms/
  106. 106. CMS Além de toda facilidade do CMS no gerenciamento do conteúdo e liberdade de inserção do mesmo onde quer que você esteja, temos de lembrar também o seu suporte a variados formatos de mídia, como vídeos, imagens, galerias de fotos, arquivos de áudio, apresentações, etc. O WordPress, por exemplo, tem um painel de controle de fácil manuseio e com apenas alguns cliques o seu vídeo/ áudio/arquivo de mídia estará no ar, no seu site.fonte: http://www.agenciasoft.com.br/desenvolvimento-web/adaptacao-para-sites-dinamicos-cms/
  107. 107. ADMINISTRAÇÃO DO SITEAo gerar conteúdo para o um blog por exemplo, é importante pensarque o texto a ser publicado, pode conter palavras que ajudam nabusca do Google além das tags relacionadas ao post.Quanto mais citações,mais relevância aoassunto, quanto maisrelação com outrosconteúdos online, maisrelevância também.O Wordpress permiteainda a instalação dediversos widgets eplug-ins que ajudamna divulgação doconteúdo.
  108. 108. MÍDIA DISPLAY SITES HOTSITES BANNERS> informativo > impactante > interativo> design > arte > publicidade> processo > velocidade > rotatividade> acessibilidade > intuição > provocação> tecnologia > tecnologia > tecnologia
  109. 109. MÍDIA DISPLAYAlcançar resultados em mídia display (banners) depente de algunsfatores como criatividade da peça, escolha do canal adequado, tempode permanência do ar e tecnologia aplicada.Normalmente compra-se três tipos de mídia para banners,impressões, cliques ou diárias.Nas impressões, a compra é pela quantidade de vezes que a peçaserá apresentada no site.Por cliques, a compra é feita pela quantidade de cliques na peça.E a diária corresponde à peça no site durante um período todo.
  110. 110. MÍDIA DISPLAY Sound of Streets Pjotro Pinóquio Poliflor
  111. 111. MÍDIA DISPLAYExistem formatos diversos para mídia, cada portal oferece o seu mídiakit com os formatos disponíveis e suas funcionalidades.
  112. 112. MÍDIA DISPLAYAnalise o canal. Pense na tecnologia, no público, na conceito e que otempo médio de visualização de um banner é muito curto.Chamar atenção éimportante, criarpeças com interaçõesdiferenciadas éinteressante também.Um bom canal parapesquisa é o bannerblog. http://www.bannerblog.com.au
  113. 113. @EURIPEDESMLinks úteis e bibliografia• Design Thinking - Tim Brown• Design de Navegação Web - James Kalbach• Design para a Internet - Felipe Memória• Não me faça Pensar - Steve Krug• Ergodesign e Arquitetura de Informação - Luiz Anger• O Guia para Projetar UX - Russ Unger
  114. 114. @EURIPEDESMLinks úteis e bibliografia• http://www.designthinkingforeducators.com/• http://www.uxnet.org/• http://mitworld.mit.edu/video/357/• http://designthinking.ideo.com/• http://arquiteturadeinformacao.com/• http://www.usabilitycounts.com/• http://www.intuitionhq.com/• http://nform.com/tradingcards/affinity-diagram
  115. 115. DIGITALKSLinks úteis e bibliografia• http://typekit.com• http://typeface.neocracy.org/examples.html• http://www.logodesignlove.com• http://logofaves.com• http://www.logomoose.com• http://logooftheday.com• http://www.logopond.com• http://38one.com/cleverblog
  116. 116. @EURIPEDESMObrigadoweb: www.euripedes.com.brmail: euripedes@euripedes.com.brtwitter: @euripedesmMAIS:www.futurecast.com.brhttp://posmktdigital.wordpress.com/www.twitter.com/mktdigimpacta

×