Tag: web design

Sistemas de Design: Padronização de Sistemas
Design é projeto. E, como todo projeto, ele deve ser documentado, possuindo descrições, informações de uso e instruções em geral. É exatamente isso que são Sistemas de Design.

Sistemas de Design são documentações, online ou físicas, que descrevem a padronização e uso de elementos de um projeto, com o objetivo de que ele possa ser usado em diferentes aplicações, mantendo uma identidade compartilhada. Essa identidade pode ser referenciada a um projeto, linha, segmento ou empresa. São usados elementos como formas, grades, tipografia, assets, iconografia, recomendações de uso, dentre outros. Algo muito semelhante ao que o design gráfico já está acostumado ao criar um Manual de Identidade Visual.

Um exemplo comum, do dia a dia dos usuários de computador, é o Microsoft Office. Trata-se de um conjunto de aplicativos que, por serem da mesma linha, precisam seguir a mesma identidade. Para que os desenvolvedores possam trabalhar com esse padrão, um sistema de design certamente foi desenvolvido para que a equipe de desenvolvimento possa trabalhar de forma coerente.

O Sistema de Design garante ao usuário uma fluidez no uso das aplicações e reconhecimento das propriedades do software. Facilitando, dessa forma, não só a identificação, como ajudando o usuário a pressupor determinados recursos ou localizações de ferramentas.

Assista o vídeo para complementar a leitura

Experiência Compartilhada

Grandes empresas de tecnologia desenvolvem seus próprios sistemas de design para que desenvolvedores terceiros possa criar experiências mais coesas e confortáveis para o usuário. Seguir esses sistemas pode ser requerimento ou uma simples recomendação, dependendo da loja e sistema operacional que precisar aprovar.

Aplicativos, mobile e desktop, são os mais comuns a receberem influencias direta dos sistemas de design de sistemas operacionais que, recomenda-se, devem ser mesclados aos sistemas da própria empresa. Para esses casos temos como exemplo:
Como dito anteriormente, seguir um sistema de design de sistema operacional é fundamental para manter uma experiência fluida para o usuário. Por isso que, por exemplo, é possível sentir diferenças entre uma mesma aplicação desenvolvida para Windows, Android e dispositivos Apple, porque cada desenvolvedora, apesar de manter sua própria identidade, adapta-se para o ambiente em que o usuário estará.

O Whatsapp adapta quase que completamente sua UI de acordo com o sistema de design de cada Sistema Operacional

Visual Studio no Windows 10 vs Visual Studio no MacOSX

Não necessariamente o designer ou desenvolvedor são obrigados a seguir um determinado sistema de design de terceiros. Às vezes, a melhor opção é justamente criar o seu próprio sistema ou criar uma barreira para ter uma identidade única para sua aplicação.

Algumas empresas, como a Google, estimulam para que os designers utilizem seus sistemas também em sites ou aplicativos web. Para isso, dão descrições específicas de usabilidade e ferramentas que possam agilizar o desenvolvimento dessas aplicações.

Frameworks e Bibliotecas

Para facilitar o desenvolvimento, muitas empresas oferecem frameworks e bibliotecas, tanto web quanto para desktop e mobile, afim de estimular o desenvolvedor a seguir aquele determinado padrão.

É interessante para as grandes desenvolvedoras que outras empresas sigam seus padrões de design, pois, dessa forma, ditam tendências e criam assimilações dos usuários com suas próprias plataformas, principalmente quando essas outras empresas utilizam ferramentas e APIs das grandes.

A exemplo de frameworks e bibliotecas temos:
Porém, nem sempre essas opções suprem a demanda, pois não são compatíveis com outras bibliotecas e tecnologias. Por isso, muitos grupos de desenvolvedores trabalham para criar frameworks e bibliotecas abertas que seguem os padrões estipulados pelos sistemas de design. Como por exemplo:
- React UWP (Fluent Design)
- Materialize (Material Design)
- Material UI (Material Design)
- Ratchet (Apple Guideliness iOS)
- Semantic UI (Inspirado na Apple e Material Design)
Utilizar Sistemas de Design, além de facilitar o processo de desenvolvimento, ajuda a manter o usuário mais confortável no ambiente em que ele está acostumado. Criar ou adaptar o seu próprio sistema também ajuda a criar uma identidade única para seu conjunto de aplicativos e serviços.

