E-mail MKT – Seabourn

E-mail MKT produzido para promover a promoção de ‘up grade’ de cabine para suíte com varanda. Produzido layout e programação. Reparem na imagem de quando o e-mail ainda não estão completamente carregado. Vejam como a programação conta bastante para suprir a ausência das imagens. este trabalho aumentou significativamente o número de aberturas de e-mails, cliques e cliques sem carregamento. Legal né? Importante chegar o mais próximo do real, usando cores que contem na imagem. Isso estimula o usuário a se interessar.

web-peças-portfolio

 

web-peças-portfolio-mail

 

2014-10-16 17_51_39-Qualitours

Anúncios

Apresentação interna – feita no Prezi

Este é apenas um modelo de apresentação criada na minha época de Agaxtur, para mostrar à diretoria da época as atuações do depto. Marketing.

O recurso utilizado foi o Prezi. Quem não conhece, vale a pena testar. É bom sair das ‘mesmices’ do PPT de vez em quando.

 

 

E aí pessoal, não é legal?

Obrigado e abraço a todos.

Campanha Ganhe Mais com Luxo

Esta campanha foi desenvolvida no final de 2013 onde pude participar de todos os processos de criação. Estive presente em toda negociação de margens para premiação junto com cada cia. marítima e departamentos financeiros, desenvolvi o nome e identidade visual, diagramação do flyer, programação do hotsite, direção de arte, conceitos, acompanhamento de vendas, solicitação de prêmio, entrega da premiação aos agentes de viagens e mensuração de resultado.

Vejam abaixo como ficou a identidade da campanha:

 

Logotipo da campanha

ganhe-mais-logo

 

 

Flyer (frente e verso) com QR Code

2014-04-14 12_33_28-Filipeta_Campanha_GanheMais-fechado.pdf - Adobe Acrobat Pro 2014-04-14 12_33_44-Filipeta_Campanha_GanheMais-fechado.pdf - Adobe Acrobat Pro

Cartão Vale-prêmio

cartao_ganhe_mais_com_luxo

 

Anúncio veiculado no Jornal Panrotas

2014-04-14 12_34_46-Anuncio_panrotas_edLuxo_26x10cm_2013_Nov.pdf - Adobe Acrobat Pro

 

Hotsite da campanha. (com design responsivo – que se alinha para qualquer resolução, inclusive Mobile)

2014-04-14 12_38_37-Ganhe + com Luxo 2014-04-14 12_39_23- 2014-04-14 12_39_53-Program Manager 2014-04-14 12_40_26-Qualitours_novo - site1364476035@ftp.site1364476035.provisorio.ws - FileZilla

 

E-mail Marketing

2014-04-14 12_53_11-Promoção GANHE MAIS COM LUXO.Confira! - Mensagem (HTML)

 

Obrigado pessoal.

Espero que tenha inspirado muita gente aí… Deixem comentários. Abraço.

Landing Page Regent Seven Seas

Esta Landing Page que fiz para a Qualitours foi a primeira de uma série de outras. Eles simplesmente são donos do domínio www.cruzeirosmaritimos.com.br. Fantástico não?

Desta forma, fizemos a landing www.cruzeirosmaritimos.com.br/regent.

Landing é Landing… simples HTML, CSS, pouquinho de Javascript. Call to action, contatos e nada mais…

Com ela, aumentamos nossos leads.

Vejam layout:

layout_LP_regent_v2

Novo Site Agaxtur Turismo (2013)

Mais uma vez participei de um grande projeto e agora está lançado!

Tive grande participação no desenvolvimento deste portal de viagens, desde arquitetura, layout e programação à controle e gerenciamento de projeto.

Este site está totalmente integrado à plataforma Tripoint (um sistema de gestão para empresas do Turismo).

Meu agradecimento especial neste projeto é para Raphael Calasso. Profissional super competente que abraçou definitivamente a causa e hoje posso dizer que ele é o verdadeiro “dono” desta obra. Obrigado por tudo parceiro.

O site na versão clientes a princípio será lançado sem pagamento online, no entanto a versão B2B para agentes de viagens, já permite o e-commerce.

_2013-06-04_10-03-01

_2013-06-04_10-03-46

_2013-06-04_10-04-27

Sistema onde os códigos são armazenados e arquitetados:

EstruturaConteudos_2013-06-04_10-35-47

Obrigado reconhecimento do trabalho pessoal.

Abraços!

Site África do Sul – Evento Serasa Experian

