digitalks producao

129
EURIPEDES MAGALHÃES - @EURIPEDESM Produção

Upload: euripedesm

Post on 27-Nov-2014

891 views

Category:

Documents


0 download

DESCRIPTION

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 DisplayAgradecimentos especiais ao Instituto Faber Ludens e a Jair Alves.

TRANSCRIPT

Page 1: Digitalks producao

EURIPEDES MAGALHÃES - @EURIPEDESM

Produção

Page 2: Digitalks producao

DEFININDO OBJETIVOS

Toda e qualquer campanha e projeto deve ter resultados claros, sejam os objetivos de venda, objetivos de marca, objetivos da agência ou objetivos tecnológicos.

Page 3: Digitalks producao

DEFININDO OBJETIVOS

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.

Page 4: Digitalks producao

DEFININDO OBJETIVOS

É 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

Page 5: Digitalks producao

ESTRATÉGIAS DE PRODUÇÃO - ESCOPO

É a delimitação de todos os processos para garantir que o projeto obtenha sucesso.

• Define o foco e os principais pontos de atenção.

• É a base para o acompanhamento de todo o trabalho.

Page 6: Digitalks producao

ESTRATÉGIAS DE PRODUÇÃO - ESCOPO

Deve-se entender os canais de comunicação, quais tecnologias esses canais aceitam e de que forma isso pode impactar positivamente ou negativamente no processo de produção.

HTML? JAVASCRIPT? HTML 5? FLASH? PHP? .NET?

Page 7: Digitalks producao

ESTRATÉGIAS DE PRODUÇÃO - ESCOPO

= 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.

$$

Page 8: Digitalks producao

ESTRATÉGIAS DE PRODUÇÃO - ESCOPO

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$

Page 9: Digitalks producao

Sound of Streets Pjotro Pinóquio Poliflor

ESTRATÉGIAS DE PRODUÇÃO - ESCOPO

> uma ideia tecnológica pode ser sintética, mas não necessariamente uma ideia sintética precisa de tecnologia de ponta

Page 10: Digitalks producao

ESTRATÉGIAS DE PRODUÇÃO - 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.

Page 11: Digitalks producao

ESTRATÉGIAS DE PRODUÇÃO - BUDGET

> 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

Page 12: Digitalks producao

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 pensar em todas as hipóteses pode prevenir erros.

Page 13: Digitalks producao

ESTRATÉGIAS DE PRODUÇÃO - TEMPO É DINHEIRO!

Cada profissional pode ter um tempo diferente de produção, um ritmo mais acelerado ou não.Obviamente a qualidade final e o desempenho também são diferentes em cada profissional.

Por isso é importante conhecer o perfil de cada colaborador para que se possa aproveitar o melhor de cada pessoa.

Definir média de horas e custo da equipe é importante e impacta diretamente no tópico acima, e em alguns casos é necessário reduzir o prazo, para isso pode-se aumentar o número de colaboradores.

Page 14: Digitalks producao

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 de aproximadamente R$ 31,50 por hora por UM profissional

Page 15: Digitalks producao

EURIPEDES MAGALHÃES - @EURIPEDESM

Briefing

Page 16: Digitalks producao

BRIEFING

É uma oportunidade para se conhecer melhor o cliente, seu negócio e levantar as principais informações para definir o escopo do projeto.

Também é uma ocasião para se pensar em serviços adicionais que podem ser contemplados na proposta.A experiência é importante para a produção de briefings bem elaborados.

Page 17: Digitalks producao

BRIEFING/PROPOSTA COMERCIAL

Deve 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 o mesmo em todos os documentos produzidos durante o projeto.

Espaço para assinatura dos participantes.

Page 18: Digitalks producao

BRIEFING/PROPOSTA COMERCIAL

Deve 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.)

Page 19: Digitalks producao

BRIEFING/PROPOSTA COMERCIAL

Deve absorver informações do CLIENTE como:

Documentação disponível (logotipos, folders, manuais de identidade visual)

Ferramentas de marketing e veículos de comunicação utilizados recentemente.

