Levando em conta a primeira impressão do visitante como fator determinante para o tempo de permanecia, imediatamente entendemos a importância da Home Page para garantir um resultado positivo.

O que a sua “Página Inicial” diz sobre o site? Ela é suficientemente esclarecedora? Ela transmite a atmosfera que o visitante espera estar no momento que busca o seu produto ou serviço? Ela consegue despertar o interesse para que o visitante queira se aprofundar na visita? Carrega rápido o bastante? O tempo que o navegador necessita para renderizar as informações relevantes para o visitante é ideal?

Características de uma Home Page eficiente

Veja a seguir algumas características importantes para garantir que a sua home seja eficiente. Observe que são apenas recomendações e que, a aplicação de todas elas não garante o sucesso de um site, existem muitos outros fatores envolvidos, como cores, imagens, conteúdo de qualidade, etc, e ao mesmo tempo alguns projetos permitem que vc ignore algumas ou todas essas recomendações.

Tic-tac, tic-tac, tic-tac… Vc tem apenas 7 segundos

Pesquisas indicam que os primeiros 7 segundos definem se o visitante vai permanecer no seu site ou não.
Mesmo nos sites mais rápidos, o tempo de carregamento leva em média de 2 a 3 segundos sendo assim, restam apenas 4 segundos para que você consiga transmitir a sua mensagem.
Para garantir que a sua página seja atraente, reduza o tempo de carregamento da página principal. Quanto mais rápido ela carrega, mas tempo você terá para conseguir atrair o seu visitante.

Veja a seguir algumas dicas de como melhorar o tempo de carregamento de um site.

Pingdom Tools

O site Pingdom Tools oferece informações importantes sobre o tempo de carregamento de cada arquivo do site. Por causa dele eu fiz algumas mudanças importantes eliminando arquivos pesados que não estavam sendo usados e também arquivos não encontrados.

Ele mostra em amarelo o momento em que é feita a requisição do arquivo até o momento em que inicia-se a conexão, em verde o tempo que demora entre o momento que se inicia a conexão até o inicio do download do arquivo, e em azul o tempo de download da página.

Sendo assim, se as barras amarelas e verdes estão muito longas é bom verificar se o seu servidor realmente tem um bom desempenho e se a barra azul for muito longa, melhor rever o tamanho dos seus arquivos.

Diminuindo a quantidade de arquivos:

Como vc pode ver pelo  Pingdom Tools , cada arquivo que a sua página solicita passa por dois processos antes de ser efetivamente carregado: a requisição e a conexão, sendo assim, podemos concluir que agrupando múltiplos arquivos em um só, o tempo de carregamento da página deve ser reduzido. Vou mostrar duas situações básicas:
1 – Se vc tem um menu ou botão que muda quando se passa o mouse (hover) e cria uma imagem para o estado normal e outra para o estado ” hover” , o servidor fará duas requisições e duas conexões, uma para cada imagem e ainda somaremos a isso o tempo de carregamento de cada uma. O ideal seria juntas as duas imagens em uma só e trabalhar com posicionamento. A imagem ficará maior e conseqüentemente mais pesada, no entanto faremos apenas uma requisição e uma conexão.  Não sabe como fazer isso? O Rodrigo Medeiros explicou muito bem no artigo “Mudando o background-image no hover”

2 – Em se tratando de arquivos css externos , algumas classes e propriedades podem não ser usadas em todas as páginas e por isso nos vemos tentados a fazer arquivos separados. Por exemplo, porque eu deveria inserir o css de formatação do “formulário de contato” da página “contato” no mesmo css que é usado na home  “home” ou nas outras páginas do site? Faz sentido criar um arquivo especifico para esses casos, mas também devemos lembrar que isso aumenta o tempo de carregamento da “Página de Contato” pois teremos que carregar um novo arquivo.
Lembrando que arquivos CSS são cacheados automaticamente, ou seja, ficam gravados no computador e não são recarregados a cada nova requisição, talvez seja interessante termos toda a formatação em um único arquivos que será carregado uma única vez.

Mas então você vai pensar: “Ora Daniele, mas você não está falando sobre a necessidade de termos uma ‘Página Inicial’ rápida para garantir que o visitante encontre a informação que procura nos primeiros segundos?” Sim, eu estou, mas tarde eu vou explicar que muitas pessoas entram no seu site pelos mecanismos de busca, e por isso acabam caindo em outras páginas as quais também vale a regra dos 7 segundos, não adianta reduzir o tempo de carregamento da “Home” aumentando o tempo de carregamento das outras páginas.

Trabalhando com “url amigáveis”

Não vou explicar o que é ou para que servem, pois o Bruno Torres  já explicou muito bem no artigo “Gerenciamento de URLs – Criando URLs amigáveis“, o que é importante saber é que essas URLs Amigáveis sempre deve terminar com uma barra (/). Por exemplo: ao invés de colocarmos http://www.danielevsilva.com.br/blog, devemos colocar http://www.danielevsilva.com.br/blog/. Isso é necessários porque quando o servidor recebe uma requisão que não especifica qual é o tipo de arquivo que ele irá abrir, antes de iniciar o carregamento, ele fará uma checagem em todas as extensões possiveis (.htm, .html. jpg, .gif., etc etc) isso leva alguns milisegundos, mas pode fazer diferença. Colocando uma barra no final, ficará claro que se trata de uma pasta e a resposta será entregue muito mais rapidamente. * fonte: http://www.wordpressthemes.com.br/7-dicas-para-carregar-seu-blog-em-wordpress-mais-rapido/

Otimizando o tempo de carregamento em sites usando WordPress

Se como eu, vc utiliza o wordpress como ferramenta de gerenciamento do seu site ou blog, existem algumas informações que vc deve considerar:

Limpeza do seu banco de dados: O WordPress 2.9 possui um recurso de limpeza e otimização do banco de dados, para isso basta adicionar a seguinte informação no seu “wp-config.php”:

define('WP_ALLOW_REPAIR',true);

Em seguida acesse: http://seu_site/wp-admin/maint/repair.php e siga os procedimentos.

Arquivos não encontrados: Para cada arquivo não encontrado no site, o wordpress gera uma página de erro 404. Ou seja, você uma super-otimização no seu site, mas esqueceu de eliminar uma imagenzinha que estava lá naquele css esquecido, no momento que o WordPress se depara com uma requisição aquela imagenzinha de menos de 1kb, ele interrompe o que está fazendo, gera uma página de erro 404, e em seguida retoma a sua atividade de carregamento da página. Tá… Isso leva só alguns milisegundos também, mas pode comprometer o carregamento. O Site Pingdom Tools ajuda a identificar esses arquivos, depois é só elimina-los ou corrigi-los.

O Gilberto  “Knuttz” escreveu uma solução bem interessante no artigo “Acalmando o WordPress – 404 amigável“.

Favicon: Uma das requisições que o wordpress sempre faz, é para o Favicon, aquela imagem que é exibida ao lado da URL ou do Titulo da sua página em alguns navegadores. Sendo assim é importante você sempre criar um favicon.ico para o seu site em wordpress, do contrario ele vai gerar um erro 404 para esse arquivo também. Não sabe o que é isso ou como fazer? Veja o artigo “21 melhores geradores de favicon da Internet“.

