Fundamentos do design: da ideia à interface

Olá! Meu nome é Majo. Sou da equipe Design Evangelism. A equipe Evangelism se dedica a ajudar designers e desenvolvedores a criar apps melhores para as plataformas Apple. E aprendi que todos nós sabemos quando um app funciona ou não. Perceber a diferença como usuário? É fácil. Mas criar essa experiência perfeita como designer? É mais difícil. Então é isso que faremos hoje juntos. Vou mostrar como eu penso, as perguntas que faço e como lido com a confusão no meio do processo, quando as coisas não parecem dar certo. Vamos começar com a estrutura: Como organizar as informações e definir o que é o app e o que ele faz. Depois vamos explorar a navegação: Como projetar maneiras para navegar pelo app que tragam confiança e controle. Então, vamos nos concentrar no conteúdo e em como melhorar seu significado, apresentá-lo com clareza e orientar as ações.

Por fim, no design visual, veremos como o estilo certo pode moldar a personalidade e o tom do seu app, corroborando a usabilidade. Vamos começar pela estrutura. Todo app é construído sobre uma base que molda o resto: Como as pessoas navegam, o que se destaca e como a experiência acontece. Quando ela é bem feita, tudo se encaixa. Caso contrário... Todos já passamos por isso.

Como exemplo, vou mostrar um app fictício que eu criei. Ele ajuda os amantes da música a organizar suas extensas coleções de vinil. Os usuários podem navegar pela coleção e se inspirar para saber o que tocar em seguida. Eles podem agrupar os discos em caixas, adicionar novos, administrar trocas e salvar registros para consultar depois. Então, qual é a sua primeira impressão? Tem algo confuso? O que funciona? E o que parece estranho?

Quando uso um app, busco clareza: isso torna a experiência convidativa e ajuda a usá-lo com confiança.

Antes, preciso saber onde estou. O app deve deixar isso bem claro para que eu não fique me perguntando onde estou ou como cheguei lá. A próxima pergunta é: "O que posso fazer aqui?" Eu não preciso ter que adivinhar. As ações devem ser claras e fáceis. E finalmente: "Aonde posso chegar?" Uma noção clara dos próximos passos mantém o fluxo e ajuda a evitar hesitações ou dúvidas.

Quando essas perguntas são fáceis de responder, o app parece convidativo e fluido. Isso geralmente é o sinal de uma base sólida. À primeira vista, este app parece muito bom. E isso pode enganar, porque posso presumir que ele funciona bem. Vamos ver como ele responde a essas perguntas, começando pelo topo. Preciso saber onde estou, mas a primeira coisa que vejo é um menu. Isso não é o ideal. Os menus podem ser vagos e imprevisíveis, e o que precisamos é de contexto. Depois, há um título, mas parece mais a identidade de uma marca. É bonito, mas não é muito útil. Quase sinto vontade de pular. E isso poderia me fazer perder o conteúdo recomendado do app, mesmo que pareça útil.

Rolando a tela, encontro alguns álbuns, mas não há mais nada para fazer. Ainda não sei onde estou ou o que devo fazer.

Bem no final, vejo que o nome da aba é Records. Agora sei onde estou, mas é tarde demais. O resultado? A tela não me guiou. Tive que me esforçar para entender. Já vimos o que acontece quando a estrutura não é clara: as pessoas ficam com o pé atrás e confusas ou até desistem. Talvez com menos coisas acontecendo, o app seria mais fluido quando eu o abrisse. Esse é o objetivo da arquitetura da informação. É organizar e priorizar as informações para que os usuários possam encontrar facilmente o que precisam, quando precisam, sem esforço. A primeira coisa que faço é anotar tudo o que o app faz: recursos, fluxos de trabalho e recomendações. Neste momento, não tento julgar nem eliminar nada. Depois, tento imaginar como outra pessoa usaria o app. Quando e onde poderia ser usado? Como se encaixa na rotina? O que realmente ajuda e o que parece atrapalhar? E adiciono essas respostas à minha lista. Com isso, começo a limpar as coisas. Removendo recursos não essenciais, renomeando o que não está claro e agrupando o que precisa estar junto. Ao fazer isso, é evidente que se eu não souber o que é essencial, não conseguirei comunicar isso no app. Simplificar ajuda a aprimorar a função do app. Isso também dá um ponto de partida de como os usuários vão encontrar os recursos e utilizá-los. Vamos explorar isso mais a fundo na navegação. Os usuários devem navegar pelo app fazendo mais que apenas tocando em itens. Quero que se sintam orientados e confiantes. Para isso, vou usar o que aprendi sobre arquitetura da informação para acessar os principais recursos. No iOS, isso fica na barra de abas.

