Conheça o novo visual dos ícones de apps

Olá! Meu nome é Marie, e sou designer na Apple. Hoje, vou apresentar a vocês o visual completamente reformulado dos ícones de apps. Nesta sessão, vamos conhecer as atualizações que estão chegando aos ícones. Vou até deixar você conferir os bastidores de como criamos essa nova linguagem de design. Depois, veremos o sistema de design subjacente, e vou dar algumas dicas que serão úteis quando você estiver trabalhando no seu projeto. Então, quando terminarmos, você terá uma visão geral dos novos efeitos de material e, o mais importante, como criar ícones lindos e exclusivos. Para começar, vamos explorar a visão criativa por trás do design e o que o torna tão especial. Veremos também as novidades em termos de modos de aparência.

Como parte de nossa reformulação, nos inspiramos nos ícones em camadas no visionOS e pesquisamos propriedades de vidro para combiná-las ao material Liquid Glass especificamente para ícones de apps.

O material sobrepõe diferentes elementos, como destaques nas bordas, efeito claro e translucidez, não só para adicionar profundidade, mas também para que os ícones pareçam iluminados por dentro. Para aumentar essa fisicalidade, o material ganha vida na tela de Início do iOS. Com base na entrada do gyro, é possível ver a luz se movendo na borda do ícone, como se estivesse refletindo o mundo ao redor.

Esse novo tratamento de material fica lindo nos modos claro e escuro. Também estamos introduzindo vários modos de aparência translúcida usando o Liquid Glass. Desenvolvemos um vidro monocromático disponível em versão clara ou escura e criamos dois modos de cores: Um escuro, que adiciona cor ao primeiro plano, e outro claro, em que a cor se mistura diretamente com o vidro. Isso torna a escolha de cores ainda mais divertida, vibrante e expressiva. O novo vidro colorido também fica lindo quando combinado com uma Tela Bloqueada colorida.

Todos os modos de aparência estão disponíveis no iPhone, iPad e Mac. E, no Apple Watch, você verá os ícones no modo claro com uma nova aparência.

Evidentemente, você também verá a versão atualizada do ícone na página do produto na App Store. Agora, vamos conferir o sistema de design subjacente.

Antes, os designs eram feitos de acordo com o dispositivo, então alguns ícones tinham artes diferentes, dependendo da plataforma. Com a nova linguagem de iconografia unificada, ficou mais fácil projetar em nossos dispositivos os formatos circulares e de retângulo arredondado.

Vamos começar com o retângulo arredondado. Atualizamos a grade de design para uma estrutura mais simples e espaçada. A grade nova também tem um raio de canto mais arredondado, deixando os ícones mais concêntricos com a interface e dentro do hardware.

Ainda usando a tela de 1.024 pixels, a arte em forma circular tem uma moldura designada em nossa grade e mais respiro visual. A grade nova facilita a criação de arte com equilíbrio óptico para todos os tipos de proporções.

Agora, você deve estar pensando como essas alterações de design afetarão os ícones no macOS. Vamos ver. Até agora, alguns ícones do macOS tinham elementos secundários que poderiam estender a forma composta. Como no ícone anterior de Contatos, em que as abas divisórias se estendiam além da forma do livro. Para evitar formas irregulares, a tela agora funciona como uma máscara para os designs. Aqui você pode ver como reformulamos o ícone para aproveitar melhor a tela e incluir as abas divisórias em sua forma.

Os ícones do Mac, que têm a mesma forma do retângulo arredondado, são mascarados ou estendidos automaticamente para encaixarem no modelo, enquanto recebem a nova aparência de material sem que você precise fazer nada.

Aqui está outro caso interessante, em que o ícone tem uma forma bem peculiar. Nesse caso, o sistema remove as sombras projetadas e então dimensiona a arte em nossa tela retangular arredondada.

Embora seja um ajuste automático inteligente, é melhor redesenhar o ícone para utilizar totalmente a tela do ícone, como o que fizemos para o Photo Booth.

Agora que falamos sobre o iOS e o macOS, vamos ver como ficam os novos ícones de vidro no Apple Watch.

Alinhamos a grade circular para watchOS com a grade retangular arredondada atualizada.

A tela de 1.088 pixels ultrapassa nosso retângulo arredondado, o que ajuda a criar traduções mais fáceis entre as plataformas e obter consistência visual.

Os ícones circulares agora parecem mais alinhados com os outros produtos, mesmo na pequena escala em que você os vê no seu Apple Watch.

Também atualizamos os modelos com base no novo sistema de design, o que pode ser útil quando você for trabalhar nos seus projetos. Nós os disponibilizamos para Figma, Sketch, Photoshop e Illustrator.

Todos eles estão disponíveis na página de recursos de design da Apple em developer.apple.com. Agora, vamos falar sobre o que você precisa considerar ao desenhar ícones para aproveitar ao máximo os novos materiais e modos de aparência. Vamos abordar a importância das camadas, como a translucidez e o desfoque podem valorizar a aparência do material e a diferença que a simplicidade pode fazer, além de algumas orientações mais específicas para os fundos. Em primeiro lugar, a sobreposição, um componente importante da nossa nova linguagem de design, que é essencial você conhecer ao trabalhar com materiais. Em termos simples, os ícones têm uma camada de fundo e uma camada de primeiro plano, como no ícone de Mensagens.

