Social Media Web Design

Aula 1

Social Media Marketing

_Ricardo Flores

_Produtor de Videojogos: Biodroid Productions

_Especialista em Mobile Media

Responsável por:

> Popota SuperStar

> Super Sorrisos

> Jantes em Brasa

> Planeta BES

> Billabong Surf Trip

> _

_Billabong Social Media Project:

+ Facebook US/Internacional

+ Facebook do Jogo

+ Twitter

+ Youtube

+ Blogs

+ Parcerias

Equipa de 3 Pessoas: USA + Portugal + Austrália

Ínicio Junho de 2010 > Mais 570.000 Fans, Média de 327 Likes por Post

Programa: Social Media Web Design

> O Poder do Azul

> Ferramentas Sociais:

> Facebook

> Twitter

> YouTube

> Update Social

> Ghost Writing

> Game Media

Programa: Social Media WebDesign

> O Poder do Azul

> Ferramentas Sociais:

> Facebook: 1ª Aula

> Twitter: 2ª Aula

> YouTube: 2ª Aula

> Update Social: 3ª Aula

> Ghost Writing: 3ª Aula

> Game Media: 4ª Aula

Avaliação

>Trabalho de Grupo:

Costumização Facebook, Twitter e Youtube

Desenvolver uma estratégia integrada de Social Media,

apresentando os Mockups das acções e os objectivos

desejados.

O poder do Azul

A última alteração ao design de páginas no Facebook aconteceu

apenas em Março passado.

Antes desta alteração o que se podia fazer era relativamente

limitado:

-Criação de Tabs;

-Integração com páginas externas;

- Fotografia do Perfil.

A novas regras de costumização dão ao utilizador o controle de mais

de 2/3 da Página!

Nome da Página

Nome da Página

PhotoStrip

Nome da Página

PhotoStrip

Wall

Nome da Página

PhotoStrip

Wall

Foto

do

Perfil

Nome da Página

PhotoStrip

Wall

Foto

do

Perfil

Navegação

Nome da Página

PhotoStrip

Wall

Foto

do

Perfil

Navegação

About

Nome da Página

PhotoStrip

Wall

Foto

do

Perfil

Navegação

About

Nº Fans

Nome da Página

PhotoStrip

Wall

Foto do

Perfil

Navegação

About

Nº Fans

Favoritos

_Info Tab

_Photo Albums

_Youtube Tab

_isurfbecause Tab

Fotografia do Perfil _1ª Parte

A fotografia do perfil no topo superior esquerdo de cada página

funciona como um “Logo” sendo o elemento principal de branding ao

nosso dispor.

O tamanho máximo permitido, neste momento é de 180x540 píxeis.

É usual utilizar-se toda a largura disponível, mas já a

altura/comprimento da fotografia vai depender dos objectivos

comunicacionais da página.

Nos exemplos seguintes analisamos a utilização e as vantagens e

desvantagens deste elemento.

Fotografia do Perfil_ 2ª Parte

Para além da questão do equilíbrio visual da página, a fotografia de

perfil escolhida influência directamente outros 2 elementos da

Página:

- O Thumbnail do Perfil:

• Essencial é a imagem de referência de cada post

- PhotoStrip:

• Imagens que acompanham o “Logo” no topo da página

principal

Thumbnail do Perfil

Funciona como um ICON que aparece junto de cada post efectuado na

“nossa” Página, mas também em páginas externas quando as

comentamos ou recomendamos.

É um elemento que não pode ser negligenciado e deixado ao acaso.

O Thumbnail deve reflectir o carácter profissional e sério de uma

página, Por defeito o Facebook produz um quadrado de 50x50 píxeis

que selecciona de uma parte da fotografia do perfil. Esta selecção

deve ser quase sempre corrigida e melhorada!

_Original

_Facebook

_Corrigido

PhotoStrip: a novidade

A verdade é que o Photostrip é um elemento que já estava disponível

dos perfis pessoais há algum tempo, mas apenas recentemente ficou

disponível para as páginas empresariais.

A grande diferença entre as páginas pessoais e empresariais é que no

primeiro caso podemos ordenar as 5 imagens de modo a que

funcionem como um elemento comunicacional.

No caso das empresas não podemos controlar directamente o modo como as 5 imagens aparecem no Photostrip.

Contudo as marcas e produtos devem utilizar estes elementos como potenciadores de comunicação colocando apenas imagens que realmente sejam significativas e relevantes.

De um modo geral as imagens do PhotoStrip devem:

• Não depender de uma ordem específica

• Complementar a imagem do perfil

• Complementar-se entre si (como num álbum)

