प्रोसेस मशीनों से मौत!

एक कठोर स्क्रिप्ट के बजाय कुछ सरल सिद्धांतों से चिपककर अपनी आदर्श डिजाइन प्रक्रिया का पता लगाएं।

आप एक ऐप या वेबसाइट को डिज़ाइन करने के बारे में सही और गलत तरीके से विभिन्न सलाह देते हैं।

"आपको स्केच का उपयोग करना चाहिए।"
"डिज़ाइन सिस्टम या GTFO।"
"रियल डिजाइनर कोड में 100% डिजाइन करते हैं।"
"वायरफ्रेम समय की बर्बादी है।"
"यदि आप प्रोटोटाइप नहीं बना रहे हैं, तो आप इसे सही नहीं कर रहे हैं।"
"आपको कागज पर शुरू करने की आवश्यकता है।"

आपको लगता है कि डिजाइन करने के सही तरीके के बारे में कोई समझौता नहीं है, लेकिन एक बिंदु है जो काफी हद तक विवादों से मुक्त है - कि आपकी प्रक्रिया रैखिक होनी चाहिए।

क्लासिक रैखिक दृष्टिकोण कुछ इस तरह है:
अनुसंधान → स्केच → वायरफ्रेम → स्टैटिक कम्प्स → प्रोटोटाइप → कोड

यह उन रुब गोल्डबर्ग-एस्क निर्माण मशीनों की तरह है जो वे डोरिटोस और डिंग-डोंग बनाने के लिए उपयोग करते हैं। प्रक्रिया मशीन में एक विचार छोड़ें, और मसला हुआ और आकार में ढलने के बाद, क्योंकि यह एक समाप्त उत्पाद के माध्यम से हवाओं को दूसरी तरफ बाहर निकालता है! उम्मीद के मुताबिक! कुशल!

एक प्रकार का।

प्रक्रिया मशीनें काम करती हैं, लेकिन केवल जब वे काम करते हैं। वे अनुकूलन नहीं करते हैं, और यह उन्हें नाजुक बनाता है। आपकी प्रक्रिया मशीन को ठिकाने लगाने के लिए एक सबटोट लेता है।

हांक, ए.के. "सबोट"

मैं हाल ही में अपने बच्चे के साथ डोरि को ढूंढता रहा हूं, और "बनाना" फुटेज का कुछ हिस्सा मुझे बाहर कूदता रहता है।

फिल्म में, हांक नाम का यह ऑक्टोपस है:

डिज्नी / पिक्सर

सेप्टोपस, तकनीकी रूप से। उनके चरित्र मॉडल के साथ काम करने के लिए बहुत अच्छा था, वे उसे योग्य बनाने के लिए एक तंबू से हट गए। फिर भी, 4,000 अलग-अलग नियंत्रणों के साथ वह काम करने के लिए अविश्वसनीय रूप से चुनौतीपूर्ण था।

इस बिंदु पर, वे पिछले स्केच और रेंडरिंग और एनिमेटिक्स के बारे में अच्छी तरह से अतीत में हैं - उन कम निष्ठा चरणों जो आपको विचारों का एक गुच्छा जल्दी और सस्ते में मदद करते हैं। उन्हें पहले से ही रियल भी मिल गया। चरित्र रिग का निर्माण किया गया, तकनीकी विवरणों ने काम किया, मूलभूत सवालों के जवाब दिए।

वे अंतिम एनीमेशन चरण में हैं - 3D वातावरण में 3D मॉडल। वे उत्पादन अनुसूची और बजट की कीमत पर बेच सकते थे। इसके बजाय, उन्होंने वास्तव में कुछ दिलचस्प किया - वे स्केचिंग में वापस चले गए।

डिज्नी / पिक्सर

कागज़ पर हांक के जालों के जटिल संचलन को स्केच करके, वे उस समय के कुछ अंशों में सही, तरल एनीमेशन को देख सकते हैं। एक बार जब वे अनुक्रम से खुश थे, तो वे मिलान करने के लिए 3 डी में चेतन थे। उन्हें कम समय में एक बेहतर उत्पाद मिला क्योंकि उन्होंने प्रक्रिया के नुस्खे के बजाय प्रक्रिया के सिद्धांतों को महत्व दिया।

एक निर्धारित प्रक्रिया के लिए इलाज

फाइंडिंग डोरी टीम ने निर्णय लेने की गति से बेहतर उत्पाद तैयार किया जो कि रॉट प्रक्रिया से चिपके रहने के बजाय गति और गुणवत्ता को प्राथमिकता देता है।

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