Objeções (não utilizar algo, alguma cor ou estilo)Verba/orçamento calculado

Page 20: Digitalks producao

BRIEFING

Deve 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.

Page 21: Digitalks producao

CRONOGRAMA

É a representação visual do relacionamento entre prazo e tarefas.

É importante para a comunicação dos envolvidos no projeto e para organizar as fazes de aprovação e também define responsabilidades de cada envolvido (steakholder). É importante entender o que cadaprofissional realiza para se definir um bom cronograma.

Page 22: Digitalks producao

CRONOGRAMA

Page 23: Digitalks producao

EURIPEDES MAGALHÃES - @EURIPEDESM

Arquitetura de Informação

Page 24: Digitalks producao

ARQUITETURA DE INFORMAÇÃO

O 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.

Page 25: Digitalks producao

ARQUITETURA DE INFORMAÇÃO

Tornar 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)

Page 26: Digitalks producao

ARQUITETURA DE INFORMAÇÃO

O objetivo da Arquitetura de Informação é criar as estruturas de organização da informação apresentada por um website para que o usuário consiga encontrar e compreender as informações que necessita e desempenhar suas tarefas com facilidade.

Seu desafio é definir as regras de organização do website, definir o modelo de interação do usuário com a informação e especificar todas as páginas do website e os elementos que as compõem.

Page 27: Digitalks producao

ARQUITETURA DE INFORMAÇÃO

Na prática o trabalho do arquiteto de informação é balancear as características e as necessidades dos usuários, do conteúdo e do contexto.

usuário

contexto

AI

conteúdo

Page 28: Digitalks producao

ARQUITETURA DE INFORMAÇÃO

Usuá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.

Page 29: Digitalks producao

ARQUITETURA DE INFORMAÇÃO

“O diagrama acima [a esquerda], traçado com base na linha férrea de Yamanote, que circunda Tóquio, é bastante abstrato quando comparado com mapas naturais, como no exemplo a direita. É muito mais fácil entender e lembrar que a rota do trem é um círculo em volta da cidade do que lembrar que o percurso tem a forma aproximada de 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 as paradas, de certa forma não importa que voltas e curvas os vagões façam. O que

interessa é a seqüência e a identidade das paradas.”

WURMAN, R. Ansiedade de Informação. São Paulo: Cultura, 1991, pág. 286

Page 30: Digitalks producao

ARQUITETURA DE INFORMAÇÃO

ALGUMAS 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

Page 31: Digitalks producao

ARQUITETURA DE INFORMAÇÃO

Page 32: Digitalks producao

ARQUITETURA DE INFORMAÇÃO - WIREFRAME

O QUE É

É um guia de informação sobre o conteúdo e funcionalidade do projeto.

Serve como instrumento de argumentação e de situação para entendimento do projeto e identificação de possíveis erros e também é a base para a criação, seja na parte da redação ou na parte de layout.

O que deve ser levado em conta:

O wireframe é um guia e não regra, as informações instauradas nele demonstram hierarquia, relevância e peso de informações, mas podem e devem ser modificadas de acordo com a melhor sequência para o projeto.

Page 33: Digitalks producao

ARQUITETURA DE INFORMAÇÃO - WIREFRAME

O 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

Page 34: Digitalks producao

ARQUITETURA DE INFORMAÇÃO - WIREFRAME

Vivo co-piloto:

> sistema de celular com gps> conceito de navegação, espaço, mapas, facilidade

Page 35: Digitalks producao

ARQUITETURA DE INFORMAÇÃO - WIREFRAME

Page 36: Digitalks producao

ARQUITETURA DE INFORMAÇÃO - WIREFRAME

Page 37: Digitalks producao

EURIPEDES MAGALHÃES - @EURIPEDESM

Usabilidade

Page 38: Digitalks producao

USABILIDADE

Presente na Arquitetura de Informação, UXD e em qualquer lugar que uma pessoa use algo, usabilidade ajuda a deixar tudo melhor, ou pelo menos resolver problemas sérios que podem gerar situações perigosas.

