विजुअल कंटेंट डायरेक्शन जो आपको जानना जरूरी है

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

सौंदर्यशास्त्र एक भूमिका निभाते हैं, लेकिन इसके बारे में अधिक है डिजाइन का समग्र अनुभव. यह भावना व्हॉट्सएप, टाइपोग्राफी, समरूपता से प्रभावित हो सकती है, लेकिन ज्यादातर रिश्तों पृष्ठ तत्वों के बीच.

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

इस पोस्ट में, मैं आपको कुछ टिप्स दिखाना चाहूंगा कि आप कैसे कर सकते हैं अपने लेआउट और दृश्य सामग्री प्रवाह में सुधार करें अपनी साइट पर.

रचना पर ध्यान दें

एक वेबसाइट का हर एक टुकड़ा बनाता है समग्र लेआउट पर. यह समग्र लेआउट एक रचना बनाता है जो गेस्टाल्ट सिद्धांत के नियमों का पालन करता है जो बताता है कि संपूर्ण हमेशा भागों के योग से अधिक होता है.

किसी पृष्ठ के व्यक्तिगत क्षेत्र एक साथ आते हैं एक पूरा फार्म. डिजाइन तत्वों को बनाने की जरूरत है गुरुत्वीय खिंचाव सामग्री पर; पेज पर सब कुछ होना चाहिए जब तक वे पृष्ठ के निचले भाग तक नहीं पहुंचते, तब तक स्वाभाविक रूप से आगंतुकों को और नीचे गाइड करते हैं.

यही कारण है कि सामग्री के विभिन्न भागों (दृश्य, पाठ, बटन, आदि) के बीच संबंध डिजाइन करने के लिए बहुत मायने रखते हैं.

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

Monkop के लिए होम पेज दृश्य पदानुक्रम के साथ एक बेहतरीन उदाहरण है पाठ और दृश्य दोनों. तत्वों के बीच बहुत जगह का उपयोग किया जाता है, और टाइपोग्राफी ब्रांडेड वेक्टर चित्रण का पूरक है.

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

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

ए समान डिजाइन सौंदर्य फ़ोटो और स्केच उपयोगकर्ताओं के लिए फ़ोटो एडोन के लिए लैंडिंग पृष्ठ पिकाजुबो की वेबसाइट पर पाया जा सकता है.

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

कुल मिलाकर, पेज लगता है खुला तथा ब्राउज़ करना आसान है. सामग्री है क्षैतिज ब्लॉकों में विभाजित कुरकुरा टाइपोग्राफी और साफ आइकन के साथ.

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

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

मेरा सुझाव है कि आप अपने आला में अन्य वेबसाइटों का अध्ययन करें। वास्तव में विश्लेषण करें कि वे एक साथ कैसे रखे गए हैं। यहां तक ​​कि लेआउट के पुनर्निर्माण की कोशिश करें यह देखने के लिए कि कौन से तत्व आखिरकार डिजाइन को "एक साथ आते हैं".

टाइप डिज़ाइन मैटर्स

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

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

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

कुछ बातें जिन पर आप विचार कर सकते हैं:

• शब्दों का आकर
• फ़ॉन्ट परिवार
• रंग विपरीत
• पृष्ठ अनुभाग संबंध
• लाइन की ऊंचाई और पैराग्राफ मार्जिन
• पत्र रिक्ति और ऊपरी / लोअरकेस

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

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

अभियान मॉनिटर पर टाइपोग्राफिक डिज़ाइन शैलियाँ उत्तम हैं, और वे प्राकृतिक रूप से लेआउट में मिश्रण करें. इस तरह एक परिणाम प्राप्त करने के लिए अभ्यास करना पड़ता है, लेकिन जितना अधिक आप प्रयास करेंगे, उतना आसान होगा.

थोड़ा और जानने के लिए, मैं निम्नलिखित लिंक की अत्यधिक अनुशंसा करता हूं:

• डिजाइन सिद्धांत: दृश्य वजन और दिशा
• अपने डिजाइनों में दृश्य भार के साथ काम करना
• 19 कारक जो प्रभाविक संतुलन को प्रभावित करते हैं