उन सिद्धांतों को परिभाषित करना जो आपकी प्रक्रिया को चलाते हैं, बस शुरुआत है। यहां बताया गया है कि आप उन्हें कैसे अभ्यास में ला सकते हैं।

बड़े सवालों से शुरुआत करें

यदि आप गति को महत्व देते हैं, तो एक परियोजना शुरू करें, जिसमें सबसे बड़े, सबसे बुनियादी सवाल हों। रियल होने में, इसे "उपरिकेंद्र डिजाइन" कहा जाता है:

पृष्ठ के मुख्य भाग से प्रारंभ करें और जावक का निर्माण करें
एपिकेंटर डिज़ाइन पृष्ठ के वास्तविक सार पर केंद्रित है - उपरिकेंद्र - और फिर जावक बनाता है। इसका मतलब यह है कि, शुरुआत में, आप चरम सीमाओं को अनदेखा करते हैं: नेविगेशन / टैब, पाद, रंग, साइडबार, लोगो आदि। इसके बजाय, आप उपकेंद्र पर शुरू करते हैं और पहले सामग्री का सबसे महत्वपूर्ण टुकड़ा डिज़ाइन करते हैं।
जो भी पृष्ठ बिना बिलकुल नहीं रह सकता है वह एपिकेन-टेर है। उदाहरण के लिए, यदि आप किसी ऐसे पृष्ठ को डिज़ाइन कर रहे हैं जो ब्लॉग पोस्ट प्रदर्शित करता है, तो ब्लॉग पोस्ट स्वयं एक उपरिकेंद्र है। साइडबार में श्रेणियां नहीं, शीर्ष पर शीर्ष लेख नहीं, नीचे टिप्पणी प्रपत्र नहीं, लेकिन वास्तविक ब्लॉग पोस्ट यूनिट। ब्लॉग पोस्ट इकाई के बिना, पृष्ठ ब्लॉग पोस्ट नहीं है।
केवल उस इकाई के पूरा होने पर आप पृष्ठ के दूसरे सबसे महत्वपूर्ण तत्व के बारे में सोचना शुरू करेंगे। फिर दूसरे सबसे महत्वपूर्ण तत्व के बाद, आप तीसरे पर चलते हैं, और इसी तरह। यह एक उपरिकेंद्र डिजाइन है।
एपिकेंटर डिज़ाइन ट्रेडिशनल "फ्रेम का निर्माण करें तो सामग्री को मॉडल में छोड़ दें" से बच जाता है। उस प्रक्रिया में, पृष्ठ आकार बनाया जाता है, फिर नौसेना को शामिल किया जाता है, फिर मार्केटिंग "सामान"
 डाला जाता है, और फिर, अंत में, कोर कार्यक्षमता, पेज का वास्तविक उद्देश्य, जो कुछ भी स्थान रहता है, उसमें डाला जाता है। यह एक पश्चगामी प्रक्रिया है जो सर्वोच्च प्राथमिकता होनी चाहिए और अंत के लिए इसे बचाती है।

यह क्यों महत्वपूर्ण है इसका एक उदाहरण है। मैं थोड़ा साइड प्रोजेक्ट आईओएस ऐप पर काम कर रहा था जिसमें एक अनोखा, संभवत: अस्वाभाविक ऑडियो इंटरफ़ेस का उपयोग किया गया था। यदि मैंने मूल्य गति नहीं की है, तो मैं असंख्य घंटे खर्च कर सकता था जो असंख्य विवरणों को डिजाइन करता था जो इस एक अजीब विचार की नींव पर आराम करते थे। डिजाइन क्लासिक लीनियर प्रक्रिया में कोड से पहले आता है, आखिरकार।

इसके बजाय, मैंने यह पता लगाने के लिए कोड में शुरू किया कि यह विचार व्यवहार्य था या नहीं। यह नहीं था! इसलिए मैंने अपनी योजनाओं को समायोजित किया, और अपने आप को बहुत अधिक समय और ऊर्जा की बचत की।

बस पूछो, WMGMTCATMQITLAOT?

एक बार जब आप उन प्रश्नों को जान लेते हैं, जिनके उत्तर पहले चाहिए, तो स्वयं से पूछें:
"कौन सा माध्यम मुझे कम से कम समय में मेरे सवालों का सबसे स्पष्ट जवाब देता है?"

मेरे साइड प्रोजेक्ट के मामले में, उत्तर कोड था। Basecamp.com पर एक पृष्ठ के लिए, उत्तर अक्सर पाठ या एक स्केच है। आपके लिए, यह पूरी तरह से कुछ और हो सकता है।

यह जानते हुए कि कब गियर बदलना है

