Digitalks producao

EURIPEDES MAGALHÃES - @EURIPEDESM

Produção

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.

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.

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

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.


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?


$

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


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


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

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.

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

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.

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.

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


Briefing

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.

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.


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


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

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.

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.


Arquitetura de Informação

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.


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)


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.


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


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.


“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


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

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.


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


Vivo co-piloto:

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


Usabilidade

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.

VW FOX

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

MEMÓRIA HUMANA VS COMPUTACIONAL

SELETIVA INDISCRIMINADA

EVOLUTIVA ESTÁVEL

ASSOCIATIVA DISCRETA

Faber Ludens

Norman (2006) - Conhecimento na cabeça

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?

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

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.

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.


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


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


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


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

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.


Identidade Visual

CRIAÇÃO DE MARCA E IDENTIDADE VISUAL

O que define uma
identidade visual?

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

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.

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

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

EM QUAIS MATERIAIS CONSISTEM A ID?

• Símbolo

• Logotipo

• Cor

• Tipografia

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

Jair Alves

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.

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.

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.

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.

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.

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.

EXPERIMENTAÇÃO

“Não sei se existe a inspiração, mas se ela vier, vai
me encontrar trabalhando”.
Pablo Picasso

Rafic Farah

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.

“O norte do designer
é a cultura”
Claudio Ferlauto

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

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)

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

PARA ANALISAR

• Concorrentes

• Mercado semelhante

• Problemas da marca existente

• Qualidades da marca existente

• Objetivos primários e secundários

PROCESSO CRIATIVO POR BRUNO MUNARI

DEFINIÇÃO DO PROBLEMA
• QUAL A FUNCIONALIDADE
DO PRODUTO/SERVIÇO?

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


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?


DF CD CRIATIVIDADE
• PAINEL SEMÂNTICO

• RELAÇÕES VISUAIS

• RELAÇÕES MUSICAIS

• CONCEITOS DE DESIGN

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

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

PAINEL SEMÂNTICO - EXEMPLOS
EXPRESSÃO DO PRODUTO - REFERÊNCIAS VISUAIS - ESTILO DE VIDA

Fonte: http://www.arthursoares.com

PAINEL SEMÂNTICO - EXEMPLOS

Fonte: http://fernandasegolin.wordpress.com

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

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.

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.

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.

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.

“A tipografia é a
cara da linguagem”
Ellen Lupton

TIPOGRAFIA

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

Trabalhe pesos e formas de acordo com a necessidade.


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

Marcas sempre presentes no ranking da Interbrand.


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.

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.


Tecnologia

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.

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 )

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

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/

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.


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.


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.

MÍDIA DISPLAY

SITES HOTSITES BANNERS
> informativo > impactante > interativo

> design > arte > publicidade

> processo > velocidade > rotatividade

> acessibilidade > intuição > provocação

> tecnologia > tecnologia > tecnologia

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.

MÍDIA DISPLAY

Sound of Streets Pjotro Pinóquio Poliflor

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.

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

@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

@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

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

@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

Digitalks producao

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Digitalks producao

Ähnlich wie Digitalks producao (20)

Mehr von Euripedes Magalhães

Mehr von Euripedes Magalhães (18)

Digitalks producao