Daniele Viana - Blog

Minha mesa de trabalho

danielevsilva — Fri, 03 Oct 2008 02:22:58 +0000

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

Como criar formulários - Dicas e truques de Usabilidade e layout

danielevsilva — Sun, 31 Aug 2008 01:32:46 +0000

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

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 , 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/?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 é obrigatória para formulários. Não esqueça que ela deve ser fechada no final “”

Input

O 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

É 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

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

É 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:

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

Image

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

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

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:

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

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

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

Textarea

A tag 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

A etiqueta seleta tem vários atributos, e o fechamento 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

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,

, , até mesmo as tags

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 , , etc, o formulário possui seus e , que usados de forma correta são capases de organizar todo tipo de dados de formulários.

Vamos conhecer melhor essas tags

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 está relacionada a tag pelos atributos “for” e “name“, ou seja: a o atributo “for=” da tag deve ser igual ao atributo “name” do input.

Nome:

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.

Nome:
Nome:

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

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.

Aqui vai a legenda

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

Alguns geradores de formulários:

O azul - Uma breve analise das cores (atualizado)

danielevsilva — Sun, 20 Jul 2008 13:30:05 +0000

(atualizado com novos exemplos)

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.

Uma vantagem em se usar o azul é que praticamente não existem distúrbios de visão relacionados a ela, apenas os problemas mais sérios afetam a identificação dessa cor. O azul é azul pra praticamente todo mundo.

Se o contexto cultural e temático é favorável, o azul é uma excelente cor de fundo, já que contribui par a tornar as linhas de rasterização mais difusas.

A natureza do azul

É a cor do céu e isso é universal, em qualquer contexto cultural ou linguagem o azul está diretamente relacionado ao celestial. O efeito frio e tranquilo do azul causa a impressão de fazer o tempo passar mais rapidamente e pode ajudar a dormir, por isso é uma boa cor para pintar paredes em quartos e áreas de relaxamento. No entanto, excesso do azul pode deixar uma impressão de umidade e isso causaria desconforto.

Azul transmite confiança e seriedade sem ser sombrio ou sinistro. A maior prova disso é o fato dele ser quase padrão nos ternos de executivos nas grandes corporações e também em carros e uniformes da polícia. Quando em tons mais escuros é associado a inteligência, a experiência, a estabilidade e ao conservadorismo.

Um fundo em azul bem vivo ou azul-celeste transmite riqueza e algumas vezes um toque de superioridade.

Da mesma forma que ao vermelho atribuímos o extremo das emoções fortes, o azul representa o extremo dos sentimentos leves.

Cultura

Em muitas culturas o azul tem significados religiosos, está relacionado a paz e pureza e algumas vezes é atribuída a ele a capacidade de afastar maus espíritos. No Irã, o azul é a cor de luto e em outros países árabes é a cor da tradição nupcial representando o amor.

Combinações

Combinar uma cor clara ou neutra, bege, por exemplo, com o azul escuro transmite confiança e sinceridade (ótimo para bancos e instituições financeiras).

Combinações de azul e verde remetem a qualidade de vida, estão diretamente relacionadas a saúde e a natureza. São as cores dos spas, das farmácias homeopáticas, das empresas que valorizam o desenvolvimento sustentável. São as cores da moda. Adicione um pouco de cinza e você terá ecologia com um toque de sofisticação. Combinando o azul celeste com tons claros de marrom ou bege também conseguimos uma paleta com conotações de natureza.

Utilize o azul para esfriar uma paleta quente com tons de vermelho ou laranja. Mas essa combinação e perigosa, pode ficar escura e causar sensações estranhas. Lembro também que o uso de alguns tons de vermelho ao lado do azul pode causar efeitos de ilusão de optica deixando uma “faixa cinza” entre as duas cores. Use contrastes de azul e amarelo para atrair a atenção, mas cuidado pois também pode se tornar gritante e consequentemente cansativo.

A combinação do azul com branco é extremamente refrescante principalmente o azul marinho, é a combinação náutica. É uma combinação intyeressante para projetos mais cleans, leves ou minimalistas e também pode ficar ótimo adicionar alguns elementos em vermelho escuro para dar destaque e aquecer um pouco a paleta, principalmente linhas e titulos. Sugiro o azul escuro com toques de prata para uma aparência elegante e rica.

Embora o azul seja diretamente relacionado ao inverno, pode ser relacionado também a primavera, quando usado em tons pasteis junto com cor-de-rosa ou amarelos pálidos. Gradientes sutís de azul trazem um pouco de sofisticação sem perder o conservadorismo, e isso fica mais evidente se adicionamos o bege e outras cores neutras e claras.

