25 वेबसाइट लेआउट उदाहरण (एनोटेटेड वायरफ्रेम के साथ)
We.Inc टेम्पलेट लाइब्रेरी के 25 वेबसाइट लेआउट उदाहरण, हर एक के साथ पेज संरचना का बॉक्स वायरफ्रेम, डिज़ाइन का प्रीव्यू, यह लेआउट क्यों काम करता है और किन व्यवसायों के लिए उपयुक्त है। लेआउट चुनने की मार्गदर्शिका भी शामिल है।
वेबसाइट लेआउट किसी पेज पर सेक्शन का क्रम और व्यवस्था है: पहले क्या आता है, क्या साथ-साथ होता है, और मुख्य बटन कहाँ जाता है। नीचे 25 लेआउट हैं, हर एक को एक सरल बॉक्स वायरफ्रेम और पूरे डिज़ाइन के प्रीव्यू के रूप में दिखाया गया है। सभी 25 We.Inc टेम्पलेट डिज़ाइन हैं, ग्राहक की साइटें नहीं, जो उनके लिए उपयुक्त कारोबार के प्रकार के अनुसार वर्गीकृत हैं। हर वायरफ्रेम में नीला बॉक्स मुख्य कॉल टू एक्शन है।
वायरफ्रेम कैसे पढ़ें
बॉक्स की हर पंक्ति पेज का एक बैंड है, स्क्रॉल करते समय ऊपर से नीचे तक। साथ-साथ बॉक्स डेस्कटॉप स्क्रीन पर एक-दूसरे के बगल में होते हैं; फ़ोन पर वे उसी क्रम में एक के ऊपर एक आते हैं, इसलिए बायाँ बॉक्स पहले दिखता है। यह पेज पूरे पेज की व्यवस्था के बारे में है। पेज के शीर्ष के लिए विशेष रूप से, हीरो सेक्शन उदाहरण देखें; मेनू के लिए, नेविगेशन उदाहरण देखें।
एक तालिका में पाँच लेआउट पैटर्न
| पैटर्न | सेक्शन का क्रम | सर्वोत्तम कब | नीचे उदाहरण |
|---|---|---|---|
| सेवा फ़नल | हीरो, सेवाएँ, प्रमाण, फ़ॉर्म | आगंतुकों को कोटेशन या बुकिंग चाहिए | 1-8 |
| विज़िट | हीरो, मेनू, कहानी, समय और नक्शा | लोग व्यक्तिगत रूप से आते हैं | 9-14 |
| बुक या शामिल हों | हीरो, कीमतें या समय-सारणी, बुकिंग | अपॉइंटमेंट, कक्षाएँ, सदस्यताएँ | 15-19 |
| ग्रिड | हीरो, आइटम की ग्रिड, विवरण, पूछताछ | लिस्टिंग, उत्पाद, पोर्टफोलियो | 20-24 |
| पाठक | हीरो, काम, के बारे में, साइनअप | लक्ष्य वापस आने वाले दर्शक हैं | 25 |
सेवा व्यवसाय लेआउट
1. आपातकालीन ट्रेड: हीरो के नीचे तत्काल बैंड
टेम्पलेट: Ironpeak Roofing (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: हीरो के ठीक नीचे एक पूरी-चौड़ाई वाला रंगीन बैंड उन लोगों को पकड़ता है जिन्हें तत्काल समस्या है (तूफ़ान से नुकसान) इससे पहले कि वे स्क्रॉल करके चले जाएँ। इसका उपयोग करें: रूफ़र, रेस्टोरेशन, ताला बनाने वाले, टोइंग।
2. सेवा-क्षेत्र ब्लॉक के साथ मल्टी-ट्रेड
टेम्पलेट: Summit Trades (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: तीन समान सेवा कार्ड, फिर सेवा क्षेत्रों की नाम वाली सूची, "क्या आप यहाँ यह काम करते हैं?" का जवाब दो स्क्रॉल में देती है। इसका उपयोग करें: किसी भी व्यवसाय के लिए जिसका एक निर्धारित यात्रा क्षेत्र है।
3. विशेष स्पेशलिटी के साथ सेवा सूची
टेम्पलेट: Voltline Electric (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: एक उच्च-मूल्य सेवा को अपना अलग सेक्शन मिलता है, इसलिए पेज बाकी को छुपाए बिना वह काम बेचता है जो आप सबसे अधिक चाहते हैं। इसका उपयोग करें: एक लाभदायक स्पेशलिटी वाले ट्रेड के लिए।
4. चेकलिस्ट और तत्काल कोटेशन
टेम्पलेट: Brightwell Cleaning (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: हर विज़िट में क्या शामिल है इसकी दृश्यमान चेकलिस्ट मूल्य फ़ॉर्म से पहले मुख्य चिंता (मुझे बिल्कुल क्या मिलेगा?) का जवाब देती है। इसका उपयोग करें: सफ़ाई, लॉन की देखभाल, पूल सेवा।
5. स्थानीय शिल्पकार की कहानी
टेम्पलेट: Halden Woodworks (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: शीर्षक में शहर का नाम लेना और "काम कैसे होता है" दिखाना बड़े, एक बार के कामों के लिए विश्वास बनाता है। इसका उपयोग करें: बढ़ई, बिल्डर, रीमॉडलर।
6. पेशेवर फ़र्म: प्रैक्टिस क्षेत्र और लोग
टेम्पलेट: Sterling & Vance LLP (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: लोग कानून के क्षेत्र से और फिर व्यक्ति से फ़र्म चुनते हैं; लेआउट उसी क्रम का पालन करता है। इसका उपयोग करें: कानून, लेखांकन, वित्तीय सलाह।
7. परामर्श: पहले प्रमाण
टेम्पलेट: Linden Consult (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: प्रमाण हीरो के ठीक बाद आता है, फिर पेज सेवाओं को उन समस्याओं के रूप में प्रस्तुत करता है जिन्हें खरीदार पहचानता है। इसका उपयोग करें: सलाहकार, कोच, B2B सेवाएँ।
8. छोटा अकाउंटेंट पेज
टेम्पलेट: Ledgerline CPA (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: चार सेक्शन। उस खरीदार के लिए जो पहले से जानता है कि उसे अकाउंटेंट चाहिए, कम जानकारी तेज़ है। इसका उपयोग करें: किसी भी सेवा के लिए जहाँ खरीदार निश्चित होकर आता है।
खाना और आतिथ्य लेआउट
9. कैफ़े: मेनू, कहानी, विज़िट
टेम्पलेट: Ember & Roast (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: पहले मेनू, अंत में विज़िट: लोग देखते हैं कि आप क्या परोसते हैं, फिर कहाँ और कब। इसका उपयोग करें: कैफ़े, बेकरी, बार।
10. पहले ऑर्डर के साथ बेकरी
टेम्पलेट: Flour & Fern (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: एक समर्पित ऑर्डर सेक्शन ब्राउज़िंग को प्री-ऑर्डर में बदलता है। इसका उपयोग करें: बेकरी, कसाई, मील प्रेप।
11. रेस्तरां लंबा स्क्रॉल
टेम्पलेट: Azafran (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: एक गंतव्य रेस्तरां के लिए, वातावरण बुकिंग बेचता है, इसलिए पेज माँगने से पहले एक कहानी बताता है। इसका उपयोग करें: फाइन डाइनिंग, टेस्टिंग मेनू, वेन्यू।
12. तीन-सेक्शन रेस्तरां
टेम्पलेट: Crust (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: हीरो, मेनू, विज़िट। एक रेस्तरां के पास कम से कम सेक्शन फिर भी हर सवाल का जवाब। इसका उपयोग करें: कैज़ुअल रेस्तरां, टेकअवे।
13. पहले समय-सारणी
टेम्पलेट: ROAM (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: जब स्थान रोज़ बदलता है, "आज आप कहाँ हैं" मुख्य सवाल है, इसलिए यह हीरो के ठीक नीचे जाता है। इसका उपयोग करें: फूड ट्रक, बाज़ार, पॉप-अप।
14. पूछताछ फ़ॉर्म के साथ इवेंट सेवा
टेम्पलेट: Harvest & Vine (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: सामने कार्यक्रम प्रकार आगंतुक को खुद को छाँटने देते हैं; एक नमूना मेनू कीमत को ठोस महसूस कराता है। इसका उपयोग करें: कैटरर, प्लानर, वेन्यू।
बुकिंग और सदस्यता लेआउट
15. बुकिंग-केंद्रित सैलून
टेम्पलेट: Lumé Salon & Beauty Spa (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: एक कीमत सूची और एक बुकिंग ब्लॉक ही अधिकांश सैलून आगंतुकों को चाहिए। इसका उपयोग करें: सैलून, नाई, नेल और लैश स्टूडियो।
16. क्लास समय-सारणी और मूल्य निर्धारण
टेम्पलेट: Tidewater Yoga (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: समय-सारणी फिर कीमतें फिर पहली विज़िट का ऑफ़र, एक नए छात्र के निर्णय के क्रम का पालन करता है। इसका उपयोग करें: योग, पिलेट्स, नृत्य, मार्शल आर्ट।
17. कार्यक्रमों और स्तरों के साथ जिम
टेम्पलेट: Iron (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: साथ-साथ सदस्यता स्तर तुलना आसान बनाते हैं; एक मुफ़्त पहला सत्र कदम कम करता है। इसका उपयोग करें: जिम, क्लब, सदस्यताएँ।
18. क्लिनिक: देखभाल, टीम, स्थान
टेम्पलेट: Verdant Family Health (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: मरीज़ जानना चाहते हैं कि आप क्या इलाज करते हैं, वे किसे देखेंगे और वहाँ कैसे पहुँचेंगे। इसका उपयोग करें: क्लिनिक, दंत चिकित्सक, फिज़ियो।
19. तत्काल नोट के साथ पशु चिकित्सक
टेम्पलेट: Meadowpaw Veterinary (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: विज़िट सेक्शन तत्काल मामलों को फ़ोन करने के लिए कहता है, इसलिए बुकिंग फ़ॉर्म आपात स्थिति के लिए उपयोग नहीं किया जाता। इसका उपयोग करें: पशु चिकित्सक, अर्जेंट केयर, आपात स्थिति वाली कोई भी सेवा।
ग्रिड लेआउट: लिस्टिंग, दुकानें और पोर्टफोलियो
20. लिस्टिंग ग्रिड
टेम्पलेट: Keystone Realty (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: खरीदारों को ग्रिड मिलती है; विक्रेताओं को अपना सेक्शन और एक अलग कॉल टू एक्शन मिलती है। इसका उपयोग करें: रियल एस्टेट, किराया, कार डीलर।
21. एकल उत्पाद पेज
टेम्पलेट: Verre Halo (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: कीमत मेनू बार में और अंत में होती है; बीच में सब कुछ "क्या यह इसके लायक है?" का जवाब देता है। इसका उपयोग करें: एक-उत्पाद ब्रांड, लॉन्च, क्राउडफ़ंडेड उत्पाद।
22. छोटे-बैच की दुकान
टेम्पलेट: Cellar & Rowan (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: पहले उत्पाद, फिर वह कहानी जो कीमत को उचित ठहराती है, फिर अगले बैच के लिए सूची साइनअप। इसका उपयोग करें: मेकर, मोमबत्तियाँ, सिरेमिक, खाना।
23. प्रोडक्ट ड्रॉप
टेम्पलेट: Loop (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: अगला रिलीज़ आगे है; दुकान ग्रिड उन लोगों की सेवा करती है जो अभी कुछ चाहते हैं। इसका उपयोग करें: सीमित रन, परिधान, संग्रहणीय।
24. पहले पोर्टफोलियो ग्रिड
टेम्पलेट: Drafthouse (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: शीर्षक के ठीक बाद छह परियोजनाएँ; काम बिक्री करता है। इसका उपयोग करें: आर्किटेक्ट, डिज़ाइनर, फ़ोटोग्राफ़र।
व्यक्तिगत और क्रिएटर लेआउट
25. न्यूज़लेटर के साथ लेखक
टेम्पलेट: Plume (एक We.Inc टेम्पलेट डिज़ाइन, ग्राहक की साइट नहीं)।
यह क्यों काम करता है: काम, फिर न्यूज़लेटर साइनअप: लक्ष्य वापस आने वाले पाठक हैं, एकल पूछताछ नहीं। इसका उपयोग करें: लेखक, क्रिएटर, वक्ता।
लेआउट कैसे चुनें
- एक कार्रवाई का नाम लें जो आप अधिकांश आगंतुकों से चाहते हैं (कॉल, बुक, खरीदें, पूछताछ, सदस्यता लें)। वही नीला बॉक्स बनता है।
- तीन सवालों की सूची बनाएँ जो एक आगंतुक कार्रवाई करने से पहले पूछता है (उदाहरण के लिए: क्या आप मेरे क्षेत्र में काम करते हैं, इसकी कीमत क्या है, क्या मैं आप पर भरोसा कर सकता हूँ)। हर एक को उसी क्रम में एक सेक्शन मिलता है।
- ऊपर दी गई तालिका से पैटर्न चुनें जो मेल खाता हो।
- सेक्शन काटें जिन्हें आप वास्तविक सामग्री से नहीं भर सकते। एक खाली "परिणाम" सेक्शन या प्लेसहोल्डर समीक्षाएँ छोटे पेज से ज़्यादा नुकसान करती हैं।
- फ़ोन पर जाँचें। साथ-साथ बॉक्स एक के ऊपर एक आते हैं; सुनिश्चित करें कि मुख्य बटन अभी भी जल्दी दिखे (देखें मोबाइल-फ़र्स्ट डिज़ाइन)।
एक बार जब एक पेज लंबा हो जाए, तो इसे कई पेज में विभाजित करें। वेबसाइट संरचना दिखाती है कि ऊपर के सेक्शन साइट मैप में कैसे बदलते हैं।
सामान्य लेआउट गलतियाँ
- संपर्क फ़ॉर्म को केवल एक लंबे पेज के नीचे रखना, हेडर में कोई बटन नहीं।
- फ़ोन-फ़र्स्ट दर्शकों के लिए तीन कॉलम टेक्स्ट; उन कार्ड का उपयोग करें जो साफ़ तरह से एक के ऊपर एक आएँ।
- टेम्पलेट नंबर, समीक्षाएँ या बैज रखना जिन्हें आप साबित नहीं कर सकते।
- आगंतुक को यह जाने बिना गैलरी कि आप क्या करते हैं।
इनमें से एक लेआउट उपयोग करें
यहाँ हर लेआउट We.Inc टेम्पलेट लाइब्रेरी में एक टेम्पलेट है। फ्री प्लान पर आप we.inc पते पर 3 टेम्पलेट साइट तक उपयोग कर सकते हैं (कोई AI क्रेडिट नहीं, कोई कस्टम डोमेन नहीं)। $20/माह पर Starter AI बिल्डिंग जोड़ता है, इसलिए आप "समीक्षाएँ सेवाओं से ऊपर ले जाएँ" जैसे बदलाव माँग सकते हैं, और कस्टम डोमेन; कीमतें देखें। पहले अपना संस्करण वेबसाइट मॉकअप जनरेटर से बनाएँ, फिर परिणाम वेबसाइट ग्रेडर से जाँचें।
अक्सर पूछे जाने वाले सवाल
वेबसाइट लेआउट क्या है?
किसी पेज पर सेक्शन का क्रम और व्यवस्था: पहले क्या दिखता है, क्या साथ-साथ होता है, और मुख्य कॉल टू एक्शन कहाँ जाता है।
छोटे व्यवसाय की वेबसाइट के लिए सबसे अच्छा लेआउट क्या है?
अधिकांश सेवा व्यवसायों के लिए: एक स्पष्ट बटन के साथ हीरो, सेवाएँ, समीक्षाओं जैसे प्रमाण, और संपर्क या कोटेशन फ़ॉर्म, हेडर में बटन दोहराया गया।
होमपेज में कितने सेक्शन होने चाहिए?
जितने आगंतुक के मुख्य सवालों का जवाब देने के लिए चाहिए, और उससे ज़्यादा नहीं। यहाँ के उदाहरण चार से आठ सेक्शन तक हैं।
क्या ये वास्तविक व्यवसाय वेबसाइटें हैं?
नहीं। सभी 25 We.Inc टेम्पलेट डिज़ाइन हैं, जो लेआउट पैटर्न दिखाने के लिए उपयोग किए गए हैं।
मोबाइल पर लेआउट कैसे बदलते हैं?
साथ-साथ बॉक्स उसी क्रम में ऊर्ध्वाधर रूप से एक के ऊपर एक आते हैं, इसलिए सबसे महत्वपूर्ण आइटम बाईं ओर रखें और मुख्य बटन ऊपर के पास रखें।
लेआउट और संरचना में क्या अंतर है?
लेआउट एक पेज की व्यवस्था है। संरचना यह है कि पूरी साइट में पेज कैसे जुड़ते हैं: पदानुक्रम, URL और आंतरिक लिंक।
फ़्री में शुरू करें · क्रेडिट कार्ड की ज़रूरत नहीं
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App