O que é criação de esqueleto?

Se você já tentou criar um site ou aplicativo sem um esqueleto, sabe por que o processo de criação de esqueleto é tão importante. Sem esqueletos, como você e sua equipe podem visualizar o que estão tentando fazer? Como você organiza os fluxos de usuários ou determina qual conteúdo deve ir para cada tela?

"É frustrante quando as pessoas só comentam sobre o visual e, na verdade, o que queremos é um feedback mais geral, indicando o que é mais importante", diz Tom Lowry, diretor de embaixadores do Figma. Um excelente design de produto e site começa com um design inteligente de esqueleto. Continue lendo para dominar todas as etapas da criação de esqueleto com as dicas profissionais e ferramentas de esqueleto do Figma.

O que é um esqueleto?

Esqueletos são esquemas básicos que ajudam as equipes a se alinhar aos requisitos, mantendo as conversas de UX design enfocadas e construtivas. Considere o seu esqueleto como a estrutura básica do seu aplicativo, site ou outro produto final. O esqueleto mostra à equipe de design e aos envolvidos os esquemas básicos de páginas, componentes e funcionalidades essenciais, incluindo:

• Layouts de tela
• Barras de navegação
• Componentes de UX e UI design
• Elementos interativos

Nos estágios iniciais do design, esqueletos de baixa fidelidade utilizam texto lorem ipsum e caixas simples como espaços reservados para imagens e vídeos. Isso auxilia a equipe de design, redatores e outros membros da equipe a enfocar a funcionalidade básica para se alinhar na direção correta.

Começando com um design de esqueleto limpo e minimalista, os UI/UX designers também têm espaço para iterar. Eles podem pedir feedback inicial de testes de usuários sobre os elementos principais de UX/UI, sem distrair os usuários com detalhes do design visual. As equipes de design testam diferentes conceitos, fluxos de usuário e modelos enquanto trabalham para alcançar a experiência de usuário ideal.

3 tipos de designs de esqueletos

As possibilidades de UX design podem parecer infinitas, mas a maioria dos designs de esqueleto se enquadram em três níveis básicos de fidelidade. Você pode trabalhar com todos eles no caminho para o produto final.

1. Esqueletos de baixa fidelidade são esqueletos básicos com foco em layout, navegação e arquitetura da informação. Eles mostram como a interface será, ilustrando os fluxos de usuário com elementos-chave de UI design. Esboços em quadros brancos físicos podem funcionar nas fases iniciais de criação de esqueleto, embora nem sempre sejam fáceis de compartilhar, salvar ou retrabalhar. Com a ferramenta de criação de esqueleto online do Figma, você pode criar, compartilhar e iterar esqueletos de baixa fidelidade rapidamente.
2. Esqueletos de média fidelidade ajudam os designers a iterar e dar forma ao design final. As equipes de design podem adicionar anotações e conteúdo enquanto experimentam diferentes abordagens para fluxos de usuário e elementos de UI design, mapeando a funcionalidade e as interações principais. Isso permite que as equipes definam a estrutura final do esqueleto antes de adicionar componentes de design visual.
3. Esqueletos de alta fidelidade se assemelham a mockups iniciais de produtos, com elementos de design interativo e visual, mas sem a funcionalidade dos protótipos de baixa fidelidade. Nesse estágio do processo de design, você pode querer adicionar elementos de marca, como fontes, cores e logotipos. Dessa forma, é possível capturar a aparência e a experiência do produto final para testes de usabilidade.

Quando pular as etapas de esqueleto

Muitas equipes de design presumem que devem começar com um esqueleto de baixa fidelidade e evoluir a partir daí. Isso faz sentido quando você está explorando novos conceitos de produtos, para poder alinhar os componentes principais, iterar e depois adicionar detalhes de design visual. Mas, de acordo com Tom, há um argumento para passar diretamente para o design de esqueleto de alta fidelidade.

