Redesign de Interface Interface Redesign

• Rocky, apesar de ser elogiado por sua usabilidade e fluxo de trabalho fácil de aprender, tinha uma interface de usuário que utilizava principalmente componentes e gráficos padrões do Qt, o que o tornava visualmente ultrapassado. Rocky, despite being praised for its usability and easy-to-learn workflow, had a user interface that relied mostly on Qt's default components and graphics, which made it look visually outdated.
• Os concorrentes do Rocky haviam investido recentemente em interfaces de usuário novas e aprimoradas, o que criou a necessidade do Rocky de também dar um passo à frente nesse aspecto. Rocky's competitors had recently invested in new and improved user interfaces, which created the need for Rocky to also take a step forward in this regard.

Versão antigaOld version

Rocky utilizava o framework Qt*, o que significa que seu redesign estava sujeito às restrições do próprio Qt, bem como às especificidades do código interno do Rocky. Rocky used the Qt* framework, which meant its redesign was subject to Qt's own limitations, as well as the specifics of Rocky's internal code.

[*] Qt possui sua própria linguagem de folha de estilo (QSS), que é semelhante em sintaxe, mas não tão avançada quanto o CSS. [*] Qt has its own stylesheet language (QSS), which is similar in syntax but not as advanced as CSS.

• O tema padrão do Rocky era claro, mas haviam muitos pedidos da equipe de suporte do para que fosse criado também um tema escuro. Essa então foi uma oportunidade para a criação de um tema adicional além do tema claro default. Rocky's default theme was light, but there were many requests from the support team for a dark theme to be created as well. This became an opportunity to create an additional theme alongside the default light one.
• Em vez de criar mock-ups e entregá-los à equipe de desenvolvimento para implementação, o processo de teste e validação foi realizado, em grande parte, por meio de um script que permitia testar as novas folhas de estilo diretamente no software. Instead of creating mock-ups and handing them off to the development team for implementation, testing and validation were carried out largely through a script that allowed the new stylesheets to be tested directly in the software.

Abaixo estão alguns exemplos dos novos temas em ação. Uma paleta de cores com tons claros e escuros de cinza foi definida para ser usada na maioria dos elementos da interface. Below are some examples of the new themes in action. A color palette with light and dark shades of gray was defined for use across most interface elements.

Para dar ênfase, foram usados tons de azul, exceto em elementos excepcionais, como avisos. Shades of blue were used for emphasis, except in exceptional elements, such as warnings.

O estilo utilizava bordas delimitando os elementos e cantos arredondados para torná-lo visualmente mais leve. A fonte usada foi Segoe UI para Windows e Selawik para Linux. The style used borders to delimit elements and rounded corners to make it visually lighter. The typeface used was Segoe UI for Windows and Selawik for Linux.

O tema escuro foi um sucesso! 🙂 The dark theme was a success! 🙂

E após a aquisição do software pela empresa Ansys (que estava passando por um processo de padronização visual dos seus softwares), acabou se tornando o tema default no lugar do tema claro. And after the software was acquired by Ansys (which was going through a visual standardization process across its products), it ended up becoming the default theme in place of the light one.