Requisições ao banco de dados desnecessárias:  Como o wordpress é um gerenciador de conteudo desenvolvido para ser usado em qualquer site, algumas informações precisam ser facilmente customizadas, e uma delas é, evidentemente, o endereço do site, . A solução que o wordpress escolheu foi gravar o endereço do site no Banco de Dados, e então cada vez que ele precisa utilizar essa informação ele vai até o banco, pesquisa, e retorna a informação para o site, chamamos isso de requisição ou consulta ao banco. Se vc parar para analisar a quantidade de vezes que o wordpress vai ao banco para solicitar essa informação em cada página é gigantesca, para ajudar a resolver esse problema podems substituir algumas informações dinâmicas por outras estáticas, ou seja, ao invés de inserir as tags especiais (dinâmicas: <?php echo bloginfo(‘url’); ?>)  do WordPress, nós podemos inserir as urls completas (estáticas: http://www.seu_site.com.br).

O Guga Alvez explicou muito bem como fazer isso no artigo “Deixe seu site WordPress mais limpo e mais rápido”

Ufa!

Eu ainda não escrevi nem 10% de tudo o que tenho pra falar sobre assunto, e o artigo já ficou imenso. Vou continuar amanhã

Até mais

21 melhores geradores de favicon da Internet

Logotipo ou logomarca?

Uma pequena explicação antes de tudo: A palavra logomarca é um neologismo, ou seja, um termo novo que acaba sendo introduzido a língua portuguesa devido a grande utilização na expressão popular, ou seja, muitas pessoas falando. A explicação mais coerente que encontrei para justificar porque devemos sempre usar a palavra Logotipo está no site DesignGráfico, não vou entrar em muitos detalhes, mas basicamente, a palavra Logomarca é a união de Logo+marca.

Logo = Latim “Lógos” significa a grosso modo: “Significado“.
Marca = Germânico “Marka” significa a grosso modo: “Significado“.
Assim, com a palavra logomarca temos esta redundância “Significado+significado“.

Princípios básicos

O seu Logotipo não é a sua Marca, mas é certamente o item mais importante da identidade visual de uma empresa é o logotipo. Ele aparece em quase todos os materiais divulgação online ou offline, por isso representa uma grande responsabilidade.
Segundo Jacob Cass um bom logotipo deve seguir 5 princípios básicos:
1 – Simples: ser fácil de distinguir e identificar.
2 – Memorizável: fácil de se lembrar.
3 – Atemporal: que não envelheça ou fique obsoleto, por isso é melhor não seguir uma tendência.
4 – Versátil: que possa ser adaptável a qualquer tipo de mídia e situação.
5 – Adequado: que demonstre o conceito da empresa.
Memorizando essas características e colocando em prática você tem boas chances de criar um bom projeto. No entanto, como eu falei anteriormente, um bom logotipo não caracteriza uma boa marca ele é apenas uma representação visual do conceito que a marca deseja transmitir, e ainda assim a criação de um logotipo efetivo depende de uma série de habilidades experiências e muita prática. A seguir algumas dicas para quem esta começando.

Analise, estudo e briefing!

Como eu já falei em outros posts aqui você nunca deve começar um projeto sem saber exatamente o que vai desenvolver. Então pegue papel e lápis e comece a rabiscar, faça muitas pesquisas (no final desse artigo seguem alguns links de referências) converse com o cliente, de novo e de novo, enquanto você não tiver certeza de qual direção seguir. Faça alguns esboços, 20, ou 30 e teste combinações de cores diferentes… Um designer eficiente não é aquele que tem uma imaginação que nunca se esgota, mas aquele que sabe pesquisar.

Equilibro!

Quando você tem cores, formas e tamanhos diferentes você também terá graus de interesse diferentes, e é a distribuição desse interesse que você precisa controlar. Nós percebemos um design bem equilibrado como uma coisa mais agradável e atraente, então seja cuidadoso com o peso dos elementos. Cuide para ter um contraste de cores eficiente, e lembre-se mais uma vez que um bom logotipo deve funcionar para todo tipo de mídia. Não existe uma receita onde podemos dizer que “você deve usar vermelho porque chama a atenção” porque o destaque dos elementos e o interesse que ele desperta depende também de como ele se relaciona com os outros objetos, uma outra parte da imagem pode chamar mais a atenção pelo seu conteúdo do que pela cor propriamente. (ok, eu também concordo que isso deve render um outro post).

O equilibro é uma coisa muito delicada principalmente quanto a forma. Se levarmos em conta a simetria, um logotipo deveria ter os dois lados iguais ou ao menos na mesma proporção, mas em alguns casos isso pode ser mudado de forma eficiente. No entanto, se você não é um especialista e não se sente confortável para desenvolver um projeto inovador e arriscado, aposte em formatos e alinhamentos que deixem o contorno reto formando quadrados ou retângulos ou invés de estruturas angulares que são difíceis de adaptar como você pode ver nos exemplos anteriores.

Tamanhos e proporções

Quando falamos de logotipo, o tamanho importa muito. Além boa aparência, ele precisa ser visível e legível quando for o caso, em todos os tamanhos. Ele precisar ser visível em um favico ou em um outdoor. Mas como fazer isso? Você pode criar estilos de aplicação diferentes, por exemplo criando uma representação gráfica que pode ser usada sozinha (sem o nome da empresa) em áreas muito pequenas. E precisa testar. Faça reduções e ampliações, imprima, verifique qual o tamanho mínimo e o se existe um tamanho máximo para a legibilidade.

Uso das cores

Não vou detalhar muito pois você pode pesquisar sobre isso em praticamente todos os artigos desse site. Basicamente o que você deve saber é:

• Use cores próximas umas das outras no disco de cores, por exemplo, para uma “paleta quente”, use vermelho combinado com laranja e/ou tons de amarelo).
• Não use cores muito brilhantes pois são cansativas as olhos.
• O logotipo deve ficar legível mesmo quando impresso em preto e branco, tons de cinza ou duas cores.

Conceituação

Não existe um estilo certo para logotipos. Você pode usar qualquer estilo e acertar ou errar. O fundamental estar completamente entendi sobre qual o objetivo da marca. As tendências podem ser bem interessantes, mas também podem ser perigosas. Nesse momento ainda estamos vivendo o Boom de logos web 2.0 com gradientes, relevos, reflexos e sombras, mas lembre-se: eles funcionam muito bem para empresas de web 2.0 ou serviços de tecnologia, mas pode não ser eficaz para empresas mais conservadoras ou outro tipos de marcas.
Antes de tudo você deve investigar seu cliente e o publico alvo isso vai ajudar a determinar o melhor caminho a seguir e evitar que você precise recomeçar muitas vezes.

Tipografia

Acho que todos vocês sabem como é difícil escolher uma boa tipografia, e eu fico realmente impressionada quando encontro um designer capaz de trabalhar as fontes de forma sempre eficiente. Quando eu encontro um projeto com uma tipografia impecável eu sempre penso: “essa deve ser a obra prima, é impossível que ele consiga fazer isso de novo!”, porque é realmente difícil. E não se trata só de escolher fonte correta, você também precisa acertar no tamanho, no espaçamento, na altura entre as linhas, no kern… Quando você decide criar um logo composto por uma forma gráfica e um texto, seja para o nome da empresa ou para o slogan, você precisará de uma pesquisa delicada no universo das fontes.Experimente fontes serifadas e sem-serifas, itálico, negrito e fontes personalizadas. Considere 3 pontos importantes:

• Evite as fontes mais comuns, como comic sans, ou seu projeto pode perder a originalidade.
• Certifique-se que o texto é legível ou ao menos identificável quando reduzida.
• Evite mais de um tipo de fonte.

Você pode aprender um pouco mais sobre tipografia no artigo específico que escrevi anteriormente.

Reconhecimento

O objetivo principal de se desenvolver um logotipo é encontrar uma forma de tornar a empresa identificável no primeiro olhar. Como você alcança isso varia em cada caso. Um exemplo disso são logotipos como Pepsi, Coca-cola, Nike, McDonald’s, basta uma olhada rápida em qualquer uma dessas marcas e você sabe exatamente a que elas se referem.
Um teste rápido para determinar se seu logo é reconhecível é invertê-lo usando qualquer software básico de edição de imagem. Você deve ter em mente que que em situações reais o logo será visto de cabeça para baixo ou invertido e deve garantir que ele seja reconhecível nessas situações.

A aplicação do logo tipo na web

Como eu já falei anteriormente, quando você cria uma logotipo ele deve ser funcional em todas as mídias, on e offline.
A pouco tempo atrás não existia qualquer preocupação com a visualização do logo na web e quando existia, ainda não haviam estudos suficientes para dizar quais efeitos um logo mal aplicado ou deficiente pode causar.
Como webdesigner, eu recebo freqüentemente projetos onde o logotipo simplesmente não é funcional, pois não foi projetado para mídias online. Vou citar os principais problemas que eu, ou meus colegas já enfrentamos:
1 – Logotipo com formato arredondado - Existem logotipos arredondados realmente incríveis, eu concordo, mas eles também são muito perigosos. Tudo que é arredondado, numa diagramação padrão, ocupa um espaço muito maior do que as formas retas, como você pode ver na figura ao lado. Quando temos um logo arredondado, a tendência é arredondar os outros elementos (não é uma regra, mas e mais comum) então temos um grande chance de que tudo fica muito grande e que vc precise de mais espaço para transmitir as mesmas informações.

2 – Logotipo impossível de ser reduzido ou redesenhado – Logotipos muito complexos muitas vezes podem ser uma tragédia. Eu Já recebi logo com foto, 3D, logos com todos os tipos de bevel and emboss e drop shadows imagináveis. E já recebi esses logos pequenos demais ou scaneados precisando ser redesenhados, essa complexidade torna impossível um redesenho, porque dificilmente você consegue chegar no mesmo nível exato de gradiente, ou textura ou todos esses efeitos prontos que vc encontra por aí. Um logotipo eficiente é aquele que vc consegue desenhar com papel e caneta e ainda assim ficar identificável. Outras vezes, o logo é tão complexo e tão detalhista que quando reduzido os detalhes não são visíveis e ela perde os efeitos ou vira um grande borrão. E tenha mais cuidado ainda se você usa fontes finas elas pode desaparecer!

Concluindo

Essas são as características principais que um logotipo precisa ter para ser funcional e efetivo, mas devo dizer mais uma vez: para desenvolver um grande logotipo é preciso muita prática e experiência aliada a criatividade e entendimento do conceito da marca e do seu publico alvo.

Com milhões de combinações possíveis, nós designers acabamos desistindo antes mesmo de começar. No entanto, temos que agradecer a perseverança de alguns de nossos colegas, que por não desistirem acabaram criando as maravilhas que serão listadas no final desse artigo.

