मुख्य कंटेंट तक स्किप करें

डिज़ाइन दिशा

डिज़ाइन दिशा (Design Direction) चरण आपको थीम बिल्डर द्वारा पूरी थीम बनाने से पहले अपने थीम के विज़ुअल डिज़ाइन की समीक्षा करने, उसे बेहतर बनाने और उसे अंतिम रूप देने की अनुमति देता है।

अवलोकन​

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

डिज़ाइन दिशा के घटक​

1. कलर पैलेट​

आपके थीम का कलर स्कीम, जिसमें शामिल हैं:

  • प्राथमिक रंग (Primary color) — बटनों, लिंक्स और एक्सेंट के लिए उपयोग किया जाने वाला मुख्य ब्रांड रंग
  • द्वितीयक रंग (Secondary color) — विविधता के लिए पूरक रंग
  • एक्सेंट रंग (Accent color) — महत्वपूर्ण तत्वों के लिए हाइलाइट रंग
  • न्यूट्रल रंग (Neutral colors) — बैकग्राउंड और टेक्स्ट के लिए ग्रे और सफेद रंग
  • टेक्स्ट रंग (Text color) — पठनीयता के लिए प्राथमिक टेक्स्ट रंग

2. टाइपोग्राफी​

निम्नलिखित के लिए फ़ॉन्ट चयन:

  • हेडिंग फ़ॉन्ट (Heading font) — पेज टाइटल और सेक्शन हेडर के लिए उपयोग किया जाता है
  • बॉडी फ़ॉन्ट (Body font) — पैराग्राफ टेक्स्ट और कंटेंट के लिए उपयोग किया जाता है
  • फ़ॉन्ट साइज़ (Font sizes) — विभिन्न स्क्रीन साइज़ के लिए responsive साइज़िंग
  • लाइन हाइट (Line height) — पठनीयता के लिए लाइनों के बीच की दूरी
  • फ़ॉन्ट वेट्स (Font weights) — बोल्ड, रेगुलर और लाइट वेरिएशन

3. लेआउट और स्पेसिंग​

  • कंटेनर चौड़ाई (Container width) — कंटेंट के लिए अधिकतम चौड़ाई
  • पैडिंग और मार्जिन (Padding and margins) — तत्वों के चारों ओर की जगह
  • ग्रिड सिस्टम (Grid system) — responsive डिज़ाइन के लिए कॉलम लेआउट
  • कंपोनेंट स्पेसिंग (Component spacing) — UI तत्वों के बीच की दूरी

4. विज़ुअल एलिमेंट्स​

  • बटन स्टाइल (Button styles) — प्राथमिक, द्वितीयक और तृतीयक बटन डिज़ाइन
  • कार्ड डिज़ाइन (Card designs) — कंटेंट ब्लॉक्स के लिए लेआउट
  • आइकन (Icons) — आइकन स्टाइल और साइज़िंग
  • बॉर्डर और शैडो (Borders and shadows) — सूक्ष्म विज़ुअल गहराई
  • होवर इफेक्ट्स (Hover effects) — इंटरैक्टिव स्टेट स्टाइलिंग

प्रीव्यू रेंडरिंग​

डेस्कटॉप प्रीव्यू​

डेस्कटॉप प्रीव्यू आपके डिज़ाइन को पूरी चौड़ाई (आमतौर पर 1200px या उससे अधिक) पर दिखाता है:

  • पूरा नेविगेशन मेनू
  • सभी कॉलम के साथ पूरा लेआउट
  • बड़ी टाइपोग्राफी और स्पेसिंग
  • सभी विज़ुअल एलिमेंट्स पूरे साइज़ में

मोबाइल प्रीव्यू​

मोबाइल प्रीव्यू आपके डिज़ाइन को मोबाइल चौड़ाई (आमतौर पर 375px) पर दिखाता है:

  • responsive नेविगेशन (हैमबर्गर मेनू)
  • सिंगल-कॉलम लेआउट
  • समायोजित टाइपोग्राफी और स्पेसिंग
  • टच-फ्रेंडली बटन साइज़

responsive ब्रेकपॉइंट्स​

थीम बिल्डर इन ब्रेकपॉइंट्स पर प्रीव्यू रेंडर करता है:

DeviceWidthPreview
Mobile375pxPortrait phone
Tablet768pxLandscape tablet
Desktop1200pxFull-width desktop
Large Desktop1920pxUltra-wide display

अपने डिज़ाइन को बेहतर बनाना​

