वेब डेवलपमेंट कॉन्सेप्ट्स ऑल वेब डिज़ाइनर्स को समझना चाहिए

इसके बारे में बहुत कुछ कहा जा सकता है डिजाइनरों और डेवलपर्स के बीच पाया गया विभाजन. दी गई कई डिजाइनर / डेवलपर संकर हैं जो कर सकते हैं सिक्के के दोनों किनारों को समझें, लेकिन वे कुछ और दूर के बीच हैं.

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

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

फ्रंटेंड कोड व्यवहार

वेब डिज़ाइनर अक्सर सोचते हैं कि उनके डिजाइन टैलेंट के साथ-साथ फ्रंटएंड स्किल भी हो। यह एक गर्मागर्म बहस का विषय है, ज्यादातर इसलिए कि वहाँ है कोई सही उत्तर नहीं.

डिजाइनरों को वही करना चाहिए जो वे करते हैं के साथ सहज हैं. यदि इसका मतलब केवल दृश्य डिजाइन का काम करना है, तो ऐसा ही हो। हालांकि फ्रंटएंड प्रौद्योगिकियों की एक संक्षिप्त समझ एक ही डिजाइनर बना सकती है अधिक सहज ज्ञान युक्त डेवलपर्स के लिए संपत्ति बनाते समय.

मेरा मानना ​​है कि हर डिजाइनर को कम से कम समझना चाहिए सीमावर्ती विकास की तीन मौलिक भाषाएँ (HTML, CSS और JS) के साथ-साथ उनका उपयोग कैसे किया जाता है। उदाहरण के लिए, अधिकांश ड्रॉपडाउन मेनू जावास्क्रिप्ट पर निर्भर करते हैं लेकिन साथ ही सीएसएस-केवल विकल्प भी हैं.

जब एक डिजाइनर एक ड्रॉपडाउन मेनू को क्राफ्ट कर रहा है, तो वे इसके बारे में सोच सकते हैं कोड के माध्यम से इसे लागू करने की जटिलता. एक डिजाइनर जो समझता है कि किन तत्वों को जावास्क्रिप्ट की आवश्यकता होती है, यह समझने के लिए बेहतर तैयार किया जा सकता है कि वे डेवलपर्स को क्या बनाने के लिए कह रहे हैं.

यह संभव है कोड की एक पंक्ति लिखना सीखने के बिना.

CSS से बना है वेबसाइट को स्टाइल करें. यह सीएसएस एनीमेशन और सीएसएस से ज्यादातर स्थिर है अधिकांश दृश्य बनाता है एक पृष्ठ पर. सबसे गतिशील विशेषताएं जावास्क्रिप्ट के साथ बनाया जाता है.

यदि आप इस विभाजन को समझ सकते हैं तो यह डिजाइन के काम में एक सचेत प्रयास होगा। यह यूएक्स मोशन डिजाइनरों को यह विचार करने के लिए मजबूर करेगा कि एक इंटरफ़ेस को एनिमेट करने में कितना काम होता है.

उत्तरदायी तकनीक

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

ब्रेकप्वाइंट एक द्वारा निर्दिष्ट किए गए हैं कुछ पिक्सेल चौड़ाई (और / या कभी-कभी ऊंचाई), या तो न्यूनतम या अधिकतम, जिस पर लेआउट उस स्क्रीन आकार को फिट करने के लिए एडाप्ट करता है। इसलिए एक उत्तरदायी लेआउट 320x स्मार्टफोन की तुलना में 1080px मॉनिटर पर अलग दिखाई देगा.

यह देखने के लिए कि वास्तविक साइट पर ब्रेकप्वाइंट कैसे काम करते हैं, मीडिया क्वेरी वेबसाइट देखें.

डिजाइनर के रूप में आपका काम यह विचार करना है कि प्रत्येक ब्रेकपॉइंट कैसे हो सकता है मॉकअप को प्रभावित करें. आप कई comps, प्रत्येक डिजाइनिंग के साथ काम सौंपा जा सकता है विभिन्न स्क्रीन आयामों में फिटिंग.

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

डिजाइन के साथ मॉड्यूलर सोचो

डेवलपर्स हमेशा चाहते हैं पुन: उपयोग कोड जितना संभव हो, यह दृष्टिकोण विकास करता है कम क्रिया तथा फ़ाइल आकार में कटौती - वास्तव में यह एक महत्वपूर्ण कोड अनुकूलन तकनीक है.