Apesar do meu gosto pela analise mais profunda da tipografia, esse artigo tratará apenas da tipografia como elemento fundamental do design: títulos, manchetes e áreas de destaque, etc. Pretendo publicar brevemente algum material sobre “legibilidade na web”.

A tipografia tem tudo para ser a parte mais elegante de um projeto.

Os resultados finais, normalmente, são o que chamamos de clean: elegantes e legíveis.

A boa escolha da tipografia pode reduzir consideravelmente a necessidade de fotos e ilustrações, porem, como eu falei no artigo sobre “Estilo retrô”, somando uma boa família de fontes a esses elementos o projeto pode ficar muito mais interessante.

É importante lembrar que cada sistema operacional possui a sua família tipográfica e que, caso você utilize uma fonte que não existe no computador do usuário, ela será substituída por outra previamente definida ou pela fonte padrão do sistema.

Apesar das fontes existentes no Internet Explorer serem muito parecidas com as fontes do Mac, é preciso lembrar que existem outros sistemas operacionais e que é necessário garantir que o conteúdo terá o mesmo aspecto (ou o mais parecido possível) em todos eles. No caso do linux, por exemplo, o número de fontes instaladas varia de versão pra versão.

Para trabalhar com fontes alternativas, a melhor solução, na minha opinião é através da técnica “Image Replacement“. Para quem ainda não conhece, trata-se de substituir texto por imagem usando apenas css, assim é possível utilizar qualquer fonte sem a preocupação se ela será exibida corretamente, pois imagens são sempre imagens. Dessa forma ganhamos em compatibilidade!

Veja no “Pinceladas da Web“a técnica mais comum para trabalhar com substituição de textos por imagens, ou então, faça uma comparação entre os principais métodos conhecidos no “Mezzoblue” (em inglês).

Tudo depende do contexto. Uma mesma fonte pode apresentar diversos aspectos bastando apenas mudar a cor do fundo, adicionar uma borda ou uma imagem…Veja alguns exemplos se pode fazer:

Exemplo 1 – Fonte Sofia Script

Fonte – Sofia Script – Fonte manuscrita e sem acentuação. Perfeita para estilos arrojados, pode ser moderna ou retrô dependendo somente de como vem acompanhada.

Exemplo 2 – Fonte Logomotive

Uma fonte básica desenvolvida por um designer gráfico Acentuada, com maiúsculas, minúsculas, pontuação e números.

Mais uma vez eu digo: procure sempre a compatibilidade na maioria das plataformas possíveis, dispensando a necessidade de instalação de programas, plugins ou acessórios para o funcionamento do site.

Exemplos de uso

O modo como você estiliza e formata seus formulários é crucial para torna-lo aparentemente útil pois na maioria das vezes é preciso convencer o visitante a preencher as informações. Para formul’arios pequenos, basta adapta-los ao site, mas quando se trata de formulários mais complexos onde uma grande quantidade de informações é exigida ter um estilo bem elaborado e fácil de usar se torna o principal motivo de sucesso ou fracasso.

Antes de tudo é preciso entender a importância e o significado de um formulário: eles são hoje a forma mais usada de interação entre usuário e o site, é o modo pelo qual o visitante transmite para o site (ou para os responsáveis) tudo aquilo que ele desejar ver ou fazer. Mesmo quando não aparenta exatamente o tipo de formulário convencional, em algum lugar deve haver uma tag “input” escondida. A palavra “input” tem exatamente esse significado: passar, enviar informações.

Tags fundamentais

Form

A tag <form> cerca um formulário, ela que vai conter os parâmetros que garantem o seu funcionamento. Você pode colocá-la em qualquer lugar dentro do <body>, e todas as tags “input“, “selects“, “textareas“, etc devem ficar dentro dela

Seu atributo principal é o “action“, ele é o responsável por linkar o seu formulário ao arquivo que contem a programação responsável pelo envio dos dados quando o botão de envio for acionado. Ele deve conter o link para um arquivo cgi, php, asp ou outra linguagem de programação capaz de processar esses dados.

Outro parâmetro importante é o “method“, que é a forma como os dados são enviados. Se seu formulário envia resultados com mais de 100 caracteres ou acentuação fora do código ASCII, você deve usar pelo método “post“, pois o método “get” adiciona o resultado do formulário ao endereço da página e isso pode causar problemas. Ex.: danielevsilva.com.br/?name=value&name=value

A tag “form” pode receber “Classes” ou “ID“, por isso você pode usá-la como uma div para formatar seu formulário e reduzir o código.

De acordo com a especificação do HTML 4.0, a Tag <form> é obrigatória para formulários. Não esqueça que ela deve ser fechada no final “</form>”

<form id=”form1″ name=”form1″ method=”post” action=”form.php”>
Aqui devem ficar os campos do seu formulario
</form>

Input

O <input> tag principal para um formulário. É a responsável por receber as informações que serão enviadas.

Seu atributo principal é o “type” que determina qual o tipo de campo que será usado e quais dados ele poderá receber. Existem 10 tipos de campos “input”

Button

<input type=”button” name=”daniele” id=”daniele”value=”botão” />

É o tipo que deve ser usado para criar botões que não tenham o efeito de enviar ou limpar um formulário. Normalmente usamos quando é necessário chamar um javascript sem enviar as impormações até que seja processado pelo JS. Por padráo o campo ficará em branco, você pode usar o atributo “value=”se quiser escrever algo.

Checkbox

<input type=”checkbox” name=”daniele” id=”daniele” />

Cria uma lista de opções de multipla ou unica escolha. Se você tiver um grupo de checkboxes, deve relacioná-los atraves da tag “name=”

File

<input name=”daniele” type=”file” id=”daniele” />

É o tipo usado para fazer upload de arquivos, ele adiciona um input com propriedade de texto e um botão de envio com um padrão automático.

Hidden:

<input name=”daniele” type=”hidden” id=”daniele” />

Campos ocultos são usados para passar alguma informação sem que ela seja visivel na tela.

Image

<input name=”daniele” type=”image” id=”daniele” src=”imagem.gif” />

Permite que você uma imagem como botão, isso dá muita flexibilidade ao layout. No entanto, não é possível acessar um botão com tipo “image” atraves da tecla “tab”, o que diminui a usabilidade.

Password

<input name=”daniele” type=”password” id=”daniele” />

Funciona exatamento como um campo de texto, mas os caracteres digitados ganham o aspecto de senha usando asteriscos *****

Radio

<input name=”daniele” id=”daniele” value=”sim” type=”radio” />

São conjuntos de opções que permitem apenas uma seleção. Para criar um grupo devemos colocar o mesmo “name=” para todos eles com “value”especifico para cada um:

<input type=”radio” name=”radio” value=”sim” />
<input type=”radio” name=”radio” value=”não” />

Reset

<input name=”daniele” id=”daniele” type=”reset” />

É um tipo de botão que ao ser pressionado, limpa todos os campos que foram preenchidos pelo usuário. Por padráo o botão aparecerá como “reset”, você pode usar o atributo “value=”se quiser escrever algo.

Submit

<input name=”daniele” id=”daniele” type=”submit” />

Essa tag gera o botão responsável por enviar os dados para o servidor. Por padráo o botão aparecerá como “submit”, você pode usar o atributo “value=”se quiser escrever algo.

Text

<input name=”daniele” id=”daniele” type=”text” />

É o tipo mais comum de campo de formulário em html. Permite que os usuários digitem qualquer tipo de informação textual.

Textarea

<textarea name=”daniele” id=”daniele”></textarea>

A tag <textarea></textarea> cria um campo formado por multiplas linhas. Ou seja, é possível enviar um texto maior mais facilmente.
Seus atributos mais comuns são:
“Cols” – indica quantas colunas serão visíveis (qual a largura do campo)
“Rows”- Indica quantas linhas serão visíveis (altura do campo)

Select

<select name=”daniele” id=”daniele”>

A tag “select” é responsável por criar uma lista de muitos ítens ocupando um espaço pequeno. Cria uma espécie de “menu de Salto”, mantendo as opções ocultas até ser acionado com um click. É composta pelas tags: <select> e <option>

A etiqueta seleta tem vários atributos, e o fechamento </select> A etiqueta é exigida.

A tag select, assim como os bodtões de rádio, permitem que se escolha uma ou mais de uma opção.

Deve ser inicado sempre com a tag <select> e cada opção disponível deve ser colocada dentro de uma tag <option>, dessa forma:
<select name=”1″>
<option>sim</option>
<option>não</option>
</select>

Coisas que você deve saber para deixar seus formulários mais legais

A semântica