Que outros sistemas de design e frameworks vocês podem recomendar? Deixem nos comentários.
22 de dezembro de 2019
Como Criar Sua Própria Fonte e A Usar Como Ícone?
Quem está estudando para ser designer, precisa estudar um assunto muito importante: Tipografia. E, por muitas vezes, precisa criar a própria família tipográfica, ou seja, como criar fontes. Além disso, podemos usar uma tipografia personalizada como ícones, tornando o site ou o sistema, desenvolvido em HTML5, ainda mais leve e bonito.

Este tutorial visa ajudar você com o processo técnico de converter os símbolos e criar sua própria fonte OTF, TTF, SVG, etc. Também um pequeno resumo de como implementar sua fonte em CSS3 para funcionar como ícone.

Para começar, você vai precisar instalar o Inkscape em seu computador. Baixe a versão mais recente do aplicativo Inkscape. Ele está disponível para Windows, Linux e Mac. Caso você use o MacOSX, será necessário instalar o XQuartz.

Você vai precisar também de algum programa para desenho vetorial, pode usar qualquer um de sua preferência, como o Illustrator, CorelDRAW ou o próprio Inkscape.

Crie seu símbolo para cada caractere

Primeiramente, é necessário criar os glifos. Você pode utilizar o Illustrator ou qualquer outro programa de ilustrações vetoriais. Exporte o arquivo no formato SVG. Você pode, se quiser, colocar todas as ilustrações no mesmo arquivo. Os desenhos não deverão ter contornos, somente preenchimento e devem ser compostos somente de preto.

Anexando Glifos aos Caracteres no Inkscape

No Inkscape, selecione File>New>fontforge_glyph. Essa opção adiciona as predefinições necessárias para criação coerente da família tipografica.

Com o documento criado, importe os glifos (File>Import) criado anteriormente por você. Caso você tenha feito todos os glifos no mesmo arquivo, o Inkscape irá importar todos agrupados na organização que foi salvo.

Quando o arquivo é importado, ele vem agrupado e com algumas configurações que o Inkscape não reconhece corretamente.
Siga os passos abaixo para não haver erros e incompatibilidades:

Selecione o objeto, clique com o botão direito e escolha Ungroup. Faça isso quantas vezes for necessário até o objeto estar totalmente desagrupado;

Ainda com o objeto selecionado, vá no menu Path>Combine;

Em seguida vá no menu Path>Union;

Essas ações são necessárias para que o glifo se torne um unico objeto e possa ser anexado corretamente ao caractere escolhido.

O próximo passo é abrir a tela de edição de fontes. Selecione o menu Text>SVG Font Editor.

Será aberto o painel SVG Font Editor, que permite você criar uma fonte no formato SVG (interpretado pela maioria dos smartphones). A primeira coisa a se fazer é criar um nome e família para a fonte. No painel de edição de fonte, e com a guia GLOBAL SETTINGS ativada, clique no botão New. Em seguida, clique duas vezes no nome que foi gerado para que possa modificar e colocar o nome que você quiser.

Agora, ainda no mesmo painel, abra a guia GLYPH e clique no botão Add Glyph, ele irá criar uma nova linha na tabela Glyph name/Matching string. Você deve dar dois cliques no nome criado para editar o nome. Ao lado, você deve dar dois cliques no espaço vazio (logo abaixo de Matching String) e você descobrirá (sim, está escondido) que você pode editar esse campo. Simplesmente digite a letra a qual você quer assimilar o glifo.

No exemplo a seguir, assimilei o meu glifo de Editar a letra “e” minúscula. Vale salientar que você pode vincular a qualquer caractere que deseja, inclusive caracteres especiais como #,ø,®,†, etc.

