Recentemente vimos aqui mesmo no Design Blog, um artigo que ensina Como criar cantos arredondados com CSS3. Mas como todos sabem o CSS3 ainda não foi implementado em todos navegadores. Este artigo fala uma maneira prática de criar cantos arredondados de forma que funcione em qualquer navegador.

Criar cantos arredondados em divs, sempre foi um grande desafio para muitos web designers, até o surgimento do atributo border-radius no CSS3. Mas esse atributo por enquanto, infelizmente, é suportado somente por três navegadores.

Mas isso não é motivo para deixarmos de usar cantos arredondados, pois existe uma maneira muito prática e rápida de fazer com que sua div fique com cantos arredondados em qualquer navegador. Então vamos ao que interessa:

A primeira coisa que devemos decidir é o tamanho do raio do canto. Após decidido o raio, devemos abrir algum editor de imagens e criar um círculo com o dobro do raio definido. Por exemplo: se o raio do canto for de 5px, o círculo deverá ter 10px de diâmetro.

Então, depois de criado o círculo, devemos cortá-lo em quatro partes, como na imagem abaixo, salve as imagens, com os mesmos nomes que coloquei abaixo, pois fica mais fácil de identificar a imagem certa para cada canto, além de poder servir como um padrão na hora de criar bordas para outras divs.

Uma observação muito importante a ser feita aqui, é que as imagens não podem ter fundo transparente, pois poderá haver alguns problemas na junção com a parte reta da borda.

Corte a ser feito na imagem

Agora, que já temos as imagens necessárias, vamos criar a parte de CSS da div.
Inicialmente, vamos criar uma div principal, onde vai o conteúdo da caixa, e três classes: uma para definir padrões dos cantos, uma para definir retas horizontais e outra para retas verticais.


#divPrincipal {
position:relative;
margin:10px;
width:400px;
height:auto;
padding:5px;
overflow:hidden;
}

#divPrincipal .cantos {
width:5px;
height:5px;
z-index:10;
position:absolute;
}

#divPrincipal .retaH {
width:100%;
height:1px;
background-color:#666;
position:absolute;
z-index:1;
}

#divPrincipal .retaV {
width:1px;
height:100%;
background-color:#666;
position:absolute;
z-index:1;
}

No padding da #divPrincipal, devemos colocar o valor do raio do canto, na classe cantos, também devemos colocar no width e heigth o valor do raio do canto, além de declaram no z-index um valor maior do que o valor do z-index das classes de borda reta, para que as imagens dos cantos sobreponham as linhas retas.

Agora vamos declarar, cada uma div individual, para cada canto da div:


#divPrincipal #blt {
top:0px;
left:0px;
background-image:url(bLeftTop.png);
}

#divPrincipal #blb {
bottom:0px;
left:0px;
background-image:url(bLeftBottom.png);
}

#divPrincipal #brt {
right:0px;
top:0px;
background-image:url(bRigthTop.png);
}

#divPrincipal #brb {
right:0px;
bottom:0px;
background-image:url(bRigthBottom.png);
}

Repare que coloquei como id de cada uma das divs, uma sigla que identifique qual canto ela representa por exemplo: “Border Left Top” virou “blt”. Assim fica mais fácil de saber quais atributos devo colocar, por exemplo: se a div é do canto direito e no topo, coloco o valor 0px nos atributos right e top. Já se ela é no canto esquerdo, na parte de baixo da #divPrincipal, coloco 0px no left e bottom. Além de colocar como background, a imagem correspondente àquele canto.

Agora vamos declarar em nosso CSS, as bordas retas:

#divPrincipal #bTop {
top:0px;
}

#divPrincipal #bBottom {
bottom:0px;
}

#divPrincipal #bLeft {
left:0px;
}

#divPrincipal #bRigth {
right:0px;


Nas bordas retas, a situação fica ainda mais clara, só precisamos definir valor 0px para a direção que tal borda estará.

Agora, vamos partir para o HTML. Em sua página você deve colocar a #divPrincipal, e aninhada à ela, cada div de canto, e de borda reta. Após ter colocado cada div, vem o conteúdo da div em si. Como no exemplo abaixo.


<div id="divPrincipal">

<div id="blt" class="cantos"></div>
<div id="blb" class="cantos"></div>
<div id="brt" class="cantos"></div>
<div id="brb" class="cantos"></div>

<div id="bTop" class="retaH"></div>
<div id="bBottom" class="retaH"></div>
<div id="bLeft" class="retaV"></div>
<div id="bRigth" class="retaV"></div>

<p>Nesta caixa temos bordas arredondas que funcionam em qualquer navegador. </p>
<p>Ela foi testada no Internet Explorer 8, Firefox 3.5, Chrome e Opera 10.</p>
</div>


À partir desse exemplo, chegaremos a um resultado muito próximo ao da seguinte caixa:

