O documento discute estratégias de produção para projetos, incluindo a definição de objetivos, briefing, cronograma, arquitetura de informação e usabilidade. É enfatizada a importância de entender as necessidades do cliente e do projeto para planejar a produção de forma eficiente.

1. EURIPEDES MAGALHÃES - @EURIPEDESM
Produção

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

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

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

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

6. 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?

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

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

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

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

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

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

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

15. EURIPEDES MAGALHÃES - @EURIPEDESM
Briefing

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

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

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

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

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

21. 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 cada
profissional realiza para se definir um bom cronograma.

22. CRONOGRAMA

23. EURIPEDES MAGALHÃES - @EURIPEDESM
Arquitetura de Informação

24. ARQUITETURA DE INFORMAÇÃO
O psicólogo britânico Davis Lewis batizou os efeitos
físicos, psicológicos e sociais da sobrecarga da
informação sobre um indivíduo de síndrome da fadiga
da informação. Alguns dos seus efeitos são estresse,
tensão, distúrbios de sono, problemas digestivos,
dificuldade de memorização, irritabilidade e sentimento
de abandono.

25. ARQUITETURA DE INFORMAÇÃO
Tornar o complexo claro.
WURMAN (1997)
1. O design estrutural de ambientes de informação
compartilhados.
2. A combinação dos esquemas de organização, de
rotulação, de busca e de navegação dentro de
websites e intranets.
3. A arte e a ciência de dar forma a produtos e
experiências de informação para suportar a
usabilidade e a findability.
4. Uma disciplina emergente e uma comunidade de
prática focada em trazer princípios do design e
arquitetura ao espaço digital.
ROSENFELD e MORVILLE (2006)

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

27. 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 conteúdo
AI
contexto

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

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

30. ARQUITETURA DE INFORMAÇÃO
ALGUMAS PRÁTICAS COMUNS DE
ARQUITETOS 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. ARQUITETURA DE INFORMAÇÃO

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

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

34. ARQUITETURA DE INFORMAÇÃO - WIREFRAME
Vivo co-piloto:
> sistema de celular com gps
> conceito de navegação, espaço, mapas, facilidade

35. ARQUITETURA DE INFORMAÇÃO - WIREFRAME

36. ARQUITETURA DE INFORMAÇÃO - WIREFRAME

37. EURIPEDES MAGALHÃES - @EURIPEDESM
Usabilidade

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

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

41. MEMÓRIA HUMANA VS COMPUTACIONAL
SELETIVA INDISCRIMINADA
EVOLUTIVA ESTÁVEL
ASSOCIATIVA DISCRETA
Faber Ludens

42. Norman (2006) - Conhecimento na cabeça

43. Conhecimento no mundo

44. Conhecimento no mundo

45. Conhecimento no mundo

46. 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?

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

49. Click Tale

50. Depois

52. Antes - Recorde

53. Depois - Recorde

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

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

56. HEURÍSTICAS - JAKOB NIELSEN
1) 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

57. HEURÍSTICAS - JAKOB NIELSEN
4) 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

58. HEURÍSTICAS - JAKOB NIELSEN
7) 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

59. HEURÍSTICAS - JAKOB NIELSEN
9) 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

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

61. EURIPEDES MAGALHÃES - @EURIPEDESM
Identidade Visual

62. CRIAÇÃO DE MARCA E IDENTIDADE VISUAL
O que define uma
identidade visual?

63. IDENTIDADE
“Conjunto de características e circunstâncias que
distinguem uma pessoa ou uma coisa* e graças às
quais é possível individualizá-la”
Dicionário Houaiss da Língua Portuguesa

64. PRA QUE SERVE IDENTIDADE VISUAL?
IDENTIDADE VISUAL
identificação interna identificação externa
redução de custos incrementar vendas
ATINGIR OBJETIVOS DO NEGÓCIO
Marks of Excellence, 1997.

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

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

67. ANTES - DEPOIS

68. INTERNET

69. EM QUAIS MATERIAIS CONSISTEM A ID?
• Símbolo
• Logotipo
• Cor
• Tipografia
• Aplicações (papelaria, catálogos, produtos, embalagens,
frota, uniformes, etc....)
Jair Alves

70. ...E MAIS DO QUE NUNCA:

71. MARCAS NO MEIO DIGITAL
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.

73. DESIGN LÍQUIDO
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.

75. DESIGN LÍQUIDO
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.

77. INTERFACE
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.

80. CULTURA DE CONSUMO DE DESIGN
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.

81. O PROCESSO CRIATIVO
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.

82. EXPERIMENTAÇÃO
“Não sei se existe a inspiração, mas se ela vier, vai
me encontrar trabalhando”.
Pablo Picasso
Rafic Farah

83. CONCEITUAÇÃO
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.
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.

84. “O norte do designer
é a cultura”
Claudio Ferlauto

85. COMO SER CRIATIVO
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

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

87. CAMINHOS
“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...

88. PARA ANALISAR
• Concorrentes
• Mercado semelhante
• Problemas da marca existente
• Qualidades da marca existente
• Objetivos primários e secundários

89. PROCESSO CRIATIVO POR BRUNO MUNARI
DEFINIÇÃO DO PROBLEMA
• QUAL A FUNCIONALIDADE
DO PRODUTO/SERVIÇO?
• QUAL O OBJETIVO FINAL
DESSE PRODUTO/SERVIÇO?

90. 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?

91. PROCESSO CRIATIVO POR BRUNO MUNARI
DF CD CRIATIVIDADE
• PAINEL SEMÂNTICO
• RELAÇÕES VISUAIS
• RELAÇÕES MUSICAIS
• CONCEITOS DE DESIGN

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

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

94. PAINEL SEMÂNTICO - EXEMPLOS
EXPRESSÃO DO PRODUTO - REFERÊNCIAS VISUAIS - ESTILO DE VIDA
Fonte: http://www.arthursoares.com

95. PAINEL SEMÂNTICO - EXEMPLOS
Fonte: http://fernandasegolin.wordpress.com

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

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

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

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

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

103. “A tipografia é a
cara da linguagem”
Ellen Lupton

104. TIPOGRAFIA
Com tipografia é possível trazer situações visuais que
englobem as sensações desejadas.
Trabalhe pesos e formas de acordo com a necessidade.

105. A TIPOGRAFIA NAS MARCAS
Existem muitas marcas que são criadas somente com tipos.
Marcas sempre presentes no ranking da Interbrand.

106. Simplicidade!!!

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

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

111. EURIPEDES MAGALHÃES - @EURIPEDESM
Tecnologia

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

113. 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 HTML
terá como fundo a figura fundo.gif )

114. 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”.

115. HTML - DESIGN RESPONSIVO

117. 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/

118. 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/

119. 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/

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

121. MÍDIA DISPLAY
SITES HOTSITES BANNERS
> informativo > impactante > interativo
> design > arte > publicidade
> processo > velocidade > rotatividade
> acessibilidade > intuição > provocação
> tecnologia > tecnologia > tecnologia

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

123. MÍDIA DISPLAY
Sound of Streets Pjotro Pinóquio Poliflor

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

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

126. @EURIPEDESM
Links ú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

127. @EURIPEDESM
Links ú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

128. DIGITALKS
Links ú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

129. @EURIPEDESM
Obrigado
web: www.euripedes.com.br
mail: euripedes@euripedes.com.br
twitter: @euripedesm
MAIS:
www.futurecast.com.br
http://posmktdigital.wordpress.com/
www.twitter.com/mktdigimpacta