Por fim, selecione o objeto (ou grupo) que você quer vincular ao caractere e clique no botão Get curves from selection. Para verificar se foi adicionado corretamente, digite, em Preview Text, o caractere que deseja verificar.

ATENÇÃO: Caso o ícone não apareça no Preview Text corretamente, como aparecer pequeno ou simplesmente não aparecer, você deve repetir os passos acima de Ungroup, Combine e Union do objeto. Provavelmente o objeto não foi preparado corretamente e por isso não relacionou como deveria.

Salve o arquivo normalmente. No formato padrão de SVG do Inkscape.

Transformando a fonte SVG em OTF ou TTF

O arquivo SVG está pronto. Agora precisamos converter para uma fonte usável pelo sistema operacional. Há muitos sites que fazem essa conversão.

O que recomendo que faça a conversão é o FreeFontConverter. Basta importar o seu arquivo SVG, escolher o formato (Aconselho OTF, primeiramente, que tem melhor acabamento) e depois clicar em convert. Ele fará o download automaticamente da fonte.

ATENÇÃO: Caso dê erro durante a conversão, você pode tentar salvar o arquivo em SVG Optmized, no Inskscape.

Você pode ver que a fonte pode ser instalada normalmente no seu sistema operacional.

Usando a fonte personalizada em CSS e usando-a como ícone

Para preparar um pacote com sua fonte personalizada, para ser usada em um site, o site FontSquirrel disponibiliza o WebfontGenerator. Para usá-lo basta enviar a sua fonte em OTF ou TTF, concorde com os termos e gere o kit.

Feito o download, está na hora de incorporamos a fonte no seu CSS. Para isso, basta você copiar as fonts que foram geradas no kit para uma pasta font (ou outra de sua preferência) no seu site e chamar via CSS.
```
@font-face {
    font-family: "minhafonteregular";

    src: url("fonts/minhafonte-webfont.eot");
    src: url("fonts/minhafonte-webfont.eot?#iefix") format("embedded-opentype"),
         url("fonts/minhafonte-webfont.woff") format("woff"),
         url("fonts/minhafonte-webfont.ttf") format("truetype"),
         url("fonts/minhafonte-webfont.svg#minhafonteregular") format("svg");

    font-weight: normal;
    font-style: normal;
}
```
Para usar como ícone em um botão (ou em qualquer outro componente HTML5), basta você usar a opção content, do CSS3, como descrito abaixo:
```
button.editar{
        padding:10px;
}

button.editar:before{
        font-family: "minhafonteregular";
        font-size:36px;
        content:"e";
        -webkit-content:"e";
        -moz-content:"e";
        -o-content:"e";
        -ms-content:"e";
}
```
E basta adicionar a tag Button com a classe determinada:

<button class=”editar”> </button>

ATENÇÃO (iOS): Devido a padrões do iOS, o ícone só vai aparecer se tiver uma cor de fundo (devido ao webkit-appearance), se você quiser, entretanto, usar a cor padrão, utilize o CSS abaixo:

button{
background-color: buttonface;
}

Abaixo, você pode ver o exemplo usado no vídeo (no topo do post), que tem uma forma um pouco diferente de usar.

Qualquer dúvida, deixe um comentário, mande uma mensagem no skype ou por email. Siga @velhobit no Twitter e curta nossa página no Facebook.

Até o próximo Tutorial.
29 de novembro de 2018

Como Selecionar o Item de Uma Tabela HTML

Uma dúvida foi postada no grupo de Design e Programação de nossa página, lá no Facebook, hoje. Essa pergunta era referente a como selecionar de uma linha de uma tabela HTML?

Para tal, basta usar um pouco de Javascript e CSS.

Montando a Tabela

Vamos montar, para testar, uma tabela simples, respeitando a semântica HTML básica. Vamos aproveitar para colocar logo um botão, que vai ser por onde podemos visualizar os dados da linha selecionada:

<table id='minhaTabela'>
     <thead>
          <tr>
               <th>ID</th>
               <th>Nome</th>
               <th>Idade</th>
          <tr>
     </thead>
     <tbody>
          <tr>
               <td>01</td>
               <td>Rodrigo</td>
               <td>33</td>
               </tr>
          <tr>
               <td>02</td>
               <td>Taynara</td>
               <td>21</td>
          </tr>
          <tr>
               <td>03</td>
               <td>Raveny</td>
               <td>22</td>
          </tr>
          <tr>
               <td>04</td>
               <td>Sérgio</td>
               <td>51</td>
          </tr>
          <tr>
               <td>05</td>
               <td>Alice</td>
               <td>20</td>
          </tr>
     </tbody>
</table>

<button id="visualizarDados">Visualizar Dados</button>

Agora precisamos incluir um estilo para que a tabela fique mais elegante.

É importantíssimo prestar atenção ao class “selecionado” que vai ser a referência para o seu javascript saber qual linha está selecionada na tabela.

#minhaTabela{
  width:80%;
  margin:0 auto;
  border:0;
  box-shadow: 0 5px 30px darkgrey;
  border-spacing: 0;
}

#minhaTabela thead th{
  font-weight: bold;
  background-color: black;
  color:white;
  
  padding:5px 10px;
}

#minhaTabela tr td{
  padding:5px 10px;
  text-align: center;
  
  cursor: pointer; /**importante para não mostrar cursor de texto**/
}

#minhaTabela tr td:last-child{
  text-align: right;
}

/**Cores**/
#minhaTabela tr:nth-child(odd){
  background-color: #eee;
}

/**Cor quando passar por cima**/
#minhaTabela tr:hover td{
  background-color: #feffb7;
}

/**Cor quando selecionado**/
#minhaTabela tr.selecionado td{
  background-color: #aff7ff;
}

button#visualizarDados{
  background-color: white;
  border: 1px solid black;
  width:50%;
  margin: 10px auto;
  padding:10px 0;
  display: block;
  color: black;
}

Javascript

Para sermos mais justos, vamos fazer o exemplo usando Javascript puro. No nosso exemplo, vamos contemplar a opção de selecionar uma única linha ou mais de uma linha, opção determinada apenas por um parâmetro. Ainda vamos ver como manipular os dados.

Inicialmente, precisamos capturar a tabela e adicionar, à ação de clique, uma função que adicione ou remova a classe de seleção:

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
	var linha = linhas[i];
  linha.addEventListener("click", function(){
  	//Adicionar ao atual
		selLinha(this, false); //Selecione apenas um
                //selLinha(this, true); //Selecione quantos quiser
	});
}

A função selLinha() vai ser responsável por adicionar ou remover a class “selecionado” do nó. Passamos também um parâmetro que vai determinar se poderá selecionar mais que uma linha ou apenas uma. O primeiro laço, caso múltiplos seja falso, irá apenas desmarcar todos as linhas antes de marcar a linha clicada.

/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
function selLinha(linha, multiplos){
  if(!multiplos){
  	var linhas = linha.parentElement.getElementsByTagName("tr");
        for(var i = 0; i < linhas.length; i++){
           var linha_ = linhas[i];
           linha_.classList.remove("selecionado");    
        }
  }
  linha.classList.toggle("selecionado");
}

Agora vamos adicionar uma função ao clique do botão para que a gente possa visualizar os dados selecionados. Para isso, iremos justamente capturar apenas as linhas que tiverem a class “selecionado” e, através de um laço, vamos concatenar os valores dentro dos nós <td> da(s) linha(s) selecionada(s).

/**
Exemplo de como capturar os dados
**/
var btnVisualizar = document.getElementById("visualizarDados");

