A cor como ferramenta de desenho web

A cor como ferramenta de desenho web

Um dos fatores chave no desenho de uma página web é o tratamento da cor. As percepções na tela são muito diferentes das que temos em papel. O olho se move de forma diferente e a mente busca estímulos efetivos.

Para que uma página web funcione do ponto de vista de seu desenho nos basearemos na teoria da cor, também levaremos em conta a psicologia da cor, as tendências atuais e as variações que podem existir entre as diferentes configurações dos monitores e a adaptação de uma página a dispositivos móveis.

Ao longo de uma série de artigos iremos completando este conjunto até dar a forma de una ferramenta essencial no desenho de um projeto digital.

Para ir treinando nossas retinas enquanto aprendemos sobre a teoria da cor, usaremos as principais ferramentas online para a escolha de cores.

Círculo cromático

Pessoalmente é a mais técnica de todas as ferramentas, fácil de usar e intuitiva. Ao pé tem as instruções de uso.

 

rueda-cromatica

Círculo cromático

 

Em HTML e CSS sempre trabalharemos com códigos de cor hexadecimais, se já temos escolhida a cor com seu código a introduzimos na aba superior direita sem #, caso contrário a selecionamos no círculo cromático e o processo seguinte é o mesmo.

Uma vez que tenhamos a cor podemos ver:

Tono: es una de las propiedades más importantes del color en estado puro y la que le da el nombre a cada uno.

Saturación: es el matiz que toma el color según la agregación de gris (el color pierde pureza y se aproxima cada vez más al gris).

Luminosidad: es el valor que toma el color dependiendo de la cantidad de blanco (el color se aclara).

Colores Complementarios: dentro del círculo cromático los colores que se sitúan diametralmente opuestos son complementarios entre sí (o sea, que si los mezclamos proporcionalmente nos darán blanco, gris o negro dependiendo si son o no colores luz).

Colores Análogos: están situados a ambos lados de cualquier color del círculo cromático (luego el resultado es de tres colores muy armoniosos entre sí).

Colores triádicos: si tomamos los tres colores resultantes de los vértices de un triángulo equilátero sobre el círculo cromático, tendremos una triada de color (el contraste entre ellos resulta vibrante e intenso).

Colores tetrádicos: se toman cuatro colores, esta vez  superponiendo un rectángulo sobre el círculo de colores, sus vértices darán lugar a dos pares de colores complementarios que combinados resultan a la vez armónicos y chispeantes.

 

Adobe Color CC

Para los que no están acostumbrados a trabajar aún con combinaciones de colores,  Adobe renueva su antigua Kuler y la amplía, puedes hacer búsquedas de paletas y crear la tuya partiendo de una imagen. Sencilla, eficaz y completísima.

Rueda cromática Esquemas de color Adobe Color CC

Seleção de fontes

Seleção de fontes

Seleção de fontes gratuitas que personalizarão suas imagens na web ou em qualquer desenho gráfico:

Reis

tipografia-reis

Esta fonte transmite frescor, jovialidade e ritmo, é uma fonte do tipo Script que em títulos ou imágens com textos curtos se visualiza e lê bem. Infelizmente sua versão é só em maiúsculas, regular e sem acentos, em formatos ttf e otf.

Um truque para que suas imagens fiquem acentuadas corretamente é sobrepor uma camada transparente e com o pincel com tamanho adequado desenhá-los, depois para aperfeiçoar o estilo você pode dar pequenos retoques com a ferramenta borracha.

Foi criada por Marcelo Reis Melo, para baixá-la gratuitamente você precisa se registrar e compartilhá-la no Facebook ou Twitter. É possível usá-la também em projetos comerciais.

Komoda

tipografia-komoda

Fonte elegante e muito atual. Da categoria Sans Serif, é ideal para títulos e cartazes. Sua versão só está disponível em maiúsculas, regular e sem acentuação. Vem em formato otf.

Para acentuar esta fonte, crie uma camada sobre o texto e use a ferramenta linha com os pixels da espessura que for necessária. E para criar o retângulo arredondado vazio, você pode fazer duas figuras com este formato e cores diferentes, uma delas você redimensiona uns pixels a menos que a de baixo, selecione as duas e alinhe os centros verticais e horizontais, rasterize e combine. Por último selecione a figura pequena com a varinha mágica, remova e desselecione.

Você pode baixá-la diretamente e seu uso é tanto pessoal quanto comercial.

Comic Neue

tipografia-comic

As fontes casuais estão na moda. Comic Neue é uma fonte completíssima em estilos, light, light itálico, regular, itálico, negrito e negrito itálico, e em um grande número de idiomas.

O arquivo que se baixa diretamente da páina dos criadores vem em formato otf e versão css e é gratuita para uso pessoal e comercial.

Fale a pena visitar o link e ver o grande trabalho de seus designers.

Langdon

TIPOGRAFÍA-LANGDON

Langdon é muito funcional. É uma pena que só nos seja oferecido um arquivo em formato otf, sem acentos e unicamente em maiúsculas.

A fonte está classificada dentro das sans serif e é muito versátil, podendo criar efeitos diferentes brincando com várias camadas de texto e adicionando estilos. Concretamente o efeito de acima foi feito tratando duas camadas de texto quase sobrepostas, apenas movidas uns pixels na horizontal, a de cima tem a borda da cor do fundo e a de baixo pega a cor do fundo aumentada em luminosidade.

O autor é Esteven Bonner.

Utilização correta das fontes. Regras a seguir

Utilização correta das fontes. Regras a seguir

Nos estudos prévios ao desenho web, um dos fatores mais importantes a se ter em conta é como utilizar as fontes de forma correta:

Uma fonte tipográfica é o conjunto de caracteres, números e símbolos com propriedades comuns que lhe proporcionam um estilo diferenciado. Uma família tipográfica mantém as características da fonte mas com algumas variações na espessura e na altura.

As fontes se dividem nas seguintes categorias:

Serif: são as famílias tipográficas que usam elementos de “derrame” (serifa) nas extremidades dos caracteres. Este desenho foi inventado na antiguidade quando os textos eram entalhados em pedra, para regular e igualar o tamanho das letras. Transmitem calma, domínio e solidez a um texto. Seus caracteres arredondados como c, o, p, b, etc. são um pouco maiores que o resto porque ao se misturarem no texto com os outros se visualizam menores. Classificam-se em Romanas, Glíficas e Caligráficas. As mais utilizadas são Book Antiqua, Bookman Old Style, Courier, Courier New, Garamond, Georgia, Lucida Bright, MS Serif, New York, Times, Times New Roman y Palatino.

Sans Serif: não têm serifa em suas extremidades. Foram criadas na Inglaterra no Século XIX. Têm os vértices retos e o traçado é coincidente. Os textos resultam sóbrios, modernos e de traçado seguro. Sua leitura em textos amplos se torna difícil, por isso seu uso se limita a rótulos ou títulos. Algumas são Arial, Chicago, Monaco, Tahoma, Helvética, Verdana y Univers.

Manuscritas ou script: seu nome já diz tudo. São usadas nos meios digitais como título principal ou para a assinatura do autor. São classificadas em Brush, Caligráfica, Canciller, Causal, Formal, Semi-formal Gráfico, Monoline…. Como exemplos temos Aelfa, Belphebe, Brush, Edwardian Script, English, Killigraphy, Medieval Victoriana y Vivaldi.

Exibição: são as mais atraentes de todas, sugerem épocas da história e aportam grande estilo. São utilizadas exclusivamente para o título. São muito decorativas, Antigua, Art Noveau, Art Deco, etc. As mais utilizadas são Terminator, Star Wars, Final Frontier e Jokerman, criadas pela indústria do entretenimento, arte e tecnologia., Killigraphy, Medieval Victoriana e Vivaldi.

Símbolos: Dingfonts e Dingbats, inserem sinais, padrões, logotipos, decorações, imagens e caracteres que não são alfabéticos. Seu uso é exclusivo para ressaltar e ornamentar textos e em desenhos.

Se você quiser alguns bons exemplos de fontes verifique esta seleção de fontes.

Devemos seguir algumas regras que nos levarão a usar a fonte correta:

Não mesclar fontes: Ao mesclar vários tipos de fonte não comunicamos o que queremos dizer de forma clara e perdemos a unidade da mensagem.

Não abusar dos estilos: se nos excedemos com o uso do negrito, itálico, sublinhado, etc. faremos com que o texto perca distinção e se torne sobrecarregado e pouco elegante.

Optar sempre pela legibilidade: na hora de escolher a fonte correta esta deve ser sempre fácil de se ler, com um desenho simples, sem texturas, sombras ou cores que dificultem sua leitura e compreensão.

“Kerning” e “Traking”: O espaçamento e o entrelinhado ao aproximar ou distanciar os caracteres sem querer, pode diminuir a harmonia do texto e a legibilidade.

Uso adequado da cor: para se conseguir uma leitura adequada levaremos em conta a tonalidade, valor e intensidade da cor usada e a fonte escolhida. Os olhos descansam mais se a leitura se faz sobre um fundo claro, com letra mais escura.

Tamanho: é  recomendável que a dimensão da fonte esteja entre 12 e 14 px.

Parágrafos bem diferenciados: para se conseguir una leitura relaxada onde o olhar percorra as linhas comodamente e sem cansaço, é recomendável formatar um texto com parágrafos cuidados.

Se tivermos em conta estes fatores na escolha da fonte correta para um website, estaremos dando profissionalidade ao design e isso levará nossa página a ter uma baixa taxa de rejeição dos visitantes e ampliará o número de usuários e leitores.

Descobrindo a magia dol copywriting

