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.

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?

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.

$$

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$

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

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

EURIPEDES MAGALHÃES - @EURIPEDESM

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.

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

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

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

CRONOGRAMA

EURIPEDES MAGALHÃES - @EURIPEDESM

Arquitetura de Informação

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.

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)

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.

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

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.

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

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

ARQUITETURA DE INFORMAÇÃO

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.

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

ARQUITETURA DE INFORMAÇÃO - WIREFRAME

Vivo co-piloto:

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

ARQUITETURA DE INFORMAÇÃO - WIREFRAME

ARQUITETURA DE INFORMAÇÃO - WIREFRAME

EURIPEDES MAGALHÃES - @EURIPEDESM

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.

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

VW FOX

MEMÓRIA HUMANA VS COMPUTACIONAL

Faber Ludens

SELETIVA INDISCRIMINADA

EVOLUTIVA ESTÁVEL

ASSOCIATIVA DISCRETA

Norman (2006) - Conhecimento na cabeça

Conhecimento no mundo

Conhecimento no mundo

Conhecimento no mundo

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

Click Tale

Depois

Antes - Recorde

Depois - Recorde

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.

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

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

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

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

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.

EURIPEDES MAGALHÃES - @EURIPEDESM

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 àsquais é possível individualizá-la”

Dicionário Houaiss da Língua Portuguesa

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

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

ANTES - DEPOIS

INTERNET

EM QUAIS MATERIAIS CONSISTEM A ID?

• Símbolo

• Logotipo

• Cor

• Tipografia

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

Jair Alves

...E MAIS DO QUE NUNCA:

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

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.

DESIGN LÍQUIDO

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

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

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

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

Pablo Picasso

EXPERIMENTAÇÃO

Rafic Farah

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.

“O norte do designer é a cultura”

Claudio Ferlauto

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)

COMO SER CRIATIVO

“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

• Concorrentes

• Mercado semelhante

• Problemas da marca existente

• Qualidades da marca existente

• Objetivos primários e secundários

PARA ANALISAR

DEFINIÇÃO DO PROBLEMA

• QUAL A FUNCIONALIDADE DO PRODUTO/SERVIÇO?

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

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?

PROCESSO CRIATIVO POR BRUNO MUNARI

DF CD CRIATIVIDADE

• PAINEL SEMÂNTICO

• RELAÇÕES VISUAIS

• RELAÇÕES MUSICAIS

• CONCEITOS DE DESIGN

PROCESSO CRIATIVO POR BRUNO MUNARI

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

Fonte: http://www.arthursoares.com

PAINEL SEMÂNTICO - EXEMPLOS

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

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

A TIPOGRAFIA NAS MARCAS

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

Marcas sempre presentes no ranking da Interbrand.

Simplicidade!!!

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.

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.

EURIPEDES MAGALHÃES - @EURIPEDESM

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

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

fonte: http://www.agenciasoft.com.br/desenvolvimento-web/adaptacao-para-sites-dinamicos-cms/

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/

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

> informativo

> design

> processo

> acessibilidade

> tecnologia

> impactante

> arte

> velocidade

> intuição

> tecnologia

> interativo

> publicidade

> rotatividade

> provocação

> tecnologia

SITES HOTSITES BANNERS

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.

Sound of Streets Pjotro Pinóquio Poliflor

MÍDIA DISPLAY

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

• 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

@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

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

@EURIPEDESM

web: www.euripedes.com.brmail: euripedes@euripedes.com.brtwitter: @euripedesm

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

Obrigado