Pode-se usar também efeitos como sombras, brilhos, relevo, etc. na borda, é só adaptar o tamanho das divs dos cantos, altura da div de linha horizontal, largura da div de linha vertical, e o padding da divPrincipal, de acordo com suas necessidades.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como criar cantos arredondados com CSS3
• 5 dicas de design que se aprende com a Apple
• Desenvolvendo sites para mobile
• Regras implícitas no web design
• Erros em web design que devem ser evitados

Eu gosto do Windows, especialmente o XP (embora agora eu seja 100% Mac). Durante anos usei ele e não tenho nada contra produtos Microsoft. Mas convenhamos que, em termos de design, a Apple está muito mais a frente da gigante MS. Eis 5 coisas que podemos aprender com a Apple em relação a design de interfaces.

Mantenha-o simples

Veja o site da Apple. Não pense no que você vê, mas no que não vê. Vou dar uma dica: você não vê tudo que você vê neste site do Microsoft Office. A resposta é poluição visual. A página inicial deve nos dizer tudo sobre nossa empresa, falar de todos os nossos produtos nos mínimos detalhes, listar todas as vantagens do produto e deixar o logo no maior tamanho possível. Certo? De acordo com a Apple, não.

A diferença entre o site da Apple e do MS Office 2010 - diferença gritante

A Apple sacrifica um pouco da usabilidade, fazendo com que o usuário tenha que clicar mais de uma vez para poder visualizar determinada informação apenas para não saturar a tela dele – que no final das contas, seria tão trabalhoso para o usuário filtrar todas as informações em uma página só do que separar de forma que fique fácil de achar.

Use fotos fantásticas

Um dos motivos que levou a Apple a diminuir o uso de gráficos supérfluos, foi para mostrar o que realmente é importante: seus produtos. Olhe as fotos que eles usam; é quase impossível não fixar seus olhos naqueles aparelhos durante vários segundos.

Em uma mistura de fotografia profissional, renderização 3D e, claro, Photoshop, as imagens realmente chamam a atenção. Outro detalhe são os tamanhos das imagens; ocupam boa parte da tela. De nada adianta passar horas editando uma foto para que fique super legal apenas para diminuí-la a um tamanho de thumbnail e colocar no site.

É possível aprender que não basta tirar uma foto e jogar no site (ou folder, revista, etc) de qualquer maneira. Gaste um pouco mais de tempo (ou dinheiro, contratando alguém que saiba fazer algo incrível) e faça algo fantástico.

O contraste é a chave

Outra coisa que faz com que as fotos de produtos da Apple sejam tão incríveis é o ambiente no qual estão contidas. O cérebro humano ama contraste. É o motivo da gente ficar impressionado com o pico de uma montanha no horizonte, acima de um oceano. É o que faz a gente ficar com água na boca ao ver aquele iPhone preto brilhante em um fundo branco. É aconselhado que você sempre procure utilizar o contraste seletivo em tudo que você criar. Que seja contraste de cor, tamanho, peso de fonte, etc.

Dê atenção aos detalhes

A Apple parece focar bastante nos detalhes. Todos os pixels de seu site e afins são planejados. Nunca caia na armadilha de dizer “ninguém vai notar” ou “tá bom o suficiente”. Muitas vezes é o tempo gasto com os mínimos detalhes que separam os bons designers dos ótimos designers.

Não acredita em detalhes? Veja a região dos logos de redes sociais do site do Microsoft Office e me diga que não te deu um frio na espinha.

Ai ai...

Crie propagandas instrutivas

Para reforçar a mensagem que o mouse possui uma superfície multi-toque, a Apple criou a imagem abaixo. Mesmo sem o título, quase todo mundo consegue compreender o que está acontecendo na figura e conseqüentemente entendem como usar essa nova tecnologia com a qual não estão acostumados.

No entanto, a Apple vai muito além de ilustrações. Praticamente qualquer pedaço de hardware e software no site deles possui um vídeo explicativo. Isto ajuda horrores na hora de reduzir o suporte técnico a questões freqüentes. Toda vez que algum convertido ao mundo da maçã me faz uma pergunta (como sou usuário de Mac, muitos me vêem como um suporte gratuito ao sistema), aconselho visualizar os vídeos pois eles fornecem uma melhor explicação e entendimento do que um e-mail ou conversa via telefone poderia. Dê uma olhada na biblioteca de vídeos institucionais da Apple para ver como funciona.

Em resumo

A Apple Inc. é basicamente sinônimo de “design classudo”. Existe muito que podemos observar destas obras de arte que vão além de imitar o efeito de reflexo que eles colocam em tudo. Essas dicas foram dadas para serem aplicadas no seu próprio trabalho de maneira única. Use elas como inspiração.

Toda vez que alguém menciona a Apple é normal ter fiéis e odiadores, prontos para mostrarem seu amor ou ódio ao método de design da Apple. Você é qual deles? E por quê? Deixe um comentário abaixo!

