डिजाइनिंग सामग्री गहन लेआउट टिप्स और उदाहरण

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

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

कस्टम वेब पेज

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

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

लेआउट वायरफ्रेम

जेनेरिक 5-पेज की वेबसाइट के लिए आप अक्सर उन्हीं तत्वों को बार-बार देखेंगे। एक शीर्ष कोने का लोगो, सिर नेविगेशन लिंक, मुख्य सामग्री क्षेत्र संभवतः एक साइडबार और अन्य कार्यक्षमता (लॉगिन, खोज बॉक्स, आदि) के साथ विभाजित हो जाता है.

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

सामग्री भारी लेआउट के साथ यह ध्यान में रखा जाना चाहिए कि प्लेटफ़ॉर्म में कितना होगा। 100 + लंबे पृष्ठों की मेजबानी के लिए एक बंद 2-3 कॉलम लेआउट का निर्माण, जटिल सामग्री श्वास स्थान के लिए बहुत जगह नहीं छोड़ेगी। स्केचिंग और आगे की योजना बनाकर आप पृष्ठ सामग्री के लिए विशाल कमरे की मात्रा को नियंत्रित कर सकते हैं। यह केवल पाठ या ब्लॉक क्षेत्रों को एनकैप्सुलेट नहीं करता है बल्कि छवियों और वीडियो से भी संबंधित है.

शानदार व्हाइट स्पेस

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

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

यदि आप अपने पाठक का ध्यान आकर्षित करना चाहते हैं, तो प्रमुख पाठ तत्वों के नीचे रिक्ति लागू करना महत्वपूर्ण है। पैराग्राफ और छोटे हेडिंग 15px-25px बॉटम मार्जिन के साथ सबसे अच्छा काम करते हैं। बड़े पृष्ठ तत्वों जैसे h1 या h2 के लिए 35px + पर विचार करें (यह आपके फ़ॉन्ट आकार पर भी निर्भर करेगा)। ऊर्ध्वाधर तत्वों के बीच रिक्त स्थान स्क्रॉलिंग और "एट-ए-नज़र" स्कैनिंग के लिए महत्वपूर्ण है। हालाँकि ऊंची लाईन एक और महत्वपूर्ण सीएसएस संपत्ति है जो एक पाठ तत्व में लाइनों के बीच अंतर को प्रभावित करती है। अनुच्छेदों में उनके फ़ॉन्ट आकार की तुलना में बहुत बड़ा लाइन-ऊंचाई मान होना चाहिए ताकि लाइनों के बीच अतिरिक्त पैडिंग हो.

डायनेमिक स्टाइल्स पर विचार करें

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

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

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

ड्रॉपडाउन मेनू का उपयोग करें

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

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

संभवतः सबसे तेज और कम से कम निराशाजनक रणनीति एक जावास्क्रिप्ट ढांचे के साथ शुरू होनी है। सबसे लोकप्रिय में से कुछ jQuery, MooTools, या संभवतः प्रोटोटाइप शामिल हैं। ये सभी पुस्तकालय प्रलेखन प्रदान करते हैं और कई में मुफ्त ड्रॉप डाउन मेनू स्क्रिप्ट उपलब्ध हैं.

योजना सामग्री दृश्य

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

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

योजना रणनीतियाँ पूरी तरह से

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

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

7 भारी-सामग्री वेबसाइटों के उदाहरण

नीचे लोकप्रिय सामग्री-भारी वेबसाइटों के कुछ उदाहरण स्क्रीनशॉट दिए गए हैं। ये ज्यादातर भौतिक और डिजिटल दोनों बाजारों में जाने-माने ब्रांड हैं। अपनी खुद की परियोजनाओं में कुछ प्रेरणा पाने के लिए नीचे दिए गए कुछ विचारों की जाँच करें। टिप्पणी अनुभाग में अन्य सामग्री भारी वेब लेआउट साझा करने के लिए भी स्वतंत्र महसूस करें.

क्लिकर

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

वेब डिज़ाइन का भविष्य

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

भगवान की तरह

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

माइक्रोसॉफ्ट

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

खोज इंजन भूमि

सर्च इंजन लैंड एक लोकप्रिय वेब पत्रिका है जो सर्च इंजन और इंटरनेट मार्केटिंग पर केंद्रित है। वे अक्सर अद्भुत गुणवत्ता वाले पदों के साथ अपडेट होते हैं और हर दिन सैकड़ों हजारों लोगों को अपनी साइट पर भेजते हैं। मुख्य पृष्ठ प्रत्येक सामग्री मॉड्यूल और विज्ञापन को रखने के लिए उपयोग किए जाने वाले 3 कॉलमों में विभाजित होता है.

सफेद घर

यूनाइटेड स्टेट्स व्हाइट हाउस का डिज़ाइन बहुत साफ और पेशेवर दिखता है। राष्ट्रपति के कार्यक्रम और अन्य महत्वपूर्ण राजनीतिक घटनाओं के बारे में बहुत सारी जानकारी है। पेज रूम को कम करने के लिए एक ट्रिक पेज हेडिंग की ओर एक छोटे कंटेंट स्लाइडर को जोड़ने का काम करती है। जब आपके विज़िटर पृष्ठ पर आते हैं, तो 3-4 बड़ी समाचार सुर्खियाँ प्रदर्शित करने के लिए यह बहुत अच्छा है.

याहू पोर्टल

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

निष्कर्ष

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