"Se você já tem um design system estabelecido e o design que está explorando é semelhante a outros já existentes, as conversas provavelmente não serão muito desviadas por detalhes de design visual", explica Tom "Nesses casos, explorar uma ideia de design com maior fidelidade pode ser rápido e eficaz da mesma forma".

7 práticas recomendadas para o design de esqueleto

Um esqueleto eficaz pode ser tão simples quanto um esboço em um guardanapo ou tão complexo quanto um mockup estático de um produto. Ao aplicar essas práticas recomendadas ao design de esqueleto, você pode alinhar as orientações com sua equipe mais rapidamente e avançar com a melhor abordagem.

1. Identifique seus objetivos de design.

Antes de começar a esboçar ou mexer em modelos de esqueleto, defina suas metas de design. Considere as necessidades dos usuários e quais ações você quer que eles façam para alcançá-las. Talvez você possa ajudar o usuário a resolver um problema comprando um produto útil ou inscrevendo-se em um boletim informativo educativo. Alinhe sua equipe de design em torno dessa meta, para que seus designs de esqueleto colaborem.

2. Escolha o tamanho certo para seu esqueleto.

Seus esqueletos devem corresponder ao tamanho da tela que seu público-alvo estará usando. Naturalmente, um site ou aplicativo terá uma aparência diferente em um laptop e em um dispositivo móvel. Com isso em mente, os tamanhos padrão de esqueleto para tipos de tela são os seguintes:

• Celular: 393 pixels de largura por 852 pixels de altura
• Tablet de 11”: 834 pixels de largura por 1194 pixels de altura
• Desktop: 1440 pixels de largura por 1024 pixels de altura

3. Mantenha seu design de esqueleto simples.

Inicie seu esqueleto utilizando cores em tons de cinza, limitando as fontes e substituindo gráficos por caixas. Certifique-se de que seu projeto atenda aos requisitos do usuário no nível mais básico. Se você se concentrar em detalhes como erros de ortografia ou esquemas de cores, poderá acabar ignorando uma falha na experiência do usuário. No entanto, para interfaces com muito conteúdo, Tom recomenda usar conteúdo real em vez de texto de espaço reservado "lorem ipsum". "Quando você começa a aplicar a arquitetura de informações em uma interface de usuário, listar os itens do menu 1-2-3-4 não é muito útil", explica ele. "Então e melhor usar conteúdo real".

4. Mantenha a consistência do design.

Os esqueletos não devem causar distração ou confusão. Componentes semelhantes devem ter a mesma aparência em todos os esqueletos, para que sejam fáceis de entender, iterar e programar. Mesmo que haja uma diferença sutil entre dois componentes relacionados, designs diferentes podem criar incerteza para os desenvolvedores em diferentes páginas e iterações.

5. Faça com que a navegação seja óbvia.

Seus fluxos de usuário devem ser fluidos e intuitivos. Ao aplicar a arquitetura de informações ao seu esqueleto, considere onde pode ser necessário apoiá-la com dicas de navegação e orientação. Se os usuários precisarem consultar um sitemap, sua navegação e arquitetura de informações precisam ser aprimoradas.

6. Não se apegue muito ao esqueleto.

Mesmo um esqueleto de alta fidelidade ainda é um rascunho que precisa de alterações para se tornar um produto final. Assim que sua equipe de design finalizar o esqueleto, é hora de colaborar com desenvolvedores e outros membros da equipe criativa para adicionar funcionalidades.

7. Aproveite as ferramentas de criação de esqueleto.

As equipes de design precisam de esqueletos que possam compartilhar, salvar e transformar em mockups online. O kit de esqueletos da Figma inclui ferramentas de design de arrastar e soltar. Dessa forma, tanto iniciantes quanto profissionais de design podem criar esqueletos personalizados de alta fidelidade.

Lista de verificação de design de esqueleto