Eu ainda me surpreendo com a quantidade de pessoas que procuram motivos mais diversos para aumentar a quantdade de opções de tags que podemos usar para de formatar e organizar os campos de seus formulários, já vi pessoas que usam, <div></div>, <p></p>, <span></span>, até mesmo as tags <ul><li></li></ul> alegando que formulários podem ser considerados uma lista de informações. Bem eu não concordo. Formulários devem ser vistos como formulários, não são listas, nem tabelas, nem nada parecido, apenas formulários. São individuais e possuem suas próprias tags especificas. É uma categoria propria de conteúdo, assim como as tabelas e as próprias listas, não acho correto tentar colocá-los dentro de uma dessas duas categorias. Assim como uma tabela possui suas <tr>, <td>, <thead> etc, o formulário possui seus <fieldsets> e <labels>, que usados de forma correta são capases de organizar todo tipo de dados de formulários.

Vamos conhecer melhor essas tags

Label

<label for” “></label>

A função principal do label é rotular os campos. Quando usada corretamente ajuda a resolver problemas de usabilidade em campos muito pequenos, como botões de Radio e Checkboxes, esses campos não tem mais do que 10px de largura e altura, e atraves da tag label conseguimos espandir a área do clique para a região do label. Por exemplo, no final desse artigo, no formulário de comentários, clicando na palavra “nome“, o campo input “nome“é imediatamente ativado e você pode escrever. Isso acontece pois a tag <label> está relacionada a tag <input> pelos atributos “for” e “name“, ou seja: a o atributo “for=” da tag <label> deve ser igual ao atributo “name” do input.

<label for=”author”>Nome:</label><input name=”author” type=”text”>

A tag label também auxilia a navegação para deficientes visuais (leitores de tela) pois cria uma relação entre o rótulo e o campo que não existe normalmente.

Além disso, a tag “label” também pode receber “class” ou “Id“, sendo assim, ela pode receber qualquer tipo de formatação. Pode ser usada para alinhar os rótulos de um formulário sempre ao lado direito, por exemplo, criar margens, etc…

O input pode ser colocado dentro ou fora da Tag label.

<label for=”author”>Nome:</label><input name=”author” type=”text”>
<label for=”author”>Nome:<input name=”author” type=”text”></label>

O resultado é o mesmo, o que muda é a formatação. Eu prefiro trabalhar com o primeiro modo, pois tenho mais flexibilidade podendo trabalhar a tag label e a tag input individualmente. Isso ajuda na composição dos meus layouts.

Fieldset

<fieldset></fieldset>

A tag fieldset cria um caixa agrupando elementos de um formulário. Você não precisa usar uma div sempre que quiser separar os campos de dados pessoais e as informações de pagamentos, basta colocá-los dentro de um fieldset e ele insere uma caixa que contorna os campos.

E mais legal ainda: você pode usar junto com o fieldset a tag “legend”, ela coloca um título no fieldset.

<fieldset><legend>Aqui vai a legenda</legend></fieldset>

Veja aqui um exemplo de formulário simples, formatado com uma semântica correta, observe o código fonte e a forma como usei o a propriedade “float” no css para alinhar as label ao lado dos input.

A formatação

Quando se trata de formatação de formulários, é importante lembrar que algumas vezes os visitante confiam informações secretas como senhas, números de documentos e cartão de credito, por isso modificar completamente o layout de um formulário nem sempre é uma boa idéia, pois pode deixar os visitantes confusos ou desconfiados.

Como falei no inicio, formatar um formulário básico é simples, basta adaptá-lo ao estilo do seu layout, e uma boa forma de se fazer isso é trabalhando com imagens.

O principio é simples: basta cria uma imagem e com css colocá-la atrás de seus campos input, depois mudar a cor de fundo e a borda do campo para a mesma cor de fundo da imagem, o campo ficará disfarçado e vai parecer que o visitante está digitando sobre a imagem.

Um outro jeito interessante de fazer isso é colocar o input dentro do label e trabalhar com uma imagem de fundo no label, como fiz no site www.pontoaponto.com.br. Nesse caso, eu usei a mesma imagem com gradiente no label e no input, ambas alinhadas abaixo, retirei as bordas do input e adicionei bordas no label. Veja como ficou certinho.

Cuidados que você deve ter

Não mudar a forma básica dos elementos!

As pessoas estão acostumadas a preencher os campos padronizadas pelo sistema operacional e já sabem o que fazer com eles, quando se deparam com um formato muito diferente se sentem constrangidos e simplesmente abandonam o preenchimento. E isso é muito comum na verdade, o que é claro pra mim, pode ser estúpido para outro e inutilizado para um terceiro.

Rótulos claros e curtos

Sempre utilize rótulos (label) curtos. Tente resumir a sua pergunta em poucas palavras. Há uma regra que diz que eles não devem exceder 200px depois de estilizados, mas acho que isso vai do bom senso.

Campos maiores, respostas maiores.

Deixe o tamanho dos campos proporcional ao tamanho da informação que você espera receber. As pesquisas mostram que quando usamos campos muito pequenos, as pessoas tendem a escrever respostas bem resumidas, e quando os campos são maiores elas tendem a escrever mais. Então se a sua idéia e estabelecer uma comunicação com o seu visitante, como em comentários de blogs, fóruns e formulários de contato, deixe seus campos de texto maiores e terá respostas maiores e mais detalhadas.

Da mesma forma se um campo exige informações curtas, use campos curtos. Nunca use 300px num campo de senha de 8 dígitos, por exemplo. O visitante certamente vai pensar que não entendeu bem a finalidade do campo.

Sinais de identificação

Lembre de usar o * para classificar um campo como obrigatório. As pessoas estão acostumadas com isso. E o ideal é usá-lo antes do campo do formulário, a direita ou esquerda do label, pois em leitores de tela, é preciso que o programa avise que é obrigatório antes de ler o campo. E não esqueça de explicar o que significa o * antes de sua primeira ocorrência.

Cuidado com o vermelho

Vermelho significa erro. Por isso cuidado ao rotular campos com essa cor ou usá-la em informação textual, pois no final, quando o visitante enviar um formulário incompleto, você vai precisar dessa cor para explicar isso.

Agrupamentos

Agrupe sempre muito. Agrupe informaçãoes semelhantes, complementares. Agrupe campos obrigatórios, ou campos opcionais. Agrupe, agrupe agrupe. E use fieldset para isso!

Alinhamentos:

Pesquisas demonstram que o tempo de preenchimento pode aumentar ou diminuir de acordo com a forma que os elementos estão organizados.

Alinhando o label a esquerda do input

A associação do rótulo com o campo é rápida e fácil, mas o tempo de preenchimento aumenta pois o mouse algumas vezes precisa percorrer uma distancia maior

Alinhando label a esquerda do input e alinhando o conteúdo do label a direita

A associação do rótulo com o campo é rápida e fácil, e o tempo de preenchimento é reduzido pela metade

Alinhando o Label acima do input

Essa foi a forma mais eficaz de organizar as informações de um formulário, pois o visitante consegue entender a ordem das informações apenas com uma olhada rápida

E tudo fica mais legal ainda com a JQuery

Bem, agora que eu descobri a Jquery, vejo Jquery em tudo.

Se você não sabe o que é isso, pode descobrir aqui, e se você não sabe inglês o suficiente para entender então leia isso. E se você já entendeu o que é e quer começar a usar, leia isso aqui (em português)

jNice, styled forms – Modificar os campos dos seus formulários deixando com uma aparência mais interessante. Muito legal

Autocomplete – cria uma lista de opções para todos os campos que serve como um “auto-completar”.

Checkbox ShiftClick – Esse é ótimo. Permite que você marque muitos campos do tipo checkbox usando o shift

Form Validation – Meu sistema de validação favorito

Terminando…

Bom, eu não falei a metade do que gostaria e esse texto já ficou imenso, então, logo logo, eu vou trazer uma segunda parte onde abordarei temas como Validação, Capcha, tabulação,

Alguns exemplos de formulários bem feitos

• visitar
• visitar
• visitar
• visitar
• visitar
• visitar
• visitar
• visitar
• visitar
• visitar
• visitar

Alguns geradores de formulários:

• http://www.jotform.com/
• http://app.formassembly.com/
• http://www.icebrrg.com/
• http://wufoo.com/
• http://www.phpform.org

Todos os colegas com quem conversei falam da dificuldade de concluir e das dezenas de vezes que abandonam e recomeçam.

Esse meu site mesmo, que além de blog, serve como portfolio passou por umas 4 tentativas até terminar desse jeito, ele inclusive chegou a ser rosa e com florzinhas coloridas, mas todos as versões estavam mal acabadas do tipo “vamos deixar assim por enquanto”. E confesso que ainda não estou completamente satisfeita com a versão atual, tenho idéias novas pra ele todos os dias…

Evidentemente é a nossa ligação com o trabalho que prejudica o julgamento na hora da criação.

As pessoas com quem converso e que reclamam de seus portfolios geralmente o fazem por motivos pequenos, por um perfeccionismo quase sem explicação. Em muitos casos o trabalho é fantástico, mas pra ele ainda falta alguma coisa… É quase uma lei básica da natureza “todos devem estar insatisfeitos com o próprio portfolio”….

Em primeiro lugar o que é um portfólio?

