Landing Page para Duloren USA

Eis aí um tema que estimula a criatividade da gente e faz os layouts ficarem mais bonitos, as landing pages que produzimos para o representante oficial da Duloren nos Esatdos Unidos.

Totalmente desenvolvida em HTML, como dita a regra das melhores práticas de um boa landing page, pois deixa todo o conteúdo visível e disponível para a indexação pelos robôs e "spiders" dos mecanismos de busca.
No intuito de manter o usuário sempre na landing page, optamos por utilizar o componente visualizador de conteúdos Clearbox para os links dos menus de conteúdo da landing page. Assim estes conteúdos abrem em camadas (janelas modais) sobre a página principal e através de um menu de botões de avançar e voltar é possível navegar entre os links do menu.

A seguir pode ser observado o detalhe da navegação entre os conteúdos no rodapé da camada gerada pelo Clearbox.

 

O código fonte da landing page foi todo otimizado para atrair os "robots" e "spiders" dos mecanismos de busca, como parte do serviço de SEO agregado ao projeto.

Alguns detalhes da criação e complementos do design da landig page ficaram por conta do padrão de fundo, aplicado à declaração "background" do CSS.

A tipologia manuscrita para os títulos "Edwardian Script", uma fonte "Open Type", foi convertida em formato PNG (Portable Network Graphics) com transparência e receberam as tag "alt" e "title" para descrever o os respectivos textos/conteúdos para leitura de máquina e acessibilidade.

Para o conceito do projeto, as gradações de tons de vermelho bordô, marrom e preto foram escolhidas para conferir o clima sensual e estimular o desejo de compra das lingeries Duloren USA.

A landing page das lingeries Duloren USA pode ser vista em: http://www.dulorenusa.com/lingerie/index.html

Para saber mais sobre criação e desenvolvimento de landing pages visite: w3maker.com.br

Uma logomarca com ventos de popa rasa

Começamos o ano com a aprovação da logomarca criada para o Veleiro Clicquot, com ventos de popa rasa. Isto porque, a aprovação foi de primeira, com ventos soprando a nosso favor.
O briefing foi "criação livre" - o sonho de todo designer!
O proprietário do veleiro, Ivan Gelabert só fez um pedido: que em algum elemento da logomarca, fôsse utilizada a cor laranja, uma franca associação com a famosa marca de Champagne, ele deve ter lá seus motivos, mas não investigamos isso.

Criação livre é como velejar ao vento, aprumamos o leme, apontamos os lápis, sacamos o bloco de croquis e partimos para os esboços. A definição dos elementos a serem utilizados na logomarca surgiu num caderno de anotações.

Sol, velas, ondas do mar, proa do barco, borbulhas e família de fonte para o logotipo. Feito isto, partimos para o bom e velho Corel Draw para vetorizar e compor os elementos da logomarca. Buscamos no Google uma referência de um veleiro similar ao Cliquot, para ter uma amostra das velas do barco, já que o Clicquot se acha no estaleiro recebendo pintura nova e pequenos consertos.

Os estudos de forma, cores e logotipo começaram a ser feitos e de imediato surgiu aquela que seria a logomarca aprovada. Outros estudos e variações foram feitos para apresentação como opções. Habitualmente a w3maker apresenta três opções de logomarcas para aprovação dos clientes.

Os layouts foram apresentados em uma página montada em HTML no servidor da w3maker para que o nosso cliente, Ivan Gelabert e as pessoas a quem ele pediria opiniões pudessem facilmente acessar de seus computadores, via internet.

A versão aprovada recebeu alguns retoques após a reunião de apresentação com nosso cliente. O layout aprovado foi definido como a versão para aplicação na popa do veleiro e foi desenvolvida uma nova versão com diagramação horizontal, para aplicações nas proas de bombordo e estibordo.

Sobre algumas fotografias do veleiro no estaleiro, fizemos a simulação de aplicação das duas versões da logomarca, sendo que a da popa tem a restrição de largura da escada de acesso e, as da proa, deveriam se distanciar do limite da linha d'água com uma certa folga, considerando o veleiro com a capacidade máxima de passageiros.

 

