Layout Patterns - PT
Tags: webdev, learning, architecture, pattern
Published: 2024-01-10 21:07:12

## 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](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

![Mostly Fluid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e90x2pmb5cxpaqp9csr3.png)

Exemplo: [https://layoutpatterns.netlify.app/](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.

![Collumn Drop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m0vy0vvcbnu6c6yn9xg.png)

Exemplo: [https://layoutpatterns.netlify.app/column-drop](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.

![Layout Shifter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/choysnuo2568rb2zvusd.png)

Exemplo: [https://layoutpatterns.netlify.app/shifter](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.

![Off Canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7x9yqc9q1bwc5fg62qi.png)

Exemplo: [https://layoutpatterns.netlify.app/off-canvas](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.

![Tiny Tweaks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjttg9u6dson9j5eync8.png)

Exemplo: [https://layoutpatterns.netlify.app/tiny-tweaks](https://layoutpatterns.netlify.app/tiny-tweaks)

GitHub repo: Design Patterns - [https://github.com/GuScarpim/Layout-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/