10 आम डिजाइन गलतियाँ… और उनसे कैसे बचें

डिजाइन का काम एक जटिल व्यवसाय है। यह गड़बड़ करना बहुत आसान है।

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

तो आप इन आम गलतियों से कैसे बच सकते हैं? इन बहुत से प्रचलित नुकसानों से बचने में आपकी मदद करने के लिए ध्यान केंद्रित किए गए कुछ सुझावों और सुझावों के लिए पढ़ें।

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

1. एज केसेस के लिए योजना का अभाव (लोरम इप्सम को ना कहना)

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

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

विशेष रूप से, इससे पहले कि आप UI डिज़ाइन पर काम करना शुरू करें, आपको यह जानना होगा कि पेज के प्रत्येक और हर हिस्से में किस तरह की सामग्री दिखाई जाएगी। आपको सामग्री का न्यूनतम और अधिकतम आकार (यानी, पाठ की कितनी पंक्तियाँ, छवि आकार) जानना होगा। इन मोड़ बिंदुओं को किनारे के मामले कहा जाता है क्योंकि वे दिखाते हैं कि इंटरफ़ेस कब और कैसे बदल जाएगा।

छवियों का चयन

आप छवि सीमाओं की जांच भी करना चाहते हैं। यदि आपके ग्राहक के पास कोई कस्टम फ़ोटो नहीं है या आप कोई भी खरीदारी करने नहीं जा रहे हैं, तो Unsplash से सुंदर लेकिन व्यर्थ फ़ोटो का उपयोग करने का कोई अर्थ नहीं है।

क्यों? तस्वीरें वैचारिक होती हैं। यह कुछ सुंदर का उपयोग करने के लिए पर्याप्त नहीं है। इसके बजाय, आपको उन छवियों का चयन करना होगा जो एक कथा बनाते हैं या एक गहरा अर्थ का अर्थ करते हैं।

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

दोहराए जाने वाले ब्लॉक को समझना

एक और बढ़त का मामला ब्लॉकों को दोहराने से संबंधित है - उदाहरण के लिए, छवि + पाठ, आइकन + पाठ, संख्या + पाठ, और इसी तरह। आपको यह सोचना चाहिए कि ये खंड पाठ की दो पंक्तियों और दस के साथ कैसे दिखेंगे, साथ ही साथ वे एक-एक करके खड़े होंगे।

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

स्केलिंग के लिए योजना

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

2. अपर्याप्त स्क्रीन एनोटेशन

अगली बड़ी गलती जो बचने के लिए बेहतर है, वह आपके डिजाइनों में एनोटेशन की कमी है।

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

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

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

3. निराशाजनक स्थिति

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

डिजाइनरों को राज्यों के बारे में उपयोगकर्ताओं को स्पष्ट प्रतिक्रिया प्रदान करनी चाहिए, विशेषकर त्रुटि राज्यों के मामले में। तदनुसार, त्रुटि सूचनाओं को निम्नलिखित सरल नियमों को पूरा करना चाहिए:

  • उन्हें पहचानने योग्य और ध्यान देने योग्य होना चाहिए (जैसे, रंग लाल एक सामान्य यूआई पैटर्न है जो त्रुटि का संकेत देता है)।
  • उन्हें स्पष्ट रूप से बताना चाहिए कि क्या हुआ है और उपयोगकर्ता त्रुटि को कैसे ठीक कर सकते हैं।
  • उन्हें प्रासंगिक होना चाहिए। जिस तत्व से वे संबंधित हैं, उसके पास त्रुटि संदेश दिखाना बेहतर है।
  • उन्हें चिड़चिड़ा नहीं होना चाहिए। क्या आपका उपयोगकर्ता पहले से ही त्रुटि से परेशान नहीं है?

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

फॉर्म चेक से सावधान रहना

त्रुटि वाले राज्यों को डिज़ाइन करते समय, अपने उपयोगकर्ताओं को परेशान न करने की पूरी कोशिश करें। विशेष रूप से, सभी संभावित प्रकार के फॉर्म चेक से सावधान रहें।

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

हमारा गरीब उपयोगकर्ता यह कह रहा है, "रुको, दोस्त, मैं सिर्फ फॉर्म फ़ील्ड के बीच क्लिक कर रहा हूं और ed सबमिट 'पर क्लिक नहीं किया है!" और चीजें और भी खराब हो सकती हैं। उदाहरण के लिए, मान लें कि आपके पास एक और चेक है, और "सबमिट" बटन तब तक अक्षम हो जाएगा, जब तक सभी आवश्यक फ़ील्ड खाली न हों।

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

लागत और मूल्य का वजन

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