Basicamente é a forma de tornar seus trabalhos portáteis. É tê-los em mãos, reunidos em um só lugar (pasta, web, cd) para uma exibição rápida quando necessário. Através do portfolio, entre outras coisas, as empresas contratantes tem a chance de avaliar e traçar uma linha da sua evolução e crescimento profissional.

Como era o trabalho dele em 2000? E em 2006? Quanto o profissional evoluiu com relação ao mercado? Ele conseguiu acompanhar? As respostas para essas perguntas devem estar no seu portfolio

Como começar?

Do começo é claro, projetando, criando o layout. Nós sempre ouvimos falar do quanto é importante inovar e investir em coisas diferentes, mas na hora de criar um portfolio temos que ter certeza absoluta do que pretendemos alcançar com ele, e torná-lo familiar ao publico alvo.

Se você é programador, mostre programação, se vc trabalha com flash e interação, mostre isso! Se você que ser contratado como designer “layout em primeiro lugar” e assim por diante.

Não pense em trabalhar um portfolio com animações incríveis e interação absurdamente maluca se vc deseja trabalhar com padrões web…. Não faz sentido algum…. Já vi pessoas sendo criticadas por construir um portfolio em flash pois não era acessível a certas situações, mas o criador só trabalhava com flash! E muito bem por sinal! ele buscava uma colocação nessa área, porque ele tentaria usar de outras ferramentas e acabar prejudicando o resultado? É tudo uma questão de caso….

Voltando ao layout: Lembre-se que o portfolio será o seu conhecimento técnico aliado a sua capacidade de resolver problemas.

Você pode e deve seguir um conceito, mas quanto menos especifico ele for, mais amplo será seu publico alvo (evidentemente). Se você escolhe um estilo distressed dificilmente vai encher os olhos de uma empresa voltada para o desenvolvimento de sites corporativos e de negócios. Então tente ser neutro, mas sem ser previsível ou básico demais.

O que colocar?

No portfolio digital você não vai poder estar ao lado para apresentar as peças e escolher a ordem que o contratante deve navegar, qual trabalho ver primeiro, etc, então todo o conteúdo deve ser agradável e interessante, pois eles podem começar de qualquer lugar, se, de inicio, se depararem com um longo texto sobre a sua infancia e as maravilhas do lugar onde nasceu, pode ser que nem cheguem a ver os trabalhos.

É importante constar informações resumidas de localização, contato, conhecimentos, formação acadêmica, áreas de interesse e seu currículo pra download.

É no currículo que as informações acima devem ser detalhadas, se o contratante quiser detalhes, é lá que ele vai procurar.

No portfolio, exponha o suficiente para despertar o interesse, mas não se esqueça que ele não substitui o currículo, apenas complementa. Muitas vezes o setor que analisa os concorrentes não é o mesmo que contrata, então é sempre necessário uma versão de fácil impressão que possa ser apresentada a parte competente.

E os trabalhos?

Antes de começar esse artigo, eu dei uma procurada pela net para ver o que as pessoas estavam dizendo a respeito, e encontrei coisas bem interessantes como no webinsider.

Em geral as pessoas sugerem que se monte um portfolio apenas com seus melhores trabalhos alguns sugerem começar pelos seus 3 melhores. Eu penso que essa não é a melhor idéia.

Como falei no inicio, o portfolio deve mostrar a sua evolução como profissional e a sua capacidade de aprendizado.

Exponha o maior número de casos possível, ordene por ano de criação, deixando os mais recentes primeiro, é provável que esses sejam os melhores, então não há porque temer. Se não forem, faça um breve estudo do caso, explique suas dificuldade e como você trabalhou para superá-las, esclareça o que o impediu de atingir seu potencial, se foram exigências do cliente, publico alvo, dificuldades técnicas ou de equipe, investimento financeiro. Se o problema for o cliente, aquele tipo que gosta de alterações que comprometem todo o trabalho, seja critico no estudo do caso, mas nunca seja ofensivo.

E como eu falei, exponha o maior número de trabalhos possível, mostre não só a sua capacidade criativa, mas também a sua experiência profissional.

Tá, mas e eu que ainda não tenho nenhum cliente?

Eu encontrei muitas pessoas com essa dificuldade: como criar um portfolio se eu estou começando agora e ainda não tenho trabalhos pra mostrar?

O melhor jeito é criar e criar e criar.

Desenvolva sites para amigos e familiares, eu quando estava começando, costumava dar sites de presente de aniversário, fazia uma especie de fotolog comemorativo, foi assim que comecei a aprender o tratamento de fotos.

Fã clube também é uma ótima sugestão. Normalmente eles tem fotos maravilhosas de artistas e fáceis de trabalhar, vai agregar valor a sua apresentação e ao mesmo tempo alegrar o pessoal que se dedica ao artista.

Outra opção que me agrada muito são as ongs, ao mesmo tempo que você ganha portfolio, ajuda o desenvolvimento dos projetos sociais.

Em último caso existe a opção de inventar empresas. Se você tem uma idéia pra sapataria, por exemplo, mas não tem um cliente, desenvolva o site, hospede no seu domínio e dê a ela um nome como “Sapataria seu nome aqui” para deixar evidente que essa empresa não existe. Mais tarde você pode até conseguir vender o layout pra alguma empresa do ramo.

Por fim…

…Essas são as técnicas que sugiro pra montagem de um portfolio, pois esse artigo já se prolongou demais. Nas próximas semanas pretendo escrever uma segunda parte abordando idéias que podem ser agregadas ao portfolio, tendências, diferenciais e como divulgá-lo depois de pronto.

Para essa seleção de sites eu procurei escolher trabalhos com elementos bem distintos. Espero que seja inspirador pra vc que está procurando uma forma diferente de expor seu trabalho.

Boa sorte!

Exemplos de sites

• visite
• Visite
• visite
• visite
• visite
• visite
• visite
• visite
• visite
• visite
• visite
• visite
• visite
• visite

É muito interessante entender como as fontes são compostas e o que diferencia cada tipo, assim é possível compreender melhor porque uma certa fonte causa um resultado mais satisfatório do que outra, e conhecendo melhor os termos técnicos é mais fácil realizar pesquisas e se aprofundar no assunto.

Vamos começar com:

Classificação das fontes – Serifadas ou Sanserif

As serifas são esses traços que encontramos nas extremidades de fontes como a Times News Roman, é o principal meio de classificar letras. Fontes serifadas possuem esse traço e as Sans-serif (expressão francesa para “sem serifa”) não possuem. Meio evidente né?

O que talvez você não saiba é que as serifas tendem a agrupar as letras de forma linear, ajudando a melhorar a leitura pois fica mais fácil identificar onde começa e termina um palavra. Dessa forma conseguimos destaque para cada palavra individualmente, isso é excelente para títulos.

A história da serifa é muito simples de compreender: na Roma Antiga, antes de esculpir as letras em pedra era preciso pintá-las para conseguir seguir o caminho com a talha. Qualquer pessoa que tenha pintado letras com tinta sabe que é comum que se acumule um pouco de tinta nas extremidade e esse traço era acompanhado no entalhe. Temos então a serifa.

Não foi encontrado um significado definitivo para a palavra Serifa, alguns acreditam que vêm do Holandês schreef significado “escreveu”, outros dizem que o termo “sanserif” vem de antes do termo “serifa” mas então de onde vem o “sanserif”? Ninguém sabe… O equivalente em japonês é uruko (espinha de peixe) e em chines, a tradução ao pé da letra sai algo como “formas com pernas” Talvez seja o termo mais claro. Se aguém pedir “me dá uma perna” já sabemos que ele precisa de uma fonte serifada .

Existem muitos tipos de serifa, os dois principais são: As curvas, conhecidas como “adnate” ou “bracket” e as retas, também chamadas “abrupt” ou “straight”.

As serifas do tipo Adnate são mais orgânicas, elas fluem das letras para suas extremidades de forma que fica quase impossível distinguir onde ela começa

Já as serifas do tipo Abrupt são mais quadradas, mais retas e mais rígidas, deixando bem visivel suas marcações.

Tipografia na web.

O primeiro passo para ser bem sucedido no uso das fontes na web é nunca tentar imitar o que se faz nos impressos. A web é um meio muito diferente, com seus pontos fortes e fraquezas. A página impressa é rígida, nós não temos nenhum controle sobre o tamanho do texto e da página, enquanto que na web o visitante tem total controle e pode alterar o mode de visualização mesmo que o tamanho da fonte esteja pré-definido, além disso temos resoluções diferentes, com tamanhos de telas diferentes, definições de cor e contraste diferentes e logo fica bem evidente que o texto pra web e o texto impresso tem necessidades distintas.

É importante que as pessoas que vem até aqui entendam que esse blog trata principalmente da teoria do design pra web e por esse motivo, as definições que passo a seguir podem não ser aplicáveis ao design gráfico.

Vou usar como exemplo um site que desenvolvi recentemente: www.megapolomoda.com.br. Nesse projeto, algumas regras foram quebradas mas isso foi intencional para direcionar o visitante às áreas de maior interesse comercial.

Alturas, larguras e Espaçamentos