Mais paletas em: Colourlovers

Um pouco da história

Até o inicio da idade média, a cor azul foi considerada nobre devido a dificuldade de se conseguir pigmentos dessa cor. O vermelho, o preto e o branco eram as cores mais fáceis de serem fabricadas e por isso mais baratas, sendo assim pigmentações azuis ficavam restritas a uma pequena parte da nobreza.Os egípcios, no entanto, já utilizavam o azul como pigmento mais de 5 mil anos antes. Ele era extraído de uma pedra semipreciosa o lápis-lazúli.

No sec.VI a técnica egípcia de chegou a Europa, mas a pedra chegava a custar mais do que o ouro. Com a descoberta do caminho para as Índias no final do séc. XV, o pigmento conhecido como Indigo indiano passou a ser muito utilizado na Europa, mas foi proibido sob pena de morte para tentar preservar o tom produzido com a pedra, muito mais rentável, logicamente.

Em 1704 foi descoberto um pigmento na Alemanha, numa experiência com oxidação de ferro. Custava um décimo do preço da tinta feita a partir do lápis-lazúli e fez sucesso entre os pintores da época. Logo a indústria química evoluiu e possibilitou o desenvolvimento de centenas de outros pigmentos mais baratos, o que foi crucial para o surgimento do impressionismo, no séc, 19, com Monet, por exemplo que valorizava muito a cor, mas como os pigmentos da época ainda não possuíam grande resistência, muitos trabalhos da época sofreram descoloração.

Conotações do azul

Patriotismo, estabilidade, poder, credibilidade, conservadorismo, á;gua, frieza, divertimento, frio, derrota, problema, luz firme, forte tranqüila, confiante amigá;vel, inteligência incorporada, unidade, depressão, riqueza, superioridade, harmonia, acadêmica, nobre, fiel, leal sincero, limpeza, tecnologia.

Exemplos de uso

Sugestões de leitura

Psicodinâmica das Cores em Comunicação MODESTO FARINA
Sinopse: O papel das cores na Comunicação analisado em linguagem simples e direta pelo autor, professor da Escola de Comunicação e Artes da USP. Uma obra fundamental para trabalhos acadêmicos no setor.
R$ 69,90

Links: Geradores de Cores