Confira mais 10 dicas no Design Shack (ING)

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Nova galeria CSS 100% brasileira
• Cantos arredondados para qualquer navegador
• Inspiração de segunda – parte 5
• Como criar cantos arredondados com CSS3
• Desenvolvendo sites para mobile

Entenda o que são planos de marketing e faça o download de alguns modelos para usar de referência.

Marketing é uma parte essencial da vida de um designer. No entanto, um designer não é necessariamente um marketeiro, mas precisa saber de algumas coisas importantes desta área. Entre eles, o plano de marketing. Ele é uma das ferramentas mais importantes; serve para determinar o que é o seu produto, para onde ele vai e como ele vai lá.

O objetivo do plano de marketing é equalizar a matriz SWOT – em português, FOFA – pontos Fortes, Oportunidades, pontos Fracos e Ameaças. Ou seja, transformar os pontos fracos em pontos fortes, as ameaças em oportunidades.

Matriz SWOW ou FOFA - exemplo do xCakeBlogs

O plano de marketing é um documento que trata de tudo: desde a descrição do produto ou empresa a ser “marketado”, as estratégias de marketing que serão empregadas, o tempo levado, os custos gerados e retorno planejado. Em sumo, é o documento que será o guia do produto ao sucesso.

O plano de marketing é bastante utilizado por start-ups (empresas virtuais que estão surgindo no mercado) para conseguir levantar dinheiro de investidoras – serve também para empresas físicas, mas vou focar principalmente nas virtuais.

Um plano bem elaborado pode facilmente render a um contrato bom que vá fazer a empresa decolar, como foi o caso da brasileira Boo-Box que elaborou um plano de marketing interessante e acabou recebendo o investimento de uma empresa especializada no assunto.

Os modelos de plano de marketing disponíveis para download aqui são bem auto-explicativos. No entanto, existem umas regras a serem seguidas:

• 1) caso vá utilizar um modelo, fique com aquele modelo até o final. Nada de misturar modelos, pois gera confusão no final das contas.
• 2) seja o mais descritivo possível. Não adianta dar como descrição do seu produto “um produto que irá revolucionar o mercado”. Por que ele irá revolucionar o mercado? O que ele faz que outros não fazem?
• 3) deixe o resumo executivo por último. O primeiro capítulo do plano de marketing é sempre o último a ser feito, pois aí você já tem uma noção boa e firme do que vai ser feito.

Faça o download gratuíto destes modelos de plano de marketing bem detalhados, leia-os que você entenderá melhor como esse sistema funciona.

• Excelentes livros de marketing
• Livros sobre planos de marketing
• Modelo de planejamento de marketing completo.
• Modelo de Plano de Marketing (Portal da Propaganda). Formato: DOC (preview em HTML)
• Como é um plano de marketing.
• Exemplo de Plano de Marketing da Top Brands. Formato: PDF (preview em HTML)

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Cantos arredondados para qualquer navegador
• 5 dicas de design que se aprende com a Apple
• Como colaborar com um artigo pro Design Blog
• Como criar cantos arredondados com CSS3
• Desenvolvendo sites para mobile

Alguns já devem ter notado: o Design Blog agora está aceitando artigos de colaboradores. Saiba como é possível colaborar e o que você pode receber em troca.

O Design Blog é um blog sem fins lucrativos (ou seja, não recebo nenhum dinheiro para postar aqui) – no entanto, me possibilitou fazer diversos projetos e até ser contratado algumas vezes por empresas de web design (que é meu foco profissional). Agora, estou estendendo essa possibilidade a todos os leitores designers.

Com uma média de 2.000 visitas únicas por dia, mais de 800 soldados no Exército do Design e quase 2.000 assinantes de feed, o Design Blog contém quase 190 artigos exclusivos e não é seu típico blog onde o conteúdo é apenas copiado de outros.

Com isto dito, o Design Blog está abrindo as portas para novos colunistas. Não há um mínimo de postagens obrigatórias – você pode contribuir uma vez com apenas um artigo. O colunista recebe total crédito por seu artigo e pode linkar seu site ou portfólio.

Alguns dos colaboradores do Design Blog e seus respectivos créditos

Você pode escrever sobre o que quiser – desde que relacionado com uma das áreas de design tratadas aqui no blog (design de produto, gráfico, web design e freelancing). Basta acessar o formulário de colaboração e ler as instruções adicionais.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Cantos arredondados para qualquer navegador
• 5 dicas de design que se aprende com a Apple
• Modelos de Planos de Marketing (com downloads)
• Como criar cantos arredondados com CSS3
• Desenvolvendo sites para mobile

O border-radius é a mais antiga implementação de CSS3, e provavelmente por isso a mais comum. Este artigo é sobre como utilizá-la corretamente.

O que é Border-Radius?

Criar cantos arredondados sempre foi uma grande dificuldade para desenvolvedores. Em geral para implementar, tinhamos que alterar o código html inserindo divs inúteis ou na melhor das hipóteses, fazer uma caixa de tamanho fixo e jogar a imagem inteira no background, o que em muitos casos não é uma solução possível.