समायोजन करना (Making Adjustments)​

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

  1. रंगों को समायोजित करना (Adjusting colors) — पैलेट में कोई भी रंग बदलें
  2. फ़ॉन्ट्स बदलना (Changing fonts) — अलग-अलग टाइपफेस चुनें
  3. स्पेसिंग को संशोधित करना (Modifying spacing) — पैडिंग और मार्जिन को समायोजित करें
  4. लेआउट को अपडेट करना (Updating layout) — कंटेनर चौड़ाई और ग्रिड कॉलम बदलें
  5. एलिमेंट्स को कस्टमाइज़ करना (Customizing elements) — बटन स्टाइल, कार्ड डिज़ाइन आदि को संशोधित करें

प्रीव्यू अपडेट्स​

परिवर्तन वास्तविक समय (real-time) में दिखाई देते हैं:

  • डेस्कटॉप प्रीव्यू तुरंत अपडेट होता है
  • मोबाइल प्रीव्यू तुरंत अपडेट होता है
  • सभी responsive ब्रेकपॉइंट्स अपडेट होते हैं
  • आप परिवर्तनों को सत्यापित करने के लिए प्रीव्यू के बीच स्विच कर सकते हैं

तुलना दृश्य (Comparison View)​

आप अपनी डिज़ाइन दिशा की तुलना निम्नलिखित से कर सकते हैं:

  • मूल डिज़ाइन (Original design) — देखें कि क्या बदला है
  • प्रतिद्वंद्वी डिज़ाइन (Competitor designs) — प्रेरणा वाली साइटों से तुलना करें
  • पिछले संस्करण (Previous versions) — पहले की डिज़ाइन दिशा पर वापस जाएं

डिज़ाइन दिशा को मंज़ूरी देना​

एक बार जब आप अपने डिज़ाइन से संतुष्ट हो जाते हैं:

  1. दोनों प्रीव्यू की समीक्षा करें — सत्यापित करें कि डेस्कटॉप और मोबाइल दोनों अच्छे दिख रहे हैं
  2. सभी रंगों की जाँच करें — कंट्रास्ट और सुगमता (accessibility) सुनिश्चित करें
  3. टाइपोग्राफी का परीक्षण करें — सभी साइज़ पर पठनीयता सत्यापित करें
  4. लेआउट की पुष्टि करें — स्पेसिंग और अलाइनमेंट की जाँच करें
  5. डिज़ाइन को मंज़ूरी दें — थीम जनरेशन के लिए आगे बढ़ें

अगले कदम​

अपनी डिज़ाइन दिशा को मंज़ूरी देने के बाद:

  1. थीम बिल्डर आपकी पूरी थीम जनरेट करता है
  2. थीम आपके WordPress साइट पर इंस्टॉल हो जाती है
  3. आप WordPress customizer का उपयोग करके और कस्टमाइज़ कर सकते हैं
  4. Hospitality Menus या अन्य सुविधाओं पर आगे बढ़ें

सर्वोत्तम अभ्यास (Best Practices)​

  • वास्तविक उपकरणों पर परीक्षण करें — यदि संभव हो तो वास्तविक फ़ोन और टैबलेट का उपयोग करें
  • पठनीयता की जाँच करें — सुनिश्चित करें कि टेक्स्ट सभी साइज़ पर पढ़ने योग्य है
  • कंट्रास्ट सत्यापित करें — सुगमता के लिए Validate Palette Contrast का उपयोग करें
  • प्रदर्शन पर विचार करें — गति के लिए छवियों और फ़ॉन्ट्स को ऑप्टिमाइज़ करें
  • कंटेंट की योजना बनाएं — सुनिश्चित करें कि लेआउट आपके वास्तविक कंटेंट के साथ काम करता है

समस्या निवारण (Troubleshooting)​

प्रीव्यू अपडेट नहीं हो रहा है​

  • पेज को रीफ़्रेश करें
  • ब्राउज़र कैश साफ़ करें
  • कोई अलग ब्राउज़र आज़माएं
  • इंटरनेट कनेक्शन की जाँच करें

रंग अलग दिख रहे हैं​

  • मॉनिटर कलर सेटिंग्स की जाँच करें
  • विभिन्न उपकरणों पर प्रयास करें
  • सुगमता टूल से कलर कंट्रास्ट सत्यापित करें
  • कलर ब्लाइंडनेस सिमुलेटर पर विचार करें

टाइपोग्राफी संबंधी समस्याएँ​

  • सत्यापित करें कि फ़ॉन्ट फ़ाइलें लोड हो रही हैं
  • विभिन्न ब्रेकपॉइंट्स पर फ़ॉन्ट साइज़ की जाँच करें
  • वास्तविक कंटेंट के साथ परीक्षण करें
  • पठनीयता के लिए लाइन की लंबाई पर विचार करें

संबंधित दस्तावेज़ीकरण​