वेब डिज़ाइनर्स के लिए एटॉमिक डिज़ाइन का परिचय

परमाणु केवल HTML तत्व नहीं हैं बल्कि उनकी अपनी शैली भी: फोंट, रंग, आयाम, और अन्य सीएसएस शैली नियम। ब्रैड के अपने शब्दों के साथ, परमाणु “एक नज़र में अपनी सभी मूल शैलियों को प्रदर्शित करें”.

परमाणु - उदाहरण

यहाँ हमारी वेबसाइट से एक उदाहरण है। अनुशंसित पदों की सुर्खियों में हो सकता है एक प्रकार का परमाणु; वे उपयोग करते हैं वही HTML और CSS कोड और हो सकता है आसानी से प्रतिष्ठित बाकी सामग्री से.

ध्यान दें कि Hongkiat.com को परमाणु डिजाइन को ध्यान में रखकर नहीं बनाया गया था, यहाँ इसका केवल उपयोग किया जाता है प्रदर्शन प्रयोजनों के लिए.

परमाणु डिजाइन का सार है इन पांच चरणों का उपयोग करके नीचे से UI डिज़ाइन करें, बाद में परमाणु डिजाइन घटकों की पहचान करने के लिए नहीं.

2. अणु

ए अणु का गठन किया गया है परमाणुओं के समूह द्वारा. अणु परमाणु संरचना पदानुक्रम में अगले चरण का गठन करते हैं। सरल UI तत्वों के बारे में सोचें जो पहले से हैं एक से अधिक HTML तत्वों से बना है, इस तरह के एक खोज फार्म या साइडबार में एक अनुशंसित पोस्ट के रूप में.

एक अणु में संगठित होना एक उद्देश्य देता है प्रत्येक परमाणु को। एक बड़े समूह (अणु) में, परमाणुओं को होना चाहिए समर्थन और पूरक एक दूसरे को, वे चाहिए साथ मिलकर काम करें एक प्रयोग करने योग्य डिजाइन बनाने के लिए.

उदाहरण के लिए, शीर्षक (एक परमाणु) होना चाहिए और जोर दो अनुशंसित पोस्ट ब्लॉक में लेखक के नाम (एक और परमाणु) की तुलना में (बड़े फोंट, अधिक वजन, आदि)। इस तरह, दो परमाणु हैं “मतलब” सेवा मेरे एक टीम की तरह काम करो सबसे अच्छा परिणाम प्राप्त करने के लिए.

अणु - उदाहरण

हमारे पिछले उदाहरण का उपयोग करते हुए, आप देख सकते हैं कि हांगकीट के साइडबार में, अनुशंसित पोस्ट के एक ब्लॉक को एक अणु के रूप में देखा जा सकता है। एक अनुशंसित पोस्ट अणु है तीन परमाणुओं से बना है: एक थंबनेल, एक शीर्षक और एक लेखक का नाम परमाणु.

3. जीव

जीवों की रचना होती है अणुओं का समूह, परमाणु (और कभी - कभी अन्य जीव). वेब डिजाइन में, जीव हैं अधिक जटिल UI घटक यह प्रतिनिधित्व करता है निश्चित वर्गों पृष्ठ, जैसे शीर्ष लेख, पाद लेख या साइडबार.

जीवों को या तो बनाया जा सकता है विभिन्न प्रकार के अणु, उदाहरण के लिए एक साइडबार में एक खोज पट्टी और विभिन्न प्रकार के विजेट शामिल हो सकते हैं, या एक ही अणु कई बार दोहराया, उदाहरण के लिए एक दूसरे के तहत संबंधित पोस्ट ब्लॉक का एक मुट्ठी भर। और, यह इन दोनों का संयोजन हो सकता है.

जीव - उदाहरण

हॉन्गकैट की वेबसाइट पर, साइडबार एक जीव हो सकता है। यह एक से बना है खोज पट्टी (एक प्रकार का अणु, केवल एक बार प्रदर्शित होता है) और कई अनुशंसित पोस्ट (एक अन्य प्रकार का अणु, कई बार प्रदर्शित).

हालांकि, साइडबार जीव को भी रचना के रूप में देखा जा सकता है अणु (सर्च बार) और एक और जीव (कई अनुशंसित पदों के साथ अनुशंसित पोस्ट विजेट)। परमाणु डिजाइन एक है लचीला मॉडल, नियम बहुत सख्त नहीं हैं, इसलिए इस मामले में हम एक ही बिल्डिंग ब्लॉक को अणु और जीव दोनों के रूप में परिभाषित कर सकते हैं.

4. टेम्प्लेट