ColorBlender.com - Gerador de cores
Color Scheme Generation - Gerador de cores
Color Blender - Gerador de cores
Color Schemer Online v2 - Gerador de cores
Color Schemer Gallery - Gerador de cores
Color In Motion - Animação sobre pscicodinamica das cores
Color Symbolism - Simbolismo das cores (inglês
Color blind - Mostra como pessoas com distúrbios de visão enxergam o seu site

Portfolio - Técnicas, dicas e exemplos de criação (atualizado)

danielevsilva — Sun, 20 Jul 2008 13:06:48 +0000

(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…

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 letsrider e 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

Ferramentas, dicas e sugestões

Wordpress: Essa é a ferramenta que uso pra atualizar esse site/blog. Para quem não conhece é uma especie de script bem robusto que permite criar e atualizar blog com as mesmas facilidades de um sistema como o blogger e outros, só que você intala no seu próprio servidor e pode personalizar como quiser. Esse site é inteirinho atualizado com ele, inclusive as páginas fora do blog.
- Pode ser encontrado pra download em: www.wordpress.org/ (Inglês)
- Mais informações em: www.pt-br.wordpress.com/ (pt) e www.portalwordpress.com.br/wp/ (pt)
- Instalação: www.rodrigomuniz.com/blog/como-instalar-o-wordpress/
- Lista de discussão: www.groups.google.com.br/group/wordpress-brasil; - Ex.: www.danielevsilva.com
Joomla: Um projeto de código aberto (tem licensa GNU/GPL) que permite total controle e fácil administração do conteúdo. Instalar o Joomla é relativamente simples e requer apenas conhecimentos básicos de computação, não necessitando conhecer programação em qualquer linguagem.
- Pode ser encontrado pra download em: www.forge.joomla.org/ (Inglês)
- Mais informações em: www.joomlabrasil.org (pt) e www.joomlapt.com/ (pt)
- Lista de discussão: www.groups.google.com.br/group/joomlabr
- Ex. www.paulopereira.com/corp

Vaga de trabalho na minha equipe (denovo) - wordpress

danielevsilva — Tue, 10 Jun 2008 17:09:11 +0000

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

Como criar combinações de cores mais inteligentes

danielevsilva — Sat, 07 Jun 2008 14:13:31 +0000

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.

Hoje em dia pensar nisso parece engraçado, imagine se houvesse qualquer tipo de patente sobre combinações de cores, certamente as mais atraentes já teriam se esgotado a tempos…

Mas pensando bem, isso parece correto?

Existem dois lados que devem ser considerados: é correto uma empresa se beneficiar do crédito que outra marca levou anos para conseguir? Isso sem falar no investimento. Você deve se lembrar do que aconteceu meses depois do lançamento do livro o “O Código Da Vinci”, o livro fez tanto sucesso que até hoje encontramos capas praticamente idênticas, todos eles tentando ficar com um pontinha da fama que o polêmico Best-seller conseguiu, e as vezes isso funciona. Essas publicações despertam pensamentos como “ah! Parece ‘O Código Da Vinci’ deve ser bom!” e muita gente acaba levando pra casa só por curiosidade.

Por outro lado, existem alguns princípios que devem ser observados em se tratando de cores: eu costumo dizer que quando você trabalha com informação, sempre existem muitas formas de se fazer a mesma coisa, ou se passar uma mensagem mas, quando você sabe o que está fazendo, passa a existir apenas uma maneira: a maneira certa. E se ela já foi usada? Como ficamos então? O caminho certo e seguro se torna plágio se você utiliza as mesmas cores que seu concorrente?

Se analisarmos os efeitos que a cor pode causar ao consumidor, fica fácil entender por que, em alguns segmentos, existem padrões tão específicos, muitas vezes repetitivos. As vezes pode ser frustrante para o criativo, eu prefiro ver como uma seta indicando por onde começar.

O que você está tentando vender? Um produto? Uma idéia? Um serviço? Um conceito? Seja o que for, existe uma combinação de cores que será perfeita, que determina o sucesso ou o fracasso de um projeto.

Alguns exemplos de “inspiração”

Só para descontrair, veja alguns exemplos que encontrei de casos considerados plágio ou um tipo de inspiração um pouco mais perigosa do que o normal.

Então como escolher a combinação de cores certa na hora de criar uma peça?

Como eu já falei e vivo repetindo, antes de tudo, precisamos saber perfeitamente o que estamos fazendo. Se você ainda não chegou nessa fase, seu briefing não foi bom o suficiente, você precisa de mais informação, então procure novamente o cliente, tente conversar, escute o que ele tem a dizer, na maioria das vezes ele não morde. Nós temos uma tendência a acreditar que o cliente só quer dificultar o nosso trabalho, mas temos que lembrá-lo quem é o maior interessado no sucesso da marca. Ninguém conhece melhor um produto do que o seu fabricante ou proprietário.

Se já conhece o seu produto vamos tentar transformá-lo em cores passando pelos processos abaixo:

Determinar os efeitos psicológicos que estão relacionados

São raros os casos em que uma cor está diretamente relacionada a um produto, normalmente ela se relaciona com o ambiente ou estado de espírito sobre o qual o nosso produto exerce sua influência, e nós aproveitamos essas características para transmitir nossa mensagem.

Determinar quais conotações são mais importantes

É preciso saber quais os pontos fortes e fracos do nosso produto. Usamos os pontos fortes para determinar as características fundamentais na escolha das cores, e os pontos fracos para escolher quais cores atenuam essas características desvantajosas.

Vamos tomar como exemplo uma loja de pequeno porte, especializada em computadores e periféricos. Vamos chamar de LCP (loja de computadores e periféricos). O ponto mais forte é que seus produtos são de primeira linha, e o mais fraco é que têm um custo auto (ok, isso não é um briefing, mas eu garanto que é mais do que muitas pessoas que passam por aqui, chegam a receber). Então com base nessa idéia, quais cores nós conseguimos selecionar num primeiro instante? Os exemplos abaixo podem ajudar um pouco. Você pode encontrar informações detalhadas sobre essas cores nos artigos anteriores que escrevi.

* Cinza: Tecnologia futurista, moderno, inovador, fresco, classe, elegância, chique, criatividade, conservador, neutro, macio, aéreo, aberto, imparcial, tranqüilo, confortável, pacífico, e descontraído.

* Vermelho: Patriotismo, conservadorismo, natal, estabilidade, poder, calor, fogo, divertimento, sangue, sucesso, sagrado, coração, emoção, coragem, amor, fortuna boa, calor, quente, mal, inferno, raiva, batente, respeito, vitalidade, força, agressividade, energia intensa, elevada, perigo, comunismo e paixão.

* Azul: Patriotismo, estabilidade, poder, credibilidade, conservadorismo, água, frieza, divertimento, frio, derrota, problema, luz firme, forte tranqüila, confiante, amigá;vel, inteligência incorporada, unidade, depressão, riqueza, superioridade, harmonia, acadêmica, nobre, fiel, leal sincero, limpeza, tecnologia.

* Rosa: Paixão, romance, amor, inocência, suavidade, relaxamento, tranqüilizante, repousante, sensualidade, frescor, casamento, saudável, brincadeira, amável, doce, felicidade, vida, sexualidade, pureza, gratidão, apreciação, liberdade.

* Verde: Natureza, ambiente, dinheiro, riqueza, família, harmonia, saúde, paz, posteridade, suavidade, relaxamento, primavera, juventude, humor, divertimento, felicidade, vida, crescimento, ciúme, inveja, aprendiz, acalmar, repousar, equilíbrio, estabilidade, verão, árvores, fertilidade, boa sorte, e vigor.

* Amarelo: Natureza, terra, calor, divertimento, sol, verão, iluminação, inspiração, energia, perigo, aviso, emergência, luz do sol, felicidade, alegria, covardia, engano, animação, saúde, esperança, apoio, primavera, e descontração.

* Roxo: espiritualidade, criatividade, realeza, sabedoria, resplandecência;

* Laranja: energia, criatividade, equilíbrio, entusiasmo, ludismo;

* Preto: poder, modernidade, sofisticação, formalidade, morte, medo, anonimato, raiva, mistério;

* Marrom: credibilidade, sólidez, seguro, calmo, natureza, rústico, estabilidade, estagnação, peso, aspereza.

Determinadas as suas conotações, você terá uma lista de cores interessantes que podem ser utilizadas. Se tudo der certo, as combinações de tonalidades serão infinitas e ao invés de ter encontrado uma solução para o seu problema, tudo pode ter ficado mais difícil. Com tantas cores ótimas e expressivas, quais delas eu devo usar?

Concluí, que as conotações principais desse cliente seriam: modernidade e credibilidade. Cheguei a conclusão de que as cores que se enquadram nesse perfil são: cinza, preto, azul, marrom. Hum… Talvez tenha cores demais aí.

Passamos então a segunda fase:

Determinar os aspectos visuais positivos e negativos

As cores são muito mais do que aspectos decorativos, elas são “física” e isso poder tornar um pouco mais difícil de entender. Já falei bastante sobre isso aqui e aqui e por isso não vou me prolongar, mas em geral, as cores possuem aspectos e comprimentos muito variáveis, e algumas combinações podem ser ilegíveis ou cansativas, é assim que nós começamos a eliminar cores.

Nessa fase devemos determinar dois aspectos principais: aspectos físicos (visibilidade, contraste, leitura, etc) e conotações (aspectos culturais e psicológicos). No caso das cores que eu determinai para a LCP, as combinações não são muito perigosas.

Cinza + preto: essa combinação pode ser cansativa se for mal empregada, excesso de contrastes podem tornar o ambiente muito bagunçado e causar a impressão de que as coisas estão fora de lugar. Por outro lado, quando é bem empregado, com tons bem sutis e um pouco de branco o resultado pode ser muito inesquecível. Quando seu cliente permite um pouco de ousadia, fugindo do clássico, é uma ótima opção. É técnológico, é clean, mas se não for muito bem empregado por deixar de trazer o aspecto de segurança que o cliente quer.

Azul + marrom: Essa é uma combinação perigosa. Das três até agora, é a mais perigosa de todas, pois marrom e azul são cores que, dependendo do contraste pode resultar numa leitura difícil. Mas é uma situação interessante que você certamente vão se deparar. Nós queremos trazer um pouco de confiança, e o marrom é a melhor cor para isso. No entanto, o marrom tem um toque conservador, que passa longe da idéia de tecnologia que nós queremos passar, está muito mais relacionado ao tradicionalismo do que a idéia de novidade que o nosso modelo precisa, então é uma cor que eu descartaria, pois ainda que esteja relacionada a uma conotação ambiente que desejamos transportar o nosso visitante, ela se opõe à outra.

Cinza + azul: essa é a minha combinação favorita quando diz respeito a tecnologia. O azul traz segurança e o cinza traz tecnologia.. Não precisa de mais nada. Quanto mais claros, mais interessantes. Ambos usados em tons claros estão mais relacionados a tecnologia do que seus correspondentes mais escuros. Azul escuro representa mais força e poder, cinza escuro está mais próximo das nuances de preto.

Analisar os aspectos estéticos

Tudo precisa ser bonito e atraente, se não for assim, não é vendável.

As combinações de cores precisam sempre ser harmoniosas, se você seguiu bem os passos anteriores quando chegar aqui o processo vai ser mais fácil.

Mas é preciso ficar atento, pois muitas combinações de cores parecem ser harmoniosas a primeira vista, mais são perigosas quando aplicadas, como é o caso do verde e do amarelo que são cores muito proximas no espectro de cores, mas suas tonalidades precisam ser muito próximas para que o efeito possa ser agradável, do contrario se torna cansativo e até doloroso para olhos mais sensíveis.

A questão de peso também é importante. Em algumas combinações de cores é difícil determinar quais elementos terão mais peso (serão mais relevantes), ou seja, um menu pode acabar ficando em segundo plano se as cores não foram favoráveis e isso dificulta a navegação.

Agora, chegando até aqui, como determinar qual combinação de cor tem o melhor aspécto visual? Pesquisando.

É aí que entra o começo dessa conversa. Precisamos pesquisar, analisar o que os concorrentes estão fazendo e como eles estão aplicando as cores, assim estaremos mais perto do universo do visitante. Se conseguirmos perceber, por exemplo, que a grande maioria das lojas de computadores e periféricos usa a cor azul, podemos seguir por dois caminhos: fazer o usual ou o inovador.

Na minha opinião pessoal, o inovador só deve ser utilizado quando se tem certeza que o publico alvo está pronto para ele. Do contrário é preferível não arriscar o investimento que o cliente fez em algo que não se pode estimar o resultado até que ele esteja funcionando e se algo der errado já vai ser tarde para mudar de idéia.

Lembre que o site do seu cliente é, na maioria das vezes, o único que ele tem, e por isso deve cumprir exatamente aquilo a que se propõe. Deixe a inovação para projetos experimentais, hotsites e afins.

Pesquise, pesquise e pesquise. Tenha na ponta da língua tudo aquilo que já foi feito dentro da realidade do produto que você deseja vender.

Armado com essas informações, você não tem como errar.

Veja a seguir alguns exemplos que eu considero “combinações de cores inteligentes”.

Exemplos de sites:

Uma pequena explicação:

01 - Herbal Essences - Site relacionado a beleza para meninas (teen). Os tons de rosa dão toda a femilidade do projeto. O Roxo, sozinho já traz um ar de glamour, o amarelo num tom que simula o dourado traz nobreza. Temos uma combinação perfeita para falar de beleza feminina.

02 - Johnson & Johnson Brasil - Azul e branco, nenhuma combinação transmite mais limpeza. A maioria dos produtos Johnson estão relacionados a limpeza, pureza, etc.

03 - Água Milagrosa - O marrom é muito relacionado a natureza, tanto quanto o verde, mas enquanto a cor verde transmite leveza e pureza (folhas), o marrom transmite força e fertilidade (terra), muito legal para uma fazenda, sem contar os detalhes rústicos que o webdesigner criou, foi um ótimo trabalho.

04 - Comunicação fam - Cores excelentes para uma agencia de criação que tem como logotipo uma carinha sorrindo. Sites com muitas cores vivas são alegres e divertidos.

Arca Literária

danielevsilva — Sat, 24 May 2008 15:05:48 +0000

Desenvolvimento do layout, estruturação Html +CSS, adapatação do wordpress

K695 - Coleção Outono/inverno 2008

danielevsilva — Sat, 24 May 2008 15:04:04 +0000

Desenvolvimento do layout, estruturação Html +CSS, adapatação do wordpress

Equipe de desenvolvimento:

Flash: JrGarou

Implementação do conteúdo: Deise Guedes / Stephanie Salerno

Manutenção: Stephanie Salerno/ Deise Guedes

Girraz - Outono / inverno 2008

danielevsilva — Sat, 24 May 2008 14:54:50 +0000

Desenvolvimento do layout, estruturação Html +CSS, adapatação do wordpress

Equipe de desenvolvimento:

Flash: JrGarou

Implementação do conteúdo: Deise Guedes / Stephanie Salerno

Manutenção: Stephanie Salerno/ Deise Guedes

CSS Naked Day

danielevsilva — Wed, 09 Apr 2008 12:26:49 +0000

Vc está estranhando porque meu blog está tão feio e desarrumado hoje?

Entenda melhor aqui: http://naked.dustindiaz.com/