Para resolver especificamente esse problema foi criado o border-radius.

Como utilizar?

Para usar esta e outras possibilidades do CSS3 nós precisamos adicionar ao código extensões dos seletores específicas para cada navegador. Tenha em mente que isso é um recurso temporário. Quando o CSS3 entrar em vias de finalização isso não será mais necessário. E além disso seu código CSS (com essas extensões) não será mais válido segundo a W3C. Para os mais puristas talvez seja o caso de criar um arquivo extra só com essas modificações.

As extensões mais comuns são:

• Mozilla Firefox: -moz-
• Google Chrome e Safari: -webkit-
• Opera: -o-
• Konqueror: -khtml-
• e o famigerado Internet Explorer: -ms-

Então para gerar o exemplo acima precisamos do seguinte código css:
.teste {
background:#333;
border:1px solid #888;
width:450px;
margin:10px auto;
padding:0px auto;
text-align:center;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}


Bugs e afins

Infelizmente até agora apenas Firefox/Safari/Chrome suportam border-radius. Existe um boato de que as últimas versões do Opera (ainda em estágio alpha) já suportam border-radius inclusive sem a necessidade de extensão. Porém o Internet Explorer não tem previsão alguma de aceitar extensões do CSS3. Ainda mais considerando que apenas no ano passado a microsoft lançou um navegador compatível com CSS 2.1. Então, se o canto arredondado for crucial para compreensão do site, você terá que usar o método antigo. Porém ser for apenas um detalhe, essa é uma ótima forma de recompensar quem usa navegadores mais atuais.

De forma geral: Seu site deve aparecer igual em todos os navegadores? A minha opinião é: não.

Um outro problema é que Firefox e navegadores baseados em webkit diferem quanto a especificação de cada canto arredondado.

Para definirmos cada canto no firefox, usamos o seguinte:
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;


Já para Chrome e Safari:
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;


E para os mais pessimistas, o estágio do border-radius na W3C ainda é de draft(rascunho). Ou seja tudo pode mudar (apesar de ser muito improvável… mesmo) e seu layout ficar quadrado denovo nos próximos navegadores.

Exemplos de site que utilizam border-radius

• http://www.twitter.com/
• http://www.wordpress.org/
• http://www.design.blog.br ;)

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Cantos arredondados para qualquer navegador
• 5 dicas de design que se aprende com a Apple
• Desenvolvendo sites para mobile
• Regras implícitas no web design
• Erros em web design que devem ser evitados

Tratando do tema acessibilidade ainda, falarei um pouco sobre o desenvolvimento de sites para mobile browsers.

Do mesmo modo que devemos nos preocupar em desenvolver um site que funcione bem em diferentes navegadores, incluindo os especiais para deficientes visuais, hoje é um fato que existe alguém que acesse seu site por meio de um dispositivo móvel. Nos dias atuais é importante que um site de adapte em diferentes mobile browsers (navegadores móveis – como os de celulares).

O maior problema é fazer essa adaptação do modo eficiente, o que deve-se levar em consideração durante o planejamento é que um site para mobile será visto em diferentes aparelhos e na grande maioria nem todos tem o mesmo suporte.

Um site bem feito, dentro dos padrões da W3c normalmente em principio já funciona em navegadores mobile, o que realmente devemos tomar cuidado é na hora de usar o CSS, nem todos renderizam bem as folhas de estilo.

Para solucionarmos esse problema podemos criar um filtro. Fazemos isso utilizando Media Queries. Elas nos permitem fazer isto. Um filtro onde definimos as características do dispositivo que acessará a página. Com isso, podemos criar um CSS específico para cada grupo de dispositivos que se encaixaram no seu filtro. Por exemplo:

Para desktops e notebooks:
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen and (min-width:481px)” />
Mobile:
<link rel=”stylesheet” href=”mob.css” type=”text/css” media=”screen and (max-width:480px)” />

Durante o desenvolvimento do site devemos trabalhar sempre com tamanhos relativos, por exemplo, o conteúdo com 80% do tamanho total alinhado ao centro e a partir disto posicionar os outros elementos. Desta forma o site adapta-se de acordo com o tamanho da tela, em outras palavras, temos um layout liquido.

Como disse em outras oportunidades; pequenas mudanças geram grandes resultados!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Re-desenhando um site (dica)
• Cantos arredondados para qualquer navegador
• 5 dicas de design que se aprende com a Apple
• Como criar cantos arredondados com CSS3
• Regras implícitas no web design

O design de logotipos é um dos aspectos mais difíceis do design. É uma daquelas coisas que você acha difícil separar gosto pessoal de uma boa comunicação e criação de marca. Eis algumas sugestões que deviam ser seguidas quando você está trabalhando em um logo novo.

1. Não mostre ao cliente nenhum logo que você não ame