btnVisualizar.addEventListener("click", function(){
	var selecionados = tabela.getElementsByClassName("selecionado");
  //Verificar se eestá selecionado
  if(selecionados.length < 1){
  	alert("Selecione pelo menos uma linha");
    return false;
  }
  
  var dados = "";
  
  for(var i = 0; i < selecionados.length; i++){
  	var selecionado = selecionados[i];
    selecionado = selecionado.getElementsByTagName("td");
    dados += "ID: " + selecionado[0].innerHTML + " - Nome: " + selecionado[1].innerHTML + " - Idade: " + selecionado[2].innerHTML + "\n";
  }
  
  alert(dados);
});

Vamos Testar?

ID	Nome	Idade
01	Rodrigo	33
02	Taynara	21
03	Raveny	22
04	Sérgio	51
05	Alice	20

No entanto, se você preferir ver todo código completo, acesse o JsFiddle incorporado abaixo:

Gostou do post curtinho? Tem dúvidas? Deixe seu comentário e compartilhe com quem você achar que vai gostar. Aproveite para entrar no nosso grupo de Design e Programação no Facebook ou em nossa página. Acompanhe-nos no Twitter e Instagram.

26 de junho de 2018

O Ladrão de Templates Grátis
Outro dia andei discutindo com um rapaz pelo Twitter porque ele usa templates free, ou “piratas”, instala em um WordPress e assina como se ele fosse o designer (ou desenvolvedor) responsável. Isso se repete em todos os sites que ele fez, inclusive no seu próprio. Não fez nem questão de mudar uma cor ou uma forma. O problema é que essas pessoas revendem os sites para clientes. Alguns até compram, mas também somente para revender. A discussão começou por conta de uma notícia antiga, sobre o bispo que disse que, para manter seu blog, gasta mais de 107 mil reais por mês e ainda pediu ajuda dos seus seguidores para manter.

Você sabe quanto custa ser um designer? E quanto custa ser um programador? E pior! Sabe quantas pessoas fizeram faculdade (ou até autodidatas), estudaram muito, fizeram bons cursos e/ou leram bons livros? Pois é… mas para alguns, isso não tem valor.

Porém, esse rapaz não foi o primeiro a fazer esse tipo de trambicagem. Empresas estão se fortalecendo baseado nessa ideia absurda. Isso está acontecendo muito com gráficas rápidas, que resolvem vender sites para aumentar sua renda. O problema é que elas geralmente não fazem os sites, mas pegam templates grátis e trocam o “desenvolvido por”. E nem tomam o cuidado de disfarçar e no código, podemos até ver o nome dos templates.

Na imagem abaixo, vocês podem ver um detalhe de uma das conversas que eu tive com uma ex-aluna de mídias sociais que trabalhava em uma empresa que fazia esse tipo de “trabalho” (ocultei o nome e a foto porque ela não necessariamente é a responsável, mas uma funcionária).

Depois dessa conversa ela me bloqueou. Ela e seus colegas de trabalho. Porém, eu fui na página do Facebook deles e deixei uma mensagem “bonita”. Claro, que eles apagaram, aí eu deixava de novo. Mas na terceira vez fiz melhor. Resolvi colocar no Twitter dos clientes deles um link para o site original de onde eles pegavam os templates. Infelizmente, é comum que essas mesmas empresas que prestam esse serviço são quem tomam conta das mídias.

O Site de um rapaz, chamado Nilton Câmara (que foi a vítima), foi um dos maiores exemplos de cara de pau de uma prestadora de serviço da área de tecnologia. Realmente não mudaram nada, nem uma cor ou um símbolo, e ainda colocaram no canto: Website Design by Conhecimento Digital. Copyright 2012.

Afinal, qual o problema disso?

Primeiro lugar, vamos a questão ética. Você gostaria de comprar um iPhone 6 da Samsung? Eu sei que a pergunta parece absurda, mas é isso o que acontece. Simplesmente, ao invés de fazer um produto novo, está sendo terceirizado um serviço oferecido. Se você soubesse que poderia ter algo totalmente genérico a um preço muito mais baixo, ou até de graça, você pagaria por essa mão de obra inútil?