4. बहुत-से खाली राज्य

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

हर पृष्ठ या अनुभाग पर कोई डेटा न होने पर आपका UI कैसा दिखेगा? क्या यह अनुकूल या निराशाजनक होगा? क्या यह अच्छा लगेगा, या यह टूटा हुआ दिखेगा? क्या उपयोगकर्ता समझ पाएंगे कि वे कहां हैं और राज्य का मतलब क्या है?

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

5. टाइपोग्राफी पदानुक्रम का अभाव

अगला, एक और विषय जो कई डिज़ाइन गलतियों का कारण बनता है, बेहतर है - टाइपोग्राफी।

पाठ सूचनात्मक सामग्री की प्राथमिक इकाई है। इसलिए यह पठनीय, पहचानने योग्य और सुव्यवस्थित होना चाहिए। उचित रूप से स्वरूपित पाठ उपयोगकर्ताओं की जानकारी की धारणा को सुविधाजनक बनाता है, जो उन्हें ध्यान में रखता है कि वास्तव में क्या महत्वपूर्ण है।

फ़ॉन्ट और फ़ॉन्ट शैलियों का उपयोग करना

फोंट के साथ खेलना मजेदार हो सकता है। लेकिन अगर कोई व्यक्ति कुछ ऐसा पढ़ने की कोशिश कर रहा है जो एक पैराग्राफ में दस बार परिवर्तन करता है, तो यह जल्दी से थकाऊ और कष्टप्रद हो जाता है।

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

केरिंग पर ध्यान देना

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

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

दृश्य पदानुक्रम बनाए रखना

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

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

6. अपर्याप्त पैडिंग और रिक्ति

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

समान आकार के रिक्त स्थान तार्किक ब्लॉकों (जैसे, ऊपर और नीचे, और बाईं और दाईं ओर) के आसपास सेट होने चाहिए। यदि स्थान असमान हैं, तो आपका पृष्ठ गड़बड़ दिखाई देगा, और उपयोगकर्ता प्रत्येक अनुभाग को समान विचार नहीं दे सकते हैं।

बहुत छोटे साधनों का उपयोग करने से उपयोगकर्ता तार्किक ब्लॉक में सामग्री को तोड़ नहीं सकते हैं। तार्किक भागों को एक साथ सम्मिश्रण रखने के लिए, उन्हें अलग रखें और उनके बीच एक बड़ा स्थान डालें।

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

  • हेडिंग-पेडिंग-बॉटम को 40px पर सेट करें, फिर टेक्स्ट के पैराग्राफ के साथ इसका पालन करें।
  • पैराग्राफ पैडिंग-बॉटम को 10px पर सेट करें।
  • यदि पैराग्राफ़ के बाद एक उपशाखा है, तो उसे पैडिंग-टॉप के लिए 30px दें (यानी, पैराग्राफ़ और उप-शीर्ष के बीच का स्थान 30px होगा) और पैडिंग-बॉटम के लिए 20px (यानी, उप-शीर्ष और पैराग्राफ़ के बीच का स्थान) 20px होगा, जो पैराग्राफ के बीच की जगह से बड़ा है)।

यह सबसे महत्वपूर्ण और सबसे बड़े तत्वों पर वांछित जोर देगा। सबसे बड़ा पाठ - शीर्षक - के चारों ओर बड़ा स्थान है। लेकिन यह स्थान संबंधित तत्वों के करीब होना चाहिए जो इसका पालन करते हैं।

7. गन्ध चिह्न

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

अनुप्रयोगों में, आइकन अक्सर बटनों के बराबर होते हैं। बस इंस्टाग्राम देखें: आप केवल आइकन और टेक्स्ट देखेंगे।

यही कारण है कि तत्व के अर्थ के अनुरूप सही दृश्य छवि का चयन करना बहुत महत्वपूर्ण है। सरल लगता है, है ना? नहीं। दुनिया का हर डिज़ाइनर जानता है कि सही आइकन का पता लगाना कितना दर्दनाक हो सकता है।

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