O processo de criação de esqueletos ajuda você a planejar, construir e colaborar durante todos os ciclos de design e desenvolvimento. Mas como saber quando está tudo pronto? Assim que você puder marcar esses itens de ação na sua lista de tarefas de criação de esqueleto, seu esqueleto estará pronto para mockups e protótipos de maior fidelidade.

Depois que seu esqueleto estiver pronto, revise seu escopo inicial de trabalho. Agora que você já tem um esboço do produto final, talvez consiga refinar sua estimativa. Mesmo que seja apenas um rascunho com espaços reservados, seu esqueleto deve mostrar:

• Quais telas são essenciais para atender às necessidades dos usuários
• Fluxo de usuários através de funis de conversão
• Considerações de facilidade de uso, incluindo navegação e organização.
• Principais objetivos e fluxos de usuário para cada tela
• Elementos principais de design da UI, além de conteúdo e funcionalidades interativas em cada tela
• Como os componentes de design se encaixam para formar modelos de tela

Quando sua equipe de design inicia o processo de design, você pode não saber exatamente como o produto final deve funcionar ou que aparência deve ter. Os iniciantes podem querer pular a etapa de criação de esqueleto e usar modelos existentes para os designs, mas isso pode resultar em uma experiência de usuário sem inspiração e pouco útil. Os esqueletos concentram a atenção criativa nas necessidades do usuário e ajudam as equipes a se alinhar durante todo o processo de design e desenvolvimento. O esqueleto oferece uma visão antecipada do projeto, antes de você investir muito tempo polindo algo”, diz Tom. "Conseguir alinhar mais pessoas na organização mais cedo garante a economia de tempo depois".

É provável que seu produto final seja drasticamente diferente do esqueleto inicial, e isso é algo positivo! Com a criação de esqueleto, você tem a liberdade de experimentar, fazer alterações, tentar novos conceitos e assumir riscos. Com uma estrutura esquelética estabelecida, você pode facilmente ajustar fluxos de trabalho e elementos de design que seriam difíceis de modificar mais tarde no processo de design. Seu design final terá uma aparência e experiência melhores, graças ao processo de criação de esqueleto.

Os esqueletos priorizam a facilidade de uso, direcionando a atenção criativa para elementos essenciais à experiência do usuário, incluindo:

• Fluxos e cenários do usuário
• Correções de UX design para possíveis pontos problemáticos
• Funcionalidade de navegação e orientação
• Hierarquia de informações integrada em modelos de tela

Como saber quando você acertou no seu esqueleto

Avaliar o sucesso do esqueleto é complicado sem dados quantitativos, mas Tom diz que há várias métricas qualitativas que você pode aplicar. Ele recomenda realizar testes moderados com usuários para verificar se eles conseguem navegar pela experiência sem instruções e sem ficar "confusos ou sem saber o que fazer em seguida".

Outro sinal de sucesso do esqueleto é o alinhamento com os envolvidos. "Se você sair de uma sessão criativa sentindo que conseguiu o tipo de feedback que queria e que pode avançar para as próximas etapas com confiança, então eu diria que seu esqueleto foi realmente bem-sucedido", diz Tom.

Mas se os envolvidos estiverem concentrados em detalhes menores ou considerações estéticas em vez das necessidades principais do usuário, ele diz, "isso pode ser um sinal de que você deve reduzir a fidelidade do esqueleto. Reduza um pouco o polimento dos artefatos que você está compartilhando, até receber o feedback necessário".

Crie e personalize designs de esqueletos com o Figma

As equipes precisam de esqueletos para se conectar e fazer brainstorm de UX/UI designs em conjunto — e o kit de esqueletos do Figma ajuda você a começar. Você pode validar ideias e acelerar fluxos de trabalho de design na plataforma de design colaborativa do Figma, além de iniciar projetos de web design com o kit de criação de esqueleto gratuito do Figma.

Para obter mais insights e inspiração, Tom recomenda interagir com a Comunidade do Figma. “Nossa Comunidade compartilha uma infinidade de ideias de esqueletos e modelos de UI”, ele diz.