• Fornecer informação sobre a Marca, Produto ou serviço

• Ser de leitura simples e directa (sem ruído visual)

_Exemplos de produto

_Produto ?

_Mais Comunicação

_Família de Produtos

_Contéudo e mensagem

_Design

TABs: costumização sem barreiras

O desenho de TABs para o Facebook já não é de todo uma novidade e

foi desde bem cedo a ferramenta preferida das agências.

Porquê?

TABs: costumização sem barreiras

O desenho de TABs para o Facebook já não é de todo uma novidade e

foi desde bem cedo a ferramenta preferida das agências.

> Funcionava e ainda funciona como a introdução de um elemento

externo totalmente controlado por quem o cria e que se insere dentro

de uma página de Facebook

Logo o approach dos Web Designers foi imediato!

TABs: costumização sem barreiras

Mas o próprio Facebook tem vindo a alterar este elemento tentando disciplinar a sua utilização, o que devemos ter em conta:

• A Linguagem de programação utilizada / Tecnologia (Evitar Flash?)

• Funciona ou não como parte fundamental do Branding da página?

• Dimensão da Tab e dos conteúdos dentro desta (525x525 píxeis)

• Funciona como “Land Page” ?

• É visível apenas a Fans ?

• Há conteúdos diferentes para não Fans ?

A resposta correcta a estas questões pode aumentar a visibilidade e interactividade de uma Página.

TABs : Como criar

O Facebook está a encorajar todos os administradores de páginas a

usarem os chamados iFrames, em vez do seu próprio FBML (HTML)

estático ou FBJS (Javascript).

As páginas baseadas em iFrames, porque não estão alojadas nos

servidores do Facebook, são capazes de suportar mais formatos e

tecnologias Web podendo criar e dar mais funcionalidades às páginas

no Facebook.

O único senão é a maior dependência técnica da programação!

A criação de iFrames requer conhecimentos avançados, mas existem

pequenas ferramentas que podem ajudar:

TABs : Landing Page

Ter ou não ter uma Landing Page no Facebook é mais uma questão de estratégia e objectivos de comunicação do que uma necessidade em si!

Do ponto de vista de Marketing as marcas “adoram” as já clássicas páginas de entrada … mas os utilizadores normalmente nem por isso, embora sejam o ponto de contacto que mais “Likes” é capaz de gerar.

Criar uma Landing Page é uma tarefa simples no actual Facebook.

Os administradores podem escolher qual a TAB que por defeito vai ser vista por visitantes que não sejam FANs

(Edit Page > Manage Permissions > Default Landing Tab)

>

Navegação: Organização de informação

A barra de navegação está agora do lado esquerdo dando ao utilizador

uma maior semelhança com um tradicional website. Podemos utilizar

36 caracteres no nome de cada Link (apenas 12 anteriormente) e

temos a liberdade de mostrar um icon por cada Link.

A utilização de icons na navegação dá ainda mais importância à

questão do design e branding da página, não devemos deixar links

sem icons para além dos que são gerados pelo Facebook por defeito.

_Bad _Good

Navegação: Organização de informação

Organizar a Barra de navegação é das actividades mais simples na

gestão de uma página de Facebook, bastando seleccionar “edit” por

debaixo da barra de navegação.

A organização deve ser coerente e ser um espelho do que se quer

passar, mostrando o grau de importância de cada um dos Links na

página.

Os elementos mais antigos e ultrapassados devem ser escondidos

(“more”) uma vez que o Facebook por norma deve significar

novidade.

Likes e Favoritos

As páginas Favoritas aparecem no lado esquerdo logo baixo do nº de

Fans.

Representam outras páginas que a nossa “página gostou”, não

confundir com os Likes dos nossos perfis pessoais: “Add to my page’s

favourites” .

Podemos colocar até 5 páginas em destaque, servindo como mais uma

oportunidade de promoção ou de ligação a outros produtos ou

serviços associados.

A edição desta área é feita no

“Edit Page” > “Featured” > “Edit featured likes”

Likes e Favoritos

About – Quem somos ?

Para o fim deixei a pequena caixa que podemos costumizar e que diz

respeito a quem somos ou o porquê de estarmos no Facebook.

É um item que chegou a sair das “features” actuais mas que depois de

umas 3 semanas acabou por voltar.

Aqui podemos colocar um pequeno texto, não mais que 240

caracteres (incluindo espaços), mas dos quais apenas os primeiros 75

são lidos directamente sem necessidade de carregar no link “More”.

Não devem ser colocados links neste texto, uma vez que não

ficaram activos.

About – Quem somos ?