Ainda na questão ética, assinar um projeto de outra pessoa é certo? Imagina se eu assinasse um site feito por outra pessoa, um quadro feito por outro artista. Isso não seria correto e traria grandes problemas para o comprador, que acha que está adquirindo um produto original, quando na verdade, é genérico.

Segundo, os problemas legais. Terceirizar serviço (quarteirizar) oferecido é ilegal! Eu mesmo já processei uma empresa por isso, e ganhei, sem discussão. Não se pode oferecer um serviço e pagar outra empresa para fazer. Tanto que, no meu caso, resolveram mudar o nome e o tipo de serviço para consultoria. Além disso, isso fere os direitos de propriedade intelectual, que é irrevogável! Isso mesmo, não pode ser repassado para ninguém. A propriedade intelectual garante a autoria de projeto, o que é diferente dos direitos comerciais. O autor pode abrir mãos de seus direitos comerciais, mas não pode se abdicar do intelectual. Roubar a autoria do projeto de outro também é ilegal.

O que isso traz de ruim para o cliente e para a prestadora de serviços?

A contratante pode se sentir lesada, pois comprou, muitas vezes, um projeto original. Além disso, o leiaute de uma empresa, instituição ou órgão, deve seguir uma identidade corporativa que é definida em todos os projetos gráficos. O SEO desses templates geralmente não são dos melhores e a semelhança desse site com outros templates genéricos também não são bem trabalhados e podem dificultar o encontro do site pelo Google.

A prestadora de serviço, além do fato da ilegalidade, também está perdendo experiência e estabilidade no mercado. Tornar-se-á pouco confiável.

Mas como deve ser feito então?

Existem 3 formas corretas de trabalhar corretamente com isso:
1. Criar um Layout e Template Original;
2. Modificar um Template Free existente, dando devida referência ao template original e deixando claro ao cliente que é uma alteração;
3. Usar um template free ou pago, mas dar a devida referência ao autor e não ter nenhum lucro direto com isso.
O site da PortilloDesign usa um CMS próprio, criado por nós, que prentendemos abrir o código futuramente. Porém, também trabalhamos com outros CMSs em alguns clientes, onde todos os sites são montados primeiro no Photoshop e depois implementado no código referente ao CMS escolhido. Cada template é único e pensado para a necessidade e estética de cada cliente. Os layouts não aprovados são jogados na lixeira para que não sejam reaproveitados.

O blog The Pink Geeks usou um template modificado e as garotas colocaram no rodapé a assinatura junto com os criadores do template original, por exemplo. O Mesmo acontece com o site do E-Farsas, onde ele coloca: “Tema modificado do FabThemes.com”

Não tem problema nenhum em usar um template free, só deixe no rodapé o autor original e não cobre por algo autêntico, somente pela modificação que fizer. Não mude a autoria do trabalho, isso não vai desmerecer de forma algum o seu conteúdo. Todas as pessoas confiáveis precisam ser transparentes.

Concluindo

Não existe um real monitoramento, registro, fiscalização ou cadastro de empresas e profissionais de TI. Da mesma forma, não existe uma fiscalização sobre o que eles fazem. Existem muitas leis sendo criadas para defender pessoas que aparecem peladas na internet, ou um ou outro xingamento preconceituoso. Mas a parte de negócios continua sendo terra de ninguém. Pessoas disfarçadas de profissionais continuam tripudiando empresários e blogueiros que querem melhorar o seu trabalho.

Vale lembrar de que de forma alguma você pode pegar um template pronto e simplesmente revender, ou modificar e revender, se você foi contratado para fazer o site. Se a ideia é modificar algo pronto, então deixe isso claro e revelado como o serviço. Lembre-se que terceirização de serviço oferecido é ilegal e anti-ético.

Existe até uma ferramenta especializada em verificar se o site usa um template comum ou não, para WordPress:
http://www.wpthemedetector.com