Descobrindo a magia dol copywriting

A tradução literal de copywriting é a redação de textos publicitários, mas para chegar a isso é preciso fazer primeiro um estudo profundo do produto que queremos vender.

Este processo se converte em uma arte, se além do conhecimento que temos das técnicas a aplicar, utilizamos a percepção do cliente a nosso favor e transmitimos a ele uma mensagem contundente. Isso reforçará ainda mais a opinião positiva do consumidor e assim falamos dessa arte que torna atrativa qualquer coisa que, apresentada de outra maneira, passaria despercebida com toda certeza.

Partiremos da premissa fundamental do marketing de satisfazer os desejos do consumidor e como chegar a poder satisfazê-lo com nosso produto. Para isso, podemos segmentar essa necessidade dependendo de se já temos uma mercadoria, com o qual teremos que buscar um clietne para ela, ou mesmo criando um produto que, com a análise prévia de mercado, deduzimos que tem demanda. Se nos encontramos na primeira situação, teremos que fazer uma segmentação do mercado, saber o perfil do cliente potencial de nossa mercadoria e encontrar o caminho para nos dirigirmos a ele com o máximo de profissionalismo.

O conhecimento das técnicas e ferramentas necessárias para obter uma boa campanha é importantíssimo. Por isso, uma vez analisado o perfil do consumidor poremos mãos à obra na apresentação do produto e depois utilizaremos todos os mecanismos imprescindíveis para fazê-lo chegar a ele. Nosso artigo deve ser de qualidade, com preço competitivo e uma apresentação impecável. A imagem do produto deve destacar o melhor dele e criar uma conexão com o cliente.

Durante todos os artigos que compõem esta seção de copywriting vamos utilizar um produto aleatório como exemplo, sempre o mesmo para podermos observar e comparar a evolução. Neste caso escolhemos uma bicicleta que será vendida em uma loja virtual e criaremos sua campanha.

A página em que será vendida terá todos os elementos técnicos necessários para trazer segurança, confiabilidade e informações ao comprador. Apresentará o produto em um slider em sua página principal, terá sua própria landing page, sua página de compra como os demais produtos, haverá uma campanha por e-mail, nas redes sociais e no Google.

A fotografia como requisito fundamental de percepção:

Podemos representar nosso produto de maneira individual ou colocando em situação prática ao cliente. Individualmente é conveniente mostrar o artigo com uma boa luz de estúdio, sem nada que distraia a atenção do espectador e fazendo zooms dos componentes mais importantes. A resolução e a perspectiva da foto mostrarão um produto impecável, sem deformidades e com o máximo realismo possível.

Mal

Exemplo de dos fotografias de um mesmo produto em páginas web diferentes.

Título e descrição do produto:

Colocar um título pensando nos buscadores e otimizar o SEO ao máximo nos facilitará o trabalho posterior de expansão e posicionamento na internet. Uma boa descrição e a informação técnica mais significativa servirão para comunicar ao cliente a maior quantidade possível de dados que ele precisa para conhecer e confiar no produto.

Também podemos aumentar vendas se mostrarmos módulos ou plugins de redes sociais, opiniões ou sliders de artigos relacionados com o produto.

Filtros de navegação por categorias:

Se estão bem estruturados facilitam a busca de produtos específicos. É aconselhável que o produto tenha as características o mais bem definidas possível, marca, cor, tamanho, etc.

Muitos clientes utilizam a pesquisa facetada se estão buscando um artigo ou seus similares, pois dessa forma encontrar o produto desejado será muito mais rápido e eficaz dentro de sua categoria.

Quando o produto já está online é hora de começar a campanha publicitária.

Blogueiro 2.0

Blogueiro 2.0

Existem muitos motivos para criar um Blog e ir além e converter-se em um autêntico Blogueiro.

Calendário 2015 para eventos comerciais

Calendário 2015 para eventos comerciais

Calendário PrestaShop, 52 revelações para triunfar este ano no comércio eletrônico:

No início do ano a PrestaShop lançou seu calendário de eventos comerciais, uma grande ideia para ajudar com o planejamento de campanhas publicitárias. Tem 13 páginas, uma visão geral com os principais eventos do ano e lembretes de datas importantes mês a mês. Inclui dicas para antecipar-se a cada marco e organizar-se nas promoções, melhorar o tráfego da loja e ferramentas úteis que servirão para ter sucesso em seu comércio online.

Pena que este ano só está disponível para 8 países, França, Espanha, Estados Unidos, Itália, Alemanha, Holanda, Reino Unido e Polônia, mas prometem ampliá-lo nos próximos anos.

Deixamos a página de fevereiro, o calendário completo você pode baixar no site da PrestaShop.

calendario-febrero-2015

Blogueiro 2.0

Blogueiro 2.0

Existem muitos motivos para criar um Blog e ir além e converter-se em um autêntico Blogueiro.