हो सकता है कि आपने मुफ्त आइकन खोजे हों, और जब आप प्रत्येक तत्व के लिए एक अच्छी छवि पाकर रोमांचित थे। आप सोचते हैं, वे पूरी तरह से एक-दूसरे के अनुरूप हैं! वे सभी के लिए समझ में आ जाएगा! अफसोस की बात है, किसी भी तरह, आपके द्वारा चयनित आइकन का समग्र प्रभाव गड़बड़ और अस्वस्थ महसूस होता है। आप इस तरह की गंदगी से कैसे बच सकते हैं? यहाँ आपके लिए एक छोटी सूची है:

  • लाइन की चौड़ाई - आकार बदलने के बाद, आपके सभी आइकनों में समान लाइन चौड़ाई होनी चाहिए। अन्यथा, यह बहुत ध्यान देने योग्य होगा कि वे नहीं करते हैं।
  • कॉर्नर त्रिज्या - यदि आपके आइकन में कुछ आयताकार आकार शामिल हैं, तो अपने सेट में हर आइकन के कोने त्रिज्या की तुलना करें। यदि यह अलग-अलग आइकन के लिए अलग है, तो आप इसे ठीक कर सकते हैं।
  • लाइन कैप आकार (उल्लिखित आइकन के लिए) - यह आयताकार या गोल हो सकता है।
  • कॉर्नर आकार में शामिल होते हैं (उल्लिखित आइकन के लिए) - यह आयताकार या गोल हो सकता है।

यह सच है कि अपरिष्कृत उपयोगकर्ता विशेष रूप से अलग-अलग लाइन चौड़ाई या कोने के दायरे को नोटिस नहीं कर सकते हैं। फिर भी, समग्र प्रभाव गलत होगा, और उपयोगकर्ता इसे महसूस करेंगे।

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

यही कारण है कि मेरी सलाह है कि नि: शुल्क आइकन के साथ कड़ाई से चयन किया जाए या - इससे भी बेहतर - खुद के डिजाइन आइकन। कस्टम आइकन हमेशा एक बेहतर अनुभव प्रदान करते हैं।

8. कम कंट्रास्ट

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

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

इसके विपरीत के बारे में महत्वपूर्ण बात यह है कि विषम तत्व पूरी तरह से अलग होना चाहिए। न सिर्फ थोड़ा अलग - एक ध्यान देने योग्य, बोल्ड अंतर।

व्हाइट स्पेस का उपयोग करना

यदि आपने दो अलग-अलग तत्वों को एक-दूसरे के बहुत करीब रखा है, तो उपयोगकर्ता ने यह नहीं समझा कि कौन सा तत्व "मुख्य" है। इसलिए हम कह सकते हैं कि कंट्रास्ट केवल विभिन्न दृश्य शैलियों को तत्वों में लागू करने के बारे में नहीं है, बल्कि सफेद स्थान का उपयोग करने की कला के बारे में भी है। ऐसा इसलिए है क्योंकि, कभी-कभी, तत्वों के विपरीत बनाने के लिए, आपको उन्हें रिक्त स्थान के साथ अलग करने की आवश्यकता होती है।

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

पाठ और छवियों के बीच पर्याप्त कंट्रास्ट सुनिश्चित करना

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

एक अन्य विकल्प शुरू से ही एक विपरीत छवि का उपयोग करना है। इस स्थिति में, आप कॉपी को फोटोग्राफ या छवि के एक अंधेरे खंड के ऊपर रख सकते हैं।

कंट्रास्ट ओवरडोज से बचना

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

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

9. क्रॉस-प्लेटफ़ॉर्म पर सोचने में असफल होना

हां, आदर्श रूप से, यह आज की दुनिया में कोई समस्या नहीं होनी चाहिए। हम सभी जानते हैं कि अधिकांश उपयोगकर्ता मोबाइल उपकरणों से वेब सेवाओं का उपयोग करते हैं। दुर्भाग्य से, कई डिजाइनरों में अभी भी उस तथ्य को भूलने की प्रवृत्ति है। (या शायद यह है कि ग्राहक मोबाइल-अनुकूलित डिज़ाइन बनाने के लिए पैसे से अधिक नहीं लेना चाहते हैं?)

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

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

10. बहुत ज्यादा डिजाइन

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

उदाहरण के लिए, किसी पृष्ठ पर बहुत सारे रंगों का उपयोग करना भ्रामक है; यह स्पष्ट हो जाता है कि कौन से बिट्स अधिक महत्वपूर्ण हैं। जो वास्तव में महत्वपूर्ण है, उसे दृश्यता देने के लिए एक या दो रंग पर्याप्त हैं।

फ़ॉन्ट शैली के बारे में हम यही कह सकते हैं। यह हेडलाइंस और सबहेड्स पर जोर देने और कुंजी वाक्यांशों के विपरीत उपयोग करने के लिए पर्याप्त है।

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

क्या आपके डिज़ाइन में गलतियाँ हैं जिन्हें ठीक करने की आवश्यकता है? हमें बताऐ! हमारी शीर्ष पायदान डिजाइन टीम आपको अधिक स्पष्ट और खूबसूरती से संवाद करते हुए डिजाइन पागलपन से बचने में मदद कर सकती है।

लेखक के बारे में

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