A logomarca para o Veleiro Clicquot, criada pela w3maker em breve vai singrar os mares!

Saiba mais sobre criação de logomarcas em http://www.w3maker.com.br/

Logomarca para "International Association of Yoga & Ayurveda - IAYA"

Criação de Logomarca ou Logotipo hoje, é uma seara complexa - todo mundo é designer, todo mundo tem milhares de fontes em seus computadores e, escolher uma fonte bacana não basta para criar uma logomarca.
Logomarca é um neologismo usado de forma empírica e genérica, para designar logotipo, símbolo ou marca, sem que haja consenso nem precisão absoluta ao que ele se refere, se apenas ao símbolo, ao logotipo ou ao sinal misto (combinação de ambos). O seu uso está popularizado no Brasil e o termo consta do dicionário Aurélio e é considerado correto pela Linguística. No entanto, o termo é visto como inadequado por diversos designers por não possuir a necessária precisão. (Fonte: Wikipedia)

Logotipo, refere-se à forma particular como o nome da marca é representado graficamente, pela escolha ou desenho de uma tipografia específica. É um dos elementos gráficos de composição de uma marca, algumas vezes é o único, tornando-se a principal representação gráfica da mesma. (Fonte: Wikipedia)

Vamos ao que importa: A w3maker foi contratada para criar a logomarca da "International Association of Yoga & Ayurveda - IAYA" - entidade credenciada internacionalmente com certificação dos maiores mestres do Yoga e Ayurveda da Índia.

Um projeto no mínimo com inúmeras variáveis e envolvimentos místicos cuja imagem final, deveria transmitir através de seu símbolo, diversos aspectos da espiritualidade.

O "briefing" enviado pela diretora no Brasil da Associação, Sheila Quinttaneiro, considerava especificações desde cores e suas simbologias, até imagens que possuem forte significado para o hinduísmo.

Optamos por fazer nossas pesquisas sobre as simbologias, de forma isenta e imparcial. Cada pesquisa feita foi apresentada e discutida com a Sheila, para definição de qual caminho seguir na linha gráfica.

Dois elementos foram eleitos para a criação do símbolo:

- A Flor de Lótus - representa a espiritualidade e a evolução; ela nasce no lodo e resplandesce com a beleza da sua flor;

- Om - símbolo de Deus, representa o som cósmico de Deus no Universo.

Uau! Por onde começar?
O caminho mais óbvio foi fazer algumas montagens com os elementos para testar o equilibrio e a harmonia da combinação das formas.

A segunda opção se mostrou a mais equilibrada mas faltava alguma coisa que juntasse tudo, como numa "associação". O símbolo de "Om" apesar de seu aspecto gestual, ainda estava graficamente representado em sua forma mais comum. Fizemos então um estudo para suavizar suas formas e torná-lo mais orgânico, por assim dizer.

A "Flor de Lótus" precisava de um eixo e foi aprimorada para ganhar mais imponência.

Voltamos então a juntar os dois elementos, mas ainda faltava alguma coisa que os unisse, que os envolvesse, como numa associação.

Foi então que surgiu a idéia de envolver o símbolo de "Om" com um coração estilizado, como se fosse o bulbo da "Flôr de Lótus". A simbologia estava completa, "Deus no Coração"!

As cores escolhidas seguiram os preceitos e significados hinduístas:

- Lilás na Flôr de Lótus - é a cor que representa a consciência cósmica;

- Azul Marinho no Om dentro do Coração - é a cor que representa a interiorização da consciência.

Para compor a logomarca, o nome da associação foi escrito todo em caixa alta com a fonte MS Candara, com variação de pesos, Normal e Bold e espacejamento entre letras de 20%.
Atualmente uma logomarca precisa ser pensada para aplicações que vão além dos tradicionais itens de papelaria, uniformes, frota, etc. Ela tem que atender às diversas aplicações do mundo virtual, ícones de desktop, ícones da barra de navegação, patterns, backgrounds, cabeçalhos de documentos eletrônicos e por aí adiante.