परमाणु डिजाइन पदानुक्रम में अगले चरण हैं टेम्पलेट्स. जैसा कि आप देख सकते हैं, यह तब है जब परमाणु डिजाइन रसायन शास्त्र सादृश्य का उपयोग करना बंद कर देता है. ब्रैड इस बिंदु पर शब्दावली से हटते हैं क्योंकि उन्हें लगता है कि यह है कम समझने योग्य ग्राहकों और अन्य हितधारकों के लिए, और यह अनिवार्य रूप से दो अंतिम चरण (टेम्पलेट और पृष्ठ) हैं जिन्हें डिजाइनरों को बेचने की आवश्यकता है.

टेम्पलेट्स जीवों से बने होते हैं। वो हैं पृष्ठ-स्तरीय वस्तुएं परंतु अंतिम सामग्री के बिना. टेम्पलेट्स का उद्देश्य है संरचना का प्रतिनिधित्व करते हैं अंतर्निहित सामग्री के.

टेम्पलेट्स प्रदर्शित करते हैं कि विभिन्न परमाणु, अणु, जीव कैसे “एक लेआउट के संदर्भ में एक साथ कार्य करें”. वे मूल रूप से प्रतिनिधित्व करते हैं एक पृष्ठ का कंकाल.

उदाहरण - उदाहरण

एक उदाहरण के लिए, एक के बारे में सोचो होम पेज टेम्प्लेट प्लेसहोल्डर छवियों और लोरेम इप्सम पाठ ब्लॉकों के साथ.

नीचे, आप परमाणु डिजाइन पुस्तक से एक उदाहरण देख सकते हैं। यह TimeInc पत्रिका का होम पेज टेम्प्लेट है। परमाणु, अणु और जीव सभी अपने स्थान पर हैं लेकिन केवल योजनाबद्ध सामग्री के साथ.

5. पेज

पेज परमाणु डिजाइन पदानुक्रम के अंतिम चरण का प्रतिनिधित्व करते हैं। पेज हैं “टेम्पलेट्स के विशिष्ट उदाहरण”. पृष्ठ चरण में, टेम्पलेट मिलते हैं असली सामग्री के साथ आबादी (कॉपी, माइक्रोकॉपी, चित्र, वीडियो, आदि), जैसा कि वे वास्तविक UI में दिखाई देंगे.

पेज डिजाइनरों को यह देखने की अनुमति देते हैं कि कैसे अंतिम उपयोगकर्ता अनुभव जैसे दिखेंगे, को डिजाइन का परीक्षण करें वास्तविक उपयोगकर्ताओं के साथ, और मापें कि यह कितना अच्छा प्रदर्शन करता है प्रयोज्य, रूपांतरण, अभिगम्यता और अन्य मैट्रिक्स के संदर्भ में.

पृष्ठ और टेम्पलेट विविधताएँ

पेज स्टेज का दूसरा लक्ष्य बनाना है टेम्पलेट विविधताओं मुमकिन। हम अंतर्निहित होने पर टेम्पलेट विविधताओं के बारे में बोलते हैं टेम्पलेट एक ही है लेकिन आबादी है सामग्री (थोड़ी) अलग है. उदाहरण के लिए, यदि आप अलग-अलग उपयोगकर्ता समूहों को अलग-अलग सामग्री दिखाना चाहते हैं (उदाहरण के लिए आगंतुकों बनाम उपयोगकर्ताओं में लॉग इन), या जब कोई शीर्षक दूसरों की तुलना में अधिक लंबा हो.

अगर हम बनाना चाहते हैं तो टेम्प्लेट विविधताओं का उपयोग करना महत्वपूर्ण है सुसंगत और लचीला उपयोगकर्ता इंटरफेस। छोटे घटक (परमाणु, अणु, जीव) विभिन्न परिदृश्यों में अच्छी तरह से कार्य करें.

उदाहरण के लिए, एक बटन के साथ क्लिक करने योग्य दिखना चाहिए आसपास के जो भी तत्व हैं. यदि यह एक निश्चित भिन्नता में कार्रवाई योग्य नहीं दिखता है, तो आपको बटन परमाणु को तब तक फिर से डिज़ाइन करना होगा सभी उपयोग के मामले फिट बैठता है.

पेज - उदाहरण

नीचे, आप पिछले TimeInc होम पेज टेम्पलेट के पेज स्टेज को देख सकते हैं। अलग लग रहा है, हुह? यह तो सिर्फ एक टेम्पलेट भिन्नता, हालांकि। एक प्रभावी यूआई होने के लिए, डिजाइन टीम को कठिन सोचना पड़ता है क्या बदल सकता है असली साइट में। फिर, उन्हें उस टेम्प्लेट भिन्नता (पृष्ठ) के लिए डिज़ाइन का परीक्षण करने की आवश्यकता है.