मार्गदर्शक सामग्री

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

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

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

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

आइए एक नज़र डालते हैं लैंडिंग पृष्ठ और ए ब्लॉग डिजाइन मतभेदों को दूर करने के लिए.

कैक्टस ओएस एक्स के लिए एक स्थिर साइट जनरेटर है। उनके होम पेज बारीकी से एप्पल के डिजाइन शैली का अनुसरण करता है - व्हॉट्सएप और पतले सेन्स-सेरिफ़ फोंट के बहुत सारे.

सामग्री को सरल ग्राफिक्स के साथ कॉलम, ब्लॉक, और पाठ के भाग में व्यवस्थित किया जाता है। ये वही सौंदर्यशास्त्र हैं Apple उत्पादों के साथ आम है, इसलिए मैक उपयोगकर्ता इस डिजाइन शैली का आनंद लेंगे.

उत्पाद के बारे में जानकारी - सुविधाओं और सेटअप सहित - होम पेज पर सही सूचीबद्ध हैं। पेज ही स्क्रॉल करने को प्रोत्साहित करता है अद्वितीय सामग्री, बुनियादी आइकन और बाएँ / दाएँ सामग्री ब्लॉक के एक वैकल्पिक कॉलम पैटर्न के माध्यम से.

यहाँ लक्ष्य के लिए जानकारी प्रदान करना है मौजूदा उपयोगकर्ता, और बेचने के लिए नए उपयोगकर्ता कैक्टस का विचार.

अब उस डिज़ाइन की तुलना द नेक्स्ट वेब के होम पेज पर करें। सामग्री है बहुत अधिक छिटपुट ब्लॉग होम पेज पर, क्योंकि वहाँ है विभिन्न पोस्ट विषयों का एक बहुत.

रेक्टैंगल्स एक ग्रिड सिस्टम बनाते हैं जो एनकैप्सुलेट करता है एक लेआउट में कई पोस्ट. यहाँ लक्ष्य है सामग्री को पढ़ने वाले उपयोगकर्ता प्राप्त करें साइट पर। इससे कोई फर्क नहीं पड़ता कि आगंतुक कुछ भी डाउनलोड करते हैं, लेकिन अगर वे करते हैं तो इससे कोई फर्क नहीं पड़ता कुछ पढ़ने के लिए इधर-उधर रहना.

लोगों के पढ़ने का तरीका साथ है बहुत अच्छी तस्वीरें तथा आकर्षक सुर्खियाँ. TNW इसका एक बड़ा काम करता है, और उनका लेआउट है लोगों को ब्राउज़ रखने के लिए बनाया गया है साइडबार और उसके बाद सामग्री क्षेत्र में संबंधित पोस्ट थंबनेल के साथ.

हर साइट पर आगंतुकों को एक विशेष कार्रवाई के लिए मार्गदर्शन करना अलग है। लेकिन आप अन्य सफल साइटों का अध्ययन करके और प्रतिलिपि बनाने के तरीके के बारे में अध्ययन करके बहुत कुछ सीख सकते हैं.

अपनी आंखों पर भरोसा रखें

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

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

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

इसके अलावा सामान की कोशिश करने से डरो मत! किसी को भी डिजाइन अच्छा नहीं लगा केवल डिजाइन के बारे में लेख पढ़ने से। हां, वे मदद करते हैं - वे वास्तव में बहुत मदद कर सकते हैं। परन्तु आप जरुरत सेवा मेरे क्या जानने के लिए स्क्रैच से सामान बनाएं काम करता है और क्या नहीं है.

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

समेट रहा हु

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

अध्ययन आपके द्वारा आनंद लेने वाले पृष्ठ तत्वों वाली वेबसाइटों के सर्वोत्तम उदाहरण. रेल गाडी रिश्तों को पहचानने के लिए आपकी आंख, और आप जल्दी से विकसित करना के लिए आवश्यक कौशल दोहराने अपने काम में उन रिश्तों.