नई अभिव्यक्ति इंजन वेबसाइट डिजाइन कैसे किया

मैं आपको जेसी बेनेट-चेम्बरलेन द्वारा " अभिव्यक्ति को फिर से परिभाषित करना साइट " लेख का अनुवाद प्रस्तुत करता हूं। UXDepot में स्थानांतरित। विशेष रूप से प्रकाशन डिजिटल वेब पत्रिका के अनुमोदन के साथ Habrahabr के उपयोगकर्ताओं के लिए।

अमेरिका-कनाडा सीमा पर सीमा रक्षक अधिकारी: "क्या आप व्यवसाय पर हैं या आप आराम करने जा रहे हैं, सर?"
मैं: व्यापार के लिए।
अधिकारी: कृपया कारण बताएं।
मैं: मैं एक वेब डेवलपर हूं और प्रोजेक्ट पर चर्चा करने के लिए ओरेगन में अपने क्लाइंट से मिलने जा रहा हूं।
सीमा रक्षक: आपके ग्राहक की कंपनी का नाम क्या है?
मैं: pMachine।
सीमा रक्षक: क्या आप अपने साथ कोई साइट ले जा रहे हैं?
मुझे: * हैरान *
सीमा रक्षक: क्या आपकी कार में कोई साइट है, सर?
मैं: ह्म्म्म्म्म्म… नहीं, साइट्स अब सर्वर पर हैं। मैं कार में कुछ नहीं ले जा रहा हूं।
सीमा रक्षक: फिर आप उन्हें अपने ग्राहक को कैसे दिखाना चाहते हैं?
मैं: हम्म ... असल में, मैं साइट पर चर्चा करने के लिए एक ग्राहक के साथ एक बैठक में जा रहा हूं, जबकि मैं उसे कुछ भी नहीं ला रहा हूं।
सीमा रक्षक: अच्छा, तो सवारी का आनंद लो, सर।

(30 सेकंड का मौन)

हीथ: अगली बार, कहो कि हम छुट्टी पर जा रहे हैं।


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

इस हफ्ते से पहले, पामाचाइन कर्मचारियों के साथ बैठकों में बिताया, मैंने पहले ही रिक एलिस के साथ कई छोटी परियोजनाओं पर काम किया था, और हमारे बीच बहुत अच्छा व्यापारिक संबंध था। इसने मेरे लिए मेरे पूरे करियर की सबसे बड़ी परियोजनाओं में से एक पर काम करने का मार्ग प्रशस्त किया, जिसमें pMachine (अब EllisLab ), ExpressionEngine , साथ ही CodeIgniter और pMachine होस्टिंग (अब EngineHosting ) के रीडिज़ाइन के लिए कई साइटों का डिज़ाइन शामिल है।

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

---

कार्य स्थान

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

---

अंकन

मैंने ExpressionEngine होमपेज से प्रोजेक्ट शुरू किया क्योंकि यह शायद उनके उत्पादों को बढ़ावा देने के लिए सबसे महत्वपूर्ण पेज है। मुझे यह भी पता था कि अगर मैंने एक्सप्रेशनइगाइन लेआउट पर फैसला किया, तो मैं इसे अन्य साइटों के लिए अपेक्षाकृत आसानी से उपयोग कर पाऊंगा, क्योंकि उनकी सामग्री को व्यवस्थित करना और डिजाइन करना इतना मुश्किल नहीं है।

मार्कअप बनाने के लिए मुझे सबसे पहले एलिसलैब की जरूरत थी वह उन डिजाइन तत्वों की एक सूची थी जिन्हें वे मुख्य पृष्ठ पर दिखाना चाहते हैं। रिक की खाने की मेज पर कुछ घंटों की चर्चा के बाद, हम निम्नलिखित रूप में तत्वों की सूची लाए:

• मुख्य मेनू, अन्य नेविगेशन, लोगो
• बड़ी आंख को पकड़ने वाला ग्राफिक बैनर
• ExpressionEngine डाउनलोड करने के लिए लिंक और इसकी विशेषताओं का अवलोकन
• परियोजना के संक्षिप्त विवरण के साथ पाठ
• समाचार, ब्लॉग प्रविष्टियाँ
• ब्लॉक "हमारे उत्पाद का उपयोग कौन करता है?" (ब्लॉगर्स, डेवलपर्स, व्यापार मालिकों, विशेष उपयोगकर्ताओं)
• तहखाना

बातचीत के दौरान, हमने डिजाइन में दिशा पर भी चर्चा की, जिसका वे पालन करना चाहते हैं। मैं अगले खंड में इस चरण पर स्पर्श करूंगा। डिज़ाइन तत्वों की एक सूची के साथ, मैं Adobe Illustrator को खोलने और कुछ लेआउट विकल्पों की कोशिश शुरू करने में सक्षम था।

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



मुझे जो उत्तर मिले, वे राय में थोड़े विभाजित थे, क्योंकि प्रत्येक विकल्प में ऐसे तत्व थे जो टीम को पसंद थे। रिक को विशेष रूप से "जो हमारे उत्पाद का उपयोग करता है" ब्लॉक का क्षैतिज प्रदर्शन पसंद आया। वह चिंतित था कि ऊर्ध्वाधर अभिविन्यास को माना जा सकता है जैसे कि उपयोगकर्ताओं को महत्व के क्रम में सूचीबद्ध किया गया था। एलिसलैब टीम के अन्य लोगों ने महसूस किया कि चित्रा 1 ए (जिसमें मैं पूरी तरह से सहमत हूं) में समाचार अनुभाग के लिए पर्याप्त स्थान आवंटित नहीं किया गया था, और यह कि यह जानकारी लेआउट 1 बी पर अधिक सफलतापूर्वक प्रस्तुत की गई है।