Kern

Kern é o espaço que existe entre as partes de um caracter tipográfico. Por exemplo: Av.

Nesse caso, o espaço entre o caracter v minúsculo e o caracter A maiúsculo precisa ser reduzido, para aproximar as letras. A essa redução de espaços chamamos Kern. O kern é definido pelo criador da fonte e pode ser alterado em qualquer programa de edição de fontes, mas não é fácil.

Quando o kern de uma fonte não está bem definido, pode haver confusão na separação das palavras, pode se tornar difícil saber onde começa uma palavra e termina a outra. Principalmente quando o tamanho da fonte é pequeno.

Altura de x

É a parte que se estende acima ou abaixo do caractere x minúsculo nas palavras. Pode ser Ascendente nas letras b, d, entre outras ou descendente nas letas p, q, entre outras. Quanto maior a altura de x maior o caracter em relação aos outros com o mesmo corpo.

Poque é importante entender isso? Porque quanto menor a altura de x menor a distinção entre caracteres como o “n” e o “h”, é o caso da fonte Impact que utilizo aqui nos títulos do blog, e isso pode gerar dificuldade na leitura.

Espaçamento entre linhas

Outra coisa que ajuda muito é o tamanho e o espaçamento entre linhas. Quanto mais espaçado maior a definição entre as linhas de texto, do mesmo jeito que o espaçamento entre letras e palavras também ajudam a agrupar a diferenciá-las.

Por outro lado, um espaçamento muito grande pode tornar o processo natural de percorrer a linha até o final e passar ao início da linha seguinte, mais longo do que o necessário tornando-se cansativo.

Nesse caso eu optei pela fonte verdana em tamanho 0.7em (equivale à 11px) e com o espaço entre linhas de 1.8em (equivale a 20px). Mas isso vai variar de acordo com a fonte escolhida.

Largura das linhas

Estando a uma distância de 50cm do monitor, o olho humano consegue focalizar uma área de apenas 5cm de diâmetro, o restante não passa de um borrão, e esse diâmetro se reduz a medida que nos aproximamos da tela. Isso justifica porque nos perdemos em textos com linhas muito longas quando nossos olhos alcançam o final e tentam passar para o início da linha seguinte. Por isso é preciso ter muito cuidado principalmente com layouts líquidos (que se adaptam à resolução do visitante), pois se a resolução for muito alta as linhas podem se tornar longas demais. E cuidado com linhas muito curtas pois isso também pode ser prejudicial já que força os olhos a se movimentem de um lado pra outro da tela muitas vezes seguidas provocando cansaço.

Espaços em branco

Uma das coisas mais importantes quando falamos de tipografia é a quantidade de espaço em branco. No caso do MPM, ainda que a página seja longa e com muita informação, ela não parece sobrecarregada, isso acontece devido aos espaços que separam cada bloco de conteúdo, e também os títulos. Quando os espaços estão bem definidos tudo parece estar no lugar certo e a tipografia é utilizada para determinar a hierarquia, dando destaque as informações mais relevantes. Veja mais aqui.

Alinhamentos

É extremamente importante se preocupar com alinhamentos pois eles ajudam a definir a quantidade de esforço que será necessário para a leitura de um texto.

Talvez o padrão justificado seja o mais bonito e o mais fácil de trabalhar num layout, no entanto os navegadores compensam o espaço que sobraria num alinhamento normal à direita adicionando um espaço entre as letras ou palavras, gerando um problema bem parecido com o kern, dificuldade de agrupar os caracteres e compor as palavras. Além disso quando o espaço entre letras ou palavras aumenta abruptamente o cérebro precisa se adaptar à essa nova formatação e isso é ruim, mesmo que leve milésimos de segundo

Organização dos elementos

Para que “a coisa Flua naturalmente” enquanto nossos olhos passeiam pelo layout não devemos nos preocupar apenas com alinhamento de texto (direita, esquerda, justificado, centro), mas com alinhamentos de todos os objetos. Chamamos isso de seguir um “Grid”.

Quando estamos lendo, ou apenas “scaneando” uma área do layout e chegamos ao final dela, procuramos imediatamente pelo inicio da próxima linha ou elemento, se ela não estiver posicionada exatamente no local onde o visitante espera que ela esteja, pode causa problemas na navegação, ainda que se leve um milésimo de segundo pra encontrar a proxima área a ser observada.

Gestalt

É impossível falar de organização de elementos sem falar da Gestalt. Para quem não conhece a psicologia da Gestalt é uma corrente de pensamento dentro da psicologia moderna que surgiu no início do sec XX e foi defendida principalmente pelos teóricos Max Wertheimer, Christian von Ehrenfels, Felix Krüger, Wolfgang Köhler e Kurt Koffka. O termo Gestalt povem do alemão mas não tem uma tradução definida, normalmente e definido como “forma” ou “boa forma”

Segundo a teoria da Gestalt, não se pode ter reconhecimento do conjunto analisando-se as partes, mas sim das partes analisando o conjunto. Para que o cérebro consiga decodificar uma informação é preciso que uma série de elementos trabalhem harmoniosamente. Ela trata principalmente de como o homem percebe as coisas, e tendo os princípios básicos da gestalt na ponta da língua é muito difícil cometer erros na hora da organização dos elementos de um projeto.

São eles:

Semelhança

Ou “similaridade”, possivelmente a lei mais óbvia, que define que os objetos similares tendem a se agrupar. A similaridade pode acontecer na cor dos objetos, na textura e na sensação de massa dos elementos. Estas características podem ser exploradas quando desejamos criar relações ou agrupar elementos na composição de uma figura. Por outro lado, o mau uso da similaridade pode dificultar a percepção visual como, por exemplo, o uso de texturas semelhantes em elementos do “fundo” e em elementos do primeiro plano (wikpedia).

É o que faz com que um menu seja visto como um menu. Se vc define uma cor padrão para uma lista de links, ela pode ser vista como um menu.

É muito importante sempre ter cuidado para não permitir que ítens não relacionados seja formatados da mesma forma. Já ví muitos casos em que o webdesigner faz um menu vertival e logo abaixo dele coloca algum aviso ou elemento que mereça destaque usando a mesma textura de fundo, desse jeito pode parecer que o aviso é parte do menu.

PROXIMIDADE

Os elementos são agrupados de acordo com a distância a que se encontram uns dos outros. Logicamente, elementos que estão mais perto de outros numa região tendem a ser percebidos como um grupo, mais do que se estiverem distante de seus similares (wikpedia).

BOA CONTINUIDADE

Está relacionada à coincidência de direções, ou alinhamento, das formas dispostas. Se vários elementos de um quadro apontam para o mesmo canto, por exemplo, o resultado final “fluirá” mais naturalmente. Isso logicamente facilita a compreensão. Os elementos harmônicos produzem um conjunto harmônico. O conceito de boa continuidade está ligado ao alinhamento, pois dois elementos alinhados passam a impressão de estarem relacionados (wikpedia).

PREGNÂNCIA

A mais importante de todas, possivelmente, ou pelo menos a mais sintética. Diz que todas as formas tendem a ser percebidas em seu caráter mais simples: uma espada e um escudo podem tornar-se uma reta e um círculo, e um homem pode ser um aglomerado de formas geométricas. É o princípio da simplificação natural da percepção. Quanto mais simples, mais facilmente é assimilada: desta forma, a parte mais facilmente compreendida em um desenho é a mais regular, que requer menos simplificação (wikpedia).

CLAUSURA

Ou “fechamento”, o princípio de que a boa forma se completa, se fecha sobre si mesma, formando uma figura delimitada. O conceito de clausura relaciona-se ao fechamento visual, como se completássemos visualmente um objeto incompleto. Ocorre geralmente quando o desenho do elemento sugere alguma extensão lógica, como um arco de quase 360º sugere um círculo (wikpedia).

EXPERIÊNCIA PASSADA

Esta última se relaciona com o pensamento pré-Gestáltico, que via nas associações o processo fundamental da percepção da forma. A associação aqui, sim, é imprescindível, pois certas formas só podem ser compreendidas se já a conhecermos, ou se tivermos consciência prévia de sua existência. Da mesma forma, a experiência passada favorece a compreensão metonímica: se já tivermos visto a forma inteira de um elemento, ao visualizarmos somente uma parte dele reproduziremos esta forma inteira na memória (wikpedia).

Esses são principios que nós aplicamos todos os dias sem perceber. mas em alguns casos, são feitas relações entre elementos que não deveriam se relacionar e isso pode causar diversos problemas, como confundir o menu com elementos do design ou com outros textos do site.

Exemplos de sites

Nós que trabalhamos com criação já estamos cansados de ouvir a velha frase “uma imagem vale mais que mil palavras” e realmente não se pode negar essa afirmação. Cada vez mais a turma responsável pela criação vem apelando para bancos de imagem free para reduzir custos e oferecer um orçamento mais competitivo, mas, com isso, temos o risco de mais tarde encontrar aquela mesma imagem sendo usada pela concorrência ou até mesmo num contexto oposto aquilo que você desejava demonstrar, pois uma mesma imagem pode estar aberta a muitas interpretações, o que pode ser muito perigoso para a marca.

