वेब डिजाइन: Difference between revisions
From Vigyanwiki
(modification) |
No edit summary |
||
| Line 1: | Line 1: | ||
{{short description|Creation and maintenance of websites}} | {{short description|Creation and maintenance of websites}} | ||
वेब डिज़ाइन में [[ वेबसाइट |वेवसाइटों]] के उत्पादन और रखरखाव में कई अलग-अलग कौशल और अनुशासन सम्मिलित हैं। वेब डिज़ाइन के विभिन्न क्षेत्रों में वेब ग्राफ़िक डिज़ाइन सम्मिलित है;[[ यूजर इंटरफेस डिजाइन ]] (यूआई डिजाइन); संलेखन, मानकीकृत कोड और[[ मालिकाना सॉफ्टवेयर | मालिकाना सॉफ्टवेयर]] सहित;[[ उपयोगकर्ता अनुभव डिजाइन | उपयोगकर्ता अनुभव डिजाइन]] (यूएक्स डिजाइन); और खोज इंजन | वेब डिज़ाइन में [[ वेबसाइट |वेवसाइटों]] के उत्पादन और रखरखाव में कई अलग-अलग कौशल और अनुशासन सम्मिलित हैं। वेब डिज़ाइन के विभिन्न क्षेत्रों में वेब ग्राफ़िक डिज़ाइन सम्मिलित है;[[ यूजर इंटरफेस डिजाइन ]] (यूआई डिजाइन); संलेखन, मानकीकृत कोड और[[ मालिकाना सॉफ्टवेयर | मालिकाना सॉफ्टवेयर]] सहित;[[ उपयोगकर्ता अनुभव डिजाइन | उपयोगकर्ता अनुभव डिजाइन]] (यूएक्स डिजाइन); और खोज इंजन अनुकूलन है। प्रायः कई लोग टीमों में डिजाइन प्रक्रिया के विभिन्न पहलुओं को कवर करते हुए काम करेंगे, यदपि कुछ डिजाइनर उन सभी को कवर करेंगे।<ref name="different jobs">{{cite web|last=Lester|first=Georgina|title=वेबसाइट बनाने में शामिल विभिन्न लोगों की विभिन्न नौकरियां और जिम्मेदारियां|url=https://www.arts-wales.co.uk/different-jobs-and-responsibilities-of-various-people-involved-in-creating-a-website/|access-date=2012-03-17|publisher=Arts Wales UK}}</ref> वेब डिज़ाइन शब्द का प्रयोग सामान्यतः भाषा की वृद्धि लिखने सहित वेबसाइट के फ्रंट-एंड (क्लाइंट साइड) डिज़ाइन से संबंधित डिज़ाइन प्रक्रिया का वर्णन करने के लिए किया जाता है। वेब डिज़ाइन आंशिक रूप से[[ वेब विकास | वेब विकास]] के व्यापक दायरे में[[ वेब इंजीनियरिंग | वेब इंजीनियरिंग]] को अतिव्यापन करता है। वेब डिज़ाइनरों से अपेक्षा की जाती है कि वे वेब प्रयोज्यता के बारे में जागरूक हों और वेब पहुँच दिशानिर्देशों के साथ अद्यतित रहें। | ||
== इतिहास == | == इतिहास == | ||
| Line 6: | Line 6: | ||
===1988–2001=== | ===1988–2001=== | ||
यदपि वेब डिज़ाइन का हाल ही का इतिहास है, इसे ग्राफिक डिज़ाइन, उपयोगकर्ता अनुभव और मल्टीमीडिया कला जैसे अन्य क्षेत्रों से जोड़ा जा सकता है, लेकिन इसे तकनीकी दृष्टिकोण से अधिक उपयुक्त रूप से देखा जाता है। यह लोगों के प्रतिदिन के जीवन का एक बड़ा हिस्सा बन गया है। एनिमेटेड ग्राफिक्स, टाइपोग्राफी की विभिन्न शैलियों, पृष्ठभूमि, वीडियो और संगीत के बिना इंटरनेट की कल्पना करना कठिन है। नवंबर 1992 में [[ सर्न |सर्न]] सजीव प्रसारित होने वाली पहली वेबसाइट थी। वेब की घोषणा 6 अगस्त, 1991 को की गई थी और | यदपि वेब डिज़ाइन का हाल ही का इतिहास है, इसे ग्राफिक डिज़ाइन, उपयोगकर्ता अनुभव और मल्टीमीडिया कला जैसे अन्य क्षेत्रों से जोड़ा जा सकता है, लेकिन इसे तकनीकी दृष्टिकोण से अधिक उपयुक्त रूप से देखा जाता है। यह लोगों के प्रतिदिन के जीवन का एक बड़ा हिस्सा बन गया है। एनिमेटेड ग्राफिक्स, टाइपोग्राफी की विभिन्न शैलियों, पृष्ठभूमि, वीडियो और संगीत के बिना इंटरनेट की कल्पना करना कठिन है। नवंबर 1992 में [[ सर्न |सर्न]] सजीव प्रसारित होने वाली पहली वेबसाइट थी। वेब की घोषणा 6 अगस्त, 1991 को की गई थी और सीईआरएन वर्ल्ड वाइड वेब पर सजीव प्रसारित होने वाली पहली वेबसाइट थी। इस अवधि के दौरान, वेबसाइटों को <टेबल> टैग का उपयोग करके संरचित किया गया था, जिसने वेबसाइट पर नंबर बनाए। आखिरकार, वेब डिज़ाइनर अधिक संरचनाएँ और प्रारूप बनाने के लिए इसके चारों ओर अपना रास्ता खोजने में सक्षम थे। प्रारंभिक इतिहास में, वेबसाइटों की संरचना नाजुक और कठिन थी, इसलिए उनका उपयोग करना बहुत कठिन हो गया। नवंबर 1993 में [[ ALIWEB |अलीवेब]] बनाया जाने वाला पहला सर्च इंजन था (वेब के लिए आर्ची लाइक इंडेक्सिंग)।<ref>{{Cite web |last=CPBI |first=Ryan Shelley |title=वेबसाइट डिज़ाइन का इतिहास: वेब के निर्माण के 30 साल [2022 अपडेट]|url=https://www.smamarketing.net/blog/the-history-of-website-design |access-date=2022-10-12 |website=www.smamarketing.net |language=en-us}}</ref> | ||
==== वेब और वेब डिजाइन की | ==== वेब और वेब डिजाइन की प्रांरम्भ ==== | ||
1989 में, सी ईआरएन में काम करते हुए,[[ टिक बैरनर्स - ली |टिक बैरनर्स - ली]] ने एक वैश्विक[[ हाइपरटेक्स्ट | हाइपरटेक्स्ट]] प्रोजेक्ट बनाने का प्रस्ताव रखा, जिसे बाद में[[ वर्ल्ड वाइड वेब | वर्ल्ड वाइड वेब]] के रूप में जाना जाने लगा। 1991 से 1993 तक वर्ल्ड वाइड वेब का जन्म हुआ। [[ टेक्स्ट-आधारित[[ वेब ब्राउज़र ]] ]] | टेक्स्ट-ओनली[[ HTML | एचटीएमएल]] पेजों को एक साधारण लाइन-मोड वेब ब्राउज़र का उपयोग करके देखा जा सकता है।<ref name="World Wide Web">{{cite web | 1989 में, सी ईआरएन में काम करते हुए,[[ टिक बैरनर्स - ली |टिक बैरनर्स - ली]] ने एक वैश्विक[[ हाइपरटेक्स्ट | हाइपरटेक्स्ट]] प्रोजेक्ट बनाने का प्रस्ताव रखा, जिसे बाद में[[ वर्ल्ड वाइड वेब | वर्ल्ड वाइड वेब]] के रूप में जाना जाने लगा। 1991 से 1993 तक वर्ल्ड वाइड वेब का जन्म हुआ। [[ टेक्स्ट-आधारित[[ वेब ब्राउज़र ]] ]] | टेक्स्ट-ओनली[[ HTML | एचटीएमएल]] पेजों को एक साधारण लाइन-मोड वेब ब्राउज़र का उपयोग करके देखा जा सकता है।<ref name="World Wide Web">{{cite web | ||
|title=लंबी जीवनी|url=http://www.w3.org/People/Berners-Lee/Longer.html | |title=लंबी जीवनी|url=http://www.w3.org/People/Berners-Lee/Longer.html | ||
|access-date=2012-03-16 | |access-date=2012-03-16 | ||
}}</ref> 1993 में [[ मार्क आंद्रेसेन ]] और [[ एरिक बीना ]] ने [[ मोज़ेक ब्राउज़र ]] बनाया। उस समय कई ब्राउज़र थे, हालाँकि उनमें से अधिकांश यूनिक्स-आधारित और स्वाभाविक रूप से पाठ-भारी थे। [[ ग्राफ़िक डिज़ाइन ]] तत्वों जैसे डिजिटल चित्र या [[ डिजिटल ऑडियो ]] के लिए कोई एकीकृत दृष्टिकोण नहीं था। [[ मोज़ेक (वेब ब्राउज़र) ]] ने इस साँचे को तोड़ दिया।<ref>{{cite web | }}</ref> 1993 में [[ मार्क आंद्रेसेन ]] और [[ एरिक बीना | एरिक बीना]] ने [[ मोज़ेक ब्राउज़र ]] बनाया। उस समय कई ब्राउज़र थे, हालाँकि उनमें से अधिकांश यूनिक्स-आधारित और स्वाभाविक रूप से पाठ-भारी थे। [[ ग्राफ़िक डिज़ाइन ]] तत्वों जैसे डिजिटल चित्र या [[ डिजिटल ऑडियो ]]के लिए कोई एकीकृत दृष्टिकोण नहीं था। [[ मोज़ेक (वेब ब्राउज़र) ]]ने इस साँचे को तोड़ दिया।<ref>{{cite web | ||
|title=मोज़ेक ब्राउज़र|url=http://www.techopedia.com/images/pdfs/history-of-the-internet.pdf | |title=मोज़ेक ब्राउज़र|url=http://www.techopedia.com/images/pdfs/history-of-the-internet.pdf | ||
|access-date=2012-03-16 | |access-date=2012-03-16 | ||
| Line 26: | Line 26: | ||
|page=[https://archive.org/details/buildinginternet00zwic/page/804 804] | |page=[https://archive.org/details/buildinginternet00zwic/page/804 804] | ||
|url=https://archive.org/details/buildinginternet00zwic/page/804 | |url=https://archive.org/details/buildinginternet00zwic/page/804 | ||
}}</ref> इसने किसी एक कंपनी को एक स्वामित्व वाले ब्राउज़र और [[ प्रोग्रामिंग भाषा ]] पर एकाधिकार करने से हतोत्साहित किया, जो पूरी तरह से वर्ल्ड वाइड वेब के प्रभाव को बदल सकता था। डब्ल्यू 3 सी मानक निर्धारित करना जारी रखता है, जिसे आज [[ जावास्क्रिप्ट ]] और अन्य भाषाओं के साथ देखा जा सकता है। 1994 में आंद्रेसेन ने मोज़ेक कम्युनिकेशंस कॉर्प का गठन किया जो बाद में [[[[ नेटस्केप |नेटस्केप]] संचार]], नेटस्केप (वेब ब्राउज़र) | नेटस्केप 0.9 ब्राउज़र के रूप में जाना जाने लगा। नेटस्केप ने पारंपरिक मानकों की प्रक्रिया पर ध्यान दिए बिना अपने स्वयं के एचटीएमएल टैग बनाए। उदाहरण के लिए, नेटस्केप 1.1 में पृष्ठभूमि के रंग बदलने और वेब पेजों पर एचटीएमएल तत्व,तालिकाओं के साथ पाठ को स्वरूपित करने के लिए टैग सम्मिलित थे। 1996 से 1999 तक [[ ब्राउज़र युद्ध ]] | }}</ref> इसने किसी एक कंपनी को एक स्वामित्व वाले ब्राउज़र और[[ प्रोग्रामिंग भाषा | प्रोग्रामिंग भाषा]] पर एकाधिकार करने से हतोत्साहित किया, जो पूरी तरह से वर्ल्ड वाइड वेब के प्रभाव को बदल सकता था। डब्ल्यू 3 सी मानक निर्धारित करना जारी रखता है, जिसे आज [[ जावास्क्रिप्ट ]] और अन्य भाषाओं के साथ देखा जा सकता है। 1994 में आंद्रेसेन ने मोज़ेक कम्युनिकेशंस कॉर्प का गठन किया जो बाद में [[[[ नेटस्केप |नेटस्केप]] संचार]], नेटस्केप (वेब ब्राउज़र) | नेटस्केप 0.9 ब्राउज़र के रूप में जाना जाने लगा। नेटस्केप ने पारंपरिक मानकों की प्रक्रिया पर ध्यान दिए बिना अपने स्वयं के एचटीएमएल टैग बनाए। उदाहरण के लिए, नेटस्केप 1.1 में पृष्ठभूमि के रंग बदलने और वेब पेजों पर एचटीएमएल तत्व,तालिकाओं के साथ पाठ को स्वरूपित करने के लिए टैग सम्मिलित थे। 1996 से 1999 तक [[ ब्राउज़र युद्ध ]] प्रांरम्भ हुआ, क्योंकि [[ Microsoft |माइक्रोसॉफ्ट]] और नेटस्केप ने अंतिम ब्राउज़र प्रभुत्व के लिए संघर्ष किया। इस समय के दौरान क्षेत्र में कई नई प्रौद्योगिकियां थीं, विशेष रूप से[[ व्यापक शैली पत्रक | व्यापक शैली पत्रक,]] जावास्क्रिप्ट और[[ गतिशील एचटीएमएल ]]कुल मिलाकर, ब्राउज़र प्रतियोगिता ने कई सकारात्मक कृतियों को जन्म दिया और वेब डिज़ाइन को तीव्र गति से विकसित करने में मदद की।<ref name=Browsers >{{cite book | ||
|last=Niederst |first=Jennifer | |last=Niederst |first=Jennifer | ||
|title=वेब डिजाइन संक्षेप में|year=2006|publisher=O'Reilly Media | |title=वेब डिजाइन संक्षेप में|year=2006|publisher=O'Reilly Media | ||
| Line 39: | Line 39: | ||
1996 में, [[ Adobe Flash |एडोब फ्लैश]] (मूल रूप से फ्यूचरस्प्लैश के रूप में जाना जाता था) विकसित किया गया था। उस समय, फ्लैश कंटेंट डेवलपमेंट टूल अब की तुलना में अपेक्षाकृत सरल था, जिसमें बेसिक लेआउट और ड्राइंग टूल्स, [[ ActionScript | एक्शन स्क्रिप्ट]] के लिए एक सीमित अग्रदूत और एक टाइमलाइन का उपयोग किया गया था, लेकिन इसने वेब डिजाइनरों को एचटीएमएल, ग्राफिक्स इंटरचेंज फॉर्मेट के बिंदु से आगे जाने में सक्षम बनाया। एनिमेटेड जीआईएफ और जावास्क्रिप्ट। यदपि , क्योंकि फ्लैश को एक [[ प्लग-इन (कंप्यूटिंग) ]]|प्लग-इन की आवश्यकता थी, इसलिए कई वेब डेवलपर्स अनुकूलता की कमी के कारण अपनी बाजार हिस्सेदारी को सीमित करने के डर से इसका उपयोग करने से बचते रहे। इसके बजाय, डिजाइनरों ने जीआईएफ एनिमेशन (यदि वे [[ गति ग्राफिक्स ]] का पूरी तरह से उपयोग नहीं करते हैं) और [[ सॉफ्टवेयर विजेट ]] के लिए जावास्क्रिप्ट पर वापस लौट आए। लेकिन फ्लैश के लाभों ने इसे विशिष्ट लक्षित बाजारों के बीच काफी लोकप्रिय बना दिया, जो अंततः ब्राउज़रों के विशाल बहुमत के लिए अपना काम करता है, और पूरी साइटों को विकसित करने के लिए पर्याप्त शक्तिशाली है।<ref name="Chapman, Evolution" /> | 1996 में, [[ Adobe Flash |एडोब फ्लैश]] (मूल रूप से फ्यूचरस्प्लैश के रूप में जाना जाता था) विकसित किया गया था। उस समय, फ्लैश कंटेंट डेवलपमेंट टूल अब की तुलना में अपेक्षाकृत सरल था, जिसमें बेसिक लेआउट और ड्राइंग टूल्स, [[ ActionScript | एक्शन स्क्रिप्ट]] के लिए एक सीमित अग्रदूत और एक टाइमलाइन का उपयोग किया गया था, लेकिन इसने वेब डिजाइनरों को एचटीएमएल, ग्राफिक्स इंटरचेंज फॉर्मेट के बिंदु से आगे जाने में सक्षम बनाया। एनिमेटेड जीआईएफ और जावास्क्रिप्ट। यदपि , क्योंकि फ्लैश को एक [[ प्लग-इन (कंप्यूटिंग) ]]|प्लग-इन की आवश्यकता थी, इसलिए कई वेब डेवलपर्स अनुकूलता की कमी के कारण अपनी बाजार हिस्सेदारी को सीमित करने के डर से इसका उपयोग करने से बचते रहे। इसके बजाय, डिजाइनरों ने जीआईएफ एनिमेशन (यदि वे [[ गति ग्राफिक्स ]] का पूरी तरह से उपयोग नहीं करते हैं) और [[ सॉफ्टवेयर विजेट ]] के लिए जावास्क्रिप्ट पर वापस लौट आए। लेकिन फ्लैश के लाभों ने इसे विशिष्ट लक्षित बाजारों के बीच काफी लोकप्रिय बना दिया, जो अंततः ब्राउज़रों के विशाल बहुमत के लिए अपना काम करता है, और पूरी साइटों को विकसित करने के लिए पर्याप्त शक्तिशाली है।<ref name="Chapman, Evolution" /> | ||
==== पहले ब्राउज़र युद्धों का अंत ==== | ==== पहले ब्राउज़र युद्धों का अंत ==== | ||
{{Further|ब्राउज़र युद्ध,पहला ब्राउज़र युद्ध (1995–2001)}} | {{Further|ब्राउज़र युद्ध,पहला ब्राउज़र युद्ध (1995–2001)}} | ||
1998 में, नेटस्केप ने [[ ओपन-सोर्स लाइसेंस ]] के तहत नेटस्केप कम्युनिकेटर कोड जारी किया ओपन-सोर्स लाइसेंस, हजारों डेवलपर्स को सॉफ्टवेयर में सुधार करने में भाग लेने में सक्षम बनाता है। यदपि , इन डेवलपर्स ने वेब के लिए स्क्रैच से एक मानक | 1998 में, नेटस्केप ने [[ ओपन-सोर्स लाइसेंस ]] के तहत नेटस्केप कम्युनिकेटर कोड जारी किया ओपन-सोर्स लाइसेंस, हजारों डेवलपर्स को सॉफ्टवेयर में सुधार करने में भाग लेने में सक्षम बनाता है। यदपि , इन डेवलपर्स ने वेब के लिए स्क्रैच से एक मानक प्रांरम्भ करने का फैसला किया, जिसने ओपन-सोर्स ब्राउज़र के विकास को निर्देशित किया और जल्द ही एक पूर्ण एप्लिकेशन प्लेटफॉर्म तक विस्तारित हो गया।<ref name="Browsers" /> [[ वेब मानक परियोजना ]] बनाई गई थी और लेआउट इंजनों की तुलना (एचटीएमएल) और लेआउट इंजनों की तुलना (कैस्केडिंग स्टाइल शीट्स) मानकों के साथ ब्राउज़र अनुपालन को बढ़ावा दिया गया था। वेब मानकों के अनुपालन के लिए ब्राउज़रों का परीक्षण करने के लिए[[ अम्ल1 | अम्ल1]],[[ निश्चित | निश्चित]] और [[ रखूंगा ]] जैसे प्रोग्राम बनाए गए थे। 2000 में, मैक के लिए इंटरनेट एक्सप्लोरर जारी किया गया था, जो पहला ब्राउज़र था जो एचटीएमएल 4.01 और सीएसएस 1 का पूरी तरह से समर्थन करता था। यह [[ पोर्टेबल नेटवर्क ग्राफ़िक्स ]] छवि प्रारूप का पूरी तरह से समर्थन करने वाला पहला ब्राउज़र भी था।<ref name="Browsers" />2001 तक, माइक्रोसॉफ्ट द्वारा इंटरनेट एक्सप्लोरर को लोकप्रिय बनाने के एक अभियान के बाद, इंटरनेट एक्सप्लोरर वेब ब्राउज़रों के 96% उपयोग हिस्से तक पहुंच गया था, जिसने पहले ब्राउज़र युद्धों के अंत का संकेत दिया क्योंकि इंटरनेट एक्सप्लोरर में कोई वास्तविक प्रतिस्पर्धा नहीं थी।<ref>{{Cite web|title=AMO.NET अमेरिका का मल्टीमीडिया ऑनलाइन (इंटरनेट एक्सप्लोरर 6 पूर्वावलोकन)|url=http://amo.net/NT/01-30-01MSFTIE6.html|website=amo.net|access-date=2020-05-27}}</ref> | ||
===2001–2012=== | ===2001–2012=== | ||
21वीं सदी की शुरुआत के बाद से, वेब लोगों के जीवन में अधिक से अधिक एकीकृत हो गया है। जैसा कि हुआ है, वेब की तकनीक भी आगे बढ़ गई है। लोगों द्वारा वेब का उपयोग करने और उस तक पहुंचने के तरीके में भी महत्वपूर्ण परिवर्तन हुए हैं, और इसने साइटों को डिज़ाइन करने के तरीके को भी बदल दिया है। | 21वीं सदी की शुरुआत के बाद से, वेब लोगों के जीवन में अधिक से अधिक एकीकृत हो गया है। जैसा कि हुआ है, वेब की तकनीक भी आगे बढ़ गई है। लोगों द्वारा वेब का उपयोग करने और उस तक पहुंचने के तरीके में भी महत्वपूर्ण परिवर्तन हुए हैं, और इसने साइटों को डिज़ाइन करने के तरीके को भी बदल दिया है। | ||
| Line 51: | Line 47: | ||
ब्राउज़र युद्धों के अंत के बाद से नए ब्राउज़र जारी किए गए हैं। इनमें से कई[[ खुला स्रोत सॉफ्टवेयर | खुला स्रोत सॉफ्टवेयर]] हैं, जिसका अर्थ है कि वे तेजी से विकास करते हैं और नए मानकों के अधिक समर्थक हैं। नए विकल्पों पर कई लोगों ने विचार किया है माइक्रोसॉफ्ट के[[ इंटरनेट एक्स्प्लोरर | इंटरनेट एक्स्प्लोरर]] से बेहतर होने के लिए। | ब्राउज़र युद्धों के अंत के बाद से नए ब्राउज़र जारी किए गए हैं। इनमें से कई[[ खुला स्रोत सॉफ्टवेयर | खुला स्रोत सॉफ्टवेयर]] हैं, जिसका अर्थ है कि वे तेजी से विकास करते हैं और नए मानकों के अधिक समर्थक हैं। नए विकल्पों पर कई लोगों ने विचार किया है माइक्रोसॉफ्ट के[[ इंटरनेट एक्स्प्लोरर | इंटरनेट एक्स्प्लोरर]] से बेहतर होने के लिए। | ||
[[ विश्वव्यापी वेब संकाय |विश्वव्यापी वेब संकाय]] ने एचटीएमएल ([[ HTML5 | एचटीएमएल5]] ) और सीएसएस ([[ CSS3 | | [[ विश्वव्यापी वेब संकाय |विश्वव्यापी वेब संकाय]] ने एचटीएमएल ([[ HTML5 | एचटीएमएल5]] ) और सीएसएस ([[ CSS3 |सीएसएस3]]) के लिए नए मानक जारी किए हैं, साथ ही नए जावास्क्रिप्ट एप्लिकेशन प्रोग्रामिंग इंटरफ़ेस एपीआई, प्रत्येक एक नए लेकिन व्यक्तिगत मानक के रूप में है। जबकि एचटीएमएल5 शब्द का उपयोग केवल एचटीएमएल के नए संस्करण और कुछ जावास्क्रिप्ट एपीआई को संदर्भित करने के लिए किया जाता है, नए मानकों (एचटीएमएल5, सी एसएस3 और जावास्क्रिप्ट) के पूरे सूट को संदर्भित करने के लिए इसका उपयोग करना आम हो गया है। | ||
=== 2012 और बाद में === | === 2012 और बाद में === | ||
| Line 61: | Line 57: | ||
=== यूएक्स डिजाइन === | === यूएक्स डिजाइन === | ||
वेब डिज़ाइन में एक लोकप्रिय टूल यूएक्स डिज़ाइन है, यह एक प्रकार की कला है जो सटीक उपयोगकर्ता पृष्ठभूमि के प्रदर्शन के लिए उत्पादों को डिज़ाइन करती है। यूएक्स डिजाइन बहुत गहरा है। यूएक्स वेब से कहीं अधिक है, यह बहुत स्वतंत्र है, और इसके मूलभूत सिद्धांतों को कई अन्य ब्राउज़रों या ऐप्स पर लागू किया जा सकता है। वेब डिजाइन ज्यादातर वेब आधारित चीजों पर आधारित होता है। यूएक्स वेब डिज़ाइन और डिज़ाइन दोनों को अतिव्यापन कर सकता है। यूएक्स डिजाइन ज्यादातर उन उत्पादों पर केंद्रित है जो कम वेब आधारित हैं।<ref>{{Cite web |title=वेब डिज़ाइन क्या है?|url=https://www.interaction-design.org/literature/topics/web-design |access-date=2022-10-12 |website=The Interaction Design Foundation |language=en}}</ref> | वेब डिज़ाइन में एक लोकप्रिय टूल यूएक्स डिज़ाइन है, यह एक प्रकार की कला है जो सटीक उपयोगकर्ता पृष्ठभूमि के प्रदर्शन के लिए उत्पादों को डिज़ाइन करती है। यूएक्स डिजाइन बहुत गहरा है। यूएक्स वेब से कहीं अधिक है, यह बहुत स्वतंत्र है, और इसके मूलभूत सिद्धांतों को कई अन्य ब्राउज़रों या ऐप्स पर लागू किया जा सकता है। वेब डिजाइन ज्यादातर वेब आधारित चीजों पर आधारित होता है। यूएक्स वेब डिज़ाइन और डिज़ाइन दोनों को अतिव्यापन कर सकता है। यूएक्स डिजाइन ज्यादातर उन उत्पादों पर केंद्रित है जो कम वेब आधारित हैं।<ref>{{Cite web |title=वेब डिज़ाइन क्या है?|url=https://www.interaction-design.org/literature/topics/web-design |access-date=2022-10-12 |website=The Interaction Design Foundation |language=en}}</ref> | ||
== कौशल और तकनीक == | == कौशल और तकनीक == | ||
=== विपणन और संचार डिजाइन === | ====== विपणन और संचार डिजाइन ====== | ||
किसी वेबसाइट पर मार्केटिंग और संचार डिज़ाइन यह पहचान सकता है कि उसके लक्षित बाज़ार के लिए क्या काम करता है। यह एक आयु वर्ग या संस्कृति की विशेष धारा हो सकती है; इस प्रकार डिजाइनर अपने दर्शकों के रुझान को समझ सकता है। डिज़ाइनर यह भी समझ सकते हैं कि वे किस प्रकार की वेबसाइट डिज़ाइन कर रहे हैं, उदाहरण के लिए, (बी2बी) व्यवसाय-से-व्यवसाय वेबसाइट डिज़ाइन विचार उपभोक्ता-लक्षित वेबसाइट जैसे[[ खुदरा | खुदरा]] या मनोरंजन वेबसाइट से बहुत भिन्न हो सकते हैं। यह सुनिश्चित करने के लिए सावधानीपूर्वक विचार किया जा सकता है कि किसी साइट का सौंदर्यशास्त्र या समग्र डिजाइन सामग्री की स्पष्टता और सटीकता या [[ वेब नेविगेशन |वेब नेविगेशन]] की आसानी से टकराता नहीं है,<ref>{{cite journal|last=THORLACIUS|first=LISBETH|title=वेब डिजाइन में सौंदर्यशास्त्र की भूमिका|journal=Nordicom Review|year=2007|volume=28|issue=28|pages=63–76|doi=10.1515/nor-2017-0201|s2cid=146649056|doi-access=free}}</ref> विशेष रूप से B2B वेबसाइट पर। डिजाइनर उस मालिक या व्यवसाय की प्रतिष्ठा पर भी विचार कर सकते हैं जो साइट यह सुनिश्चित करने के लिए प्रतिनिधित्व कर रही है कि उन्हें अनुकूल रूप से चित्रित किया गया है। वेब डिज़ाइनर | किसी वेबसाइट पर मार्केटिंग और संचार डिज़ाइन यह पहचान सकता है कि उसके लक्षित बाज़ार के लिए क्या काम करता है। यह एक आयु वर्ग या संस्कृति की विशेष धारा हो सकती है; इस प्रकार डिजाइनर अपने दर्शकों के रुझान को समझ सकता है। डिज़ाइनर यह भी समझ सकते हैं कि वे किस प्रकार की वेबसाइट डिज़ाइन कर रहे हैं, उदाहरण के लिए, (बी2बी) व्यवसाय-से-व्यवसाय वेबसाइट डिज़ाइन विचार उपभोक्ता-लक्षित वेबसाइट जैसे[[ खुदरा | खुदरा]] या मनोरंजन वेबसाइट से बहुत भिन्न हो सकते हैं। यह सुनिश्चित करने के लिए सावधानीपूर्वक विचार किया जा सकता है कि किसी साइट का सौंदर्यशास्त्र या समग्र डिजाइन सामग्री की स्पष्टता और सटीकता या [[ वेब नेविगेशन |वेब नेविगेशन]] की आसानी से टकराता नहीं है,<ref>{{cite journal|last=THORLACIUS|first=LISBETH|title=वेब डिजाइन में सौंदर्यशास्त्र की भूमिका|journal=Nordicom Review|year=2007|volume=28|issue=28|pages=63–76|doi=10.1515/nor-2017-0201|s2cid=146649056|doi-access=free}}</ref> विशेष रूप से B2B वेबसाइट पर। डिजाइनर उस मालिक या व्यवसाय की प्रतिष्ठा पर भी विचार कर सकते हैं जो साइट यह सुनिश्चित करने के लिए प्रतिनिधित्व कर रही है कि उन्हें अनुकूल रूप से चित्रित किया गया है। वेब डिज़ाइनर सामान्यतः उन सभी वेबसाइटों की देखरेख करते हैं जो इस आधार पर बनाई जाती हैं कि वे कैसे काम करती हैं या चीजों पर काम करती हैं। वे पर्दे के पीछे से वेबसाइटों पर लगातार सब कुछ अपडेट और बदल रहे हैं। उनके द्वारा किए जाने वाले सभी तत्व टेक्स्ट, फोटो, ग्राफिक्स और वेब का लेआउट हैं। वेबसाइट पर काम प्रांरम्भ करने से पहले, वेब डिज़ाइनर सामान्यतः लेआउट, रंग, ग्राफिक्स और डिज़ाइन पर चर्चा करने के लिए अपने क्लाइंट के साथ अपॉइंटमेंट सेट करते हैं। वेब डिज़ाइनर अपना अधिकांश समय वेबसाइटों को डिज़ाइन करने और यह सुनिश्चित करने में लगाते हैं कि गति सही है। वेब डिज़ाइनर सामान्यतः वेबसाइटों को बनाने और वेबसाइटों के लिए सही तत्वों को खोजने के बारे में अन्य डिजाइनरों के साथ परीक्षण और कार्य, विपणन और संचार में संलग्न होते हैं।<ref>{{Cite web |title=वेब डिज़ाइनर क्या है? (2022 गाइड)|url=https://brainstation.io/career-guides/what-is-a-web-designer |access-date=2022-10-28 |website=BrainStation® |language=en-US}}</ref> | ||
=== उपयोगकर्ता अनुभव डिजाइन और [[ इंटरैक्टिव डिजाइन ]] === | === उपयोगकर्ता अनुभव डिजाइन और [[ इंटरैक्टिव डिजाइन ]] === | ||
वेबसाइट की सामग्री के बारे में उपयोगकर्ता की समझ | वेबसाइट की सामग्री के बारे में उपयोगकर्ता की समझ प्रायः उपयोगकर्ता की समझ पर निर्भर करती है कि वेबसाइट कैसे काम करती है। यह उपयोगकर्ता अनुभव डिजाइन का हिस्सा है। उपयोगकर्ता अनुभव एक वेबसाइट पर लेआउट, स्पष्ट निर्देश और लेबलिंग से संबंधित है। उपयोगकर्ता कितनी अच्छी तरह समझता है कि वे साइट पर कैसे इंटरैक्ट कर सकते हैं, यह साइट के इंटरैक्टिव डिज़ाइन पर भी निर्भर हो सकता है। यदि कोई उपयोगकर्ता वेबसाइट की उपयोगिता को समझता है, तो इसकी अधिक संभावना है कि वे इसका उपयोग करना जारी रखेंगे। जो उपयोगकर्ता वेबसाइट के उपयोग में कुशल और अच्छी तरह से वाकिफ हैं, वे अधिक विशिष्ट, फिर भी कम सहज या कम उपयोगिता पा सकते हैं। फिर भी उपयोगकर्ता के अनुकूल वेबसाइट इंटरफ़ेस उपयोगी है। यदपि , कम अनुभव वाले उपयोगकर्ताओं को कम सहज वेबसाइट इंटरफ़ेस के फायदे या उपयोगिता देखने की संभावना कम होती है। यह अधिक सार्वभौमिक उपयोगकर्ता अनुभव और उपयोगकर्ता कौशल की परवाह किए बिना अधिक से अधिक उपयोगकर्ताओं को समायोजित करने के लिए उपयोग में आसानी के लिए प्रवृत्ति को चलाता है।<ref>{{cite journal|last1=Castañeda|first1=J.A Francisco |last2=Muñoz-Leiva|first2=Teodoro Luque|title=वेब स्वीकृति मॉडल (डब्ल्यूएएम): उपयोगकर्ता अनुभव के मॉडरेटिंग प्रभाव|journal=Information & Management |year=2007 |volume=44 |issue=4 |pages=384–396|doi=10.1016/j.im.2007.02.003}}</ref> अधिकांश उपयोगकर्ता अनुभव डिज़ाइन और इंटरैक्टिव डिज़ाइन को यूज़र इंटरफ़ेस डिज़ाइन में माना जाता है। | ||
उन्नत इंटरैक्टिव कार्यों के लिए प्लग-इन (कंप्यूटिंग) की आवश्यकता हो सकती है | प्लग-इन यदि उन्नत कोडिंग भाषा कौशल नहीं है। यह चुनना कि अन्तरक्रियाशीलता का उपयोग करना है या नहीं जिसके लिए प्लग-इन की आवश्यकता होती है, उपयोगकर्ता अनुभव डिज़ाइन में एक महत्वपूर्ण निर्णय है। यदि प्लग-इन अधिकांश ब्राउज़रों के साथ पहले से इंस्टॉल नहीं आता है, तो एक जोखिम है कि उपयोगकर्ता के पास सामग्री तक पहुँचने के लिए प्लग-इन स्थापित करने के बारे में न तो जानकारी होगी और न ही धैर्य होगा। यदि फ़ंक्शन को उन्नत कोडिंग भाषा कौशल की आवश्यकता होती है, तो फ़ंक्शन उपयोगकर्ता अनुभव में वृद्धि की मात्रा की तुलना में कोड के लिए समय या धन में बहुत महंगा हो सकता है। एक जोखिम यह भी है कि उन्नत अन्तरक्रियाशीलता पुराने ब्राउज़रों या हार्डवेयर कॉन्फ़िगरेशन के साथ असंगत हो सकती है। किसी ऐसे फ़ंक्शन को प्रकाशित करना जो मज़बूती से काम नहीं करता है, उपयोगकर्ता के अनुभव के लिए कोई प्रयास न करने की तुलना में संभावित रूप से खराब है। यह लक्षित दर्शकों पर निर्भर करता है कि क्या इसकी आवश्यकता होने या किसी जोखिम के लायक होने की संभावना है। | उन्नत इंटरैक्टिव कार्यों के लिए प्लग-इन (कंप्यूटिंग) की आवश्यकता हो सकती है | प्लग-इन यदि उन्नत कोडिंग भाषा कौशल नहीं है। यह चुनना कि अन्तरक्रियाशीलता का उपयोग करना है या नहीं जिसके लिए प्लग-इन की आवश्यकता होती है, उपयोगकर्ता अनुभव डिज़ाइन में एक महत्वपूर्ण निर्णय है। यदि प्लग-इन अधिकांश ब्राउज़रों के साथ पहले से इंस्टॉल नहीं आता है, तो एक जोखिम है कि उपयोगकर्ता के पास सामग्री तक पहुँचने के लिए प्लग-इन स्थापित करने के बारे में न तो जानकारी होगी और न ही धैर्य होगा। यदि फ़ंक्शन को उन्नत कोडिंग भाषा कौशल की आवश्यकता होती है, तो फ़ंक्शन उपयोगकर्ता अनुभव में वृद्धि की मात्रा की तुलना में कोड के लिए समय या धन में बहुत महंगा हो सकता है। एक जोखिम यह भी है कि उन्नत अन्तरक्रियाशीलता पुराने ब्राउज़रों या हार्डवेयर कॉन्फ़िगरेशन के साथ असंगत हो सकती है। किसी ऐसे फ़ंक्शन को प्रकाशित करना जो मज़बूती से काम नहीं करता है, उपयोगकर्ता के अनुभव के लिए कोई प्रयास न करने की तुलना में संभावित रूप से खराब है। यह लक्षित दर्शकों पर निर्भर करता है कि क्या इसकी आवश्यकता होने या किसी जोखिम के लायक होने की संभावना है। | ||
| Line 84: | Line 76: | ||
उपयोगकर्ता इंटरफ़ेस डिज़ाइन का एक भाग पृष्ठ लेआउट की गुणवत्ता से प्रभावित होता है। उदाहरण के लिए, एक डिज़ाइनर इस बात पर विचार कर सकता है कि लेआउट डिज़ाइन करते समय साइट का पृष्ठ लेआउट विभिन्न पृष्ठों पर संगत रहना चाहिए या नहीं। लेआउट डिज़ाइन में ऑब्जेक्ट्स को संरेखित करने के लिए पृष्ठ पिक्सेल चौड़ाई को भी महत्वपूर्ण माना जा सकता है। सबसे लोकप्रिय निश्चित-चौड़ाई वाली वेबसाइटों में सामान्यतः वर्तमान सबसे लोकप्रिय मॉनिटर आकार पर, वर्तमान सबसे लोकप्रिय स्क्रीन रिज़ॉल्यूशन पर, वर्तमान सबसे लोकप्रिय ब्राउज़र विंडो से मिलान करने के लिए समान सेट चौड़ाई होती है। बड़ी स्क्रीन पर सौंदर्यशास्त्र की चिंताओं के लिए अधिकांश पृष्ठ केंद्र-संरेखित हैं। | उपयोगकर्ता इंटरफ़ेस डिज़ाइन का एक भाग पृष्ठ लेआउट की गुणवत्ता से प्रभावित होता है। उदाहरण के लिए, एक डिज़ाइनर इस बात पर विचार कर सकता है कि लेआउट डिज़ाइन करते समय साइट का पृष्ठ लेआउट विभिन्न पृष्ठों पर संगत रहना चाहिए या नहीं। लेआउट डिज़ाइन में ऑब्जेक्ट्स को संरेखित करने के लिए पृष्ठ पिक्सेल चौड़ाई को भी महत्वपूर्ण माना जा सकता है। सबसे लोकप्रिय निश्चित-चौड़ाई वाली वेबसाइटों में सामान्यतः वर्तमान सबसे लोकप्रिय मॉनिटर आकार पर, वर्तमान सबसे लोकप्रिय स्क्रीन रिज़ॉल्यूशन पर, वर्तमान सबसे लोकप्रिय ब्राउज़र विंडो से मिलान करने के लिए समान सेट चौड़ाई होती है। बड़ी स्क्रीन पर सौंदर्यशास्त्र की चिंताओं के लिए अधिकांश पृष्ठ केंद्र-संरेखित हैं। | ||
पाठक की स्क्रीन (खिड़की का आकार, खिड़की के सापेक्ष फ़ॉन्ट आकार, आदि) के विवरण के आधार पर द्रव लेआउट के लिए ब्राउज़र को उपयोगकर्ता-विशिष्ट लेआउट समायोजन करने की अनुमति देने के लिए 2000 के आसपास द्रव लेआउट की लोकप्रियता में वृद्धि हुई। वे एचटीएमएल-टेबल-आधारित लेआउट और [[ ग्रिड (पेज लेआउट) | ग्रिड (पृष्ठ अभिन्यास)]] के विकल्प के रूप में विकसित हुए। पृष्ठ अभिन्यास डिजाइन सिद्धांतों और कोडिंग तकनीक दोनों में ग्रिड-आधारित डिज़ाइन लेकिन अपनाने में बहुत धीमी थी।<ref group="note" ><code><table></code>-based markup and [[spacer .GIF]] images</ref> यह [[ स्क्रीन रीडर ]] और अलग-अलग खिड़कियों के आकार के कारण था, जिस पर डिजाइनरों का कोई नियंत्रण नहीं है। तदनुसार, एक डिज़ाइन को इकाइयों (साइडबार, सामग्री ब्लॉक, [[ वेब बैनर ]] क्षेत्र, नेविगेशन क्षेत्र) में विभाजित किया जा सकता है जो कि ब्राउज़र को भेजे जाते हैं और जो ब्राउज़र द्वारा डिस्प्ले विंडो में फिट किया जाएगा, जितना अच्छा हो सकता है। यदपि इस तरह का प्रदर्शन | पाठक की स्क्रीन (खिड़की का आकार, खिड़की के सापेक्ष फ़ॉन्ट आकार, आदि) के विवरण के आधार पर द्रव लेआउट के लिए ब्राउज़र को उपयोगकर्ता-विशिष्ट लेआउट समायोजन करने की अनुमति देने के लिए 2000 के आसपास द्रव लेआउट की लोकप्रियता में वृद्धि हुई। वे एचटीएमएल-टेबल-आधारित लेआउट और [[ ग्रिड (पेज लेआउट) | ग्रिड (पृष्ठ अभिन्यास)]] के विकल्प के रूप में विकसित हुए। पृष्ठ अभिन्यास डिजाइन सिद्धांतों और कोडिंग तकनीक दोनों में ग्रिड-आधारित डिज़ाइन लेकिन अपनाने में बहुत धीमी थी।<ref group="note" ><code><table></code>-based markup and [[spacer .GIF]] images</ref> यह [[ स्क्रीन रीडर ]] और अलग-अलग खिड़कियों के आकार के कारण था, जिस पर डिजाइनरों का कोई नियंत्रण नहीं है। तदनुसार, एक डिज़ाइन को इकाइयों (साइडबार, सामग्री ब्लॉक, [[ वेब बैनर ]] क्षेत्र, नेविगेशन क्षेत्र) में विभाजित किया जा सकता है जो कि ब्राउज़र को भेजे जाते हैं और जो ब्राउज़र द्वारा डिस्प्ले विंडो में फिट किया जाएगा, जितना अच्छा हो सकता है। यदपि इस तरह का प्रदर्शन प्रायः प्रमुख सामग्री इकाइयों की सापेक्ष स्थिति को बदल सकता है, साइडबार इसके किनारे की बजाय [[ मुख्य भाग ]] के नीचे विस्थापित हो सकते हैं। यह हार्ड-कोडेड ग्रिड-आधारित लेआउट की तुलना में अधिक लचीला प्रदर्शन है जो डिवाइस विंडो में फिट नहीं होता है। विशेष रूप से, ब्लॉक के भीतर सामग्री को अप्रभावित रखते हुए सामग्री ब्लॉक की सापेक्ष स्थिति बदल सकती है। यह पृष्ठ को क्षैतिज रूप से स्क्रॉल करने के लिए उपयोगकर्ता की आवश्यकता को भी कम करता है। | ||
उत्तरदायी वेब डिज़ाइन सी एसएस3 पर आधारित एक नया दृष्टिकोण है, और सीएसएस के उन्नत उपयोग के माध्यम से पृष्ठ की स्टाइल शीट के भीतर प्रति-उपकरण विनिर्देश का एक गहरा स्तर है। <code>@media</code> | उत्तरदायी वेब डिज़ाइन सी एसएस3 पर आधारित एक नया दृष्टिकोण है, और सीएसएस के उन्नत उपयोग के माध्यम से पृष्ठ की स्टाइल शीट के भीतर प्रति-उपकरण विनिर्देश का एक गहरा स्तर है। <code>@media</code> नियम मार्च 2018 में गूगल ने घोषणा की कि वे मोबाइल-फर्स्ट इंडेक्सिंग प्रांरम्भ करेंगे।<ref>{{Cite news|url=https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html|title=मोबाइल-फर्स्ट इंडेक्सिंग को रोल आउट किया जा रहा है|work=Official Google Webmaster Central Blog|access-date=2018-06-09|language=en-US}}</ref> उत्तरदायी डिज़ाइन का उपयोग करने वाली साइटें यह सुनिश्चित करने के लिए अच्छी स्थिति में हैं कि वे इस नए दृष्टिकोण को पूरा करती हैं। | ||
=== टाइपोग्राफी === | === टाइपोग्राफी === | ||
{{Main| | {{Main|टाइपोग्राफी}} | ||
वेब डिज़ाइनर[[ टाइपफ़ेस | टाइपफ़ेस]] की एक विस्तृत श्रृंखला या टाइपफेस # टाइपफेस की शैली का उपयोग करने के बजाय वेबसाइट टाइपफेस की विविधता को केवल कुछ समान शैली तक सीमित करना चुन सकते हैं। अधिकांश ब्राउज़र एक विशिष्ट संख्या में सुरक्षित फोंट को पहचानते हैं, जो डिजाइनर मुख्य रूप से जटिलताओं से बचने के लिए उपयोग करते हैं। | वेब डिज़ाइनर[[ टाइपफ़ेस | टाइपफ़ेस]] की एक विस्तृत श्रृंखला या टाइपफेस # टाइपफेस की शैली का उपयोग करने के बजाय वेबसाइट टाइपफेस की विविधता को केवल कुछ समान शैली तक सीमित करना चुन सकते हैं। अधिकांश ब्राउज़र एक विशिष्ट संख्या में सुरक्षित फोंट को पहचानते हैं, जो डिजाइनर मुख्य रूप से जटिलताओं से बचने के लिए उपयोग करते हैं। | ||
फ़ॉन्ट डाउनलोडिंग को बाद में सी एसएस3 के फोंट मॉड्यूल में सम्मिलित | फ़ॉन्ट डाउनलोडिंग को बाद में सी एसएस3 के फोंट मॉड्यूल में सम्मिलित किया गया था और तब से इसे सफारी 3.1, ओपेरा 10 और मोज़िला फ़ायरफ़ॉक्स 3.5 में लागू किया गया है। इसने बाद में[[ वेब टाइपोग्राफी | वेब टाइपोग्राफी]] के साथ-साथ फ़ॉन्ट डाउनलोडिंग के उपयोग में रुचि बढ़ाई है। | ||
अधिकांश साइट लेआउट पाठ को पैराग्राफ में विभाजित करने के लिए नकारात्मक स्थान सम्मिलित करते हैं और केंद्र-संरेखित पाठ से भी बचते हैं।<ref>{{cite web|last=Stone|first=John|title=प्रभावी वेब टाइपोग्राफी के 20 क्या करें और क्या न करें| url=http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-typography|access-date=2012-03-19|date=2009-11-16}}</ref> | अधिकांश साइट लेआउट पाठ को पैराग्राफ में विभाजित करने के लिए नकारात्मक स्थान सम्मिल | ||