एक वेबसाइट डिजाइन करें

लेखक: Judy Howell
निर्माण की तारीख: 25 जुलाई 2021
डेट अपडेट करें: 1 जुलाई 2024
Anonim
वेबसाइट कैसे डिज़ाइन करें - एक UX वायरफ्रेम ट्यूटोरियल
वीडियो: वेबसाइट कैसे डिज़ाइन करें - एक UX वायरफ्रेम ट्यूटोरियल

विषय

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

कदम बढ़ाने के लिए

2 की विधि 1: 3 मूल नियम

  1. नियम 1:अपने ग्राहक की सुनो। आप एक साइट के लिए अमीर अश्वेतों, परिष्कृत फोंट, और उज्ज्वल, कलात्मक रंगों के साथ "दुनिया की सबसे बड़ी वेबसाइट को ब्रह्मांड और उससे आगे के इतिहास में" डिजाइन कर सकते हैं जो चिल्लाती है "अब मुझे तलाशो!" दुर्भाग्य से, आपका ग्राहक उज्ज्वल गुलाबी और नारंगी अक्षरों के साथ नारंगी मेनू बार चाहता था। आपको निकाल दिया गया है, और आपकी अब तक की सर्वश्रेष्ठ वेबसाइट - जिस पर ग्राहक का अधिकार है - कहीं उनकी बैकअप डिस्क पर है, तो कभी किसी को फिर से देखे बिना।
    • अपने ग्राहक की कॉर्पोरेट पहचान का अध्ययन करें। क्या क्लाइंट आपको कुछ वेबसाइट दिखाते हैं जो उन्हें पसंद हैं। न केवल यह आपको एक विचार देगा कि वे क्या पसंद करते हैं, यह आपको कुछ डिजाइन विचार भी देगा जो आपने नहीं सोचा होगा।
    • यदि आपको लगता है कि हम नारंगी और गुलाबी वेबसाइट के बारे में मजाक कर रहे थे, तो इस शांत, परिष्कृत साइट पर विचार करें:
  2. नियम # 2:अपने दर्शकों को जानें और वे क्या देख रहे हैं और तदनुसार अपने डिजाइन को अनुकूलित करें। लोगों के पास वेबसाइट होने का कारण यह है कि वे चाहते हैं कि अन्य लोग उन्हें देखें। यह सूचनात्मक या व्यावसायिक हो सकता है, या एक विशिष्ट लक्षित दर्शकों का मनोरंजन करने के लिए हो सकता है। एक डिजाइनर के रूप में आपका काम यह जानना है कि आप किसके लिए डिज़ाइन कर रहे हैं, और जब वे वहाँ उतरते हैं, तो उन्हें पृष्ठ पर रखना होगा।
    • आप सोच सकते हैं, "अगर यह अच्छा लग रहा है, तो वे रहेंगे।" लेकिन इसके लिए जरूरी नहीं कि ऐसा ही हो। उदाहरण के लिए, रियल एस्टेट को लें। यहां एक साफ, मजेदार डिजाइन के साथ एक साइट है। इसमें बहुत सारे सफेद स्थान हैं जो एक खुले रूप, चमकीले रंग और एक प्रमुख स्थान में लिंक के साथ एक आधुनिक वाइडस्क्रीन प्रारूप देते हैं:
    • अब उसी क्षेत्र में अचल संपत्ति बेचने के लिए इस दृष्टिकोण पर एक नज़र डालें: बरबाद और बहुत व्यस्त, सुस्त रंग, और विज्ञापन में कवर किया गया।
    • लगता है कि जो एक घर की तलाश में बेहतर काम करता है? सही, एक जहां मकानों! जब लोग "सांता मोनिका में बिक्री के लिए घरों" की खोज करते हैं, तो वे परवाह नहीं करते हैं कि साइट क्या दिखती है। वे एस्टेट एजेंट के बारे में नहीं पढ़ना चाहते या शहर की सुंदर तस्वीरें नहीं देखना चाहते। वे मकान देखना चाहते हैं।
  3. नियम # 3:स्वयं को सुनो। आप समझते हैं कि ग्राहक क्या चाहता है और आप जानते हैं कि आपका बाजार क्या देख रहा है। अब अंत में आप पर ध्यान देने का समय है, डिजाइनर!
    • अपनी पसंद के ग्राफिक्स सॉफ्टवेयर में एक टेम्पलेट बनाएँ। अपने पृष्ठ के तत्वों को विभिन्न परतों पर बनाएं (ताकि आप बाद में पूरे टेम्पलेट को नष्ट किए बिना चीजों को मोड़ सकें)। ये तत्व हो सकते हैं:
      • हैडर। यह एक ऐसा तत्व है जो आपकी साइट के प्रत्येक पृष्ठ पर समान है। शीर्षलेख में साइट का शीर्षक और लोगो होता है, साथ ही वेबसाइट के अन्य भागों (जैसे के बारे में, संपर्क, आदि) के लिंक भी होते हैं। नेत्रहीन और व्यावहारिक रूप से यह सभी को एक साथ जोड़ देगा। मेन्यू बार के पहले बटन को होमपेज पर वापस जोड़ना अच्छा रहता है।
      • उदाहरण के लिए, आइए Apple पर एक नज़र डालें:
      • अधिकांश Apple सामानों की तरह, उनके होमपेज में बहुत साफ, सरल डिजाइन है। शीर्ष पर मेनू बार को नोट करें, प्रत्येक बटन के लिए तार्किक विषयों के साथ, एक खोज क्षेत्र - हमेशा अच्छा विचार अगर आपकी साइट इसका समर्थन करती है। अब कुछ तत्वों को देखने के लिए एक बटन, iPad के लिए एक लैंडिंग पृष्ठ देखें।
      • आईपैड बटन को डार्क करने से ही मेन्यू बार बदलता है।
      • लैंडिंग पृष्ठ का विषय बड़े काले अक्षरों में प्रदर्शित होता है।
      • एक नया सबमेनू दिखाई देगा ताकि आप उत्पाद के बारे में अधिक जान सकें। यदि आप इनमें से किसी एक बटन पर क्लिक करते हैं, तो आप देखेंगे कि प्रत्येक पृष्ठ विषय के आधार पर नई सामग्री प्रदान करता है, लेकिन लेआउट और डिज़ाइन में समान होगा।
      • अक्सर बार, आपके मेन्यू बार के प्रत्येक मुख्य विषय में आपको भरने के लिए अलग-अलग सबहेडिंग होंगे। दूसरा मेन्यू बार बनाने के बजाय, आप पॉपअप मेनू का उपयोग कर सकते हैं जैसे संगीतकार फ्रेंड्स से।
      • साइडबार। यह आपकी साइट के कई पृष्ठों पर दिखाई देगा, लेकिन जरूरी नहीं कि सभी - संदर्भ निर्धारित करता है। हालाँकि, यह एक बहुत ही महत्वपूर्ण तत्व है और इसे सावधानीपूर्वक डिज़ाइन किया जाना चाहिए और बहुत अधिक अव्यवस्थित नहीं होना चाहिए। मेनू बार के विपरीत, एक साइडबार की सामग्री बहुत गतिशील हो सकती है। रियल एस्टेट बाजार से इन दो साइडबार की जाँच करें ट्रुलिया खरीदारों के लिए सबसे पहले है:

विधि 2 के 2: दिशानिर्देश

  1. एक अच्छा यूजर इंटरफेस डिजाइन करें। वेबसाइट के विभिन्न तत्वों जैसे शीर्षक, साइडबार, लोगो, चित्र और पाठ को एक ही स्थान पर प्रत्येक पृष्ठ पर अपनी साइट को नौगम्य और सहज बनाने के लिए रखें।
    • प्रत्येक पृष्ठ के शीर्ष पर एक ही शीर्ष लेख रखें। आपकी साइट की सामग्री बहुत सारे दोहराए जाने वाले तत्वों की अनुमति देती है या नहीं, सुनिश्चित करें कि हर पृष्ठ का शीर्ष समान है।
    • अपने डिजाइन में तर्क का प्रयोग करें। एक पृष्ठ पर तत्वों को तार्किक रूप से महत्व या विषय द्वारा आदेश दिया जाना चाहिए; साइट पर अलग-अलग पृष्ठ भी होने चाहिए।
  2. एक सुसंगत शैली बनाएं। जहां लेआउट को आपकी साइट को संरचनात्मक स्थिरता देनी चाहिए, वहीं शैली को विषयगत सामंजस्य प्रदान करना चाहिए।
    • दो या तीन मुख्य रंगों से चिपकें और सुनिश्चित करें कि वे एक साथ अच्छी तरह से चलते हैं।
    • बहुत से फ़ॉन्ट शैलियों या आकारों का उपयोग करने से बचें; यदि आप कुछ को वैकल्पिक करना चाहते हैं, तो उन्हें प्रत्येक पृष्ठ पर उसी तरह उपयोग करें।
    • एक समान शैली बनाए रखने के लिए और एक अलग वेबसाइट पर तत्वों को बदलने के लिए आसान बनाने के लिए कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग करें प्रत्येक पृष्ठ पर अलग से जाने के बिना।
  3. पठनीयता को अधिकतम करें। अपने पाठ को पढ़ने में आसान बनाने के लिए, आप इसे छोटे भागों में विभाजित कर सकते हैं।
    • प्रत्येक भाग को अलग करने के लिए उपशीर्षक और उचित रिक्ति का उपयोग करें।
    • विषयों के पदानुक्रम और महत्व को दिखाने के लिए बोल्ड अक्षरों या विभिन्न आकारों का उपयोग करें।
    • इस बात पर ध्यान दें कि आप पाठ का उपचार कैसे करते हैं फ़ॉन्ट को बहुत छोटा न करें, और पाठ की बड़ी मात्रा को पढ़ने के लिए आसान बनाने के लिए लाइन रिक्ति को बढ़ाएं। पाठ के बड़े पैच पढ़ने में अधिक कठिन हैं; इसे छोटे अनुच्छेदों में विभाजित करें।
  4. अपनी वेबसाइट को सार्वभौमिक रूप से पठनीय बनाएं। मानक HTML का उपयोग करें और केवल एक ब्रांड या एक ब्राउज़र के संस्करण के लिए उपलब्ध टैग, सुविधाओं और प्लग-इन से बचें।
    • जबकि अधिकांश आधुनिक ब्राउज़र और कंप्यूटर जटिल छवियों को संभाल सकते हैं, अगर आप वेब के लिए अपनी छवियों को सिकोड़ते और अनुकूलित करते हैं, तो सब कुछ धीमा लगेगा। गति के महत्व के खिलाफ गुणवत्ता के महत्व का वजन।
  5. अपनी वेबसाइट का परीक्षण करें। सुनिश्चित करें कि हर कड़ी काम करती है जैसा कि आप उम्मीद करेंगे, और सही ढंग से दिखाई देने वाली छवियां।
    • आप अपने लक्षित दर्शकों के सदस्यों को अपने डिज़ाइन के उपयोग की स्पष्टता और आसानी का परीक्षण करने और अपनी वेबसाइट के बारे में प्रतिक्रिया प्रदान करके कुछ उपयोगकर्ता परीक्षण आयोजित करना चाह सकते हैं।
  6. अपनी वेबसाइट प्रकाशित करें। यदि आपने पहले से कोई डोमेन नाम नहीं खरीदा है। समय-समय पर जांचें कि क्या लिंक अभी भी काम कर रहे हैं और उन सुझावों को सुनें जो आगंतुक आपको ईमेल करते हैं।

टिप्स

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

चेतावनी

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