Alguns designers e agências encontraram uma solução muito boa, mas que infelizmente não está acessível a todos: a Ilustração.

É incrível a quantidade de estilos e efeitos que existem e as impressões que podem causar, com ilustrações é possível desenvolver desde trabalhos infantis muito atraentes e divertidos até sites de negócios sérios e confiáveis. Tudo depende do traço, das cores e da criatividade.

Para quem já possui talento natural para o desenho essa é sem dúvida a solução mais barata e prática pra esse problema. Mas para a maioria das agências o custo acaba saindo muito próximo ao de um trabalho fotográfico, pois são poucas as agências que dispõe de um ilustrador, uma pena.

Na maioria das vezes quando trabalhamos com ilustrações o resultado é bem interessante, até impactante, eu diria. É muito fácil ficar surpreso com um site ilustrado bem feito, como é o caso do BMF, o único risco é o visitante ficar muito interessado pela interface e deixar de ver o produto, bom para o webdesigner ruim para o cliente.

Para aqueles, que como eu, não tem muito talento pra desenho, existe uma solução bem interessante, mas que requer um pouco de prática: vetorizar imagens.

Eu faço isso sempre. Meu primeiro vetor levou cerca de quatro horas para ficar pronto, mas o resultado foi bem legal. Hoje em dia está bem mais rápido principalmente com as ferramentas de vetorização do fireworks que são simples até mesmo para quem não tem nenhuma prática.

Foi desse jeito que eu desenvolvi o site Errus Jeans, o material do cliente era de péssima qualidade, as fotos em baixa resolução e com uma produção muito ruim, então eu preferi descartar esse material e criar o meu próprio. Selecionei alguns desenhos de sites free, redesenhei com as ferramentas de vetor do fireworks e usei para compor os ambientes. Com um pouco de prática e criatividade o processo se torna simples. No final deixarei alguns tutoriais para ensinar esse processo.

A seguir alguns exemplos que eu encontrei de sites ilustrados. Tenho certeza que vão gostar muito.

São elementos belos e realmente podem enriquecer um trabalho quando usado sem exageros. Em alguns casos o projeto pode ser completamente baseado nessas estruturas de contornos florais, linhas onduladas e formas geométricas. Em outros o uso é mais sutil, apenas como elemento decorativo adicionando um toque de sofisticação à página, como no caso do Speakup que usa arabescos num estilo de pixel art apenas para dar peso à alguns elementos reforçando a hierarquia do local.

Um dos melhores jeitos de decidir quando e como usar ornamentos é realmente experimentando. Isso naturalmente desafia o tempo de desenvolvimento, mas os resultados finais pode ser realmente impressionantes.

Em alguns casos, como era de se esperar, esses elementos são usados para reforçar um conceito como é o caso do Resist to day que usa ornamentos para remeter o visitante à uma espécie de “idade do ferro”.

Elementos ornamentais são o tipo de coisa que vira-e-mexe volta a  moda, mas que nunca é descartado completamente. Essa arte sempre foi bela, e sempre terá lugar garantido nas artes visuais.

O que eu considero realmente surpreendente é quando o designer consegue usá-los em formas suaves e modernas. Isso prova que esse estilo não é belo somente quando aplicado em um fundo vitoriano, mórbido e umbral. Arabescos podem ser  elementos modernos e elegantes.

Um ótimo exemplo disso é Tub atomic. O site poderia facilmente ter caído no básico, mas usando bem os elementos ornamentais o layout ganhou um diferencial. E a forma como fizeram isso é muito exclusiva. Principalmente pelo uso da cor preta no fundo evitando as conotações de marrom tão usuais nesses modelos. E o logo da agência ajuda conferindo um ar moderno “quase pixel”.

Um outro site muito interessante é o Brain food. Ele transmite alegria. Nesse caso dois elementos dão claramente ao projeto uma sensação de frescor: a paleta de cores e e o ar de modernidade que este site tem. É um daqueles que eu gostaria de ter feito.

Tecnicamente…

Existem dois tipos de arte arabesca. No primeiro modo, cada repetição de forma geométrica tem um simbolismo atribuído. Por exemplo, o quadrado, com seus quatro lados iguais, é símbolo dos elementos igualmente importantes de natureza: terra, ar, fogo e água. Sem qualquer um dos quatro, o mundo físico, representado por um círculo que envolve o quadrado, cairia sobre si e deixaria de existir. Esse estilo tem sua origem nas crenças islâmicas conforme explico mais abaixo.

O segundo modo é baseado na natureza fluente de formas de plantas, folhagens e curvas. Este modo lembra a natureza feminina de dar vida. Surgiu basicamente na Europa, de um processo de distorção do formato original.

Alguns estudiosos acreditam que exista ainda um terceiro tipo: a caligrafia Arábica. Isso porque essa escrita, em sua essência e forma é uma expressão visível da arte mais elevada de todas: a arte da Palavra.

No Islamismo

Esse conjunto de formas, também conhecido como “moresque”, é usado geralmente  para decorar paredes de mesquitas. É, originalmente, uma aplicação elaborada e harmoniosa da repetição de formas geométricas e folhagens.

constituem um padrão infinito que se estende além do mundo material visível. Para muitos simboliza o infinito sem centro e, conseqüentemente, a natureza da criação do Deus Allah. Além disso a arte islâmica do arabesco inspirou  a iconografia da arte cristã. Aos Muçulmanos, o Arabesco é simbólico de sua fé unida e a forma que culturas Islâmicas tradicionais vêem o mundo.

O arabesco é antes de tudo misticismo, ciência e deve ser matematicamente preciso. Acredita-se que todas as formas de arabesco são criações divinas e que o homem pode ocasionalmente descobri-las, mas essas formas existiram sempre como parte da criação de Deus.

No Ocidente

A arte arabesca é basicamente uma série de formas repetidas que ocasionalmente são acompanhas de caligrafia.

Apesar da presença muçulmana na Espanha, o termo “arabesco” se introduziu no Oriente graças as relações comerciais entre Veneza e o Oriente Médio durante o Renascimento.

Os primeiros vestígios dessa arte na Europa datam de 1308 em quadros de Duccio, em Sienna, porém só se difundiu realmente no séc. XV através do trabalho dos Venezianos Cima da Conegliano (1460-1465), Vittore Carpaccio (1525-1526) e Palma Vecchio. A partir desse período encontramos arabescos em ilustrações aplicadas sobre encadernações, também sobre louça, bordados em toalhas e decorando objetos de metal.

Arabescos também foram utilizados na França em livros destinados ao Rei Louis XII (1510) e o primeiro livro inteiramente decorado com arabescos é do florentino Francesco Pellegrino (1530), sendo depois aplicados por editores de Lião e Paris.

Em seguida, na Alemanha e na Inglaterra, foram publicados livros de modelos de arabescos em parte copiados dos elementos italianos.

No séc XVIII uma confusão se instala por causa de formas grotescas, baseadas em formas humanas e de animais que não eram permitidas no original baseado no Islamismo, e isso desviou um pouco o uso da palavra arabesco, assim, em alguns livros, desenhos de alunos de Raphael são descritos como arabescos.

Nos sécs. XIX e XX, o nome arabesco passou a ser usado para determinar todo e qualquer jogo de linhas e é recomendado o uso da palavra “moresque” quando se fizer alusão à arte dos padrões de origem islâmica.

Finalizando

Tenho certeza que vocês considerarão os exemplos a seguir realmente adoráveis e de muito bom gosto, pois é isso que os arabescos sugerem, são elementos ricos em história e significado.

Exemplos de sites

• visitar
• visitar
• visitar
• visitar
• visitar
• visita

Downloads de fontes Arabescas

Quando tratamos de moda, normalmente vendemos a beleza em primeiro lugar e em seguida o conceito da marca.

Em primeiro lugar temos que deixar claro que quem usar aquela marca vai estar sempre bonito e atraente e em seguida enfatizar o conceito que a marca (normalmente o estilista) deseja oferecer com suas peças, se é descontração, essa será a linha que vamos seguir.

Normalmente em se tratando de moda, a campanha muda quatro vezes por ano, mas o conceito deve ser mantido sempre. Se uma marca precisa mudar seu conceito por qualquer motivo, deve ser feito um estudo muito cuidadoso, pois isso vai mudar completamente a forma como seu publico alvo se identifica com ela, e em alguns casos, mudando o conceito o público consumidor pode mudar.

Existe um número imenso de conceitos que podem ainda ser combinados criando uma gama infinita de estilos de criação.
Vamos usar como exemplo três termos. Cada um deles possui um conceito de que deve ser explorado para garantir que o site e todo o material publicitário falarão a mesma linguagem. Normalmente quem define esse conceito é o estilista.

Exemplos de conceitos:
-Descontração: que remete a relaxamento e quebra a formalidade excessiva
-Conforto: garante que estará confortável em qualquer situação
-Elegância: remete há um pouco mais de formalidade

