Olá, me chamo Gustavo Scarpim e hoje irei falar um pouco sobre Layout Patterns.
Post em Inglês: https://dev.to/guscarpim/layout-patterns-en-2p27
O que são Layout Patterns?
Layout Patterns são boas práticas de abordagens de design que são utilizadas para organizar elementos em uma interface de usuário.
Esses padrões são ótimas soluções no campo de web design, sendo websites, aplicativos e outros produtos digitais, eles são padrões fundamentais para proporcionar uma experiência consistente e intuitiva aos usuários.
Porque utilizar layout patterns?
Utilizar um layout patterns no seu projeto oferece uma série de benefícios, como:
- Consistência Visual
- Usabilidade
- Eficiência no Design
- Adaptabilidade
- Acessibilidade
- Aceitação do Usuário
- Eficiência no Desenvolvimento
Alguns exemplos de layout patterns
Mostly Fluid
O layout Mostly Fluid oferece uma grade dinâmica com amplas margens, adaptando-se de maneira fluida à largura da tela. Ele permite uma resposta contínua às mudanças de tamanho, garantindo um visual agradável em diferentes dispositivos e resoluções
Exemplo: https://layoutpatterns.netlify.app/
Collumn Drop
Esse layout envolve várias colunas que se empilham à medida que a largura da tela diminui, tornando-se uma única coluna em dispositivos com espaço reduzido.
Em desktop, ele se expande para ocupar toda a largura da coluna disponível.
Exemplo: https://layoutpatterns.netlify.app/column-drop
Layout Shifter
O Layout Shifter se ajusta de maneiras distintas em telas grandes, médias e pequenas. Ele é mais complexo de se utilizar pela necessidade de um design específico para cada tamanho de tela, garantindo uma experiência consistente e otimizada em diversas resoluções.
Exemplo: https://layoutpatterns.netlify.app/shifter
Off Canvas
O Layout Off-Canvas consiste em colunas que ocultam determinadas seções à medida que a largura do dispositivo é reduzida, proporcionando ao usuário a capacidade de alternar entre essas diversas seções de forma eficiente.
Exemplo: https://layoutpatterns.netlify.app/off-canvas
Tiny Tweaks
O Tiny Tweaks é um dos layouts mais simples, por realizar pequenos ajustes no conteúdo, restringindo-se a poucos elementos em uma única coluna. Sua simplicidade promove uma experiência minimalista, ideal para enfatizar informações cruciais de forma direta e eficaz.
Exemplo: https://layoutpatterns.netlify.app/tiny-tweaks
GitHub repo: Design Patterns - https://github.com/GuScarpim/Layout-Patterns
Agradeço por ter lido até aqui.
Até mais!
Site: https://gustavoscarpim.com/
GitHub: https://github.com/GuScarpim
Linkedin: https://www.linkedin.com/in/gustavoscarpim/
Top comments (0)