Rocky • Desktop Software
Redesign de Ícones Icons Redesign
Em 2021, juntamente com o redesign da interface do usuário do Rocky, fui responsável pela reformulação de todos os ícones utilizados no software. In 2021, alongside the redesign of Rocky's user interface, I was responsible for reworking all the icons used in the software.
PorquêWhy
- Rocky estava passando por um processo de redesign da interface com o objetivo de modernizá-la e padronizá-la. Rocky was going through an interface redesign process aimed at modernizing and standardizing it.
- Os ícones anteriores eram, em sua maioria, criados pela equipe de desenvolvimento, não tinham um estilo definido e apresentavam inconsistências visuais. The previous icons were mostly created by the development team, had no defined style, and showed visual inconsistencies.
- Os ícones anteriores estavam todos no formato bitmap e, por isso, eram de baixa qualidade e não eram escaláveis. The previous icons were all in bitmap format and, as a result, were low quality and not scalable.
RestriçõesConstraints
Exemplos dos ícones antigosExamples of the old icons
- Durante o processo de redesign da interface, surgiu o interesse por um tema escuro. Para mitigar o tempo e o esforço de ter ícones diferentes para um tema claro e um tema escuro, houve um esforço para encontrar uma solução que pudesse ser aplicada a ambos. During the interface redesign process, interest in a dark theme emerged. To reduce the time and effort of having different icons for a light and a dark theme, an effort was made to find a solution that could be applied to both.
- Muitas funcionalidades, embora amplamente utilizados em softwares de simulação de engenharia, não tinham símbolos característicos associadas a eles que pudessem ser facilmente transformadas em ícones. Many features, although widely used in engineering simulation software, had no characteristic symbols associated with them that could easily be turned into icons.
SoluçãoSolution
Paleta de CoresColor Palette
- Devido à implementação do tema escuro e claro, a paleta de cores foi definida com o objetivo de obter um bom contraste entre os dois tipos de fundo. Due to the implementation of the dark and light themes, the color palette was defined with the goal of achieving good contrast between the two background types.
- Considerando o número de ícones (a maioria deles pequenos) e o que eles representariam, não havia necessidade de uma paleta de cores complexa. Considering the number of icons (most of them small) and what they would represent, there was no need for a complex color palette.
Para esse fim, foram definidos dois tons de vermelho, verde, amarelo e azul e três tons de cinza. For this purpose, two shades each of red, green, yellow, and blue were defined, along with three shades of gray.
EstiloStyle
- Uma minoria dos ícones era 24x24 pixels, enquanto a maioria era 16x16 pixels. A minority of the icons were 24x24 pixels, while most were 16x16 pixels.
- O preenchimento das formas se tornou o seu principal delimitador, enquanto as bordas foram usadas em alguns casos para ajudar com questões de contraste. O uso de cores, algumas vezes, adicionava tridimensionalidade, enquanto que em outras vezes servia como um diferencial entre dois elementos semelhantes. Shape fill became the main delimiter, while outlines were used in some cases to help with contrast issues. The use of color sometimes added a sense of three-dimensionality, while other times it served to differentiate between two similar elements.
- Gradientes foram usados em alguns casos excepcionais, nos quais representavam operações específicas. Gradients were used in a few exceptional cases, where they represented specific operations.
ModificadoresModifiers
- Os modificadores foram projetados para serem aplicados a qualquer ícone, indicando ações comuns, como editar, adicionar ou informações. Modifiers were designed to be applied to any icon, indicating common actions such as edit, add, or information.
- Outro tipo de modificadores foi criados para ações específicas do Rocky que estavam todas correlacionadas, como na segunda linha no exemplo acima, que indica ações do Solver. Another type of modifier was created for Rocky-specific actions that were all related to one another, such as in the second row of the example above, which indicates Solver actions.
A implementação dos ícones pode ser melhor visualizada no projeto Redesign de Interface.
The icon implementation can be better seen in the Interface Redesign project.