Esta é a regra mais importante. Muitos anos atrás eu tive essa idéia tola que eu mostraria esse “logo animal” junto com “esses dois outros logos toscos para fazer a minha preferida parecer ainda mais animal”. O problema é que o cliente quase sempre escolhe o logo tosco e daí você se ferra ao ter que usar ela. Nunca, nunca, nunca mostre ao cliente um logo que você não ame!

2. Mostre aos logos em preto e branco APENAS

Eu sempre explico ao cliente que trabalhamos nas cores do logo depois do logo final ser aprovado. O motivo é simples: você não quer dar algo a mais para ele se preocupar. O cliente vai passar um tempo ridicularmente longo apenas pensando no esquema de cores em vez de pensar no que realmente importa, nesse caso a imagem do logo. Com raras excessões, a maioria dos clientes provavelmente irão trabalhar em preto e branco ou apenas uma cor, então o logo precisa ficar bom em preto e branco. E quando digo preto e branco, eu quero dizer preto e branco sem gradientes ou tons de cinza.

Logo em preto e branco

3. Faça sempre seus logos em formato vetorial

Qualquer logo, até mesmo para um site de internet, precisa ser redimensionado para usos diferentes. Fazendo um logo no Photoshop deixa você sem uma base que pode ser utilizada mais tarde. Fazendo seu logo em um programa de desenho vetorial (Adobe Illustrator, Corel Draw, etc) também vai permitir que você “quebre” o logo e utilize os pedaços em outros aspectos do trabalho do seu cliente. Além do mais, você vai ter mais flexibilidade para utilizar o logo em diferentes mídias (outdoor, multimídia, etc) sem perder a qualidade com o bônus adicional de ser mais fácil de editar mais tarde.

4. Vá direto ao topo

Nunca aceite um trabalho onde um comitê de 10 pessoas devem aprovar seu design. Você vai acabar levando um logo ótimo e tornando-o numa gigante poça de m@#$ em questão de horas ao tentar agradar as 10 pessoas. Descubra quem é o manda-chuva que vai tomar as decisões e trabalhe apenas com ele. Se não há um único manda-chuva, não aceite o trabalho. Você vai se agradecer mais tarde.

5. Tenha certeza que ele vai funcionar com tamanhos ridicularmente pequenos

Isso vai junto com a regra do preto e branco. Clientes vão querer usar aquele logo em diferentes coisas, inclusive imprimindo-os em canetas e afins. Esse logo precisa funcionar em um tamanho minúsculo! Você talvez até queira pensar em como que o logo vai ficar em um banner alto e magro, num banner quadrado e em um largo. Pergunte-se: é fácil de caber ele em qualquer ambiente?

Funciona em tamanho pequeno?

6. Evite usar filtros, efeitos e outras piras.

Um logo é um gigante investimento para uma empresa. Criar um logo que segue a tendência ou que é cheio de firulas vai resultar em um logo ultrapassado e tosco no ano que vem. Não estou dizendo para evitar totalmente, mas lembre-se que o logo não pode perder sua identidade se for impresso em um jornal, por exemplo. Para mídias digitais (TV e web) é normal haver versões com efeitos de luz e sombra. Mas a versão final não pode ter estes efeitos como essenciais.

7. Crie uma arte simples

Não tente fazer um design muito complexo. Não use mais de duas fontes e apenas uma imagem gráfica. Um logo que é complexo demais não serve para nada além de diluir a marca e ficar horrível em tamanhos pequenos.

O logo da Unilever é um exemplo disto. É bonito, mas difícil de ver em tamanhos menores

8. Produza filhos

Não nesse sentido! Quando você estiver com um design que você goste, veja se é possível usar apenas uma parte do logo. O logo da Coca-Cola é o exemplo perfeito: você pode usar o tipo como também pode utilizar o lacinho que as pessoas ainda vão saber que é a Coca-Cola, embora não esteja explícito. A Apple é outro grande exemplo. Eles deixaram de utilizar a palavra “Apple” junto com o logo anos atrás, mesmo assim você ainda sabe reconhecer qual é a empresa quando vê aquela maçã comida.

9. Conselho final: pense adiante

Não faça um logo que fique bom apenas em um pedaço branco de papel. Seu cliente provavelmente vai querer utilizá-lo em propagandas, comerciais de TV, outdoors e até quem sabe em um caminhão. Faça um logo que “funcione” com diferentes clientes finais. Verifique se o logo é balanceado. Ele fica bom se colocado no final de um propaganda impressa, sem importar se ele vai ficar a esquerda, centro ou a direita? Fica legal quando ele têm um endereço web debaixo dele? Fica visível em um fundo escuro? Fica bom em um caneco?

Claro que regras foram feitas para serem quebradas. Você é o designer, você dita as regras. Mas você precisa supor que o pior pode acontecer, olhar todas as possibilidades e ver o mundo com os olhos do cliente. Mesmo se você não terminar com um logo que mereça ser premiado, você pelo menos vai fazer seu cliente feliz e, com sorte, ter um bom logo em mãos.

