Atomic Design
2016-06-16 10:19
351 查看
What is Atomic Design ?
Atomic design is methodology for creating design systems.
There are five distinct levels in atomic desing:
AtomsMolecules
Organisms
Templates
Pages
Below is the detals of each stage:
Atoms
Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a label.
Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
Like atoms in nature they’re fairly abstract and often not terribly useful on their own. Hoever, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.
Molecules
Things start getting more interesting and tangible when we start combining stoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.
Organisms
Molecules give us some building blocks to work with, and we can now combine them together to form organisms.Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.
Building up from molecules to organisms encourages creating standalone, portable, resusable comonents.
Templates
At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.Pages
Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.The page stage is essential as it’s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the desing.
Why Atomic Design ?
In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way.
Atomic design provides a clear methodology for crafting design system. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context.
相关文章推荐
- 识设计大师(Logo Design Studio) v3.1.0.0 零售版 下载
- 基于Bootstrap实现Material Design风格表单插件 附源码下载
- 【MaterialEditText】 Material Design 的 EditText 3ff8
- ZeroMQ无锁队列分析
- 开源硬件的价值评估
- 基于Bootstrap实现Material Design风格表单插件 附源码下载
- 《Design patterns》读书笔记
- Eclipse中批量改变文件的默认打开方式
- CPU显卡内存与3DMAX渲染的关系
- Design Pattern 新解
- 39_03_Linux集群系列之十三——高可用集群之corosync基础概念及安装配置(笔记)
- 20个漂亮的单页传单设计欣赏
- 转 C ++书单
- 单例分享(循环引用及内存占用解决)
- 。「设计营商周」每年均吸引来自设计、商界、中小企及教育界等全球优秀的设计精英汇聚香港
- 「设计营商周论坛」,非常荣幸邀请到多位国际知名大师级讲者出席
- 五种常见的php设计模式
- 26个复古风格网站设计欣赏
- 命令模式--设计模式(一)
- 装饰模式-设计模式(三)