Mistério resolvido: As Ferramentas de Design usadas pelo GNOME

Minha curiosidade em relação ao Design do GNOME me levou a lembrar da minha infância. Lembro como se fosse ontem da minha época de criança quando ainda desenhava em um caderno com alguns lápis de cor mal apontados, foi uma época feliz, que me traz memórias nostálgicas e me deixa reflexivo em relação ao passado.

No fim das contas, eu não me tornei um artista, um pintor, ou algo assim, como a minha mente juvenil imaginara. Mas, sem dúvida, o interesse em cores e formas foi-me útil mais tarde. O mundo da tecnologia é recheado de trabalhos artísticos, basta olhar para a tela do seu computador ou smartphone e perceber que cada imagem que se desenha na sua tela, cada ícone, é trabalho de algum artista.

Eu não me tornei um pintor ou um desenhista, de fato, mas me tornei muito interessado por design de interfaces, que é algo que vai muito além de “criar um visual bonito”. Da mesma forma com que você está olhando para a sua tela agora e percebendo a quantidade de ícones e formas que se mostram à você, eu estava também há alguns dias, antes de escrever este material.

GNOME e o Design de seus ícones indicadores
Já reparou nos detalhes da interface do sistema que você roda no seu computador?

Eu utilizo Linux há muitos anos, e o meu desktop já mudou bastante de visual neste período, entretanto, somente nos últimos anos é que eu realmente passei a olhar para as interfaces, neste caso o GNOME Shell, pensando: Como foi que construíram esses ícones? Que ferramentas estas pessoas utilizaram? Tiveram que apelar para softwares da Adobe?

Qual a resposta para este “mistério”?

GNOME – Um exemplo de consistência

Você pode até mesmo não gostar do GNOME Desktop Environment como interface, mas ele é sem dúvida o mais proeminente desktop Linux que existe. Grande parte das interfaces non-GNOME, utilizam de alguma forma os layouts e design do projeto através do GTK, e mesmo que você use algum ambiente sumariamente diferente, como o KDE Plasma, é bem possível que você rode alguma aplicação GTK por lá.

Receber este destaque ao longo dos anos e ser usado pelas principais distros Linux como padrão, trouxe ao GNOME uma certa maturidade e ao mesmo tempo uma responsabilidade. Criar um ambiente desktop consistente é muito difícil, independente da plataforma, mas o GNOME parece estar andando para o caminho certo neste sentido.

Uma verdadeira bagunça nas interfaces

Hábito e rotina muitas vezes mascaram certas inconsistências de ‘design’ as quais somos expostos todos os dias. O “Windows nosso de cada dia” tem mais coisas “fora do lugar” do que você imagina, mas o hábito nos faz ignorar esse tipo de coisa, e de fato, antes de poder experimentar outras interfaces, geralmente no Linux (e experiências no macOS), eu nunca tinha percebido isto.

O canal “The Linux Experiment” criou um comparativo bem interessante sobre isso, que você pode conferir:

Apesar dos sistemas operacionais baseados em Linux serem compostos de inúmeros softwares diferentes, produzidos por comunidades de desenvolvedores diferentes, quando nosso foco se restringe ao ecossistema GNOME (que é muito rico em aplicações), você efetivamente tem um visual extremamente consistente. E apesar de não ser o tópico deste artigo, o KDE também vem fazendo um ótimo trabalho neste sentido nos últimos anos.

É fácil observar aplicativos GNOME lado a lado e perceber suas semelhanças, que nos passam a sensação de “pertencimento”, criando um conjunto mais coerente.

Todos os Apps comuns do GNOME possuem consistência. Os menus, formas e controles, são todos homogêneos entre as aplicações.

A grande dificuldade de criar interfaces assim

Tanto Apple, quanto Microsoft, são empresas milionárias, e não é como se elas negligenciassem este tipo de coisa, ambas sempre estão trabalhando em consistência visual, sobretudo a Apple. Porém, o desafio reside em atualizar o sistema operacional  e todos os softwares legados que fazem parte dele.

Se formos observar, o que acontece com Windows e Linux (ocorre em menor grau com o macOS também), é que temos layouts e designs criados em épocas diferentes coexistindo. Não é à toa, que existem dois painéis de controle diferentes no Windows 10, a versão com visual mais antiquado, se faz necessária por uma série de aplicações, e materiais de suporte criados ao longo dos anos, assim como outras ferramentas.

Apesar de ser um sistema eficiente, do ponto de vista de design, o Windows 10 ainda tem características como esta (da imagem acima), além de vários softwares “duplicados”, destinados a realizar as mesmas tarefas.