Original: Creative Guy (traduzido e adaptado por Canha – repostagem).

E você? Quais regras importantes que você acha que deveriam ser consideradas ao se fazer uma logo?

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Para que serve um logo ou marca?
• IKEA irrita designers com mudança de fonte
• Branding persistente funciona melhor
• Novo logo do Pão de Açúcar
• Dicas para criação de logos profissionais

Como ser “o” web designer? É o que todo mundo sempre quer saber. Neste artigo, o colunista Claudio Holanda vai discutir alguns tópicos de como se diferenciar no mar de web designers afora.

Hoje em dia, nós usuários de internet em geral, presenciamos uma era muito importante para esse mundo on-line. As pessoas estão começando a perceber o potencial que essa ferramenta, que é a internet, possui, e por isso a demanda de websites, hotsites, etc. Só vai crescer. E isso é extremamente bom para nós que dependemos desse crescimento para conseguirmos o pão de cada dia em nossa casa, mas com o surgimento de diversos outros profissionais da área (pra não falar nos “sobrinhos”), como fazer para se destacar aumentando a renda e o crescimento como profissional?

Neste post (aliás, meu primeiro post) iremos discutir alguns tópicos de como se diferenciar e não ser somente mais um webdesigner no bolo, mas “O” Web Designer.

Responsabilidade

Alguns realmente não sabem o significado dessa palavra e muito menos colocam ela em prática, mas se o seu objetivo é se destacar não so como web designer, mas em qualquer profissão, tenha responsabilidade. Sendo responsável as chances de os seus clientes te indicarem são muito grandes. Ou seja, responsabilidade = mais clientes.

Habilidade

Existe uma frase que eu costumo dizer, “A melhor ferramenta de design é a que está sentada em frente ao computador”, ou seja tendo habilidade e criatividade (que será o próximo tópico) você consegue desenvolver algo realmente bonito e apresentável, que chame a atenção do público e que possua qualidade. Deixo aqui outra frase para você que pensa que não possui habilidade alguma: Nenhum de nós nasceu sabendo sequer ligar um computador, portanto o aprendizado e a experiência são os degraus para a habilidade.

Criatividade

Criatividade… pode ser a chave do seu sucesso como web designer ou o seu “Calcanhar de Aquiles”. Imagine que por mais que você possua habilidade no web design, que seja realmente um dom, você pegue um job de uma desentupidora de ralos de banheiros presidiários (estranho, mas imagine que o $$ seja bom e o seu $$ esteja escasso), e o cliente ainda pedisse que você desenvolvesse um site que deixasse claro o que a empresa faz no layout, mas sem nada muito explícito. Você saberia se virar? É meu caro, é ai que entra a criatividade, sem ela tanto web designers, como designers em geral ficam como que sem combustível em uma corrida. Por isso, se faltar criatividade procure ver trabalhos de outros profissionais, e galerias de websites para dar uma reabastecida na sua mente.

Profissionalismo

Chegamos ao último tópico (já tava cansado de ler, né?!), e o fato de estar por último não quer dizer que não tenha importância, pelo contrário, ser um real “profissional”, tanto na hora de aceitar o trabalho, quanto na hora de desenvolvê-lo e receber o “$$” por ele, é o que pode te diferenciar ainda mais dos outros web designers. Ter sempre um contrato para passar para o cliente, ir de acordo com o tema da empresa, e apresentável nas eventuais reuniões, ser firme na hora de dizer o preço do job, exibir o valor explicando o motivo e passar credibilidade são algumas das atitudes que um web designer profissional sempre toma, se tornando assim um destaque na área.

Bom pessoal, essas são algumas sobre essa área que cresce cada vez mais no nosso país, claro que um conhecimento da área e experiência são muito importantes mas esses tópicos são dicas de como realmente se destacar e juntando essas dicas a um conhecimento, você realmente terá todo potencial para ser “O” Web Designer.

Quer ser um colunista Design Blog e ser famoso? Entre em contato conosco.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Regras implícitas no web design
• Cantos arredondados para qualquer navegador
• Designers não são web designers
• 5 dicas de design que se aprende com a Apple
• Modelos de Planos de Marketing (com downloads)

Freelancers são, em maioria, bichos esquizofrênicos. Em um dado momento, estão eufóricos e trabalhando como se estivessem alucinados. De repente, bate uma depressão e ficam chorando pelos cantos dizendo que não estão trabalhando o suficiente. Existe um jeito de curar isto: pausa.

Por mais que pareça ser um absurdo, às vezes é necessário dar um tempo do trabalho. Ainda mais quando se trabalha nas áreas criativas. Esses dias atrás, em uma terça-feira de tarde, eu e minha noiva fomos ao cinema. Em pleno dia de semana a tarde! Pode parecer irresponsabilidade, ainda mais quando há trabalho a ser feito. Mas é um “mal” necessário. Ainda mais, essa liberdade de horários é uma das melhores coisas na vida de um freelancer.