Ela auxilia a navegação entre diferentes seções de um app e está sempre visível, então é fácil acessá-la a qualquer momento. Simplificar é importante, pois cada aba extra significa mais uma decisão a ser tomada e pode fazer o app parecer mais complexo do que é. Então eu paro e pergunto: O que é realmente essencial? O que merece uma aba? Sabe o que não precisa? Crates. É apenas uma tela para agrupar Records. Então eu junto elas. Não há necessidade de duas. A opção Add está na barra de abas porque é a ação principal do app. Mas esse é o melhor lugar? Quando não tenho certeza de quando ou como usar um componente, sempre recorro às Human Interface Guidelines. E confirmo: as abas servem para navegação, não para realizar ações. Então, vou mover Add para dentro de Records, onde é mais provável que alguém utilize. Agora, a barra de abas tem três seções bem distintas. Como quero torná-la mais previsível, posso melhorar o nome dessas abas. Quero que os rótulos e ícones ajudem a entender para que cada aba serve, para que os usuários não precisem entrar só para descobrir ou acabem ignorando porque não sabem aonde ela leva. Vou renomear Swaps e Saves para rótulos mais diretos. E alterar os ícones para reforçar o significado de cada aba. Quero que sejam consistentes, então, em vez de criar os meus, o que acho muito difícil, vou usar a SF Symbols, a biblioteca de ícones da Apple. Esses símbolos já são conhecidos em diferentes plataformas Apple, ajudando a tornar as abas reconhecíveis. Com uma arquitetura simplificada, ícones familiares e rótulos explícitos, o escopo e o propósito do app ficam claros e a barra de abas parece mais acessível. Por causa da arquitetura da informação, algumas coisas mudaram, deixando o conteúdo um pouco confuso. Então vamos deixar mais claro com uma barra de ferramentas. É uma ótima maneira de orientar os usuários pela interface. Veja como isso resolve os dois problemas do começo: onde estou e o que posso fazer. Isso acontece porque a barra de ferramentas inclui um título com o nome da tela, em vez de um menu ou a identidade visual como antes. Ela indica o conteúdo da tela e ajuda os usuários a se orientarem enquanto navegam e rolam. Também é um ótimo lugar para ações específicas da tela que são úteis para os usuários, em vez de usar a barra de abas. Como o espaço é limitado, sugiro incluir apenas o essencial usando o SF Symbols para que cada ação seja fácil de reconhecer. Agora sei claramente onde estou, o que posso fazer e a função do app. Isso prepara os usuários para uma experiência melhor desde o início. Tudo graças ao trabalho na estrutura e ao uso intencional de componentes de navegação. Parando para pensar, percebo que não acertei da primeira vez. Mas isso faz parte do processo. Cada reformulação aproxima o design de um resultado útil, previsível e fácil de usar.