Mas o que vocês acham disso? Tem uma opinião diferente sobre a ética nesse caso? Deixe sua opinião.
20 de janeiro de 2017
Design Contest ou A Fraude do Bom Trabalho
Esse tipo de site é uma forma anti-ética de se ganhar dinheiro em cima do trabalho alheio e de qualidade duvidosa. Muito de vocês já devem ter escutado falar sobre sites especializados em Design Contests (FastMarcas, 99 Design, Design Contest, WeDoLogos, Click to Layout e outras porcarias). Nada mais são do que vários concursos em que o cliente escolhe o artefato que vai levar para casa. Todos eles parecem bastante interessantes com promessas de bons pagamentos para o designer e de qualidade e escolha para o cliente. Mas, na realidade, esse tipo de site é somente uma forma anti-ética de se ganhar dinheiro em cima do trabalho alheio e de qualidade duvidosa, veja porquê.

Como Funciona um Site de Design Contest?

O Cliente faz um cadastro, lança um “briefing”. Diz que quer pagar, digamos, 200 reais. Então a empresa lança o concurso e manda por e-mail para algumas centenas de designers cadastrados. Esses designers lerão o que o cliente pediu e fará uma “logomarca”. O cliente então escolhe a que ele preferir e paga direitinho o designer vencedor… lindo, né? O Designer ganhou, a empresa ganha. Todos ficam com dinheiro garantido.

Como funciona DE VERDADE um Site de Design Contest?

Um empresário desinformado (ou se achando o espertão), que não compreende o valor do trabalho de um design procura uma empresa qualquer para fazer o trabalho quase de graça. Então ele encontra um site como o We do Logos ou Click to Layout. Daí ele vê que tem a oportunidade incrível de ter centenas de designers à disposição por qualquer mixaria que ele oferecer. Então ele pensa: “Para quê eu irei gastar 8 mil com um designer? Se com 200 reais eu terei vários?”. Então o empresário, contrata a empresa de Concorrência.

O dono do site de Concorrência, como é muito esperto, cobra, digamos, mais 50 ou 100 reais. E daí, quase sem custos (somente hospedagem e o desenvolvimento inicial do site e alguma coisa para manter as linhas de comunicação) ele manda o e-mail para micreiros, “sobrinhos” que se acham designers super hiper mestres Jedis, desesperados e alguns estudantes de alguma área de design que ainda não aprenderam ética ou não perceberam o quão danoso é esse tipo de padrão de negócios.

Em seguida, esses “profissionais” passam horas de seus dias, já que possuem tempo disponível, fazendo umas “logos bonitinhas” no CorelDRAW ou Illustrator, a partir de pedaços de identidades visuais que eles encontram no Google Images. Estes então mandam duas, talvez três, variações dessa “logo bonitinha” e cruzam os dedos na esperança de ganhar um trocadinho para comprar uma bermuda na C&A.

Então o empresário que contratou a empresa vai ver as “logos bonitinhas”. O cara não tem a menor noção de design e não entende nada de propaganda ou da importância da forma como a empresa dele será vista pelo público. Somente quer uma “logomarca bonitinha”. Daí ele vê aquela que ele mais simpatiza e pensa: “Sou muito comelão, escolhi a melhor e ainda paguei pouco”.

No final, vários micreirinhos, sobrinhos e estudantes vão ficar chorando triste no canto da sala e ter extremas crises de depressão, talvez usando as marcas em algum portfólio feito no WIX, enquanto o ganhador, se achando agora “o designer” irá comprar sua bermuda. O dono da empresa de Design Contests estará rindo a toa, pois não teve trabalho nenhum e ainda arrumou coisa para colocar no seu portfólio e aparecer em programas duvidosos como o Pequenas Empresas Grandes Negócios que premia as empresas por quanto elas ganharam e não por seus valores e qualidades. Claro, com o auxílio de alguns consultores do Sebrae (não todos, mas boa parte), que incentivam os péssimos negócios para a área de Design Digital e Tecnologia.

Qual o Resultado de Tudo Isso?