Page 39: Digitalks producao

http://www.youtube.com/watch?v=gIeoKSm2TiU

VW FOX

Page 40: Digitalks producao
Page 41: Digitalks producao

MEMÓRIA HUMANA VS COMPUTACIONAL

Faber Ludens

SELETIVA INDISCRIMINADA

EVOLUTIVA ESTÁVEL

ASSOCIATIVA DISCRETA

Page 42: Digitalks producao

Norman (2006) - Conhecimento na cabeça

Page 43: Digitalks producao

Conhecimento no mundo

Page 44: Digitalks producao

Conhecimento no mundo

Page 45: Digitalks producao

Conhecimento no mundo

Page 46: Digitalks producao

USABILIDADE - COMPONENTES

Aprendizagem - O quanto é difícil completar tarefas básicas no primeiro encontro com a interface?

Eficiência - Para os usuários que já tenham alguma familiaridade com a interface, como podem fazer tarefas mais 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ão preocupantes esses erros e como eles são corrigidos?

Satisfação - O quanto é prazeroso usar essa interface?

Page 47: Digitalks producao

UXD - TRABALHANDO MELHORIAS

Projeto - Planeta Verde Tang

O que é - Uma “rede social” para crianças

Objetivo - Melhorar o uso do site

Aprendizados - A partir de testes, foi identificada a dificuldade das crianças fazerem scroll no site

Page 48: Digitalks producao
Page 49: Digitalks producao

Click Tale

Page 50: Digitalks producao

Depois

Page 51: Digitalks producao
Page 52: Digitalks producao

Antes - Recorde

Page 53: Digitalks producao

Depois - Recorde

Page 54: Digitalks producao

UXD - TRABALHANDO MELHORIAS

Depois de quase 22 dias de teste A/B, foi gerada massa critica suficiente para encerraramento do teste.

Visitas - 3.220 (Que tiveram suas impressões divididas em 50% para cada versão)

Conversões - 70 (Que 40% gerado pela página original e 60% pela versão B)

E o resultado foi:

53% de incremento no volume de envio de vídeos na versã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.

Page 55: Digitalks producao

HEURÍSTICAS - JAKOB NIELSEN

As heurísticas são uma série de “dicas” ou “regras” que ajudam no entendimento de situações comuns que acontecem diariamente e que podem atrapalhar a navegação pelos usuários.

Page 56: Digitalks producao

HEURÍSTICAS - JAKOB NIELSEN

1) FeedbackO 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árioA 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 demarcadasO usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior.

Usabilidoido

Page 57: Digitalks producao

HEURÍSTICAS - JAKOB NIELSEN

4) ConsistênciaUm 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 errosEvitar 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árioO 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

Page 58: Digitalks producao

HEURÍSTICAS - JAKOB NIELSEN

7) AtalhosPara 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 naturaisDeve-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

Page 59: Digitalks producao

HEURÍSTICAS - JAKOB NIELSEN

9) Boas mensagens de erroLinguagem 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çãoO 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

Page 60: Digitalks producao

CONCLUINDO...

Em linhas gerais, sabemos que independente da técnica utilizada, o olhar deve ser voltado para o ser humano que vai utilizar essa criação.

Partindo deste ponto, fica mais fácil perceber caminhos inteligentes para o desenvolvimento.

Sair do senso comum e ir em busca de algo novo e interessante verdadeiramente.

Page 61: Digitalks producao

EURIPEDES MAGALHÃES - @EURIPEDESM

Identidade Visual

Page 62: Digitalks producao

CRIAÇÃO DE MARCA E IDENTIDADE VISUAL

O que define uma identidade visual?

Page 63: Digitalks producao

IDENTIDADE

“Conjunto de características e circunstâncias que distinguem uma pessoa ou uma coisa* e graças àsquais é possível individualizá-la”

Dicionário Houaiss da Língua Portuguesa

Page 64: Digitalks producao

PRA QUE SERVE IDENTIDADE VISUAL?

Marks of Excellence, 1997.

IDENTIDADE VISUAL

