Antes de mais nada, eu confesso que estou entrando num território muito perigoso, que eu não domino completamente e que não faz parte do meu campo de atuação. Não pensem que eu estou desmerecendo o trabalho de vocês especialistas em identidade visual, simplificando a criação do logotipo aos conceitos abaixo, muito pelo contrario, quero explicar o quanto esse processo é complexo e como a prática é importante. Minha intenção é apenas mostrar algumas coisas que eu aprendi ao longo do meu tempo de trabalho para aqueles que tiveram pouco ou nenhum contato com essa área.
Espero muito receber correções e outros pontos de vista de vcs profissionais da área.
Vamos lá!

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.

Oi Pessoal… Tá, não briguem comigo, eu ando sumida, mas eu volto…
Bom, nesse momento eu estou no meio de algumas mudanças, estou analisando algumas propostas interessantes, logo logo vou ter novidades…
Por enquanto eu estou um pouco sobrecarregada de trabalho, e tenho recebido cada vez mais pedidos de propostas e orçamentos que eu não tenho tido nem tempo de responder, então percebi que está na hora de começar a montar meu próprio time para não deixar essas pessoas que me procuram sem um atendimento.
Minha ideia é montar um banco de freelas que eu posso procurar em emergências.
Alguns projetos eu vou acompanhar e fazer a ponte e gestão entre o cliente e o desenvolvedor, outros eu vou apenas passar o contato.
Além disso, uma grande quantidade de pessoas me procuram pedindo indicações para freelas e até contratações efetivas, esse banco também vai servir para esse tipo de indicação
Então se vc procura por projetos freelas, nessa semana eu tenho pelo menos 3 propostas. São projetos pequenos então não precisa ser muito experiente, mas tem que ter bom gosto porque eu vou avaliar/aprovar pessoalmente cada trabalho e quem já trabalhou comigo sabe que eu sou bem chata. Mas por outro lado, como falei no inicio, tenho a intenção de montar um time de freelas, mais tarde quem sabe a coisa de certo e possa surgir uma agencia daí… Quem sabe…
As pessoas que já trabalharam comigo sabem também que eu priorizo o time acima de tudo e todos envolvidos poderão contar com o máximo da experiência e apoio que eu posso dar.
É isso
Se vc ficou interessando em participar segue o link para cadastro:
http://spreadsheets.google.com/viewform?formkey=dEdsZ2ZCQW80Q1lvQldQSVpUZVZjRnc6MA

Uma boa tipografia na web é algo que realmente me impressiona, porque é tão fácil escolher a fonte errada. Eu propriamente acho que nunca fui muito bem sucedida na realização de um projeto baseado em fontes.

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”.
Continue Lendo »

Vc não sabe pq meu blog está pelado?

Entenda isso aqui

Minha mesa de trabalho
Muita gente já fez. Essa é a minha mesa de trabalho

Desenvolver formulários para web pode ser divertido ou frustrante e exige uma grande dose de persistência e determinação.

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

De todas as cores, o azul talvez seja uma das mais seguras para se usar em um Web site. Podemos aplicá-la a quase todo o assunto, simplesmente porque o azul é uma das cores mais admiradas pelas pessoas. Pode ser forte e firme ou suave e amigável. Nunca ouvi falar de alguém que não admira ao menos uma tonalidade de azul.

A Técnica

É excencialmente uma cor fria. Mas a medida que acrescentamos sombra ao azul, ele se torna mais quente, sendo assim quanto mais escuro o azul, mais calor ele transmite podendo até deixar de ser uma cor fria.
Continue Lendo »

(atualizado com novos exemplos)
Projetar seu portfolio é provavelmente a coisa mais frustrante do mundo.

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…

Continue Lendo »

Oi Pessoal, mais uma vez estou na luta pra encontrar um profissional bacana pra minha equipe de web aqui na agência. Dessa vez estou procurando um conhecimento mais específico: pessoas com conhecimento da plataforma wordpress ou outro CMS como gerenciador de conteúdo.
Agora os meus requisitos básicos: Preciso de alguém com talento e interesse em ser web designers mesmo, descartando toda a turma de designer gráfico que quer fazer bico de web e semelhantes.
preciso de interesse e conhecimento de mercado.
A agência trabalha especificamente com criação e estruturação, envolvendo AI, webstandards, flash+AS, toda parte de programação é terceirizada com outra agencia da área, então não temos interesse em programadores.
Ficamos em São Paulo-SP, e só contratamos para trabalho integral. só trabalho integral na agencia! NÃO TEMOS INTERESSE EM TRABALHOS EXTERNOS!
A remuneração vai ser analisada (com justiça) para cada caso.
Os interessados, por favor, entrem em contato pelo e-mail daniele@allclickdesign.com.br
Quem quiser saber mais sobre os trabalhos do grupo (pool de quatro agencias) basta acessar os sites:
www.b2brasil.net
www.dgrau3.com.br
www.allclickdesign.com.br
www.estudiolumiar.com.br

Pesquisas de mercado indicam que mais de 80% da informação visual é relacionada a cor.

O uso de cores diferentes para identificar a marca de alguns produtos pode ser visto em toda parte, como é o caso dos filmes fotográficos: preto e amarelo pra Kodak e o verde e branco pra a Fuji.

Até pouco tempo, a cor como identidade de uma marca era protegida por lei e certas combinações não poderiam ser usadas devido a força da associação que faziam a determinados produtos ou fabricantes.
Continue Lendo »