यह आपको शुरू करने के लिए एक जगह देता है, लेकिन आपको यह कैसे पता चलता है कि कब एक अलग माध्यम पर स्विच करना है? जब आपने प्रतिरोध मारा।

कार चलाने के बारे में सोचें। आप राजमार्ग पर मंडरा रहे हैं - इंजन एक बिल्ली के बच्चे की तरह दूर जा रहा है। लेकिन फिर आप एक पहाड़ी पर गाड़ी चलाना शुरू करते हैं। आप जिस गियर में हैं वह मंडराते हुए बहुत अच्छा था, लेकिन पहाड़ी चढ़ाई के लिए नहीं। अपनी गति बनाए रखने के लिए, आप एक नए गियर में शिफ्ट होते हैं।

इधर भी ऐसा ही है। लेकिन कारों के विपरीत, कोई ठोस ठोस संकेतक नहीं है जो आपने अपनी पसंद के माध्यम में बहुत अधिक प्रतिरोध किया है। सौभाग्य से, अधिकांश डिजाइनरों और कलाकारों के पास एक ठोस संभाल होता है जब आपको एक ऐसे माध्यम पर स्विच करने की आवश्यकता होती है जो अधिक निष्ठा प्रदान करता है। यह वह हिस्सा है जो क्लासिक कम निष्ठा → उच्च निष्ठा रैखिक प्रक्रिया के साथ सभी के बाद लाइनों। आपको पता है कि आप स्केचिंग से आगे बढ़ने के लिए तैयार हैं जब स्केचिंग आपको उपयोगी जानकारी देना बंद कर देती है।

एक बार जब आप इस बिंदु पर पहुँच जाते हैं, तो प्रश्नों के अगले सबसे महत्वपूर्ण सेट का पता लगाएँ और अपने आप से फिर से पूछें: "कौन सा माध्यम मुझे कम से कम समय में मेरे सवालों का सबसे स्पष्ट जवाब देता है?"

दूसरा मामला - एक कम निष्ठा के लिए वापस स्थानांतरण - कठिन है। दोनों क्योंकि लोग इस पर कम प्रैक्टिस करते हैं, और इसलिए भी कि यह मुश्किल है। कोड में काम करना। आप 100% निष्ठा से काम कर रहे हैं, इसलिए सवालों के जवाब देने के लिए माध्यम की क्षमता की कोई सीमा नहीं है। लेकिन तेजी से सवालों के जवाब देने की इसकी क्षमता की एक सीमा है।

जब आपको लगता है कि आप खुद को आगे नहीं बढ़ा रहे हैं, क्योंकि यह बहुत काम की तरह लगता है, तो यह एक बहुत अच्छा संकेत है जिसे आपको वापस करने की आवश्यकता है। जब चीजें महसूस होती हैं कि वे सिर्फ वैसे ही क्लिक नहीं कर रहे हैं जैसा उन्हें करना चाहिए, यह आश्वस्त करने का समय है। ध्यान रखें, और आप इसके लिए एक भावना विकसित करना शुरू करेंगे।

अपने लाभ के लिए एक माध्यम का उपयोग करना

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

जितना अधिक आप समझते हैं कि एक माध्यम आपके काम को कैसे प्रभावित करता है - जिस तरह के उपकरण इसे छोड़ते हैं - आप इसे अपने लाभ के लिए उपयोग कर सकते हैं। अपने डिजाइन को अभिव्यंजक बनाना चाहते हैं? शायद स्केच, इलस्ट्रेटर, या यहां तक ​​कि * हांफना * फोटोशॉप जैसे दृश्य उपकरण के साथ काम करने के लिए बेहतर है। एक न्यूनतम, हल्के डिजाइन चाहते हैं? कोड में डिजाइन करने के लिए छड़ी।

एक व्यावहारिक उदाहरण

अब जब मैं निर्धारित प्रक्रिया के खतरों के बारे में सोचा था, तो मैं आपके साथ ... मेरी प्रक्रिया को साझा करना चाहता हूं। चरण-दर-चरण का पालन करने के लिए नहीं! बस आपको वास्तविक जीवन का उदाहरण देना है कि आप अपनी प्रक्रिया को निर्देशित करने के लिए सिद्धांतों का उपयोग कैसे कर सकते हैं।

हम बेसकैंप में ग्राहकों के साथ काम करने के लिए एक नया तरीका शुरू कर रहे हैं, और मेरा काम इसे बेचने के लिए Basecamp.com पर एक नया पेज बनाना था। यहाँ बताया गया है कि यह कैसे खेला जाता है:

बड़े सवाल तय करना, एक माध्यम चुनना