Essas pausas não precisam ser planejadas (“Opa! São 14:23 agora! Hora de descansar por 20 segundinhos“). Podem ser espontâneas. E muitas vezes, DEVEM ser espontâneas. Isto é por um simples motivo: quebra de rotina.

Vou repetir: essa liberdade de horários é umas das melhores coisas na vida de um freelancer. O tempo “gasto” com essas pausas pode beneficiar você a longo prazo; uma pessoa descansada vai render muito mais. Perca duas horas vendo um filminho, mas ganhe cinco horas de motivação e bem-estar.

Pausa para um cineminha quarta de tarde? Por que não?

Outra dica importante: freelancing não é desculpa para má higiene. Um dia você vai acabar tendo um cliente passando na sua casa sem avisar para conferir como o projeto está andando. Isto chama-se karma, pois a natureza está tão ofendida com o seu cheiro que ela está te dando um toque de despertar. Você não deve apenas evitar de verificar seu e-mail assim que acordar, você deve também evitar trabalhar antes de tomar um banho e cuidar de sua higiene pessoal. Nenhum prazo pode estar tão ruim assim.

Deu vontade de jogar algum joguinho no computador, jogue. Mas o ideal mesmo é sair um pouco do seu escritório, até da sua casa. Eu sei que aquela coisa amarela lá no meio daquela coisa azul grande no céu pode parecer ameaçadora, mas ela faz bem. Eu juro!

Mas se mesmo assim você escolhe o jogo (ou web-surfing) como método de relaxamento durante sua pausa, tenha o ser-humano mais próximo de você lhe dar um tapa na nuca para que você volte ao trabalho após um tempo pré-determinado. Nada pior do que usar frases do tipo “só mais um round” ou “eu paro de jogar daqui a 10 minutos exatos” e notar, sete horas depois, que você perdeu boa parte do seu tempo naquilo.

Saia de casa, respire ar fresco, faça alguma atividade física. E lembre-se de respeitar seus finais de semana. Fim de semana é para descansar. Sinto vontade de bater nos freelancers que conheço que insistem em trabalhar aos finais de semana.

Este artigo faz parte do livro “Freelancer – O Guia Completo” que será lançado em breve aqui no Design Blog.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Quando que trabalhar de graça pode ser bom?
• Quanto um freelancer deve cobrar?
• Como fazer reuniões com cliente
• Imprevistos: diminuíndo os estragos
• Como evitar o cliente que não paga?

Existem algumas coisas que não devem ser feitas no mundo do web design. São regras que muitos web designers mais maduros tendem a acreditar que são puro bom senso, que são “implícitas”. Mas quais são estas “regras implícitas”?

Encontrei neste blog uma lista de coisas que webdevelopers não devem fazer quando estão criando um site para e-commerce ou vendas em geral. Foi nele que me inspirei para fazer minha versão destas regras.

1) Jamais altere o tamanho do browser do usuário

Sim, eu sei que você consegue usar aquele JavaScript na sua página, e como se fosse um mini-milagre, o navegador é redimensionado para cumprir sua vontade e deixar seu site com uma visualização pré-definida por você. Mas não faça isso.

Essa “técnica” é criada por pseudo-web designers (os famosos micreiros) que acreditam que devem controlar a experiência de navegação de cada usuário. Ninguém gosta de se sentir limitado, então por que você acredita que seria diferente com o seu usuário?

2) Não enrole o usuário antes dele entrar no site

Se seu site requer que o usuário carregue a página inicial e depois tenha que abrir o verdadeiro site em um pop-up, você perde. Embrulhe tudo, jogue no lixo e comece novamente. Se seu site não abre automáticamente assim que a pessoa digita o endereço e a mensagem não é mostrada logo de primeira, fica muito difícil de alguém ficar esperando para continuar o acesso no seu site (não importa o quão bacana é sua introdução em Flash).

3) Não faça o usuário ter que decidir entre Flash e HTML

Se seu site pergunta ao usuário qual versão que eles gostariam de acessar: a versão em HTML ou em Flash, você também perde. É como perguntar ao seu consumidor se ele gostaria de entrar na loja tosca ou na loja melhor, onde a “loja melhor” requer óculos especiais e uma espera de 30 segundos.

O que você está realmente perguntando ao usuário é “você quer sair agora e comprar da minha concorrência porque eu coloquei esse impedimento antes de você descobrir o que eu vendo?“.

4) Não faça sites inteiramente em Flash se você pretende vender algo

Se seu site é feito inteiramente em Flash, demita sua empresa de web development, e se você mesmo que criou, coloque no seu portfólio sob a pasta “Projetos inúteis que eu fiz” e comece de novo. Flash é uma ferramenta que serve apenas para impressionar. Ainda não encontrei um site bom em Flash que tenha uma excelente acessibilidade sem pesar ridicularmente demais.

E note que não tem como pular a abertura

5) Não tente reinventar a navegação do seu website.

