Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/faustinopsy/atomic-designer

O design atômico é um processo iterativo em que cada um dos componentes (átomos, moléculas, organismos, modelos e páginas) são reunidos até chegarmos ao resultado esperado, e como é um processo iterativo podemos receber feedback mais feedback rápido do nosso cliente desde o primeiro dia até o momento em que geramos nossos primeiros átomos.
https://github.com/faustinopsy/atomic-designer

atomic-design css design-system html javascript spa

Last synced: 11 days ago
JSON representation

Host: GitHub
URL: https://github.com/faustinopsy/atomic-designer
Owner: faustinopsy
Created: 2024-03-25T13:12:53.000Z (11 months ago)
Default Branch: master
Last Pushed: 2024-11-21T17:48:09.000Z (3 months ago)
Last Synced: 2024-12-02T05:07:21.498Z (2 months ago)
Topics: atomic-design, css, design-system, html, javascript, spa
Language: JavaScript
Homepage:
Size: 99.6 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: readme.md

Awesome Lists containing this project

README

## Designer Atomic
O Designer Atomic é uma metodologia de design que quebra a interface do usuário em partes menores e mais simples, chamadas de átomos, que são combinadas para formar componentes mais complexos, conhecidos como moléculas, organismos, templates e páginas. Esta abordagem promove a reutilização de código e ajuda a criar interfaces consistentes e escaláveis.

### Histórico
O Designer Atomic foi introduzido por Brad Frost em 2013, em seu livro "Atomic Design". Desde então, tem sido amplamente adotado na indústria de design e desenvolvimento web como uma maneira eficaz de organizar e estruturar interfaces de usuário.

## Conceitos Principais
### Átomos
Os átomos são os blocos de construção mais básicos de uma interface de usuário, como botões, inputs, textos, etc. Eles não podem ser divididos em partes menores sem perder sua funcionalidade.

### Moléculas
As moléculas são grupos de átomos que trabalham juntos para formar componentes mais simples e reutilizáveis, como formulários, barras de navegação, etc.

### Organismos
Os organismos são conjuntos de moléculas e/ou átomos que formam componentes mais complexos e completos, como cabeçalhos, rodapés, barras laterais, etc.

### Templates
Os templates são layouts completos que combinam diferentes organismos para criar estruturas de página consistentes.

### Páginas
As páginas são instâncias específicas de templates, preenchidas com conteúdo real e usadas para apresentar informações aos usuários finais.

## Vantagens do Designer Atomic
Reutilização de Código: A abordagem atômica promove a reutilização de átomos, moléculas e organismos em diferentes partes da aplicação, reduzindo a duplicação de código e facilitando a manutenção.

Consistência de Design: Ao criar componentes modulares e reutilizáveis, o Designer Atomic ajuda a garantir uma aparência consistente em toda a aplicação.

## Escalabilidade:
A estrutura hierárquica do Designer Atomic permite que as equipes dimensionem suas aplicações de forma mais eficiente, adicionando novos componentes conforme necessário sem comprometer a consistência ou a qualidade do design.

## Facilidade de Teste e Manutenção:
Com componentes bem definidos e isolados, é mais fácil testar e fazer atualizações em partes específicas da aplicação, sem afetar outras áreas.

## Compartilhamento e Colaboração:
As bibliotecas de componentes baseadas em Designer Atomic facilitam o compartilhamento e a colaboração entre equipes de design e desenvolvimento, promovendo a consistência e a eficiência em todo o projeto.

Para mais informações sobre o Designer Atomic, consulte o livro "Atomic Design" de Brad Frost e explore as práticas recomendadas e exemplos disponíveis online.