Home >Web Front-end >JS Tutorial >The future is dark according to Brad Frost, Father of Atomic Design
For many years, creating user interfaces has involved reinventing the wheel – whether developing a simple button or a complete form. In 2013, Brad Frost introduced the world to a concept that changed the way we think about systems design: Atomic Design. Although many believe that this is a "fashionable" term, the truth is that this methodology remains extremely relevant to the current and future challenges of building digital products.
In this article, I want to discuss how Frost's ideas, which he detailed in a recent talk, are still fundamental to the development of scalable and efficient design systems, and how technology is evolving, including the rise of Artificial Intelligence ( AI), makes the concept of Atomic Design more necessary than ever.
Is Atomic Design Dead? A Reflection on 10 Years of Impact and Evolution
"Is Atomic Design dead?" Okay, it's a good way to wake people up after lunch. But what I would like to do is spend some time reflecting on the last 10 years. It was 10 years ago, this year, that I created this thing called Atomic Design, which is still kind of around. So, I thought this was a good time to reflect a little. If you're up for it, let's go on a little trip together."
With this provocative introduction, Brad Frost invites us to reflect on the evolution of web design and the methodology he introduced to the world in 2013: Atomic Design. The journey Frost recently shared spans from the early days of the web to the development of complex design systems, and reminds us how the fundamentals of Atomic Design remain relevant to today's challenges. But does Atomic Design still maintain its relevance in today's era of ever-changing digital interfaces?
Frost takes us back to the beginning of the web, when the first website was launched in 1991 and CSS came shortly after, in 1994. "Once upon a time, websites, right? 1991, the first website, 1991, CSS was born. 1994 GeoCities, anyone from that time? Yes, some old people like me." He recalls that in those early days, design was a simple task, involving just HTML and perhaps an animated GIF. "You were just writing HTML, right? That was it. And pasting an animated GIF or something."
As the web grew, new approaches began to emerge. Photoshop began to be used to create visual layouts that were later cut and transformed into web pages. This process led to the creation of "killer" websites in the '90s, as Frost describes: "In the mid-'90s, we came up with the idea that we could take our brochure in Photoshop, cut it out, and throw it on the internet."
The development of technologies such as Ajax, which brought a more interactive web experience, and the emergence of mobile applications after the launch of the iPhone and the App Store in 2008, brought new challenges to design . As Frost explains, "Web 2.0 came along, and this thing called Ajax. All of a sudden, we started having more interactive experiences... we got things like 'web apps,' whatever that means."
With the multiplication of devices, operating systems and experiences, designers and developers began to face the challenge of maintaining consistency and coherence across platforms. "More Photoshop files, and they also have to follow brand guidelines, but that never happened." Here we see the emergence of style guides and design patterns, but they were still fragmented and difficult to manage.
It was in this context that Frost introduced Atomic Design, a systematic approach to creating modular and scalable interfaces. The concept of "atoms" as fundamental building blocks for user interfaces, combined into molecules, organisms, templates and pages, has brought a solution to the growing chaos in digital design. "I created Atomic Design with the goal of providing consistency and efficiency for design systems that were becoming increasingly complex," says Frost.
他認為原子設計不僅僅是組織 UI 元件的方法,更是一種旨在幫助設計師和開發人員更有效地協作的哲學。 「這種方法旨在創建可重複使用元件的清晰層次結構,促進產品開發的一致性並節省時間。」
原子設計的相關性並沒有隨著時間的推移而減弱。事實上,Frost 強調,人工智慧 (AI) 的興起和設計自動化程度的提高使得原子設計變得更加重要。他引述預測稱,到 2025 年,90% 的線上內容將由人工智慧生成,這增加了對強大的設計系統的需求,這些系統可以在內容呈指數級增長的情況下確保品質和一致性。
「90% 的一切都是垃圾,」弗羅斯特引用「鱘魚定律」說。他警告說,利用人工智慧生成內容的便利性可能會導致設計不良的介面激增,這凸顯了使用原子設計來確保介面以仔細和結構化的方式設計的重要性。
Brad Frost 在總結他的反思時呼籲設計和開發團隊之間進行更多協作和共享標準。他認為,為了應對未來的挑戰,我們需要創建一個促進全球協作的系統,其中模式和組件可以在不同的團隊和組織之間有效地重複使用。
「Brad 敦促開發人員和設計師社群繼續合作,利用網路的力量將人們聚集在一起,以有意義的方式解決問題。」
因此,原子設計並沒有消亡。相反,它是應對當前和未來數位設計挑戰的重要工具。在自動化和人工智慧時代,採用結構化和協作方法來確保我們創造高品質和一致的數位體驗比以往任何時候都更加重要。
對於那些還不熟悉的人來說,原子設計是一種創建介面的模組化方法,基於五個主要層級:
此方法旨在創建可重複使用元件的清晰層次結構,促進產品開發的一致性並節省時間。
在 Brad Frost 最近的演講中,他提到原子設計背後的想法不僅僅是創建可重複使用的組件,而是將這些組件與產品相關聯。這有助於確保最終產品的設計對於不同的環境(例如登入或登出的使用者、管理員或訪客,甚至區域或語言差異)更加一致和靈活。
Brad 也反思了數位介面的當前狀態,強調了由世界各地不同團隊重新創建的組件的碎片。他提到相同的基本功能(例如手風琴或選擇)如何在不同的組織中以不同的方式重新創建,從而導致效率低下和人才浪費。
這種重複工作是設計系統試圖透過統一標準來解決的最大效率低下問題之一。然而,正如 Frost 指出的那樣,我們仍然看到許多開發團隊為已經解決的問題創建自己的解決方案,而不是在全球標準上進行合作。
根據 Frost 的說法,原子設計 作為一種以分層和互連方式組織 UI 組件的解決方案而出現,促進了設計人員和開發人員之間的協作。他將自己的方法描述為一種「以分層和互連的方式思考使用者介面」的方式,並強調任何介面都可以分解為更小的組件,例如標籤、按鈕和輸入欄位,他將其與界面的“原子”進行比較。 「這些實際上就像我們的原始 HTML 標籤。它們本身並不是很有用,」Frost 指出。
這些原子結合成分子和有機體,例如可以包含徽標、導航和搜尋列的標題。然後,這些模組化組件被放置在模板內,這是真實頁面的“骨架”,允許設計和開發團隊在不同的上下文中驗證這些組件的性能。
弗羅斯特不迴避他的概念在過去十年中受到的批評
。許多人認為原子設計可能過於僵化,阻礙了設計團隊的創造力和創新。 Frost 回應了這些擔憂,指出原子設計的目標不是限制創造力,而是提供堅實的基礎,允許在明確定義的系統內自由創新。
在演講結束時,Frost 給我們留下了對數位設計未來的深刻反思。他鼓勵每個人不斷探索新的工作方式,同時記住協作、一致性和重複使用的重要性。 「永遠不要停止做你正在做的事情。你會找到思考設計的新方法,你會因此感覺更好。」
總之,原子設計是一個強大的工具,可以持續為數位設計挑戰提供有效的解決方案。透過促進標準的協作和共享,我們可以打造更具凝聚力的高品質數位體驗。 Frost 的遺產以及他在 Atomic Design 方面的工作無疑對於下一代設計師和開發人員至關重要。
Brad Frost 提醒我們的是,原子設計的本質超越了技術組件。這是一種協作方法。他提出,為了解決設計和技術挑戰,我們需要創建一個協同工作的系統,而不是一個孤立的系統。這包括不同組織的共同努力,為可在全球範圍內應用的共享標準做出貢獻。
在演講結束時,Brad 呼籲開發人員和設計師社群繼續合作,利用網路的力量將人們聚集在一起,以有意義的方式解決問題。他相信,透過專注於人類解決方案並合乎道德地使用技術,我們可以為每個人創造更好的數位體驗。
即使在創建十年後,原子設計對於那些想要創建高效且可擴展的設計系統的人來說仍然是一個重要的方法。在人工智慧可以主導介面開發的世界中,Frost 的方法提供了一種在介面設計中保持品質和一致性的方法。
現在,採用促進協作和重用明確定義的標準的方法比以往任何時候都更加重要。原子設計不僅是活生生的-它也是解決未來設計挑戰的基本指南。
原子設計並沒有消亡。相反,它仍然是應對數位設計中日益增長的複雜性和對品質、可近性和效率的要求的重要工具。 Brad Frost 提醒我們,雖然設計已成為一項全球性的重複性任務,但協作以及對可重複使用、價格實惠的組件的關注是創建真正改變世界的設計系統的關鍵。
The above is the detailed content of The future is dark according to Brad Frost, Father of Atomic Design. For more information, please follow other related articles on the PHP Chinese website!