Design em projetos OpenSource: phpMyAdmin Brand Refresh
To the English speakers: https://adrianocahete.medium.com/design-for-opensource-phpmyadmin-8b0bd8b800d3
O foco desse texto é mais amplo: é para designers, desenvolvedores e todo o ecossistema em torno (Product Owners/Managers, QA e etc), então vou tentar deixar o mais explicado e linkado o possível.
E é minha primeira tentativa de tentar terminar os textos que estão morando há anos nas minhas notas… 🤷
—
Fui dispensado do trabalho durante a pandemia e tive problemas por não ter um portfólio com muitos trabalhos diferentes. Isso porque trabalhei durante muitos anos em poucos, porém grandes produtos, mas que não fazem o volume esperado no portfolio. Todos entregues, mas os não entregues/protótipos ficam comumente em NDA, não podem ser disponibilizados fora da empresa e são os que normalmente fazem um volume de projetos diferentes. Por causa disso, percebi que tinha que fazer novos cases.
Ao invés de seguir o padrão de criar soluções hipotéticas (como normalmente é feito no Dribbble), pensei comigo mesmo:
“Porquê não resolver problemas reais e, em aliado à isso, resolver problemas de algum projeto open source?”
Assim, comecei a procurar e, durante essa procura, iniciou-se a Hacktoberfest, o que me deu a ideia de procurar projetos open source (que são visivelmente necessitados de profissionais de UI/UX) que realmente precisem de melhorias.
Estranhamente, é difícil achar issues relacionadas à isso no Github (saiba mais sobre o Github e issues aqui). Não que não precisem, mas acredito que não seja fácil achar profissionais de design para lhes ajudar, além de o desenvolvedor na maioria das vezes não ter essa preocupação. Logo, não abrem issues.
Com essa busca, acabei caindo no phpMyAdmin.
O projeto phpMyAdmin
O PMA é um software OpenSource (de código aberto) que visa “gerenciar bancos de dados MySQL/MariaDB via web”.
phpMyAdmin is a free software tool written in PHP, intended to handle the administration of MySQL over the Web.
É um produto grande, com décadas de vida (22 anos pra ser mais exato), bem conhecido e utilizado. Possivelmente, você designer que já teve que criar um site em WordPress, mexeu nele.
Assim como todo projeto OpenSource que não tem uma grande empresa com design em mente por trás, esses projetos são visivelmente carentes de UI/UX e muitos parecem que pararam no tempo, embora a solução seja útil e frequentemente usada. Isso acontece porque normalmente é um produto criado por desenvolvedores e esses profissionais, mesmo que se importem, não tem o foco, estudo e mentalidade voltados para o design de interface.
Não é falta de vontade, é falta de repertório.
O Redesign
Inicialmente minha ideia era criar uma nova interface para o produto em si. Porém percebi que eles acabaram de atualizar a interface com breaking changes (basicamente, uma alteração significativa na base do código) e avaliei que a viabilidade de uma nova breaking change, não-essencial, seria muito arriscada para o projeto (e pra aprovação da nova UI) nesse momento.
Múltiplas breaking changes numa feature não-essencial (código de suporte à temas) não é algo muito bem visto pelo usuário final.
Na busca em outros repositórios da organização deles, encontrei uma issue de 2019 sobre o visual do site, comparando com outra ferramenta também Open Source. Realmente, como esperado, não era visualmente atrativo.
Fiz um estudo de toda a interface, mas antes de entrar nesse assunto, percebi que o logo também não tinha um padrão específico, embora os símbolos e cores fossem frequentes e bem reconhecidos.
Então, já que estava propondo um update no visual do site, porque não modernizar a marca também?
Modernizando a Marca
De acordo com os criadores/mantenedores, a ideia do logo era mostrar como
“O phpMyAdmin ajudava o usuário à ‘navegar pelos mares turbulentos’ do uso do MySQL”
Na época que foi lançado (1998) fazia todo o sentido. Se você não frequentou a internet naquela época, procure as interfaces e/ou perguntem à quem viveu. Era uma época complexa para as interfaces.
Para melhor se situar no tempo: o Facebook e o Orkut foram criados em 2004. O MSN Messenger foi criado em 1999. O phpMyAdmin já existia.
A Marca
A cor azul vem do logo do PHP (linguagem na qual o projeto foi feito), já o laranja veio do laranja do logo do MySQL.
Então manter o veleiro, a ideia de mar revolto e as cores eram primordiais.
Embora eu tenha um background em Design Gráfico, identidade visual não é a minha especialidade, porém tenho um bom entendimento. Logo, sei que uma boa marca precisa ter, essencialmente, um símbolo, a tipografia e cores marcantes.
A aplicação do logo nos materiais de internet (principal plataforma) fazia com que o logo perdesse muito dos elementos pela questão do tamanho. Além de não poder ser muito diminuído, ter problemas com a inserção em fundos diferentes de branco e quando a impressão é em Preto e Branco (comumente chamado de B&W).
Então, resolvi que seguiria o “princípio KISS”: Keep It Simple, Stupid (numa tradução direta: Mantenha Simples, Estúpido). Inclusive a simplicidade é um dos pilares das 10 Heurísticas de Nielsen (em inglês).
O logo deveria, ao mesmo tempo, ter as cores já reconhecidas da marca, continuar a ser reconhecido sem o texto, ser simples para que possa ser aplicado em qualquer mídia e funcionar caso seja necessário a impressão em preto e branco.
O maior problema era a falta de legibilidade: o veleiro era difícil de ver em fundos claros e/ou quando diminuída e tinha muitos detalhes (ondas e gaivotas). O Amarelo do texto em cima do cinza também não ajudava (o Contrast Ratio marcava 1.32:1, ou seja, não chegava nem perto do mínimo — 4.5:1, embora a WCAG não cobre isso em logos).
Símbolo e Cores
Pra evitar o problema de legibilidade, removi o cinza que era uma cor de apoio e adicionei dois tons de azul, baseado no azul padrão. Simplifiquei o veleiro deixando somente 3 formas, para que a inserção em áreas pequenas não fosse um problema, assim como simplifiquei a onda em apenas uma forma. O logo anterior tinha 5 formas para o veleiro e 3 para as ondas, além das gaivotas.
Aqui também removi a necessidade do logo ser sempre o símbolo + tipografia. Agora a marca poderia ser usada facilmente somente o símbolo.
Como a base do símbolo fiz no Figma, as curvas não ficaram exatamente como eu queria, então pedi a ajuda de uma amiga que conheci na faculdade que viveu muito mais a área de Design Gráfico/Identidade Visual do que eu, embora esteja migrando pra UX agora: a competente Beatriz Fazolo. Ela corrigiu as curvas e melhorou o espaçamento visual do símbolo, tornando, aí sim, apresentável.
Tipografia
A tipografia da marca original era a mesma da marca PHP que, além de visualmente não funcionar com o novo símbolo, é uma tipografia de uso pago. E isso não condiz com a ideia do projeto de ser OpenSource.
Por causa disso, eu e a Beatriz tínhamos como base que a tipografia deveria ser OpenSource ou, pelo menos, de livre uso. Após alguns testes chegamos na Montserrat, que é uma tipografia de código aberto (SIL-OFL 1.1) que permite que você use de forma privada, comercial, modifique e distribua, desde que você mantenha a licença original e dê os créditos ao criador. Ela é parecida com a licença original do PMA (GNU GPL 2.0 que permite o mesmo uso, mas requer que você mostre o que alterou e o novo código), mas que para o nosso uso ela é a essencialmente mesma.
Além disso, a Bea deu uma boa definição no uso do texto “php” com a tipografia regular e o “MyAdmin” com a tipografia em negrito/bold. Isso faz com que, caso a impressão seja monocromática, além do símbolo mais simples, os nomes teriam destaque diferente, embora com a mesma cor.
Logo
Agora sim chegamos no produto final: O logo completo.
Além das alterações de símbolo e tipografia, alteramos também a disposição dos elementos, para que, além de que leiturabilidade fique melhor, o uso possa ser separado quando necessário.
Conclusão e Comparativo
A nova proposta de Identidade Visual foi bem aceita pelo time do phpMyAdmin e só falta o merge no repositório (o que, por ser um projeto de código aberto e mantenedores voluntários, pode demorar mesmo).
Se você tem ou conhece algum projeto OpenSource que seja usado por muitas pessoas e precise de designers, comente aqui!
—
A ideia inicial desse texto era colocar todo o redesign num texto só, mas conforme fui escrevendo percebi que ficou extenso, então resolvi separar em alguns. Coloco os links aqui assim que for publicando.