Agora que a base para explorar está definida, vamos analisar o que está na tela. O conteúdo do seu app deve ser organizado para guiar os usuários para o que é mais importante e o que esperam encontrar primeiro. Até agora, me esforcei para acessar os lugares certos do app, mas e o conteúdo? Parece confuso porque há dois tipos de conteúdo misturados: Groups e Records. Então vou tentar algo simples: dividir em duas seções. É um bom começo. Há um título esclarecendo o conteúdo. Porém, a menos que eu role a tela, não verei todas as opções disponíveis. E se eu mostrar só alguns grupos e deixar os usuários descobrirem mais conforme exploram? Esse conceito é chamado de divulgação progressiva. Trata-se de revelar apenas o essencial no início: o suficiente para incentivar as pessoas a explorarem mais à medida que interagem. Em todos os lugares você encontrará uma interface que começa simples e gradualmente revela mais detalhes ou opções avançadas. O restante do conteúdo não está faltando, só está oculto, aguardando o usuário tocar no controle de exibição ao lado do título para ser exibido. E quando essa tela abrir, quero que o conteúdo esteja organizado da mesma maneira. Ele parece conectado à tela anterior, como se estivesse se expandindo. Como expliquei na navegação, cada tela deve dar uma orientação, então não vamos esquecer da barra de ferramentas. Ela tem ações relacionadas à tela e ao botão de voltar, então é fácil entender como as pessoas chegaram até aqui e aonde ir. Meu projeto inicial tinha elementos decorativos ou sem finalidade concreta, dificultando a descoberta de recursos importantes. Agora, quero fazer escolhas de design mais inteligentes, exibindo o conteúdo de maneira mais clara. Vamos destrinchar alguns exemplos. A divulgação progressiva foi um passo certeiro, mas o layout de grade não está bom. Ocupa muito espaço para apenas dois itens. E não fica bem com textos mais longos, deixando o conteúdo pouco claro. Quero melhorar nisso. Uma lista funciona muito melhor, é flexível, fácil de utilizar e familiar para mostrar informações estruturadas, agilizando a identificação. Também ocupa menos espaço vertical do que as imagens, então posso exibir mais itens na tela ao mesmo tempo. Eu não fiz o projeto do zero. Aprendi com componentes como a barra de abas e a barra de ferramentas que priorizar a função realmente vale a pena. Por isso, estou usando o modelo de lista do Apple Design Resources, que foi fácil de adaptar ao meu conteúdo. Agora parece que o design é muito mais intencional e permite mais funcionalidades, como um app real. Hora de ver como a última seção está funcionando. Rolando a tela, eu encontro todos os discos carregados no app do usuário. A meta era disponibilizar todo o conteúdo de cara para que os usuários explorassem livremente. Mas, à medida que o número de escolhas aumenta, também aumenta o esforço para processá-las. E me preocupa que, em vez de explorar, os usuários se sintam sobrecarregados e abandonem o app. Antes de encontrar uma forma de exibir uma grande quantidade de conteúdo, é preciso organizá-lo. Agrupar em temas, como na arquitetura da informação, me ajudou a eliminar coisas irrelevantes e me concentrar no que importa. Os apps usam alguns temas para se manterem organizados. Agrupar conteúdo por tempo é uma das maneiras mais comuns: Pense em como é útil encontrar os arquivos recentes ou continuar assistindo a uma série de onde parou. O agrupamento por sazonalidade e eventos atuais também deixa a experiência mais ágil e relevante. Agrupar por progresso ajuda os usuários a continuar de onde pararam, como escrever e-mails ou assistir a uma aula. É um ótimo modo de fazer um app se conectar melhor com a vida real, já que as pessoas dificilmente terminam tudo de uma vez. E agrupar por padrões correlaciona coisas que ficam melhores juntas, como produtos relacionados. Mostrar padrões transforma uma navegação rápida em uma exploração mais longa, mostrando conexões que os usuários não saberiam procurar. Essas ideias de agrupamento não se limitam a um tipo de app. Ainda que o conteúdo não seja muito visual ou não mude com frequência, isso reduz a sobrecarga de escolhas e faz o app ficar um passo à frente, como se entendesse o que o usuário precisa.

Eu sei que eu definitivamente vou usar isso. E para exibir um grande número de imagens, como eu preciso, considere usar uma coleção. É ideal para exibir grupos de itens, como fotos, vídeos ou produtos, que podem ser visualizados rolando a tela. Eu adoro como isso é dinâmico. Para isso, preciso de espaçamento uniforme entre os itens. Vou evitar colocar muito texto sobre eles. Criei coleções usando as ideias de agrupamento de antes. Aqui, por tempo, mostrando discos ideais para o verão, por progresso, com conjuntos e discografias completas, e por padrões, como estilo ou gênero. Quando o conteúdo está bem organizado e disposto usando componentes familiares da plataforma, ajuda os usuários a encontrarem o que é importante, criando um espaço intuitivo e convidativo para que voltem várias vezes. Por fim, gosto quando abro um app e ele parece bem feito. O design visual é uma parte importante disso. Isso comunica a personalidade do app e influencia como os usuários se sentem. Use bem a hierarquia, tipografia, imagens e cores, tudo isso corroborando a função. Para elevar o design visual do app, é preciso descobrir o que funciona e o que pode ser melhorado. Estou prestando atenção em como tipografia, cores e imagens estão se combinando. De cara, meus olhos vão direto à primeira coleção, porque é visualmente mais pesada e colorida. Isso me faz perder parte do conteúdo e fico perdida. O que falta aqui é hierarquia visual. Isso significa guiar o olhar pela tela para perceber os diferentes elementos de design em ordem de importância. Para melhorar isso, vou transformar essa sugestão em uma âncora visual, aumentando a fonte e o contraste do que é mais importante, chamando naturalmente a atenção.