Por fim, para quem olha esta logomarca pronta, não imagina que tantos conceitos e estudos de forma foram necessários para um resultado final. Para os que desconhecem a simbologia hinduísta, esta pode parecer apenas uma simples logomarca, mas para os que conhecem, seu símbolo tem muito a dizer e, com certeza trará boa sorte à esta associação.

Para saber mais sobre criação de logomarcas: w3maker.com.br

Criação de Anúncio - Shiva Studio

Nossa formação original remonta aos tempos em que atuávamos na publicidade, desde 1995 caímos na rede e este serviço ficou em "standby". Vira e mexe os clientes pedem para a gente fazer um anúncio, é quando então a veia publicitária pulsa forte.

Foi o caso deste anúncio para o Shiva Studio de Yoga e Ayurveda, com o Curso de Imersão em Yoga que será realizado em Búzios - RJ.

O anúncio é veiculado na revista Prana Yoga Journal nas edições 39 e 40, uma das publicações mais importantes do Yoga no Brasil.

Para este anúncio, usamos a técnica do "alltype" para transmitir toda a informação sobre o curso, no título do anúncio, evitando assim o tradicional texto de apoio ao título.
Com variações de corpo de letra e uso de cores, escolhemos a Myriad Pro - Open Type, destacamos em amarelo as informações principais. As demais informações receberam a tonalidade de verde e bege para criar um segundo plano. Foi definida uma largura e tudo foi alinhado de forma justificada.

A escolha das fotos fornecidas pela Sheila Quinttaneiro foi decisiva na força de comunicação do layout do anúncio. A imagem principal, uma variação da posição do Guerreiro, sugere toda a linha de ação e dirige o olhar de quem vê o anúncio, para as informações. Foi feito um corte na foto para deixar o espaço necessário para o texto à esquerda.

Fotos complementares menores, de outras posições de Yoga, reforçaram a mensagem do anúncio.

Saiba mais sobre criação de anúncios - w3maker.com.br

Folder Monitoramento Remoto - Hidromec

A w3maker está trabalhando no layout do folder de "Monitoramento Remoto de Estações Fluviométricas - com transmissão via GSM/GPRS e Satélite" para a Hidromec.
O layout utiliza ilustrações e conceito de tipografia com diferenças de corpo de letra para os títulos; foi apresentado ontem para os diretores Marcio e Bruno.

Utilizando imagens de alto impacto visual, tem por finalidade apresentar de forma breve o sistema de monitoramento da Hidromec em feiras e eventos do segmento de Hidrometria, Meteorologia e Hidrologia.

Alguns detalhes do layout:

Em breve o projeto completo.

Saiba mais sobre criação de catálogos, folders e material de comunicação: w3maker.com.br

Logomarca, Logotipo... a w3maker tira de letra

Na reunião de briefing para a criação da logomarca e da identidade visual da nova sorveteria "premium" que será inaugurada no Shopping Città América - Rio de Janeiro, nosso cliente Alexandre Kepler Neitzke, não tinha ainda uma definição do nome.
Em conversa informal sugerimos, em tom de brincadeira, "SORVETTI" já que se trata de uma sorveteria artesanal italiana. O tom de brincadeira deveu-se ao fato de acreditarmos que este nome não estaria disponível por exemplo, para o registro de domínios na internet.
Para nossa surprêsa, os domínios estavam disponíveis para registro nas extensões .COM, .COM.BR e .NET e foram imediatamente registrados. O registro junto ao INPI foi orientado pela w3maker e um freelancer foi contratado para dar entrada no processo, acompanhar e cuidar de toda a documentação.

Na criação de uma logomarca, o desafio sempre é desenhar um símbolo que indique logo à primeira vista, qual o ramo de atividade, independente do que estiver escrito no logotipo.

Temos por hábito fazer esboços a lápis, antes de partir para o computador. As idéias foram surgindo com traços gestuais focados na letra "S".

Imediatamente vimos que a letra "S", trabalhada de forma mais "orgânica" sugeria o movimento da massa de um sorvete. BINGO!

Surgia ali o símbolo que não deixará dúvidas de que estamos falando de "Sorvete".