No mundo Linux, geralmente essas inconsistências tendem a ocorrer porque existem times diferentes de desenvolvedores trabalhando nos projetos. O que implica em visões de design diferentes. Eventualmente, esse desenvolvedor do projeto não realmente entende muito de design, sendo “apenas” um desenvolvedor, muitas vezes voluntário. A aglutinação de pacotes provindos de projetos diferentes, é o que costumamos chamar de “distro Linux”.

É claro, a Microsoft não tem controle sobre os aplicativos de terceiros desenvolvidos para o Windows 10, e tampouco controle sobre seu design, dessa forma podemos restringir os comentários para os aplicativos desenvolvidos pela própria empresa, como podemos ver em uma instalação “limpa” do Windows 10.

A Apple tenta combater essa fragmentação de design há anos, colocando regras explícitas de design de aplicações para que as mesmas sejam admitidas na App Store, porém, com o passar do tempo, conforme você pode ver no vídeo do canal “The Linux Experiment”, até mesmo a Apple definhou, criando inconsistências ela mesma, ainda que seja em menor escala, se comparado ao Windows 10.

Do ponto de vista de “correção”, me parece que o Linux Desktop tem um caminho um pouco mais simples do que a Microsoft para unificar o design, bastaria seguir as guidelines de um projeto como o GNOME ou o KDE e supostamente tudo deveria ficar bem. Mas, não me surpreenderia se a Microsoft conseguisse fazer isso antes com o Windows. A diferença de foco e o trabalho unificado pode fazer diferença em favor da Microsoft.

Ferramentas – Com que pincel um grande artista faz sua arte?

Definitivamente você precisa de boas ferramentas para criar boas interfaces. O erro de muita gente, no entanto, reside em acreditar que somente ferramentas pagas ou proprietárias servem para fazer este tipo de trabalho.

Imagina o Balmer falando “Designers! Designers! Designers!”

Sem dúvida, ferramentas como Adobe Illustrator, Adobe Photoshop (e acho que podemos continuar listando softwares da Creative Suite aqui…), são excelentes para criar designs chamativos, porém, elas não são as únicas ferramentas, e o design do GNOME é um case claro disso.

Grandes artistas pintam até com carvão, a diferença está provavelmente na sua cabeça de designer, e não na ferramenta que você usa. Acreditar que apenas uma única ferramenta pode te entregar o resultado, é como um pintor acreditar que somente um pincel específico permitirá que ele pinte a sua masterpiece. Mais fé na ferramenta, do que no artista.

Softwares utilizados da produção da interface GNOME

Da mesma forma que eu fazia quando criança, quando tentava desenhar super-heróis no meu caderno de desenho com um lápis mal apontado, eu passei a tentar criar meus primeiros designs utilizando as ferramentas que tinha à minha disposição. E, aposto que a princípio, foi isso que aconteceu com os desenvolvedores Linux também. Porém, hoje temos ferramentas interessantes para trabalhar com interfaces gráficas e criar um design interessante.

O GNOME é bem transparente sobre quais ferramentas o projeto costuma usar para criar os seus visuais. O site do projeto nos mostra vários sets de ferramentas, um deles mais generalista, outro bem específico.

Softwares para design no Linux

É interessante observar que os softwares utilizados são geralmente open source ou gratuitos, além de serem multiplataforma, o que permite que eles sejam desenvolvidos no Linux, mas não somente nele. Estes são alguns dos softwares utilizados pelo projeto GNOME:

  • Inkscape: Um software para desenhos vetoriais fantástico, que segundo as informações, é utilizado pela equipe do GNOME para criar mockups das interfaces, além de novos ícones.
  • Blender: Software de modelagem 3D, que pode ser usados para várias finalidades, mas que dentro do projeto é utilizado especialmente para criação de mockups animados e ícones de alta resolução
  • GTKInspector: Um ferramenta muito mais específica para o desenvolvimento GNOME, que permite ajustes em tempo real na interface para observar o seu funcionamento.
  • SparkleShare: Este software não tem tanto a ver com design especificamente, mas serve para compartilhar arquivos entre os designers.
  • GIMP: O poderoso manipulador de imagens dificilmente ficaria de fora de uma lista como esta, porém, ele parece ser usado para coisas mais simples, como manipular screenshots e fazer anotações.

Outras ferramentas grátis, incluiriam supostamente o Pencil e o Google Draw, ambos não são open source, mas são grátis, e são utilizados para diagramação de ‘interfaces’. Essas informações foram atualizadas ainda em 2017, então é natural pensar que mudanças possam ter ocorrido.