Exemplo de combinações:
- Elegância + descontração: peças com um toque formal, mas que podem ser utilizadas no dia a dia, normalmente é o estilo de jovens executivos.
- Elegância + Conforto: peças um pouco ou muito formais, porém confortáveis (tecidos mais leves e finos, sapatos de material mais maleável e solado mais macio, etc).
-Descontração + conforto: Roupas leves para o dia a dia.

É claro que dados como: sexo, faixa etária, localização e estação do ano são fundamentais. Mas apenas com a idéia de conceito já é possível montar um perfil superficial de público alvo e da idéia que o projeto deve transmitir.

Com essas informações na cabeça, passamos então ao processo de criação.

Longe e de volta ao básico, estilo e tendências.

Lembre-se que em se tratando de moda, para vender uma idéia é preciso que o público esteja familiarizado com ela, que se identifique e consiga trazê-la para o seu contexto social.

Quando o publico alvo é principalmente jovem, temos a possibilidade de projetar uma navegação atípica, usando elementos de criação complexos passando muito longe do básico, como é o caso da Lee Jeans e da Laundry. O estilo retrô, o Rock’n Roll e o distressed estão muito em alta, principalmente em marcas de jeans e street que remetem a juventude. E agora o espaço para um pouco de misticismo também está se abrindo graças à nova novela global das 18h “Eterna magia”(blaaaargh!), trata da magia celta e a influência já pode ser notada no site da Levi’s, deusas, deuses e seres mitológicos vão começar a aparecer. Você devem se lembrar da campanha ” sony 10 anos na moda” onde a marca Laundry customizou uma bolsa para presentear os vencedores, e ela vinha ilustrada com motivos celtas… Já tá aí…

Enquanto a juventude trata de rebeldia, bagunça, barulho e movimento, a moda adulta já remete a sobriedade, e elegância é a palavra chave.

Na moda feminina sensualidade também é importante. Veja por exemplo o site “Donna Moça“, percebam que todo conceito da moda inverno é mostrar a mulher como uma profissional bem sucedida com tailleurs e terninhos que tornam cada vez mais a mulher executiva parecida com o homem executivo mas sem perder a sensualidade, eu não sei se isso é bom ou ruim, algumas pessoas sugerem que é preconceito, eu não sou feminista. Na hora de desenvolver um site nesse estilo quais são as sugestões? Para o inverno: cores sóbrias: marfins, marrons, grafites, beges e principalmente o cinza. Para o verão: vermelho, azul, verde todos em tons escuros e/ou acinzentados, deixe as cores vibrantes para as mais jovens. Independente da estação: animações suaves e leves, pois é isso que uma profissional bem sucedida deve ser, nada de extravagância.

Lembre-se que se o seu trabalho for para a coleção verão 2007/2008 o estilo retrô deve ser a primeira opção tanto para os jovens quanto para os adultos, para os jovens: cores brilhantes (muito saturadas) e  para os adultos cores mais foscas (pouco saturadas).

O material e as ferramentas

Por causa da versatilidade e do impacto causado pelo movimento (o velho “pisca-gira-pula”) a maioria desses projetos são desenvolvidos em flash e como o conteúdo é praticamente visual a quantidade de textos é sempre pequena.
Atualmente com a novidade dos efeitos criados com o combo Xhtml, CSS e javascript já é possível deixar o flash um pouco de lado e investir em tecnologias mais acessíveis como é o caso do site da Gucci.

A grande maioria dos sites de moda tem como elemento base à fotografia. Quando esse material é de qualidade o trabalho do webdesigner é relativamente simples: apenas encontrar o melhor meio de mostrá-las.

Cabe então decidir quais elementos serão adicionados, se deveremos investir numa tipografia mais elaborada ou mais simples e se o conceito da marca permite interferências criativas como linhas, formas vetoriais, manchas, respingos, texturas, gradientes, etc. Os sites Absolutti Tricot e Malharia Nacional são bons exemplos disso.

Quando esse material não é oferecido, nós designers encontramos um grande obstáculo pois como eu falei anteriormente moda é imagem, nesse caso cabe a nós encontrar a melhor forma de transmitir o conceito da marca, uma delas é utilizar bancos de imagens, existe alguns frees outros com valores a partir de 1 dólar e se souber trabalhá-las pode conseguir um efeito muito bom sem precisar exatamente de fotos do produto do cliente como no site Pólo UK, nós evidentemente não fomos a um campeonato de pólo .

Outra opção é trabalhar mais as cores, formas e texturas, assim é possível ocupar bem o espaço e nem deixar que o visitante perceba a falta de imagens.

Se o site for infantil, então é ainda mais simples, basta ter uma aptidão pra desenho, ou conhecimento em algum software de edição de imagens, assim é só encontrar alguns desenhos com temas interessantes e editar, vetorizar ou redesenhar, foi o que eu fiz quando desenvolvi o site Erru’s

Pré-justificativa

Ps.: Optei por dividir os exemplos de sites a seguir em duas partes: brasileiros e internacionais. Nesse artigo eu quis falar apenas das tendências de sites brasileiros apesar de citar um ou outro internacional, fiz isso porque é importante deixar claro as mudanças que existem principalmente por causa das estações do ano: enquanto é verão aqui é inverno lá e isso pode causa uma grande confusão se utilizarmos sites de grandes marcas internacionais como referência. Portanto, muito cuidado.

Ps2.: Não escolhi nenhuma ordem especifica pensei em separar por estações do ano, mas sites de moda, em geral, são atualizados com freqüência e logo essa ordem estaria bem confusa. Ah! O  layout muda sempre também, pode ser que alguns thumbs fiquem desatualizados bem rápido pois eles não são gerados automaticamente.

Exemplos de sites nacionais

Exemplos de sites internacionais

Ultimamente tenho falado bastante sobre a criação de um portfolio, e esse artigo está diretamente relacionado já que a maioria dos sites que seguem esse estilo são portfolios pessoais, no entanto eu acredito que essa seria uma solução muito boa para alguns sites institucionais em que, muitas vezes, optamos por uma estrutura mais complexa.

Muitas vezes, não há muito que dizer e acabamos preenchendo as páginas com o um pouco de “lero lero“apenas para ter uma estrutura padrão de “home, produto, empresa, contato”. Eu acredito que a causa disso seja o fato de que projetos desenvolvidos em uma única página ainda são atípicos e inconscientemente podem causar a impressão de algo feito às pressas e sem planejamento (o que na maioria das vezes não é verdade) e, mesmo que tenhamos pressa, não queremos que os outros percebam isso, a idéia já é descartada antecipadamente.

Eu não gosto de dizer que uma técnica é a mais fácil de ser executa do que outra, mas essa, em especial, pode ser uma solução bastante simples pra quem precisa de uma portfolio e não tem tempo para desenvolver uma estrutura mais elaborada. A receita é simples: junte todo o conteúdo em uma lista bem organizada, com uma estrutura bonita e sem complicações. Et voilá! Temos um portfolio.

Isso evidentemente não se enquadra a todo profissional, mas para muitas situações pode ser uma grande idéia.

A maior vantagem de se projetar o portfolio nesse formato é clareza que as peças ficam disponíveis. Isso é especialmente importante para aqueles que buscam novos negócios e precisam mostrar seus trabalhos de forma simples e rápida.

Para quem tem poucos trabalhos a exibir, pode optar pela visualização como está no site do Laert Jansen e para quem quer mostrar muita coisa pode dividir em pequenos quadradinhos como no mofo, exibir só uma parte do site como fez o Cassius Fraga, ou usar o formato de banners como no site do Junior. Em alguns casos, da até pra juntar vários formatos de exibição como o Paulo Tenorio conseguiu fazer muito bem.

O problema dessa forma de apresentação é que as peças expostas no portfolio precisam ser muito boas, pois o layout é normalmente muito simples e pouco impressionante, realmente, se você não tem certeza da qualidade do seu trabalho, ou se está ingressando agora nessa área talvez seja melhor optar por outra solução, como já falado aqui e aqui. Por outro lado nada impede de criar um layout mais elaborado também.

Alguns exemplos comentados

Acho que o motivo pelo qual eu escolhi esse site dispensa explicações, no momento em que você visitar vai ficar bem evidente. Só acho que pecaram na navegação, é difícil encontrar os links, mas ainda assim serve como inspiração.

Esse é o melhor exemplo que encontrei de site que com uma navegação convencional podem montados em uma página só, tudo depende da quantidade de informação.

Alguns sites, a maioria em flash ou html com iframe, apresentam a estrutura de uma página, mas não são. Eles possuem uma paginação ainda que discreta.

Esse é outro exemplo de site de uma página só e com uma navegação atípica. Eu adoro a facilidade de visualização e forma como escolhemos

Esse é é o exemplo mais comum desse tipo de navegação: os trabalhos são apresentados por inteiro em uma única página onde também encontramos informações de contato e uma pequena “Bio”

Exemplos de sites