ATINGIR OBJETIVOS DO NEGÓCIO

identificação interna

redução de custos

identificação externa

incrementar vendas

Page 65: Digitalks producao

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 consumidor

Jair Alves

Page 66: Digitalks producao

QUANDO PENSAR EM IDENTIDADE VISUAL?

• Nova Empresa, novo produto, novo serviço.

• Aquisição, Fusão

• Reposicionamento

• Novo mercado

• Troca de nome

• Revitalização

Jair Alves

Page 67: Digitalks producao

ANTES - DEPOIS

Page 68: Digitalks producao

INTERNET

Page 69: Digitalks producao

EM QUAIS MATERIAIS CONSISTEM A ID?

• Símbolo

• Logotipo

• Cor

• Tipografia

• Aplicações (papelaria, catálogos, produtos, embalagens, frota, uniformes, etc....)

Jair Alves

Page 70: Digitalks producao

...E MAIS DO QUE NUNCA:

Page 71: Digitalks producao

O design de marcas na era contemporânea deve pensar que os pixels são por vezes o suporte complementar da identidade e por vezes o suporte principal de apresentação da marca.

E o meio digital não se resume obviamente à uma página web.

MARCAS NO MEIO DIGITAL

Page 72: Digitalks producao
Page 73: Digitalks producao

No livro “DNA Empresarial”, a Profa. Dra. Lígia Fascione fala sobre a identidade líquida. Aqui podemos citar as “marcas líquidas”.

Líquidos, fluidos se adequam ao espaço onde são inseridos, se adequando as formas do espaço e adentrando profundamente em todas as reentrâncias existentes.

DESIGN LÍQUIDO

Page 74: Digitalks producao
Page 75: Digitalks producao

Tanto como nascer “offline” e se tornar “online”, a marca pode sair do digital e partir para o físico, em expansões praticamente infinitas.

Isso deve ser levado em consideração no design de marcas. Não é possível mais desassociar uma situação da outra.

DESIGN LÍQUIDO

Page 76: Digitalks producao
Page 77: Digitalks producao

O design de marcas não é só o design para um símbolo gráfico que vai estar em algum site, mas também design para sistemas integrados digitais e gráficos, onde essa marca tem que se expandir coerentemente e integralmente.

INTERFACE

Page 78: Digitalks producao
Page 79: Digitalks producao
Page 80: Digitalks producao

Culturalmente, o Brasil ainda não é um país acostumado a consumir design de qualidade (não estou falando de design de carros).

É papel do designer “educar” o cliente para que para que essa cultura cresça e se solidifique.

CULTURA DE CONSUMO DE DESIGN

Page 81: Digitalks producao

Muitos profissionais divergem sobre a forma mais correta de definir uma estratégia, metodologia ou sequência de trabalho para se definir o design de uma marca.

O PROCESSO CRIATIVO

Page 82: Digitalks producao

“Não sei se existe a inspiração, mas se ela vier, vaime encontrar trabalhando”.

Pablo Picasso

EXPERIMENTAÇÃO

Rafic Farah

Page 83: Digitalks producao

O símbolo e o logotipo devem ter algum conceito relacionado ao tipo de negócio da empresa, deve refletir o que a marca quer passar.

CONCEITUAÇÃO

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.

Page 84: Digitalks producao

“O norte do designer é a cultura”

Claudio Ferlauto

Page 85: Digitalks producao

Segunda a Profa. Msc. e artista Martha Gabriel a criatividade está vinculada a bloqueios e preconceitos que fazem parte da nossa formação cultural.

Alguns fatores que inibem a criatividade segundo Martha. Gabriel, além da preguiça:

• Rótulos• Riscos• Ego• Dinheiro• Ambiente

COMO SER CRIATIVO

Page 86: Digitalks producao

• 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)

COMO SER CRIATIVO

Page 87: Digitalks producao

“A solução mora no problema”

Rico Lins

Dados, dados, dados, pesquisa, pesquisa, pesquisa. Todas as informações que forem encontradas são importantes, entender a IDENTIDADE CORPORATIVA vai ajudar no design da marca.