É possível que hoje sejam utilizadas outras ferramentas também. Há duas em específico que vejo desenvolvedores comentando de forma positiva. Elas não necessariamente fazem parte do projeto GNOME, mas podem ser úteis para você: Figma e Akira.

Ferramentas específicas do GNOME

Icon Library App do GNOME – O Design da interface deste app também segue os guidelines do projeto, repare.

Quando um projeto cresce tanto, é natural que os próprios desenvolvedores passem a criar ferramentas para ajudar em suas tarefas diárias, programas que nenhum mercado específico iria criar, pois são específicas demais e voltados para a criação interna e um único projeto. O GNOME tem as suas também, e claro, elas são open source e você pode instalar em qualquer distro, mesmo que você não use GNOME.

  • Icon Library: Ferramenta que permite que o usuário pesquise por symbolic icons utilizados no design do GNOME para implementar diretamente em sua aplicação, ou salvar uma cópia em SVG, que pode ser aberta no Inkscape, para por exemplo, ser ajustada ou modificada.
  • App icon Preview: Ferramenta utilizada para visualizar e exportar ícones de aplicativos para o sistema;
  • Pallete: Ferramenta que entrega a paleta de cores do projeto GNOME, algo importante para ser usado no design de uma nova aplicação.
  • Symbolic Preview: De forma semelhante ao já comentado “App icon Preview”, esta aplicação serve para visualizar e exportar ícones simbólicos
  • Contrast: Como o nome já sugere, esta ferramenta ajuda você a averiguar se o seu design tem contraste o suficiente, algo importante para dar noções de espaçamento, profundidade, separação de objetos, e até mesmo facilitar a visualização do usuário.

Todas estas aplicações estão disponíveis no Flathub, e podem ser instaladas em qualquer distro Linux facilmente.

Falar é fácil, me mostre implementado

Sempre gostei da frase de Linus Torvalds:

“Talk is cheap, show me the code.”

“Falar é fácil, me mostre o código.”

Ela faz muito sentido no meio da programação, qualquer um pode dizer que protege a privacidade do usuário, que o sistema ou software faz isso ou aquilo, mas “falar é fácil, me mostre o código”, só assim é possível ter certeza que é legítimo este argumento.

O mesmo vale para o design, de forma alguma adiantaria advogar que é possível ter uma carreira no design, ou no design de interfaces, se você mesmo não utilizasse ferramentas de código aberto para construí-lo.

Tome o meu exemplo com o canal Diolinux no YouTube. Absolutamente tudo o que a gente faz, poderia ser feito usando macOS, Windows e outros softwares fechados e pagos, como Photoshop, Premiere, que são excelentes, não tenho dúvida, e certamente permitiram que a gente fizesse o nosso trabalho, entretanto, não é assim que a nossa história se desenrolou.

O que tem de diferente na nossa história é o fato de termos pensado em algum momento: Será que dá pra fazer tudo o que “essa galera” faz, mas utilizando Linux? Até onde podemos chegar com as ferramentas disponíveis para o pinguim, independente delas serem open source ou não?

Temos conseguido, ao longo do tempo, provar com nosso exemplo, fazendo as nossas tarefas e colocando em prática o conceito de que é possível utilizar Linux para produção de conteúdo (e design). Simplesmente porque tem funcionado, não há como alguém dizer que “não tem como fazer” certas coisas, se nós mesmos já fizemos repetidas vezes. É uma prova empírica.

Para os interessados em criação de conteúdo com softwares que rodam no Linux, ou que sejam open source, temos muitos materiais gratuitos no canal para te ajudar, e recentemente lançamos um curso de GIMP, disponível para membros no canal, feito com muito carinho para ajudar quem deseja trilhar um caminho parecido do nosso.

Por fim, gostaria recomendar a leitura de um outro artigo aqui do blog, escrito pelo incrível Raul Craveiro, onde ele discorre sobre o porquê do mundo Linux precisar de designers.

Até a próxima!

Talvez Você Também Goste
Temas GTK em aplicações Qt
Continue lendo

Temas GTK em aplicações Qt

O nome do meu canal não se chama “OSistemático” à toa, quando o assunto é visual/design de uma aplicação ou sistema, sou bem criterioso, e aplicações em Qt costumam ter uma aparência diferenciada ao tema GTK do Ubuntu. Isso ocorre pois um utilitário não vem por padrão (em outras distros ele pode estar presente), seu nome é “QT5 Confguration Utility”, um software bem simples, mas que irá ajudar com seu ”toque”. 😂😂😂