Mesmo com uma única camada de primeiro plano como aqui, os efeitos de material já dão ao ícone muitos detalhes extras. A bolha de mensagens tem uma translucidez muito agradável e uma sombra sutil confere um estímulo extra. Mas, embora obviamente só possamos ter um fundo, o primeiro plano pode ser expresso por várias camadas. Empilhar essas camadas é o que torna esse recurso interessante. Considere o app Podcasts. Antes, o design usava um estilo de estêncil que já dava ao ícone uma sensação de camadas. O espaço ao redor da figura dava a impressão de que ela estava na frente das linhas circulares.

Agora, usando a técnica de camadas, empilhamos as formas umas sobre as outras para criar um design dimensional.

Como os ícones recebem muito mais detalhes no nível do sistema, também notamos que certos estilos e perspectivas de ilustração funcionam melhor que outros.

Objetos e perspectivas 3D realistas, como no ícone anterior do Xadrez, podem competir com as propriedades do material.

O ícone redesenhado usa uma visualização frontal e uma aparência mais plana.

Em vez de usar um estilo de ilustração complexo, deixamos que o material adicione nuances à arte.

As formas dimensionais devem ser usadas com critério, e é útil projetá-las para que complementem a materialidade do vidro. Vejamos como esse ícone da Pré-visualização pode ser melhorado.

Este novo design funciona muito melhor com os efeitos de material, e a perspectiva escolhida aqui tem um propósito claro, pois enfatiza a área de foco da lupa.

Agora, vamos falar de translucidez.

Usar a translucidez no desfoque com o novo material ficou mais fácil, e o resultado mais bonito. Ela pode trazer leveza, nuances encantadoras e adicionar ainda mais profundidade ao seu design.

A translucidez fica ótima nos modos claro e escuro, e se adapta lindamente até aos modos transparentes. Com o fundo de vidro, você pode ver a imagem de fundo através de todas as camadas translúcidas. Agora, todos já ouvimos que "menos é mais". Vou mostrar por que isso é verdade quando você está trabalhando com nossos materiais. O Fotos é um ótimo exemplo. O design antigo já usava a transparência para enfatizar as pétalas sobrepostas e dar dimensão à forma como um todo. Ao reduzir a quantidade de sobreposição, permitimos que as interseções e as bordas refletivas do nosso material realmente brilhem.

Também atualizamos as cores para que pareçam mais vibrantes, remontando ao vidro colorido, e preservamos a paleta de cores característica do ícone do Fotos.

O novo design usa nossa grade atualizada, que confere mais espaço ao ícone, e as sombras cromáticas adicionam ainda mais profundidade ao material de vidro.

Como muitos efeitos dinâmicos estão disponíveis na receita do material, recomendamos emparelhar os efeitos estáticos integrados na arte de origem.

Havia vários desses efeitos no ícone anterior de Casa, como sombras projetadas ou bordas chanfradas.

Semelhante ao que vimos no Fotos, a arte nova do app Casa é uma versão simplificada do design anterior.

Reduzimos a quantidade de camadas, deixamos as formas mais arredondadas e removemos os efeitos materiais adicionais. E esta é a aparência refinada quando aplicamos nosso tratamento de vidro. Isso mostra o nível de detalhe e sofisticação agregado a uma obra que pode parecer simples à primeira vista.

É que o novo design potencializa nossos diferenciais de material:

translucidez, sombras por camada para obter maior profundidade e realces especulares que ajudam a moldar os elementos. Outro fator que é preciso ter em mente ao desenhar seu ícone são os detalhes menores.

O ideal é evitar bordas afiadas e linhas finas. Em vez disso, o uso de cantos mais arredondados facilita o deslocamento da luz nas bordas de um elemento, como nas rodas de engrenagens mais arredondadas do ícone Ajustes.

Embora nem todos os elementos precisem receber o tratamento do material, para aqueles que recebem, é útil usar pesos de linha mais grossos, pois isso preserva os detalhes em uma escala menor.

Por fim, vamos falar sobre os fundos e o impacto que eles têm na aparência do seu ícone.

Como os efeitos de iluminação são importantes para esse novo visual, notamos que gradientes de claro para escuro suaves combinam melhor com a direção da luz.

Também desenvolvemos um gradiente de claro para escuro do sistema que deve ser usado em vez de fundos brancos ou pretos puros. Esses gradientes são projetados para garantir o contraste e fornecem a tela ideal para nossos efeitos materiais.

E só para encerrar: Com o sucesso do modo escuro, recomendamos um maior conhecimento sobre fundos coloridos, para que haja uma distinção mais agradável ao alternar entre modos.

Então, vimos a nova linguagem de design para ícones de app. Como vocês notaram, não se trata apenas de uma nova estética, mas de novas oportunidades para soltar sua criatividade. Esse sistema permite que cada ícone seja a versão mais elaborada e personalizada possível, refletindo o cuidado e a inovação que você dedica aos seus apps. Nós acreditamos que seja uma nova era para os ícones, em que eles têm um papel ainda mais importante na narrativa e identidade de marca. Por isso, incentivo que você aproveite este novo capítulo, explore as possibilidades, inove na criação de ícones e crie experiências que encantam desde o primeiro olhar. Agora que você já pode começar a criar, recomendo conferir a apresentação complementar "Criar ícones de apps com o Icon Composer", do meu colega Lyam. Ele mostrará tudo que você precisa saber sobre essa nova ferramenta e como usá-la para construir seu ícone em vidro. Agradeço sua participação.