Renan Mayrinck's profile

Inkscape: An modern approach [UI & UX Design]

Sobre o Inkscape
Inkscape é um software de código aberto (open-source) que permite desenhar e editar vetores com recursos de nível profissional, porém sem nenhum custo para os usuários. Sua interface foi construída com base no GTK, que é um sistema de componentes de interface, geralmente usado em aplicações Linux.


O problema detectado
Mesmo sendo um software bastante robusto e recebendo atualizações com frequência, o Inkscape ainda assim não consegue ter uma apresentação chamativa e carismática, que o faça competir em nível de igualdade com seus concorrentes, por mais que funcionalmente já tenha esse potencial.

Nas pesquisas que realizei, notei que boa parte dos usuários de outras ferramentas, quando eram apresentados ao Inkscape, se sentiam desconfortáveis em utiliza-lo por ele ter uma aparência de um software antigo (parte graças a aparência padrão do GTK). Até onde as evidências me levaram, não houve nenhum grande trabalho de estruturar a experiência do Inkscape ao longo dos anos em torno de algo mais personalizado, gerando aproximação com outras ferramentas feitas com base no GTK, mas compartilhando também dos mesmos problemas visuais delas. 

A máxima se prova verdadeira aqui: as pessoas não se importam com coisas que não foram criadas se importando com elas, e o uso do GTK sem um cuidado maior de personalização é uma prova disso.​​​​​​​
Buscando a Solução
Minha primeira busca de solução desse problema foi ouvir pessoas que conhecia que já tiveram uma interação com a ferramenta e entender seus motivos para não gostar ou utilizar com frequência a ferramenta, a maioria dos feedbacks girava em torno do visual da interface, mas tive outros feedbacks:

- Sinto falta de um sistema de abas que me permita alternar entre os arquivos como no Illustrator.
- Não gosto muito das cores dos ícones e nem da interface do programa, me parecem um pouco estranhas...
  Da a impressão de algo velho.

A partir disso, comecei o processo de redesenho da interface do programa, modernizando-a com base em anseios de designers que ouvi ao longo da pesquisa, assim como visualizando ideias que deram certo em outros softwares concorrentes e em conceitos de interface de alguns design systems famosos como o Material Design e o Fluent Design. 

Este foi o primeiro desenho: Protótipo 1
Feedback Inicial
Após essa primeira publicação no fórum oficial da ferramenta, recebi vários feedbacks sobre como melhorar esse protótipo e o quanto ele era possível ou não de ser executado na prática. Um dos feedbacks falava sobre o painel de ferramentas flutuante não ser muito agradável. Já outro falava que seria uma mudança drástica demais pra ele, tomei nota disso também para um segundo desenho.
De volta a pesquisa

Considerando os feedbacks, percebi que uma ideia de interface para a ferramenta precisaria ser um pouco mais conservadora em seus elementos, uma vez que ela poderia desagradar a base já instalada de usuários se fosse muito diferente do padrão já estabelecido.

Além disso, manter a interface o mais neutra possível em questão a cores poderia facilitar para desenvolvedores independentes construírem temas para esta nova interface, então isso também teria que ser considerado em uma segunda ideia.

Busquei referências em outros softwares gráficos que conheci, como o Affinity Designer, Krita, Pixeluvo e o Photopea. Todos seguiam fórmulas bem tradicionais, apesar de terem seu próprio tempero adicionado a tradição. Entendi que esse era o caminho. 
O desenho final

Abaixo está o desenho final da interface, considerando suas funcionalidades atuais e possibilidades futuras. Um desenho bem mais conservador do que o primeiro, adicionando painéis de ativação de ferramentas (esquerda) e de controladores (direita) nos cantos da tela para remeter de alguma forma a experiência atual. 

Desenhei a interface com a neutralidade dos tons de cinza, considerando branco e cinza escuro como o contraste do tema padrão. O objetivo é facilitar a construção de temas diversos. A logotipo do programa foi adicionada a janela principal para fortalecer o branding e a ferramenta não mais utilizará uma janela do sistema para controlar os botões de fechar, maximizar e minimizar, e sim um sistema interno, se tornando parte nativa do programa em qualquer plataforma e dando uma identidade única a aplicação independente da plataforma. 

A interface nova também deve suportar o recurso de que os painéis sejam afixados em qualquer lado da tela (assim como é hoje), isso facilita para que se construam workflows mais variados para os usuários.

A ferramenta de transformação dos objetos também foi modificada, unificando os modos de rotação e redimensionamento, deixando a experiência mais próxima de outros programas concorrentes.

Outra mudança importante são os ícones monocromáticos por padrão, para garantir que haverá o mínimo de distração para o usuário nos lados da tela enquanto ele desenha. O sistema de abas adicionado abaixo do header traz os arquivos abertos e diz suas dimensões e extensão do arquivo (já que o Inkscape não tem um formato próprio de arquivo e trabalha com SVG como o padrão).
Inkscape: An modern approach [UI & UX Design]
Published:

Owner

Inkscape: An modern approach [UI & UX Design]

Design da interface do software Inkscape (inkscape.org), utilizando conceitos do Material e Fluent Design.

Published: