DeviceMock के साथ Browser में Device Mockups बनाएं

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

खैर, आरएम-लेबो में लोगों के लिए धन्यवाद, आप कर सकते हैं! उनका मुफ्त jQuery प्लगइन, DeviceMock.js, आपको देता है किसी भी पृष्ठ तत्व के चारों ओर एक वेक्टर डिवाइस लपेटें, सरल जावास्क्रिप्ट और एसवीजी का उपयोग करना.

तो, यह वास्तव में कैसे काम करता है?

ठीक है, पहले आप की जरूरत है jQuery की एक प्रति तथा GitHub से DeviceMock प्लगइन का एक संस्करण. यह वास्तविक उपकरणों को बनाने के लिए एक जेएस फाइल, सीएसएस फाइल और कुछ एसवीजी फाइलों के साथ आता है.

आप ऐसा कर सकते हैं किसी भी प्रकार के तत्व को लक्षित करें पृष्ठ पर, एक साधारण छवि से लेकर संपूर्ण div तक, या यहां तक ​​कि एक एम्बेडेड तत्व जैसे कि iframe। इसका मतलब है आप भी कर सकते हैं एक शांत मिनी-ब्राउज़र का निर्माण करें आपकी साइट पर एक आइफ्रेम के साथ दूसरे पेज पर.

यह प्लगइन सपोर्ट करता है पांच विभिन्न डिवाइस प्रकार:

1. वेब ब्राउज़र
2. स्मार्टफोन
3. गोली
4. डेस्कटॉप
5. लैपटॉप

ये सभी मॉकअप का उपयोग करते हैं फ्लैट डिजाइन शैलियों चूंकि वे एसवीजी के साथ निर्मित हैं। और, वे सभी Apple उपकरणों के समान दिखते हैं, उदाहरण के लिए स्मार्टफोन iPhone का क्लोन और डेस्कटॉप मॉनिटर एक iMac की तरह स्पष्ट रूप से देख रहा है.

इन सभी वैक्टर को जोड़ना आसान है और वे काम करते हैं एसवीजी समर्थन के साथ हर ब्राउज़र.

तुम भी गुण बदलें जैसे मॉकअप आकार, थीम (सफेद / काला) और अभिविन्यास (चित्र परिदृश्य).

यदि आप ब्राउज़र मॉकअप का उपयोग करते हैं तो आप कर सकते हैं डमी URL निर्दिष्ट करें पता बार में। यह और भी अधिक अनुकूलन जोड़ने का एक मजेदार तरीका है.

दी यह पुस्तकालय सभी के लिए उपयोगी नहीं होगा, लेकिन यह एक आला समस्या को हल करता है प्रोटोटाइप बनाते समय कई UI / UX डेवलपर्स सामना करते हैं.

अधिक जानने के लिए, पर जाएँ GitHub पेज या बाहर की जाँच करें लाइव साइट एक सक्रिय डेमो के लिए.