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
> O Poder do Azul
> Ferramentas Sociais: > Facebook > Twitter > YouTube > Update Social > Ghost Writing > Game Media
Programa: Social Media Web Design
> 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
Programa: Social Media WebDesign
>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.
Avaliação
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!
O poder do Azul
Nome da Pรกgina
Nome da Pรกgina PhotoStrip
Nome da Pรกgina PhotoStrip
Wall
Nome da Pรกgina PhotoStrip Foto do Perfil
Wall
Nome da Página PhotoStrip Foto do Perfil
Navegação
Wall
Nome da Página PhotoStrip Foto do Perfil
Navegação
About
Wall
Nome da Página PhotoStrip Foto do Perfil
Navegação
About Nº Fans
Wall
Nome da Página PhotoStrip Foto do Perfil
Navegação
About Nº Fans
Favoritos
Wall
_Info Tab
_Photo Albums
_Youtube Tab
_isurfbecause Tab
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 _1ª 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
Fotografia do Perfil_ 2ª Parte
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.
Thumbnail do Perfil
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
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.
PhotoStrip: a novidade
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
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: costumização sem barreiras
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 : Como criar
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)
TABs : Landing Page
>
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
Navegação: Organização de informação
_Good
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.
Navegação: Organização de informação
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
Likes e Favoritos
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 ?
About – Quem somos ?