Próximo passo, associar uma tipologia, já no computador. Antes porém, o traço da letra "S" foi aprimorado, digitalizado e vetorizado, para se associar ao estudo de fontes de letras.

Percebemos, ao finalizar a vetorização, que embora a imagem do sorvete simbolizada pela letra "S" fôsse bastante evidente, faltava movimento e personalidade. Adicionamos então, linhas ao estilo de movimento dos "cartoons" e luzes que conferiram volume ao símbolo.

Foram apresentadas três opções de tipologia associadas ao símbolo, compondo a logomarca e, o Alexandre e o Celso Katsumata, aprovaram a versão a seguir:

Por se tratar de um produto que terá sua versão "Premium" a logomarca receberá como formato opcional, a aplicação desta palavra, em tipologia manuscrita, agregada ao conjunto.

A escolha das cores tem uma associação por derivação de tonalidades, com as cores da bandeira italiana (vermelho, branco e verde).

A silhueta da letra "S", já nos estudos a lápis, sugeriu a criação de um padrão decorativo que será utilizado em elementos tais como embalagens, cardápios, uniformes, balcões e etc.

A loja Sorvetti está em fase de construção, o projeto visual está em fase de detalhamento. A aplicação correta da logomarca será definida através de seu Manual de Identidade Visual.

 

Situações corretas e incorretas, dimensões, definição de tamanhos mínimos, de escalas de cores para impressão gráfica, cores de tela e alfa decimais para internet, aplicações em uniformes, utensílios e muito mais estão catalogadas no Manual.

Para saber mais sobre criação de logomarcas, visite w3maker.

w3maker entre as feras do CSS

Acabamos de receber a notícia de que o site da w3maker foi contemplado com a Menção Honrosa do CSS Awards! Estamos entre as feras mundiais do CSS!
E o que é melhor, concorrendo ao "Site do Dia".

O CSS Awards é uma galeria dos sites de maior prestígio no mundo, criados com CSS - para quem não sabe, CSS é a sigla em inglês de "Cascading Style Sheet" ou "Folha de Estilos em Cascata", que é um conjuto de comandos que definem os estilos para todos os elementos da montagem e do layout de um site.

Um júri internacional composto pelos mais renomados designers, agências de internet e blogueiros julgam e premiam os melhores sites feitos com CSS.

O diferencial do layout do site da w3maker é que foi concebido e construído como uma "landing page" (página de aterrissagem), fugindo completamente dos padrões de um site convencional. Exibindo explicitamente o conteúdo "criação de sites".

Um dos destaques da criação do site w3maker é o menu de navegação, totalmente desenhado usando declarações de CSS para a tipografia e o alinhamento dos elementos gráficos. Composto de duas listas simples, com declarações individuais para cada elemento de texto.

A chamada principal do site, inspirada no estilo dos layouts publicitários "all type", foi construída com variações de tamanhos de fontes, cores e com o uso de capitulares para destacar cada palavra; também foram utilizadas as "tags" H1 e H2 que funcionam como "chamarizes" para os robôs de busca. No mais, uma sutil sobreposição de camadas e posicionamentos, conferiram movimento para um elemento que a maioria dos designers só consegue no Photoshop, gerando uma imagem do texto.

Simples assim, mas com forte relacionamento de recursos de CSS.

O elemento de apoio, uma ilustração de um balão de quadrinhos sobreposto a uma colagem de códigos HTML, cumpre a função de informar sobre a experiência da w3maker com criação de sites, que vem desde os primórdios da Internet comercial no Brasil, no entanto o texto, que parece fazer parte da ilustração, é outra montagem comandada pelo CSS.

 Por se tratar do site de portfolio da w3maker, não poderia deixar de apresentar uma galeria de imagens com os sites desenvolvidos para seus clientes. Utilizando o componete "Lightbox" que igualmente é todo definido e montado a partir de declarações em CSS.

Agora fica a nossa torcida para que o site da w3maker seja eleito o site do dia do CSS Awards e com isso ganhe evidência entre os melhores do CSS mundial.

In CSS we trust!

Para saber mais sobre criação de sites com CSS e conhecer nosso portfolio viste: w3maker