Então para cada resolução preciso ajustar todo o design da página? exemplo: Se eu trabalhar com as 5 resoluções, preciso criar 5 Homes diferentes com todo o design adaptado?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Então para cada resolução preciso ajustar todo o design da página? exemplo: Se eu trabalhar com as 5 resoluções, preciso criar 5 Homes diferentes com todo o design adaptado?
Sim, mas não sempre. Criar outras telas pode ser útil dependendo do objetivo do projeto e do público-alvo. Aqui estão as opções:
Normalmente, você cria telas para as resoluções mais representativas, como:
Em vez de criar várias telas, configure os elementos para serem responsivos. Auto Layout permite que botões, cards e menus se ajustem automaticamente ao redimensionamento. Constraints (Restrições): Defina como os elementos se alinham (por exemplo, centralizados, ancorados à direita/esquerda, etc.).
Não necessariamente. Aqui estão as melhores práticas:
Crie uma base sólida:
Comece com um layout "Desktop-first" ou "Mobile-first" dependendo do foco do seu projeto. Utilize princípios de design responsivo, como grid flexível, tipografia escalável e espaçamento fluido.
Nem todas as telas precisam ser redesenhadas. Exemplo: A Home pode ter variações, mas páginas internas, como formulários, podem ser semelhantes em diferentes resoluções. Use componentes reutilizáveis no Figma (botões, cards, headers) para economizar tempo.
Use a ferramenta de redimensionamento no Figma para simular como o layout reage em diferentes resoluções. Ajuste os problemas identificados em um só lugar, se estiver usando Auto Layout e Constraints.
Trabalhar com 5 resoluções diferentes não significa criar 5 versões completamente diferentes. As vezes menos é mais, como diz nosso mestre Villain.