यह कोई नई साइट या पूर्ण रूप से नया लेआउट नहीं है। सबसे पहले, मुझे इस पृष्ठ के उद्देश्य का पता लगाने की आवश्यकता है कि यह क्या कहना चाह रहा है, और समग्र संरचना।

"कौन सा माध्यम मुझे कम से कम समय में मेरे सवालों का सबसे स्पष्ट जवाब देता है?"

Comps और स्केचिंग बाहर हैं। यह मौजूदा डिज़ाइन और मौजूदा टेम्प्लेट में बदल रहा है। मैं सीधे कोड पर जा सकता था, लेकिन मार्कअप इस बिंदु पर शोर है। पाठ सही है।

आधी पकी हुई कॉपी का एक गुच्छा

बढ़ती निष्ठा

पृष्ठ की सभी प्रति समाप्त करने के लिए मैं लंबे समय तक पाठ के साथ चिपका रहा। एक बार जब मुझे एक रूपरेखा और एक समझ थी कि मैं फीचर के बारे में कैसे बात करना चाहता हूं, तो मैंने गियर को कोड में स्थानांतरित कर दिया।

क्यूं कर?

टेक्स्ट डॉक मुझे इस बारे में कुछ भी नहीं बता सकता है कि क्या एक लाइन एक विधवा को छोड़ देगी, चाहे एक पैराग्राफ "लंबे" महसूस किया जाए, चित्र कैसे प्रवाहित होंगे, आदि मुझे अधिक निष्ठा की आवश्यकता थी। नए प्रश्नों में से कुछ का जवाब स्थैतिक COMP द्वारा दिया जा सकता था, लेकिन जब तक मैं समय को कोड के अनुरूप नहीं मिलाता, तब तक कॉपी फिट के बारे में उन सवालों के जवाब नहीं देता। जी नहीं, धन्यवाद।

कोड में प्रतिलिपि संपादन के माध्यम से कार्य करना

चुनिंदा कम निष्ठा

कॉपी संशोधनों के कुछ और दौर के बाद, पृष्ठ आकार लेना शुरू कर रहा था। नेत्रहीन, यह यांत्रिक और कमज़ोर था। मैं चाहता था कि यह अधिक अभिव्यंजक हो, इसलिए मैंने कुछ विचारों पर विचार करने के लिए स्केच पर स्विच किया।

मैं अधिकांश भाग के लिए कोड में रह सकता था, लेकिन स्केच के साथ मैं विचारों के एक समूह को बहुत तेजी से फायर कर सकता था जितना कि मैं उन्हें कोड कर सकता था। इसने मुझे सीधे उन विचारों की एक दूसरे के खिलाफ तुलना करने की अनुमति दी, और सभी मंथन से एक सीएसएस चूहे का घोंसला नहीं छोड़ा। जीत-जीतने के लिए।

आधा पके हुए स्केच का एक गुच्छा

ध्यान दें कि उनमें से कोई भी पूरी तरह से बेक नहीं किया गया है? यह इसलिए है क्योंकि वे कोई बात नहीं करते हैं! ये ग्राहक प्रस्तुति के लिए या डेवलपर हैंडऑफ़ के लिए नहीं हैं। वे मुझे कुछ पता लगाने में मदद करने के लिए वहाँ हैं, तो वे कचरा कर रहे हैं। उन्हें चमकाने के लिए समय का निवेश कुल प्रयास की बर्बादी होगी।

पूरी तरह खत्म करना

एक बार मुझे दिशा का अंदाजा हो गया था, यह बाकी तरीका था। पॉलिशिंग कॉपी, नीचे स्क्रीनशॉट, और हमेशा अंतिम, महत्वपूर्ण प्रश्न के खिलाफ मूल्यांकन: "क्या यह जहाज के लिए तैयार है"। आप यहां बेसकैंप पेज में लाइव ग्राहकों पर एक नज़र डाल सकते हैं।

यह नहीं है कि हर परियोजना कैसे चलती है। कभी-कभी मैं Procreate में कुछ स्केच करता हूं, कभी-कभी मैं एक त्वरित और गंदे दृश्य COMP से शुरू करता हूं, कभी-कभी मैं स्केच में कॉपी लिखता हूं, कभी-कभी मैं कोड में 100% काम करता हूं। यह सब परियोजना पर निर्भर करता है।

उम्मीद है कि यह आपको इस बात की कुछ जानकारी देता है कि आप बिना पहिये को फिर से लगाये हुए, बिना किसी लगाव के, केस-बाय-केस पर अपनी प्रक्रिया को निर्देशित करने के लिए सिद्धांतों का उपयोग कैसे कर सकते हैं।

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