Dados de planejamento, objetivos de branding, pesquisa de comportamento do consumidor, tendências do seguimento...

CAMINHOS

Page 88: Digitalks producao

• Concorrentes

• Mercado semelhante

• Problemas da marca existente

• Qualidades da marca existente

• Objetivos primários e secundários

PARA ANALISAR

Page 89: Digitalks producao

DEFINIÇÃO DO PROBLEMA

• QUAL A FUNCIONALIDADE DO PRODUTO/SERVIÇO?

• QUAL O OBJETIVO FINAL DESSE PRODUTO/SERVIÇO?

PROCESSO CRIATIVO POR BRUNO MUNARI

Page 90: Digitalks producao

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?

PROCESSO CRIATIVO POR BRUNO MUNARI

Page 91: Digitalks producao

DF CD CRIATIVIDADE

• PAINEL SEMÂNTICO

• RELAÇÕES VISUAIS

• RELAÇÕES MUSICAIS

• CONCEITOS DE DESIGN

PROCESSO CRIATIVO POR BRUNO MUNARI

Page 92: Digitalks producao

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

Page 93: Digitalks producao

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

Page 94: Digitalks producao

Fonte: http://www.arthursoares.com

PAINEL SEMÂNTICO - EXEMPLOS

EXPRESSÃO DO PRODUTO - REFERÊNCIAS VISUAIS - ESTILO DE VIDA

Page 95: Digitalks producao

PAINEL SEMÂNTICO - EXEMPLOS

Fonte: http://fernandasegolin.wordpress.com

Page 96: Digitalks producao

CORES

Não é necessário citar a importância das cores, que envolve estudos longos e importantes, mas também ela é fator determinante na apresentação coerente dos conceitos aplicados na marca.

Existem significados psicológicos para cores, Modesto Farina em seu livro cita essas sensações e possíveis aplicações em diversos 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

Page 97: Digitalks producao
Page 98: Digitalks producao

CORES

Levar em consideração

Cor RGB - TELA

Cor CMYK - IMPRESSÃO

Cor Pantone - COR ESPECIAL

Cada cor tem uma aplicação específica, porém elas devem manter a identidade em diversos meios, por isso é importante escolher cores e criar cores que podem ser facilmente utilizadas tanto na web quanto fora dela.

Page 99: Digitalks producao

CORES

Com aplicações simples dos símbolos da marca e com um foco grande nas cores, conseguimos identificar facilmente uma empresa.

Marcelo Trevisani defende: “Marca é a cultura e as experiências que residem na mente de cada consumidor a respeito de um produto ou serviço de uma empresa.”.

E as cores ajudam nesse processo.

Page 100: Digitalks producao
Page 101: Digitalks producao

CORES

O designer Alexandre Wollner defende o uso de poucas cores na criação de marcas, para que seja facilmente identificada e para que seja mais prática e barata nos processos de impressão.

Page 102: Digitalks producao

A TIPOGRAFIA NAS MARCAS

Tipografia 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 forte pensamento em linguagem visual.

Page 103: Digitalks producao

“A tipografia é acara da linguagem”

Ellen Lupton

Page 104: Digitalks producao

TIPOGRAFIA

Com tipografia é possível trazer situações visuais que englobem as sensações desejadas.

Trabalhe pesos e formas de acordo com a necessidade.

Page 105: Digitalks producao

A TIPOGRAFIA NAS MARCAS

Existem muitas marcas que são criadas somente com tipos.

Marcas sempre presentes no ranking da Interbrand.

Page 106: Digitalks producao

Simplicidade!!!

Page 107: Digitalks producao

A TIPOGRAFIA NAS MARCAS

Hoje já é possível embedar fontes no html ou hospedar a fonte em servidores específicos, que pode facilitar ou até mesmo acabar com a necessidade de utilizar fontes substitutas no html.

Page 108: Digitalks producao

TIPOGRAFIA

Use famílias e suas variações na identidade visual.

