वेब डिज़ाइनर या लेआउट डिज़ाइनर को खुश करने की सामान्य गलतियाँ

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



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

1. रंग प्रोफ़ाइल

रंग प्रोफाइल के साथ समस्या अक्सर डिजाइनर द्वारा समझ की कमी के कारण उत्पन्न होती है कि रंग प्रोफ़ाइल क्या है और इसे कैसे चुनना है। सबसे आम प्रोफाइल एडोब आरजीबी (1998) और sRGB IEC61966-2.1 (इसके बाद बस sRGB) हैं, जिनके बारे में पढ़ा जा सकता है, उदाहरण के लिए, यहाँ ।



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



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









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



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



समस्या का समाधान हमेशा काम की शुरुआत में होता है ताकि यह सुनिश्चित हो सके कि सही प्रोफ़ाइल स्थापित है।

2. मार्गदर्शक

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







ऐसा क्यों हुआ? एक नज़दीकी नज़र से पता चलता है कि गाइड खुद पिक्सल्स की सीमाओं में नहीं फंसे हैं, जब डिजाइनर एक गाइड "आंख से" डालता है, तो सबसे अधिक संभावना यह है कि यह पिक्सल्स के बीच बिल्कुल नहीं गिरेगा।







दूसरी ओर, चयन पिक्सेल के लिए तड़क जाता है:







भले ही लेआउट डिजाइनर चौकस था और इस पर ध्यान दिया गया था, फिर भी यह सवाल उठता है: डिजाइनर गाइड को कहां रखना चाहता था - बाईं या दाईं ओर?



इस समस्या से बचने के लिए एक सरल टिप पहले चयन करने के लिए है और फिर चयन लाइन के लिए गाइड सेट करें।

3. समूह, परतें, मुखौटे

लेआउट डिजाइनर को लेआउट के लिए तैयार किए गए लेआउट को वास्तव में देने की आवश्यकता है, न कि 100 एमबी से कम वजन वाले काम का मसौदा।



"लेआउट के लिए तैयार" का क्या अर्थ है?

1. समूहों और परतों का नाम दिया गया है: मुख्य डिजाइन तत्वों को उनके उद्देश्य के अनुसार नाम देना वांछनीय है (सर्वश्रेष्ठ लैटिन वर्णमाला)
2. यदि समूहित परतें हैं, तो पृष्ठ की तार्किक संरचना के अनुसार समूहीकरण किया जाता है:
   
   हेडर, कंटेंट, बैनर, बटन, सूची इत्यादि, और नेस्टिंग वाजिब सीमा से अधिक नहीं है, लेकिन समूहों के घोंसले से पूरी तरह से बचना बेहतर है।
3. छिपी हुई परतें जो डिज़ाइन में कोई भूमिका नहीं निभाती हैं उन्हें हटाया जाना चाहिए।
4. फ़ोटिंग फ़ोटो (कोनों को गोल करना, आदि) मूल चित्रों को संरक्षित करते समय किया जाना चाहिए - मास्क का उपयोग करके ऐसा करना सबसे अच्छा है
5. कैनवास का आकार डिजाइन की अधिकतम संभव चौड़ाई / ऊंचाई के अनुरूप होना चाहिए

4. रंग

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



क्या बकवास है? और इसलिए यह स्पष्ट है कि रंग समान है।

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



डिजाइनरों को सलाह: मतभेदों से बचने के लिए पैलेट या किसी भी तरह से तैयार रंगों का उपयोग करें।

5. रूपांतरण, आंकड़े

चित्रों के साथ गोल कोनों को टाइप किया गया। प्रत्येक स्वाभिमानी ब्राउज़र सीएसएस border-radius



संपत्ति का उपयोग करके कोनों को गोल करना जानता है, जो कि कोडर्स का उपयोग करता है।



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



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







गोल कोनों के मुद्दे को हल करने के बाद, लेआउट डिजाइनर को फिर से एक समस्या का सामना करना पड़ा:







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



फ़ोटोशॉप 13 में आकृतियों की धुंधली सीमाओं को रोकने के लिए एक विशेष विकल्प है "किनारों को संरेखित करें।"

6. इकाइयाँ, प्रतीक, अनुच्छेद

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



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



यदि आपने ट्रांसफ़ॉर्म का उपयोग करके टेक्स्ट का आकार बदल दिया है, तो उसके बाद प्रतीक का आकार या अन्य गुण एक आंशिक मूल्य ले सकते हैं (उदाहरण के लिए, 14.5 px)। लेआउट के लिए लेआउट तैयार करते समय, सभी आकारों को पूर्णांक मानों में लाना आवश्यक है। अन्यथा, लेआउट डिजाइनर फिर से दुविधा का सामना करेंगे: 14 या 15 पिक्सल?



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

7. सम्मिश्रण विकल्प, परत शैलियों

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



आइए देखें कि सीएसएस का उपयोग करके (चित्रों का उपयोग किए बिना) फ़ोटोशॉप में किस स्तर की शैली पूर्ण या आंशिक क्षमता है:

• छाया और चमक (आंतरिक और बाहरी)
  
  text-shadow
  
  
  
  - text के लिए छाया
  
  box-shadow
  
  
  
  - ब्लॉक के लिए छाया
  
  
• स्ट्रोक
  
  border
  
  
  
  - रेखा आघात
  
  box-shadow
  
  
  
  - एकल-पिक्सेल छाया स्ट्रोक संभव
  
  outline
  
  
  
  - एक सख्ती से आयताकार स्ट्रोक
  
  
• भरण
  
  background-color
  
  
  
  - background-color
  
  
  
  भरें (संभवतः पारभासी)
  
  background-image
  
  
  
  - पैटर्न / चित्र भरें
  
  background-image: linear-gradient()
  
  
  
  - रैखिक ढाल
  
  background-image: radial-gradient()
  
  
  
  - रेडियल ग्रेडिएंट
  
  
• पारदर्शिता
  
  opacity
  
  
  
  - पूरे तत्व की पारदर्शिता
  
  [color:] rgba(r,g,b,a)
  
  
  
  - आरजीबी रंग की पारदर्शिता, जहां 0 से 1 तक अस्पष्टता की डिग्री है।
  
  [color:] hsla(h,s,l,a)
  
  
  
  - एचएसएल-रंग की पारदर्शिता, जहां 0 से 1 तक अस्पष्टता की डिग्री है।
  
  

यहां किसी विशेष संपत्ति के लिए ब्राउज़र समर्थन के बारे में जानें।



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

संक्षेप में कहना

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