डिजाइन में प्रवाह - लेआउट और आर्टवर्क जो मोशन को व्यक्त करता है

07 में से 01

विजुअल फ्लो क्या है?

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

दृश्य प्रवाह कई तरीकों से हासिल किया जा सकता है:

निम्नलिखित छवियां आपको वेब पृष्ठों पर प्रवाह में कुछ सामान्य गलतियों और उन्हें सही करने के तरीके दिखाएंगी।

07 में से 02

पश्चिमी पाठ बाएं से दाएं तक बहता है

गलत प्रवाह छवि सौजन्य एम Kyrnin

यदि आप एक पश्चिमी भाषा पढ़ रहे हैं, तो आप सोचते हैं कि टेक्स्ट बाएं से दाएं स्थानांतरित होना चाहिए। इसलिए, जैसे ही आंख टेक्स्ट की एक पंक्ति में चली जाती है, यह बाएं से दाएं चलती है।

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

03 का 03

आपका पाठ छवियों के साथ बहना चाहिए

सही प्रवाह छवि सौजन्य एम Kyrnin

इस मामले में, छवि को उलट दिया गया है ताकि पाठ पानी के समान दिशा में बह रहा हो। सभी तत्व दर्शक के आंख को पानी के प्रवाह और पाठ के प्रवाह के साथ नीचे ले जाते हैं।

07 का 04

बाएं से दाएं बराबर बराबर है

गलत प्रवाह छवि सौजन्य एम Kyrnin

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

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

05 का 05

धीमी गति से दर्शक की आंख को मजबूर मत करो

सही प्रवाह छवि सौजन्य एम Kyrnin

जब घोड़ा और पाठ दोनों एक ही दिशा में जा रहे हैं, तो अंतर्निहित गति बढ़ जाती है।

07 का 07

वेब फोटो में आंखें देखें

गलत प्रवाह छवि सौजन्य जे Kyrnin

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

जैसा कि आप देख सकते हैं, मेरी तस्वीर कुछ पाठ के बगल में रखी गई है। लेकिन मैं उस पाठ से दूर देख रहा हूं, मैंने लगभग अपनी पीठ को बदल दिया है। यदि आपने समूह में दो लोगों के बीच उस शरीर की भाषा को देखा है, तो यह मानना ​​आसान होगा कि मुझे उस व्यक्ति को पसंद नहीं है जो मैं आगे हूं (इस मामले में पाठ का ब्लॉक)।

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

07 का 07

किसी भी तस्वीर में आंखों को सामग्री का सामना करना चाहिए

सही प्रवाह छवि सौजन्य जे Kyrnin

के लिए नए डिजाइन में, तस्वीर थोड़ा बेहतर है। अब मेरी आंखें और आगे की ओर देख रही हैं, और एक मामूली संकेत है कि मैं अपने बाएं को देख रहा हूं - जहां टेक्स्ट है।

उस स्थिति के लिए एक बेहतर तस्वीर भी होगी जहां मेरे कंधे को पाठ की ओर भी लगाया गया था। लेकिन यह पहली तस्वीर की तुलना में एक बेहतर समाधान है। और, ऐसी परिस्थितियों के लिए जहां छवि सामग्री के साथ-साथ बाईं ओर भी होगी, यह एक अच्छा समझौता हो सकता है।

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