स्टाइल गाइड और स्टाइल टाइल के साथ काम करने के लिए डिज़ाइनर गाइड
बनाना ब्रांडेड पहचान कोई आसान काम नहीं है। इसके लिए कड़ी मेहनत की आवश्यकता होती है लेकिन यह सबसे पुरस्कृत रचनात्मक कार्यों में से एक है। अक्सर वेब प्रोजेक्ट मिक्स ब्रांडिंग इंटरफेस डिजाइन के साथ. यह भ्रामक हो सकता है क्योंकि दोनों क्षेत्रों में ऐसा करने के लिए बहुत कुछ है. स्टाइल गाइड तथा शैली की टाइलें वेब डिजाइनरों के लिए महान संसाधन हैं, और जब वे समान ध्वनि करते हैं, तो वे पूरा करते हैं दो अलग-अलग कार्य.
इस पोस्ट में, मैं दोनों में तल्लीन करना चाहता हूं, और इन रचनात्मक संपत्तियों से मिलने वाले लाभों को कवर कर सकता हूं। स्टाइल गाइड या स्टाइल टाइल बनाने के लिए सभी को (या पसंद) की आवश्यकता नहीं होगी। लेकिन हर डिजाइनर को कम से कम यह समझना चाहिए कि ये क्या हैं, और कैसे काम करते हैं.
स्टाइल गाइड्स फॉर द वेब
मैंने स्टाइल गाइड पर अलग-अलग राय पढ़ी है। कुछ का कहना है कि ये डिजिटल मॉकअप हैं जबकि अन्य कहते हैं कि कोड-आधारित शैली गाइड सबसे उपयोगी हैं.
किसी भी तरह से, शैली गाइड का लक्ष्य वेब के लिए किसी भी अन्य परियोजना के समान है। यह परिभाषित करता है लगातार पैटर्न, यूआई मॉड्यूल, और रचनात्मक प्राथमिकताएं डिजाइन प्रक्रिया में उपयोग किया जाता है। आप कुछ विशिष्ट तत्वों के लिए बहुत विशिष्ट और पिक्सेल-परिपूर्ण माप प्राप्त कर सकते हैं, या आप ढीले रह सकते हैं और दृश्य उदाहरणों के साथ दिशानिर्देश प्रदान कर सकते हैं.
स्टाइल गाइड करने का कोई एक सही तरीका नहीं है। एकमात्र गलत तरीका एक संसाधन बनाना है जो बस दूसरों के द्वारा समझा नहीं जा सकता.
लक्ष्य एक संपत्ति बनाना है जो कि समय के इम्तहान पर खरा उतरा. यह होना चाहिए संपादन के लिए खुला है यदि नए संसाधन बनाए जाते हैं। यह उन लोगों के लिए भी सुलभ होना चाहिए जो टीम में शामिल होकर आसानी से गाइड में प्रवेश कर सकें.
एक स्टाइल गाइड होना चाहिए परियोजना के लिए आवश्यकतानुसार विस्तृत. इसमें आमतौर पर शामिल होते हैं पुन: प्रयोज्य संपत्ति, जैसे टाइपोग्राफी, बटन, कलर स्वैच, टेक्सचर और कॉमन पेज एलिमेंट्स.
हमने हाल ही में कवर किया रहने वाले शैली गाइड उपकरण यह आपको खरोंच से जीवित शैली गाइड बनाने में मदद कर सकता है। ये जीवित मार्गदर्शिकाएं फ्रंटएंड डेवलपर्स के लिए अधिक हैं, लेकिन वे केवल डिजाइनरों के लिए उपयोगी हो सकते हैं। आप इस विषय पर इस स्मैशिंग मैगज़ीन की पोस्ट में अधिक पढ़ सकते हैं.
मेरा पूर्ण पसंदीदा संसाधन StyleGuides.io है। यह कवर करता है वेब के लिए स्टाइल गाइड की मूल बातें, समेत जीवंत उदाहरण तथा मामले का अध्ययन.
MailChimp का पैटर्न लाइब्रेरी सबसे अच्छे उदाहरणों में से एक है, जो आप StyleGuides.io पर पा सकते हैं। यह एक ऑनलाइन लाइव स्टाइल गाइड है MailChimp की ग्रिड, टाइपोग्राफी और पृष्ठ तत्वों को परिभाषित करता है.
जब आप एक वेब कंपनी के लिए एक स्टाइल गाइड डिजाइन करते हैं, तो यह सब कुछ ऑनलाइन करने के लिए आम है, लेकिन आप भी बना सकते हैं आंतरिक मार्गदर्शक, और उन्हें एक स्थानीय इंट्रानेट पर रखें या उन्हें एक उपयोगकर्ता लॉगिन पृष्ठ के पीछे निजी रूप से होस्ट करें। जिस तरह से आप स्टाइल गाइड का उपयोग करते हैं वह वास्तव में कोई मायने नहीं रखता है। वे सभी विशिष्ट रंग, पैटर्न और दृश्य को व्यक्त करने के एक ही उद्देश्य की सेवा करते हैं एक वेब परियोजना के विषय से मेल खाते हैं.
विषय पर अधिक जानने के लिए, स्टाइल गाइड पर इन अन्य पदों की जाँच करें:
- फ्रंट-एंड स्टाइल गाइड (24ways.org)
- एक वेबसाइट शैली गाइड बनाएं (Creativebloq.com)
- कैसे सही वेब डिजाइन शैली गाइड बनाने के लिए (Dtelepathy.com)
स्टाइल टाइल्स में शाखाओं में बंटी
स्टाइल टाइल्स पूरी तरह से एक अलग जानवर हैं। ये टाइलें हैं रचनात्मक डिजाइन प्रारंभिक चरण में इस्तेमाल किया जब एक विशिष्ट सौंदर्य नीचे कील करने की कोशिश कर रहा है.
स्टाइल टाइल्स वेबसाइट सामन्था वारेन द्वारा बनाई गई थी, और इसमें वह सब कुछ है जो आपको संभवतः जानना होगा। वहाँ है कोई विशिष्ट टेम्पलेट नहीं स्टाइल टाइल डिजाइन करने के लिए। लेकिन सामंथा के उदाहरण उपयोग करते हैं शीर्षकों और पैराग्राफ प्रकार, लिंक, पैटर्न, तथा संभव रंग विकल्प साथ में ए ब्रांडेड लोगो.
स्टाइल टाइल्स के साथ काम करते समय, आपका लक्ष्य अंततः है वर्तमान 2-3 अलग शैली टाइल ग्राहक या रचनात्मक निर्देशक के लिए। ये टाइलें हैं एक मूड बोर्ड की तुलना में अधिक विस्तृत, अभी तक पूर्ण मॉकअप की तुलना में बहुत कम विस्तृत.
टाइलें केवल इतनी विस्तृत होनी चाहिए कि वे इसका एहसास दें पहचान और वेबसाइट का मूड. सामंथा प्रोत्साहित करती है विशेषण का उपयोग करना प्रत्येक टाइल का विस्तार से वर्णन करने के लिए.
ग्राहक कर सकते हैं विभिन्न टाइलों के माध्यम से देखो, तथा उनके पसंदीदा टुकड़े का चयन करें. इस आपका समय बचाता है डिजाइन करते समय क्योंकि ग्राहक पहले से ही अपनी पसंद की संपत्ति देख चुका होता है, इसलिए उसमें भारी संशोधन की संभावना कम होती है.
यहाँ शैली टाइलें वेबसाइट से एक महान उद्धरण है:
एक आंतरिक डिजाइनर के टूलकिट के लिए स्टाइल टाइल्स की तुलना करना काफी उपयुक्त सादृश्य है। आप केवल एक पिक्सेल-सही मॉकअप में प्रयास नहीं करना चाहते हैं कि ग्राहक को एहसास हो कि वे अधिकांश रंगों और फोंट से नफरत करते हैं.
इसके बजाय, खोजने के लिए स्टाइल टाइल्स का उपयोग करें सामान्य विषय या दृश्य भाषा संपूर्ण साइट पर उपयोग किया जाना है। इसमें शामिल हो सकते हैं ब्रांडिंग / पहचान लेकिन यह भी शामिल हो सकता है यूआई सुविधाएँ, जैसे ड्रॉपडाउन मेनू या CTA बटन.
आपको इनका उपयोग करना चाहिए देने योग्य संपत्ति इस प्रक्रिया में जल्दी। एक बार जब आप एक पूर्ण मॉकअप पूरा कर लेते हैं, तो वास्तव में स्टाइल टाइल को संदर्भित करने की कोई आवश्यकता नहीं है। फिर भी शुरुआत में, स्टाइल टाइलें रचनात्मक प्रक्रिया के लिए महत्वपूर्ण हो सकती हैं डिजाइनर समय की बचत तथा ग्राहक को चुनने के लिए कई विकल्प देना.
यदि आप चाहते हैं स्टाइल टाइल्स में अधिक तराशा इन संबंधित पोस्ट की जाँच करें.
- स्टाइल टाइल्स और वे कैसे काम करते हैं
- स्टाइल टायल्स: फुल डिजाइन कंप्स का विकल्प
- स्टाइल टाइलें बनाना: एक डिजाइन दिशा के लिए एक आसान दृष्टिकोण
स्टाइल गाइड्स बनाम स्टाइल टाइल्स
स्टाइल गाइड और स्टाइल टाइल्स के बीच अंतर अस्पष्ट लेकिन निश्चित है। ए शैली गाइड और भी बहुत कुछ है विस्तृत और एक के रूप में इस्तेमाल किया जाना चाहिए नित्य संदर्भ गाइड रचनात्मक टीम के लिए। ए शैली की टाइल एक के रूप में इस्तेमाल किया जा सकता है मूड बोर्ड सेवा मेरे विचारों को स्पष्ट रूप से देखें अपने या ग्राहक के लिए। वे अक्सर करने के लिए उपयोग किया जाता है विचारों का पता लगाएं, और एक बार परियोजना समाप्त हो जाने के बाद वे एक उद्देश्य के लिए काम नहीं करते हैं.
स्टाइल टाइल अक्सर किनारों के आसपास बहुत अधिक खुरदरे होते हैं, और उनका उपयोग किया जाता है केवल प्रारंभिक रचनात्मक प्रक्रिया में. एक स्टाइल गाइड का उपयोग किया जाना है पूरे डिजाइन प्रक्रिया के दौरान तथा भविष्य के संदर्भ के लिए बाद में भी अन्य डिजाइनरों के लिए जो साइट पर काम कर सकते हैं.
दोनों के अपने लाभ और कमियां हैं। शैली की टाइलें हैं त्वरित और मजेदार, परंतु अल्पकालिक प्रकृति में। स्टाइल गाइड हैं संपूर्ण तथा दृश्य प्रलेखन की तरह व्यवहार करें, लेकिन वे भी बहुत काम की आवश्यकता है.
तो आपको किसका उपयोग करना चाहिए? यह अंततः परियोजना पर निर्भर करता है.
छोटे प्रोजेक्ट जैसे कि छोटी व्यावसायिक वेबसाइटें स्टाइल टाइल्स के साथ बेहतर काम करती हैं। एक छोटे से व्यवसाय स्थल के लिए पूरी शैली गाइड का निर्माण करने के लिए बहुत अधिक काम और बिल योग्य घंटों की आवश्यकता होगी। यह संभवतः अधिकांश ग्राहकों के लिए लागत के लायक नहीं है.
हालाँकि ए बड़ी परियोजना एनवाई टाइम्स को नया स्वरूप देने से स्टाइल टाइल्स और स्टाइल गाइड दोनों को फायदा होगा.
भाषा और मनोदशा का पता लगाना एक नई परियोजना के लिए हमेशा एक मूल्यवान प्रक्रिया होती है। यह वही है जो स्टाइल टाइल्स बनाता है लगभग हर परिदृश्य के लिए एकदम सही.
आप भी प्राप्त कर सकते हैं इन परिसंपत्तियों में से किसी को बनाए बिना. कुछ डिजाइनर चलते हैं वायरफ्रेम से सही सेवा मेरे विस्तृत मॉकअप. और कुछ ग्राहक स्टाइल गाइड भी नहीं चाहते हैं क्योंकि इसका उपयोग नहीं किया जाएगा.
प्रति-प्रोजेक्ट के आधार पर काम करें और तय करें कि प्रत्येक के लिए सबसे अच्छा क्या है.
लाइव उदाहरण
इसे ढँक कर रखें उदाहरण शैली गाइड और शैली टाइल दोनों। ड्रिबल को ब्राउज़ करते समय मुझे ये डिज़ाइन मिले और मुझे लगता है कि वे उस गुणवत्ता की मिसाल देते हैं जो आप अपने स्टाइल गाइड या स्टाइल टाइल्स में चाहते हैं.
स्टाइल गाइड
यह अविश्वसनीय Airbnb स्टाइल गाइड डेरेक ब्रैडली द्वारा बनाया गया था। यह बहुत आसान है, लेकिन यह स्पष्ट रूप से दिखाता है मुख्य पैटर्न, रंग और पृष्ठ तत्व डिजाइन में पाया जाना है.
यहाँ डिज़ाइनर नौशाद आलम द्वारा बनाया गया एक बहुत बड़ा डिजिटल स्टाइल गाइड है। यह उदाहरण है बहुत अधिक संगठित साथ में रंग, टाइपोग्राफी, फ़ॉर्म, इंटरफ़ेस तत्व और अन्य UI सुविधाओं के लिए अनुभाग.
अधिक विस्तृत स्टाइल गाइड वेब पर इन सभी डिज़ाइन तत्वों को डालेंगे, और कोड स्निपेट शामिल करें प्रत्येक के लिए.
डिजाइनर क्यूपी वोंग ने आफ्टरशिप के लिए यह गाइड बनाया। टाइपोग्राफी, बटन, रंग विकल्प और सामान्य पृष्ठ तत्व सावधानी से तैयार किए गए हैं, और वर्गों में एक साथ संगठित.
यह वेब पर भी पोर्ट किया जा सकता है, और ऑनलाइन संदर्भ प्रलेखन के रूप में बहुत बड़ा बनाया गया है.
यूआई डिजाइनर ग्रेग डेल्बैकज ने एक वेब परियोजना के लिए अपने स्वयं के यूआई स्टाइल गाइड को साझा किया। यह बात गंभीरता से बहुत बड़ी है। फुलस्क्रीन प्रीव्यू 21,000 पिक्सल ऊंचा है!
मैंने कभी देखा है सबसे अच्छा डिजिटल शैली गाइडों में से एक। यह भी संदर्भ के लिए टीम के सदस्यों के लिए एक ऑनलाइन प्रलेखन पृष्ठ पर रखा जा सकता है.
शैली टाइलें
यूआई / यूएक्स डिजाइनर अब्दुस सलाम ने एक जैविक खाद्य भंडार वेबसाइट के लिए इस शैली की टाइल बनाई। यह बहुत बुनियादी है फ्लैट डिजाइन तत्वों, कुछ मामूली यूआई सुविधाएँ, और ए रंगों के प्रकार.
डिजाइनर एड्रियन कैन्टेलमी वास्तव में अपनी विभाजन शैली की टाइल के साथ विस्तृत हुई। इसमें रंग और टाइपोग्राफी है, लेकिन यह भी शामिल है वेक्टर चित्र.
ये वैक्टर मदद करते हैं ब्रांड, मनोदशा और समग्र रंग योजना को परिभाषित करें वेबसाइट का.
विश्व कप सलाहकारों ने बहुत ही बुनियादी सुविधाओं के साथ अपनी शैली की टाइल को फिर से डिजाइन किया। कुछ आइकन, कुछ रंग विकल्प, एक जोड़ी बटन डिजाइन के साथ. सादगी खेल का नाम है.
यदि आप इस बात को महसूस कर सकते हैं कि साइट कैसी दिख सकती है एक नजर में तो आप इसे सही कर रहे हैं.
यात्रा परियोजना के लिए उपयोग की गई अस्वीकृत शैली की टाइल का एक मज़ेदार उदाहरण है। डिजाइनर ब्रेनन ग्लीसन केवल टाइल का एक छोटा सा नमूना प्रदान करता है, लेकिन आप अभी भी कर सकते हैं वेबसाइट के माहौल के लिए एक महसूस हो.
अंतिम शब्द
यदि आप वेब पर खोजते हैं तो आपको बहुत अधिक उदाहरण, युक्तियां और संसाधन मिलेंगे इमारत शैली गाइड और शैली टाइल. लेकिन मुझे उम्मीद है कि यह लेख दोनों पर एक प्राइमर हो सकता है और आपको इन डिज़ाइन परिसंपत्तियों को समझने और बनाने में धाराप्रवाह हो सकता है.