E funciona. Visualmente, a missão foi cumprida. Mas será que vai se sustentar? E se o texto ficar mais longo, o idioma mudar ou o usuário utilizar uma fonte maior? Percebo que preciso projetar com mais flexibilidade, especialmente quando se trata de texto. É aí que os estilos de texto do sistema entram em ação. Eles facilitam a criação de hierarquia e legibilidade, mesmo em telas diferentes. Oferecem uma maneira consistente de personalizar tudo, de títulos a legendas, me permitindo comunicar os diferentes níveis de importância do conteúdo sem se preocupar com tamanhos de fonte ou criar estilos personalizados do zero. Vou manter o design completo, movendo a capa do álbum para o fundo. Isso dá ao texto um espaço fixo, enquanto os três estilos diferentes variam o tamanho e o contraste, guiando o olhar.

Os estilos também são compatíveis com Fonte Dinâmica, permitindo que os usuários escolham um tamanho confortável, deixando o app mais inclusivo e fácil de usar. Quando o texto sobrepõe uma imagem, a legibilidade pode ser um problema, especialmente com imagens poluídas ou de alto contraste. Nesses casos, a clareza precisa vir em primeiro lugar.

Uma correção simples é adicionar um plano de fundo discreto atrás do texto, como gradiente ou desfoque. Isso melhora a legibilidade e cria dimensão sem comprometer o design. A última coisa em que quero me concentrar é em como as imagens e as cores podem ajudar a transmitir a personalidade do app. Começando pela lista. Acho que simplifiquei demais e está se perdendo entre os componentes. Vou adicionar imagens para representar cada grupo e facilitar a compreensão da lista. Mas nem toda imagem parece funcionar. São todas muito diferentes em cor e estilo. Agora eu entendo por que preciso de um estilo visual coeso. Para conseguir isso, escolho uma paleta de cores e defino regras simples para usá-la. Espero que isso crie uma estética consistente e desperte o sentimento certo. Escolho quatro cores, algumas formas retrô e depois misturo e combino. Para os grupos que têm um título, usei uma fonte maior e mais espessa para diferenciar do texto da lista. Gosto muito desse visual. Acho que essas escolhas aprimoram a personalidade do app e facilitam a consistência conforme ele avança. Como estou trabalhando com cores, estou curiosa: onde mais no app posso usá-las? Talvez em fundos, textos, ícones... Mas esses itens já têm cor, só não as que eu escolhi na paleta. Eles não são pretos nem roxos e têm nomes como label ou secondarySystemBackground. Essas são cores semânticas e são nomeadas de acordo com a função, não com a aparência, pois são dinâmicas. Elas mudam automaticamente de acordo com os ajustes de contraste, ambientes de tela e modos escuro e claro. Posso usar uma cor de destaque aqui e ali, em botões e controles, ou para mostrar o que está selecionado. Mas é preciso cuidado para que isso não atrapalhe as mudanças dinâmicas, a legibilidade geral ou o conforto dos usuários. Então, para qualquer parte dinâmica, essa é basicamente a minha paleta de cores do sistema. Elas fazem parte do Apple Design Resources e oferecem um conjunto flexível de opções para criar hierarquia visual que se adapta à aparência preferida das pessoas, sem esforço extra. Essa é uma ótima maneira de praticar quando usar o sistema e onde dar um toque de personalidade. Pode ser tentador tratar cada um desses elementos de design como um projeto específico e, de certa forma, eles são, pois merecem cuidado e atenção. Porém, o impacto real vem quando eles trabalham juntos, contribuindo para o significado geral da interface. O design inicial não existe mais. Simplifiquei a estrutura e a navegação, apresentei o conteúdo com cuidado, ajudando as pessoas a agirem, tudo em um espaço que todos podem usar e aproveitar. Cada elemento desse design é baseado nas nossas decisões passadas, desde o primeiro toque até a última rolagem.

O design nunca está realmente terminado, e não há uma única resposta certa. Hoje, exploramos os fundamentos. Você pode aprimorar ainda mais seu app com tipografia, escrita de UX e animações. As possibilidades são infinitas. Se quiser continuar aprendendo, confira as sessões de anos anteriores e conheça o novo sistema de design. Há muito mais para explorar e aprender, então não deixe de conferir e continue criando. Quero ver aonde suas ideias vão te levar!