Este site que desenvolvi destaca-se pelo uso principalmente de JavaScript.

Trata-se de linhas de código bem simples retratando apenas um de muitos detalhes que podem ser feitos com essa linguagem de programação client side.

Os ‘overs’ assim como os ‘hiddens’, são JavaScript. E utilizei também uma biblioteca JQuery bastante conhecida hoje no mercado que é o Shadowbox.

Não precisei trabalhar muito na Home, uma vez que a home ja existe na própria intranet do cliente. Quando clicado em dados da viagem, ele acessa este hotsite explicativo.

Como disse, sem muito movimento ou grafismos avançados. O bacana desse site é que é possível desenvolver com XHTML, CSS e JavaScript, sites simples, bonitos, funcionais e com pouco código.

 

Fica aí a baixo uma “palhinha” do JavaScript aplicado nos menus:

Deixem seus comentários e sugestões.

Obrigado pessoal!

Twitter Follow Button – Botão seguir no WordPress

A informação deste post abaixo vem do próprio WordPress. Apenas achei bacana compartilhar a todos vocês que o utilizam também.

Abraços!

Se gostarem, cliquem no Follow aqui de cima e me siga no twitter!

_________________________________________________________________

You can display a Twitter Follow Button to make it easier for your readers to follow you on Twitter.

Simply copy and paste one of the following shortcodes into a post, page, or text widget. Be sure to use your own Twitter username in place of wordpressdotcom.

There are several ways to customize your Twitter Follow Button. You can:

Display a Follow Button and a link to your Twitter page:

[ twitter-follow screen_name=’wordpressdotcom’ ]
(obs: tire estes espaços entre os colchetes para funcionar)

Only display a Follow Button:

[ twitter-follow screen_name=’wordpressdotcom’ show_screen_name=’no’ ]
(obs: tire estes espaços entre os colchetes para funcionar)

Display a link to your Twitter page and a count of your Twitter followers:

[ twitter-follow screen_name=’wordpressdotcom’ show_count=’yes’ ]
(obs: tire estes espaços entre os colchetes para funcionar)

Change the color of your followers count with a HEX color code:

[ twitter-follow screen_name=’wordpressdotcom’ show_count=’yes’ text_color=’00ccff’ ]
(obs: tire estes espaços entre os colchetes para funcionar)

Change the color of your username link with a HEX color code:

[ twitter-follow screen_name=’wordpressdotcom’ link_color=’00ccff’ ]
(obs: tire estes espaços entre os colchetes para funcionar)

Display a grey button instead of a blue one:

[ twitter-follow screen_name=’wordpressdotcom’ button_color=’grey’ ]
(obs: tire estes espaços entre os colchetes para funcionar)

Use as many or as few of these options as you want. Note that the Twitter Follow Button also appears on Tweets embedded with Twitter Blackbird Pie, and you can even add it to the Twitter Widget in your sidebar.

Fonte: http://en.support.wordpress.com/twitter-follow-button/

Criar Thumbs no Photoshop utilizando Actions

Estamos ai mais uma vez pessoal.

Hoje trabalharemos com Actions dentro do Photoshop.

Esta técnica é muito utilizada para criação de thumbs para sites. Por exemplo: temos as fotos ampliadas e queremos que a princípio apareçam reduzidas, onde dentro de seu site ao clicar, elas se expandem para que veja grande na tela.

Desta forma, a utilização de Actions facilita bastante se você for trabalhar com uma quantidade muito grande de imagens. Pois você faz a técnica uma unica vez e depois aplica para todas as demais, deixando com que a tecnologia faça o resto por você.

Vamos começar!!

Descrição: Criação de thumbs utilizando actions

Versão: Photoshop CS5, em inglês.

Grau de dificuldade: 9,0

Tutorial produzido ao som de: Sugar Ray – Answer the phone

1- passo: Escolha pelo menos 3 imagens grandes para podermos utilizar. Eu escolhi 3 imagens de Bariloche (Argentina). Vejam abaixo:

2- passo: Após escolhidas as fotos que vamos utilizar, vá na sua Área de Trabalho (Desktop) e crie uma pasta com um nome que depois você reconheça que é para lá onde serão salvas suas fotos transformadas pela action. Eu a nomeei de ‘Imagens Convertidas’.


3- passo: Agora arraste e abra todas as fotos no Photoshop.

4- passo: Vamos começar a criar a AÇÃO (action).

Abra o painel de Actions no canto direito superior ou dê um Alt+F9.