Se a fonte da marca for uma fonte específica, procure uma fonte de apoio. Pode ser definida também uma fonte “display” para títulos e uma fonte mais voltada para leitura, texto.

Page 109: Digitalks producao
Page 110: Digitalks producao
Page 111: Digitalks producao

EURIPEDES MAGALHÃES - @EURIPEDESM

Tecnologia

Page 112: Digitalks producao

O QUE É HTML

HyperText Markup Language, é uma das linguagens utilizadas para desenvolver páginas na internet, presente na maioria dos sites, é a linguagem que faz o brownser entender o conteúdo que é apresentado no servidor.

Page 113: Digitalks producao

HTML

Dentro de um documento HTML temos elementos de marcação denominados TAGS . Uma TAG é definida através de seu nome cercado pelos sinais de “menor” (<) e “maior” (>) e normalmente tem uma TAG correspondente para finalização, com o mesmo nome e precedido por uma barra (/).

Ex.: <BODY> .... corpo do documento ... </BODY> (define o início e o fim do corpo do documento HTML)

Algumas TAGS admitem de atributos (parâmetros) que alteram a maneira como o navegador deve interpretá-la e normalmente são colocados na TAG inicializadora.

Ex.: <BODY BACKGROUND=”fundo.gif”> .... corpo do documento </BODY> (define que o documento HTMLterá como fundo a figura fundo.gif )

Page 114: Digitalks producao

HTML

No código HTML se inserem as informções de tagueamentos e também de códigos para SEO e SEM.

Hoje dia existe o HTML 5 e os sites que contém animações via esses códigos e também os sites que chamamos de “design responsivo”.

Page 115: Digitalks producao

HTML - DESIGN RESPONSIVO

Page 116: Digitalks producao
Page 117: Digitalks producao

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/

Page 118: Digitalks producao

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/

Page 119: Digitalks producao

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/

Page 120: Digitalks producao

ADMINISTRAÇÃO DO SITE

Ao gerar conteúdo para o um blog por exemplo, é importante pensar que o texto a ser publicado, pode conter palavras que ajudam na busca do Google além das tags relacionadas ao post.

Quanto mais citações, mais relevância ao assunto, quanto mais relação com outros conteúdos online, mais relevância também.

O Wordpress permite ainda a instalação de diversos widgets e plug-ins que ajudam na divulgação do conteúdo.

Page 121: Digitalks producao

MÍDIA DISPLAY

> informativo

> design

> processo

> acessibilidade

> tecnologia

> impactante

> arte

> velocidade

> intuição

> tecnologia

> interativo

> publicidade

> rotatividade

> provocação

> tecnologia

SITES HOTSITES BANNERS

Page 122: Digitalks producao

MÍDIA DISPLAY

Alcançar resultados em mídia display (banners) depente de alguns fatores como criatividade da peça, escolha do canal adequado, tempo de 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ça será 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.

Page 123: Digitalks producao

Sound of Streets Pjotro Pinóquio Poliflor

MÍDIA DISPLAY

Page 124: Digitalks producao

MÍDIA DISPLAY

Existem formatos diversos para mídia, cada portal oferece o seu mídia kit com os formatos disponíveis e suas funcionalidades.

Page 125: Digitalks producao

MÍDIA DISPLAY

Analise o canal. Pense na tecnologia, no público, na conceito e que o tempo médio de visualização de um banner é muito curto.

Chamar atenção é importante, criar peças com interações diferenciadas é interessante também.

Um bom canal para pesquisa é o banner blog.

http://www.bannerblog.com.au

Page 126: Digitalks producao

@EURIPEDESM

• 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

Links úteis e bibliografia

Page 127: Digitalks producao

@EURIPEDESM

• 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

Links úteis e bibliografia

Page 128: Digitalks producao

DIGITALKS

• 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

Links úteis e bibliografia

Page 129: Digitalks producao

@EURIPEDESM

web: www.euripedes.com.brmail: [email protected]: @euripedesm

MAIS:www.futurecast.com.brhttp://posmktdigital.wordpress.com/www.twitter.com/mktdigimpacta

Obrigado