O Cliente, que não tem obrigação de entender o que é design, escolhe a “logomarca” (sim, eu sei que é um termo incorreto) de acordo com seus gostos pessoais.

Ou seja, não foi uma decisão feita por ser o melhor estudo de público, nem funcionalidade, nem por método heurístico, nem nada. Simplesmente foi escolhido no gosto e no achismo. Que resultado podemos esperar para essa empresa pelos olhos de seu público?

Além disso, dezenas de pessoas que participaram dessa concorrência não receberão nada, mesmo se talvez tenha apresentado um projeto melhor. Ou seja, irão perder seu tempo em vão. Tempo que poderiam fazer coisas mais importantes, como estudar filosofia do design, cores, Bauhaus, psicologia, geometria, etc.

Esse tipo de processo também causa uma desvalorização da área de design. O cliente comum irá acreditar que o preço para uma identidade visual, organizada e funcional será o mesmo que o de uma Concorrência. Isso criará um grande problema para argumentar sobre os valores que o designer de verdade está cobrando. As pessoas concluirão que design nem dá trabalho.

Para a empresa de Design Contest, será ganhar dinheiro sem ter que fazer nada e ainda levar todo o crédito. Uma ideia inteligente, do ponto de vista monetário, mas extremamente anti-ética.

Concorrência x Concurso

Todavia, é necessário deixar claro a diferença de concorrência para concurso.

Enquanto a concorrência trata-se de um trabalho comercial sob promessa de pagamento especulativo, o concurso se trata de uma atividade lúdica, premiada ou não, sem que a finalidade do artefato gráfico seja o uso comercial da mesma.

Ou seja, a concorrência é “Me apresente algo para que eu use na minha empresa, se eu gostar.”, enquanto o concurso é “Vamos nos reunir e premiar o trabalho melhor para estimular o estudo da comunidade”.

Por exemplo, em um concurso vários profissionais vão apresentar ideias, sobre um determinado tema, e discutir entre si. O projeto resultante é do profissional, assim como a decisão de seu uso. O prêmio vai ser entregue a alguém e o objetivo é lúdico, é diverti-se e dividir experiências.

Concluindo

Se você é designer de verdade, pule fora dessa. Nem relógio trabalha mais de graça, que tem que trocar pilha, ou parar para ficar dando corda.

Se você é empreendedor, não caia em conversas de certos consultores de procurar coisas extremamente baratas ou de sites idiotas que fazem concursos. Se você PRECISA de um designer, então a decisão do que é melhor NÃO É SUA. Você pode e DEVE opinar, MAS NÃO DECIDIR. Você não contrata um profissional para dizer como deve ser feito o seu trabalho. No caso de design, diga o que espera do resultado e como quer que o seu público reaja. Mas as decisões de como isso será feito é do designer, afinal, é esse o trabalho dele.

Ou seja, no final de tudo, o empresário vai acreditar que foi feito um bom trabalho, mas o mais provável é que seja horrível, pois a escolha de um profissional de publicidade e comunicação não é feita a partir de seu gosto individual, mas sim do que o público se agrada e precisa.

Por último, se você é proprietário de um site de Design Contest… #FUCKOFF!

Para atualização, segue o Artigo 12 do código de ética da ADG (Associação dos Designers Gráficos)

Artigo 12º – O Designer Gráfico não deve, sozinho ou em concorrência, participar de projetos
especulativos pelo qual só receberá o pagamento se o projeto vier a ser aprovado.
1. O Designer Gráfico pode participar de concursos, abertos ou fechados, cujas condições sejam aprovadas pela entidade de classe;
2. Uma taxa administrativa justa pode ser adicionada, com o conhecimento e compreensão do cliente, como porcentagem de todos os itens reembolsáveis pelo cliente que tenham passado pela contabilidade do Designer Gráfico;
3. O Designer Gráfico que é chamado para opinar sobre uma seleção de designers ou outros consultores não deverá aceitar nenhuma forma de pagamento por parte do designer ou consultor recomendado.
20 de janeiro de 2017