Clique na pasta em Criate new set. Depois dê um nome para sua pasta / projeto. Chamarei de ‘Thumbs’, pois é justamente o que faremos. Dê OK!

Agora ao lado da pasta clique em Criate new action. Dê um nome para sua action, no caso deixarei ‘Action1′ conforme ja apareceu para mim. Clique em Record. A partir de agora, tudo que você fizer no photoshop será gravado. Portanto muito cuidado até completar corretamente toda a ação que você quer dar à sua action.

5- passo: Clique em uma das fotos que você esta trabalhando e vamos aplicar as preferências que queremos utilizando uma delas como modelo. Vá em Image > Image Size ou então Ctrl+Alt+i. Digamos que nosso thumb tenha 90 x 60 px. Isso vai variar de acordo com o layout do site de vocês.

6- passo: Vá em File > Save for Web & Devices ou Alt+Shift+Ctrl+S. Escolha as preferências desejadas como GIF ou JPG, qualidade, etc… e dê Save. Agora você deve salvar esta foto SEM RENOMEAR na pasta que criamos no desktop ‘Imagens Convertidas’.

7- passo: Feche esta foto, e ao perguntar se quer salvar, dê NÃO. Para não substituir a foto grande original. Vá novamente ao seu painel de Actions e agora aperte em STOP. A partir de agora não será mais gravado, e suas ações deverão estar conforme imagem abaixo.

8- passo: Agora vá em File > Automate > Batch… Escolha as preferências conforme figura abaixo. Set: escolha sua pasta. Action: é o nome da sua action. Source: Coloque arquivos abertos. Destination: a pasta de destino que criamos no desktop. E por fim OK.


Agora você verá a mágica da tecnologia trabalhar pra você. Como estamos trabalhando com poucas imagens neste exemplo não dará pra curtir ficar vendo o Photoshop trabalhar por muito tempo.

Para finalizar. Abra a pasta que criamos no desktop e lá estarão seus thumbs.

Espero que tenham gostado.

Deixem seus comentários. Abraço!

Quanto tempo os sites famosos demoram pra carregar?

“Freqüentemente tenho problemas em carregar alguns sites bem conhecidos. Como leigo, sempre fico na dúvida se o problema é no meu computador, na minha conexão ou no meu servidor. Imagino de tudo, menos que o problema esteja no design do site… afinal, ele foi feito por profissionais da área, que certamente pensaram em não sobrecarregar a página.
Mas… outro dia descobri algo muito interessante: o
Pingdom. Trata-se de uma ferramenta que testa quanto tempo demora para carregar qualquer página na internet.
Resolvi então testar alguns sites bem conhecidos pra checar as diferenças e fiquei surpreso:

Como vocês podem ver no gráfico acima (cliquem pra dar zoom), testes realizados no dia 11de Abril no Pingdom demostraram que alguns sites demoram mais de 10x pra carregar do que outros.
Entre os bancos, por exemplo, o site da Caixa deixou muito a desejar… a página inicial demorou mais de 20 segundos pra carregar enquanto as do Itaú ou do Banco do Brasil não passaram de 2 segundos (!). Entre os sites de varejo, o Saraiva.com levou o “troféu lerdeza”, pois demorou mais do dobro de tempo pra carregar que seu principal concorrente (Submarino).
Já entre os mega-portais, o destaque positivo vai para o Yahoo, que conseguiu ficar bem abaixo da média de seus possíveis “substitutos”.
Obviamente as escolhas sobre “o que colocar na página inicial” têm alta influência sobre o tempo de abertura e também sobre a audiência. Nem sempre manter a tela mais “clean” possível garantirá maior fluxo de pessoas.  Mas…será que é com uma página que demora mais de 25 segundos pra carregar que o R7 quer bater o G1 (que demorou apenas 10)???
Pelo jeito não sou só eu que sou leigo na área.”

Postado por É ERRANDO QUE SE APRENDE

Fonte: http://errosdemarketing.blogspot.com/2010/04/quanto-tempo-os-sites-famosos-demoram.html

Combinação de cores para Web Designers

Este site que encontrei e tenho utilizado ultimamente é bem bacana para facilitar a vida de Web Designers e Programadores, no que se diz respeito a cores para seu layout web.

Neste site, você consegue fazer várias combinações e testar o que mais agrada sua camapanha.

Color Scheme Designer

Vejam só! Naveguem!

http://colorschemedesigner.com/

Vocês conseguirão os códigos RGB e Hexadecimal das cores. Bem legal!

Deixem seus comentários. Abraço!