Colocar o menu no topo, na esquerda, até na direita funciona porque você não quer tentar reinventar o jeito como pessoas interagem com interfaces digitais enquanto tenta vender o seu produto ou serviço. Pessoas ficam confusas, irritadas e depois vão embora.

6) Design web é diferente de design gráfico

Se você é um designer de impressos e faz sites como algo complementar, pare de criar sites e providenciar “conselhos” para seus clientes de impressos sobre web design. A diferença entre design de impressos e web design é como fazer o design de uma propaganda para um carro de corrida e realmente construir esse carro de corrida.

7) Seu site precisa ser acessível em outros navegadores

Seu site não funciona em Firefox? O ano de 1999 ligou e falou que quer a internet dela de volta. Acredite: há alguns desenvolvedores que não prestam suporte para outros navegadores.

Sim, na maioria dos mercados Firefox comanda apenas 10 a 15%, mas para alguns sites é uma porcentagem muito maior (alguns inclusive têm 80% de acesso vindo de usuários rodando Firefox). Além do mais, se a equipe que você contratou não fizeram seu site compatível com Firefox eles obviamente não sabem o que está acontecendo no mundo. A falta de conhecimento sobre Firefox por um web designer mostra que ele não está a par da cultura Web e isso é um péssimo sinal caso você seja um dono de negócio.

8) Por favor, evolua

Não estamos mais em 1999. Na verdade, estamos a mais de 10 anos desta data. Sob hipótese alguma use textos piscantes, marquees, Frontpage, pop-ups, download de fontes e introduções em Flash.

Se você considera sites com essas coisas como “sites bem elaborados”, você precisa olhar o ano do seu calendário. A web evoluiu e os web designers sensatos viram que essas porcarias citadas não agregavam em nada (e portanto, deixaram de usá-los).

9) Música de fundo é para sites de música

Se seu site é diretamente relacionado a música (ex: site de banda e não seu portfólio de design), não faça ela começar a tocar assim que o site é aberto. E sob hipótese alguma esconda o ícone de parar a música.

Muitos usuários navegam na internet em horário de trabalho, e alguns esquecem as caixas de som ligadas. Há ainda aqueles que escutam música no computador com fones de ouvidos a um volume baixo. Acessar um site que começa a tocar música faz qualquer um querer esganar o maldito desenvolvedor.

10) Procure utilizar navegação em texto

Mesmo que só fique visível quando as imagens são desabilitadas. Alguns aparelhos móveis ou pessoas com conexão mais lentas podem desabilitar imagens e sofrer com a falta de um menu legível.

11) Prefira mapas de site

Um mapa de site mais bem pensado com sub-seções lógicas é melhor que menus “drop-down”. Em termos simples, drop-downs nem sempre funcionam. Ou seja, talvez não rode em alguns navegadores.

12) Facilite encontrar informações

Se seu site precisa de um sistema de busca para o usuário poder encontrar informações, é bom começar de novo e demitir o cara que fez o mapa do site (e aqueles menus drop-down na navegação). Sistemas de busca são ótimos, mas se seu usuário precisar procurar por conteúdo no seu site, você já está irritando 50%+ dos seus consumidores.

13) Tempo de download é importante

Tempo de download ainda é um fator em mais de 70% dos internautas brasileiros. Embora você viva no mundo maravilhoso da ADSL ou internet a cabo, a predominância no Brasil ainda é da conexão discada. Se seu site é apenas para usuários de ADSL, não preciso nem te dizer que você está perdendo muitos consumidores.

14) Vídeos em Flash apenas

Se você tiver que colocar vídeo, não pergunte ao usuário qual a conexão dele ou qual player ele quer utilizar. A grande maioria não sabe qual a velocidade de conexão e nem sabem se eles sequer possuem Real Player, Windows Media Player ou Quicktime. Coloque seu vídeo embedded no Flash. O Flash ganhou a batalha em questão de vídeo faz muito tempo (é só ver o YouTube).

15) Não seja sempre o mais atual.

Só porque existe uma linguagem nova não quer dizer que você precisa usar ela em tudo. Lembre-se que alguns navegadores podem não estar aptos a essas mudanças.

16) Não controle o modo de navegar do usuário

Alguns sites não permitem o clique com o botão direito do mouse para “evitar a cópia”. Mas o que o desenvolvedor não sabe é que talvez o usuário use esse menu do mouse para tarefas específicas, como voltar de página, recarregar, etc. Além do mais, qualquer um pode simplesmente desativar o Javascript na sua página se ele realmente quiser copiar seu texto.

Essas são apenas algumas dicas do que não deve ser feito ao se criar um site – considere como um “erros mais comuns”.

O que mais você acha que web designers devem evitar de fazer?

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Cantos arredondados para qualquer navegador
• 5 dicas de design que se aprende com a Apple
• Como criar cantos arredondados com CSS3
• Desenvolvendo sites para mobile
• Como ser “o” web designer