निम्नलिखित लेआउट विकल्पों में, मैंने पहले दो की सर्वोत्तम विशेषताओं को संयोजित करने का प्रयास किया।



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

मार्कअप का अंतिम संस्करण जो मैंने विचार के लिए दिया था, और वास्तव में 1 ए के समान था, लेकिन एक्सप्रेशनएजीन की सुविधाओं का एक संक्षिप्त विवरण के साथ पांच ब्लॉक शामिल थे। टीम यह भी चिंतित थी कि लेआउट बहुत कोणीय और विरूपित हो गया था, लेकिन उन्होंने फैसला किया कि अगले चरण में इन बिंदुओं पर विचार किया जा सकता है।



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

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

---

डिजाइन विकास

टाइपोग्राफी

जैसा कि मैंने कहा, मार्कअप निर्माण चरण के दौरान एक नए फ़ॉन्ट की खोज शुरू हुई और डिजाइन चरण में जारी रही। वास्तव में, मैं कुछ साफ और सरल चाहता था, जैसे डीआईएन या गोथम फोंट (चित्रा 2 ए)। हालाँकि ये फॉन्ट चारकोल की तुलना में बेहतर थे, जो पिछले डिज़ाइन में इस्तेमाल किए गए थे, उनमें से किसी में भी ऊर्जा या विशिष्टता की भावना नहीं थी, जिसकी मुझे तलाश थी। इन दो विकल्पों को छोड़ने के बाद, साथ ही साथ मेरे पूरे फ़ॉन्ट लाइब्रेरी से, मैं MyFonts में गया और वहाँ अधिकांश कामकाजी दिन बिताए (या यह तीन दिन का था?) वांछित फ़ॉन्ट की तलाश में। सबसे पहले, मैं निचले मामले में एक अद्भुत "जी" के साथ एक फ़ॉन्ट की तलाश कर रहा था और एक सुंदर इटैलिक शैली, क्योंकि मैं चाहता था कि लोगो को ऊर्जा और आंदोलन की भावना व्यक्त की जाए। अंत में, मैं Agfa दृश्य फ़ॉन्ट पर बस गया, जो मेरी दोनों आवश्यकताओं को पूरी तरह से पूरा करता है।



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

अब जब बाकी सब कुछ अपडेट किया गया है, तो तीर बाकी तत्वों की तुलना में थोड़ा गड़बड़ दिखाई दिया। मैंने तीरों के आंतरिक दांतों को काट दिया, किनारों को गोल कर दिया, और तीरों को थोड़ा मोड़ दिया ताकि वे "ई" के साथ बेहतर फिट हों और लोगो अधिक ऊर्जावान दिखे।



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

चित्र और रंग

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

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

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



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



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



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



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

माउस

इस परियोजना पर काम करते समय मैंने जो सबसे महत्वपूर्ण खोजें कीं, उनमें से एक आईकॉनड्रावर से आइकन सेट थी । ये आइकन वास्तव में कुछ पन्नों के डिज़ाइन को उनके पिक्सेल स्पिन पर ले जाते हैं। उदाहरण के लिए, मुख्य पृष्ठ को ही लें। अगर मुझे IconDrawer से बड़े आइकनों को निकालना था और उन्हें अपने पसंदीदा और अक्सर इस्तेमाल किए जाने वाले अकालफैम आइकनों से बदलना था , तो ये टैब उन्हें इस तरह से क्लिक करने की भीख नहीं दे रहे होंगे। एक अन्य उदाहरण: एक उत्पाद में वर्णन पृष्ठ (मेरे पसंदीदा में से एक) है जो इन आइकन के बिना पूरी तरह से सपाट होगा। सबसे अच्छा $ 113 मैंने कभी खर्च किया है।

हम पिक्सेल बढ़ते हैं

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



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



हालांकि, तहखाने अभी पूरी तरह से तैयार नहीं थे। जब मैंने कई बार छवि को बड़ा किया, तो मैंने देखा कि मेरे वेक्टर ग्राफिक्स पूरी तरह से फ़ोटोशॉप पिक्सेल ग्रिड से मेल नहीं खाते, नतीजतन, नीचे दाईं ओर धुंधले किनारे थे। यदि आप ऊपर दिए गए मूल स्क्रीनशॉट () को फिर से देखेंगे, तो आपको अंतर दिखाई देगा। पिक्सेल विस्तार, यह एक की तरह, हालांकि लगभग नग्न आंखों के लिए अदृश्य, लंबे समय में एक बड़ी भूमिका निभाता है।

---

बाहर निकलने में सक्षम हो

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



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



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

, , , . .

ओह।

---

, . , , , . , , . , , .
, , , , .

PS : मुझे उम्मीद है कि आपको लेख पसंद आया होगा। हमें खुशी होगी यदि आप हमें अनुवाद में त्रुटियों का संकेत देते हैं, ताकि हम उन्हें जल्दी से ठीक कर सकें। कृपया मुझे पीएम में लिखें :)