वेब डिजाइन: व्यक्तिगत जा रहे हैं

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



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

1. तेज

दिमित्री (डी) ने साइट के लेआउट का प्रतिपादन किया और इसे स्पष्ट विवेक के साथ व्लादिमीर (बी) को दे दिया। साइट सरल है, और इसलिए हमारे लेआउट डिजाइनर ने इसे एक दिन में प्रबंधित किया। हालांकि, दिमित्री के लिए लेआउट कुछ हद तक शर्मिंदा था।

D: मुखबिरों के बारे में क्या? लगता है वे छोटे हो गए हैं।
प्रश्न: मुझे उन्हें 1 पिक्सेल से हर तरफ से काटना था।
डी :?
प्रश्न: उनके पास स्पष्ट सीमाएं नहीं थीं, मैंने धुंधली पिक्सेल को हटा दिया।

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

सभी चित्र क्लिक करने योग्य हैं।

किसे दोष देना है?

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

क्या करें?

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

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

2. छद्म 3 डी

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

प्रश्न: मुझे इसे एक दिन में बनाना है।

3 दिन हो गए हैं ...

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

किसे दोष देना है?

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

क्या करें?

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

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

3. पारदर्शिता

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

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

किसे दोष देना है?

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

क्या करें?

सब कुछ बहुत सरल है: कभी भी पाठ के लिए पारदर्शिता का उपयोग न करें। भविष्य में पारदर्शिता के बिना तुरंत रंग चुनें, अपने आप को समस्याओं से बचाएं।

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

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

4. ओवरले प्रभाव

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

प्रश्न: क्या आपने इस परत में ओवरले प्रभाव का उपयोग किया है?
D: हाँ, समस्याएं?
ब: बड़े। मैं इसे तब तक नहीं बनाऊंगा जब तक आप परतों की बातचीत को हटा नहीं देते।
D: आप इसे स्वयं साफ कर सकते हैं।
क्यू: ...

किसे दोष देना है?

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

क्या करें?

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

5. पाठ गुण

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

प्रश्न: दिमित्री, मुझे यह समझ में नहीं आया कि इस पाठ में ऐसा क्यों किया गया था।
डी: हमारे पास लगभग कोई ग्राफिक्स नहीं है, सब कुछ पाठ पर टिकी हुई है, मैंने इसका अधिकतम उपयोग किया।
प्रश्न: आपने इसकी ऊँचाई बढ़ा दी, इसकी चौड़ाई कम कर दी, चौराहे का फ़ासला बदल दिया - क्या यह किसी प्रकार की भव्य योजना है?
D: आपको केवल पाठ को टाइप करने के लिए सीखने की आवश्यकता है।
क्यू: ...

किसे दोष देना है?

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

क्या करें?

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

6. रंग

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

डी: जब मैंने आपको लेआउट दिया था, तो उसमें 3 मुख्य रंग थे, और नारंगी अब उस लेआउट से मेल नहीं खाता है जो लेआउट में था।
प्रश्न: कौन सा कोड आपके नारंगी से मेल खाता है?
D: आप बस फिर से आईड्रॉपर का उपयोग नहीं कर सकते?
प्रश्न: मैं कर सकता हूं।
D: फिर क्या समस्या है?
प्रश्न: आपके लेआउट में आपके विचार से अधिक नारंगी हैं ...

किसे दोष देना है?

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

क्या करें?

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

7. चमक

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

D: तुम मजाक कर रहे हो?
प्रश्न: मैंने लेआउट समाप्त कर दिया है, मुझे मजाक क्यों करना चाहिए?
डी: हाँ, लेआउट से तत्वों का एक अच्छा तीसरा नहीं है!
प्रश्न: यह नहीं हो सकता, मैंने इस पर सब कुछ किया।
D: आप मजाक कर रहे हैं, लेआउट खोलें और मुझे जो आप दिखाते हैं उसके साथ 10 अंतर खोजें!
प्रश्न: मुझे अंतर नहीं दिखता ...
D: बहुत मज़ेदार।
क्यू: ...

किसे दोष देना है?

स्थिति अविश्वसनीय है, लेकिन बिल्कुल यथार्थवादी है। दोनों आंशिक रूप से दोषी हैं, किसी को भी विशेष रूप से बाहर करना असंभव है। जब तक इन गरीब साथियों को समझ में नहीं आता है कि ऐसा क्यों हुआ, बहुत समय बीत सकता है, और कई शब्द कहे जा सकते हैं, जो सबसे सुखद नहीं हैं। काफी अप्रिय।

क्या करें?

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

8. घातक त्रुटि!

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

किसे दोष देना है?

इससे कोई फर्क नहीं पड़ता।

क्या करें?

चलाने के लिए।

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