मॉड्यूलर डिजाइन वेबसाइट बनाने की एक विधि का वर्णन करता है “मॉड्यूल” यह हो सकता है समय के साथ पुन: उपयोग किया. सोचें बटन, फॉर्म इनपुट, हेडिंग स्टाइल, या फैंसी स्टाइलिंग के साथ ब्लॉकचोट.

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

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

मॉड्यूलर डिजाइन से संबंधित है परमाणु डिजाइन, दोनों दृष्टिकोण डेवलपर्स के बजाय गियर हैं। हालाँकि दृश्य आपको यह समझने में मदद कर सकता है कि कोड कैसे काम करता है, इसलिए यदि आप संघर्ष कर रहे हैं मॉड्यूलर डिजाइन की कल्पना करें कुछ उदाहरण देखने के लिए इस पोस्ट को देखें.

रेटिना इमेज और SVG को समझें

आमतौर पर यह चित्रों को तैयार करने, किसी भी आवश्यक फ़ोटो को कैप्चर करने और खरोंच से आइकन डिज़ाइन करने के लिए डिज़ाइनर का काम है। इसका मतलब है कि डिजाइनर पूरी तरह से इसके लिए जिम्मेदार हैं दृश्य संपत्ति वितरित करना कि डेवलपर्स अंततः लेआउट में कोड करते हैं। यही कारण है कि यह समझना महत्वपूर्ण है रेटिना का आकार और करने के लिए रेटिना समर्थित परिसंपत्तियाँ पास करें अंतिम मॉकअप (ओं) के साथ डेवलपर्स के लिए.

यदि आप रेटिना डिज़ाइन वर्कफ़्लोज़ के बारे में अधिक जानना चाहते हैं तो मैं इस स्मैशिंग मैगज़ीन पोस्ट की अत्यधिक अनुशंसा करूँगा। Retinize यह फ़ोटोशॉप क्रियाओं का एक नि: शुल्क संग्रह है जो कर सकता है स्वचालित रूप से रेटिना संस्करण बनाएँ अपनी संपत्ति की.

अधिकांश डिजाइनर पहले से ही समर्थन करना जानते हैं @ 2x चित्र, लेकिन नए iPhone 6+ डिवाइस हैं @ 3x संकल्प. हालाँकि कुछ प्रोजेक्ट्स @ 3x इमेज साइज़ से परेशान नहीं होते हैं, इसलिए किसी भी संपत्ति को अंतिम रूप देने से पहले अपने प्रोजेक्ट लीडर के साथ बात करें.

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

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

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

पहुँच को समझें

प्रगतिशील वृद्धि तथा ससम्मान पद अवनति एक ही समस्या से निपटने के दो अलग-अलग तरीके हैं: पहुंच। सभी उपयोगकर्ता उपकरणों पर नहीं होंगे या ब्राउज़र को नहीं चलाएंगे जो किसी वेबसाइट की 100% गतिशील सुविधाओं का समर्थन करते हैं.

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

मैंने हाल ही में एक पोस्ट कवर किया प्रगतिशील वृद्धि विस्तार से, क्योंकि यह मेरे विकास का पसंदीदा तरीका है। प्रगतिशील वृद्धि बहुत बुनियादी सुविधाओं के साथ शुरू होता है, फिर अधिक तक काम करता है “उन्नत” विशेषताएं.

ससम्मान पद अवनति है विपरीत दृष्टिकोण कहा पे सभी मुख्य विशेषताओं को पहले डिज़ाइन किया गया है, तब डेवलपर तय करता है कि अगर उपयोगकर्ता जावास्क्रिप्ट या सीएसएस का समर्थन नहीं करता है तो इन सुविधाओं को कैसे संभालना है.

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

बंद होने को

कुछ विषय हैं जिन्हें मैंने छोड़ दिया क्योंकि मैं उन्हें वैकल्पिक मानता हूं. संस्करण नियंत्रण, त्रुटि से निपटने और जावास्क्रिप्ट एनिमेशन कुछ और अधिक जटिल विषय हैं, जो डिजाइनर इसमें तल्लीन करना चाह सकते हैं.

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

यदि आप अधिक संबंधित सामग्री की तलाश कर रहे हैं, तो इन पदों पर एक नज़र डालें:

• डेवलपर्स के साथ प्रभावी ढंग से संवाद कैसे करें (Smashingmagazine.com)
• डिज़ाइनर और डेवलपर्स एक दूसरे को समझना सीखें (Uie.com)
• यूएक्स डिजाइनर के रूप में आपको कोड देना सीखता है (Jessicaivins.net)