por Vitor Hugo Japa

Redesenhando as pastas do macOS

Um estudo pra se divertir e se exercitar desenhando ícones!


Foi no iOS7 que a Apple decidiu iniciar a modernização da linguagem visual dos seus softwares, apresentando para o mundo uma tendência do design de interfaces com o seu estilo “translúcido”. Um ano depois, o lançamento do OSX Yosemite conectou tudo trazendo uma nova linguagem de iconografia e guias de design.

ícones originais das pastas do macOS

Quando de fato o Mac OSX Yosemite chegou – lá estavam elas, as pastas do sistema. Infelizmente não há guias de design, na documentação, para construir pastas e embora algumas empresas tenham seguido o padrão, outras no entanto começaram a adotar outros formatos, inclusive deixando de lado o pixel perfect dos tamanhos 16px.

Decidi fazer o experimento: criar uma nova linguagem de pastas para o macOS com ainda mais proximidade da nova interface translúcida dos softwares da Apple.

Ferramenta

Minha busca inicial foi por uma ferramenta que permitisse a criação de formatos .ICNS com a possibilidade de desenhar especificamente os tamanhos menores (16px, 24px e 32px). A maior parte das ferramentas que prometem converter imagens em ícones rapidamente, como IconBox, Image2iconCandybar, não permitem este nível de detalhe. É na lista do Finder que você pega estes ícones safados 😜

Encontrei então um plugin para Sketch App que permite justamente desenhar as variações dos ícones para cada tamanho – unindo a praticidade de desenhar com o Sketch ao objetivo desta etapa do experimento!

Sketch Plugin Generate .ICNS

Modelo básico

A familiaridade com as pastas originais é algo que gostaria de manter para este projeto, então neste caso, o modelo foi desenhado com base no formato do ícone de pasta original. Após o desenho simplificado, foram adicionados estilos visuais e uma grade para posicionamento de símbolos.

Neste ponto, experimentei a aplicação de símbolos no centro da pasta, com efeito de relevo semelhante aos originais. Percebi então que este efeito pouco se relacionava com o visual leve do sistema e predominantemente com elementos transparentes.

Os testes alimentaram a minha ideia de usar a cor da pasta como um elemento para acelerar o processo de decisão da escolha de pastas no dia-a-dia, combinado com ícones “translúcidos”.

Formulando a paleta de cores

Com base nas nuanças das cores de ícones de aplicativos, experimentei variações para chegar em tons vivos e muito familiares aos dos aplicativos. O final dessa etapa resultou em uma grande e flexível paleta de cores para trabalhar.

O objetivo desta expansão no projeto, foi tornar a cor uma informação útil e intuitiva sobre qual tipo de arquivo a pasta armazena.

Por exemplo: pastas amarelas podem lembrar documentos de texto por causa do Pages, iBooks e Notas, pastas verdes para planilhas e assim segue a lógica. Tons diferentes, podem lembrar Apps diferentes, e associando isso a um símbolo, o ícone de pasta transmite uma perfeita demonstração do seu conteúdo.

Símbolos consistentes

Colocar os símbolos dentro das pastas é um dos pontos que mais sofreram mudanças durante o experimento. Inicialmente havia testado usá-los com efeito de relevo, depois sólidos em branco para que eles aparecessem quando a cor da pasta fosse escura.

Sem uma harmonização satisfatória, no final das contas foi preciso encontrar um jeito de deixar os símbolos em branco, sem solidificar a cor, pois isso descaracterizava a pasta com um visual grotesco e marcante demais. Foi aí que pintou a ideia da transparência nos símbolos.

A translucidez (translucency) é um dos grandes conceitos da nova linguagem visual da Apple. Ele é marcado principalmente pelo efeito que um elemento transparente causa na nitidez de um elemento com intersecção em segundo plano.

Aplicar esse efeito nos ícones, poderia trazer essa leveza que estava buscando para a combinação da pasta com os símbolos.

Para alcançar isso, cada símbolo foi desenhado para que o efeito de transparências diferentes fosse aplicado nas camadas e assim obter uma impressão de profundidade nos elementos de cada símbolo. Neste ponto, algumas fontes ajudaram bastante como a FontAwesome que contém logos de produtos que desejava usar como Dribbble e WordPress.

O ícone mais trabalhado certamente foi do Xcode por ter mais detalhes realistas no símbolo original. Foi a aplicação em menor escala desse símbolo que me fez pensar se não era melhor cortar a interseção de partes do símbolo ao invés de sobrepor.

Juntando as coisas

Neste ponto eu tinha tudo que precisava para começar a trabalhar e colocar as coisas juntas para criar os arquivos .ICNS

Ícone após ícone eu fui pesquisando, adaptando e desenhando cada símbolo para compor o grupo de pastas que uso no dia-a-dia. Após a exportação dos arquivos com o plugin do Sketch App, aplicar foi muito simples – basta selecionar uma pasta, apertar command + i e arrastar o arquivo .ICNS para o desenho da pasta no topo da janela de propriedades.

macOS Folders .ICNS

Atualizado
Forçando o macOS a mudar os ícones de pasta padrão do sistema

Com o lançamento do macOS El Capitan, a Apple introduziu um sistema chamado SIP (System Integrity Protection) que incluindo outras coisas, impede de trocar ícones do sistema.

Caso você queira trocar os ícones de pasta padrão quando cria uma nova pasta (é reversível e é seguro) você pode usar um app gratuito chamado LiteIcon. Na página do App eles explicam como desativar o SIP para trocar os ícones, e depois disso, reativar o SIP para restaurar a segurança.

Sua vez

Agora eu convido você a colaborar e se divertir criando os seus ícones de pastas com o modelo para Sketch App que criei e que está disponível para download abaixo – Não esquece de compartilhar depois. ☺️

macOS Folder Template.sketch


Escrever comentário sobre Redesenhando as pastas do macOS