वर्ल्ड वाइड वेब का जन्म 90 के दशक की शुरुआत में हुआ था। संयोग से, या नहीं, यह उस संगठन में आविष्कार किया गया था जिसके लिए मैंने बाद में काम किया था - उनके पहले यूएक्स डिजाइनर के रूप में ।

दुनिया की सबसे पहली वेबसाइट अभी भी ऑनलाइन है ।

ऐसा कुछ डिजिटल होना बहुत से लोगों को आकर्षक लग रहा था।

अरे, हमें वास्तव में इस इंटरनेट के साथ कुछ करने की जरूरत है!

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

उनके ग्राहक इंटरनेट वैगन पर कूदना चाहते थे लेकिन यह नहीं जानते थे कि कैसे। मेरे पिताजी भी नहीं थे।

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

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

आइए देखें कि मैं क्या लेकर आया हूं।

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

वेबसाइटें

तदाआह्ह्ह्ह्ह

यह सौंदर्य पहली व्यावसायिक वेबसाइट है जिसे मैंने डिज़ाइन किया है। और विकसित, सादे HTML में।

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

मुझे नहीं पता था कि यह शैली वास्तव में 90 के दशक के डिजाइन ओजी द्वारा कैसे बनाई गई थी। इसलिए, मैंने इसे अपने तरीके से फिर से बनाने का प्रयास किया। मैं बुरी तरह असफल रहा। मैंने यादृच्छिक अंतराल पर 1pt की ठोस सफेद रेखाएँ जोड़ीं। हाँ 1pt। एक पिक्सेल इकाई नहीं है, इसलिए सभी वेक्टर लाइनें अलग-अलग तरह से निर्यात की गई थीं, जिन्हें मैंने वेबसाइट के लिए उपयोग किया था।

इस शैली के बारे में वास्तविक डिजाइन स्वामी कैसे गए? उन्होंने हर दूसरी पंक्ति की पूरी चौड़ाई में 50% पारदर्शी सफेद पिक्सेल की एक पंक्ति जोड़ी। इस प्रकार आपको 100% दृश्यता पर सभी विषम पिक्सेल रेखाएँ और 50% दृश्यता पर समान रेखाएँ मिलेंगी। यह एक दिलचस्प प्रभाव पैदा करेगा।

एक और चीज जो इस डिजाइन में सबसे अलग है वह है अंग्रेजी "कॉपी"। मुझे याद नहीं है कि इसे किसने लिखा था। मैं केवल एक चीज के बारे में निश्चित हूं कि विलियम शेक्सपियर इसके पीछे नहीं थे।

संरेखण और इसकी निरंतरता के पीछे भी बिल्कुल कोई विचार नहीं था। पृष्ठ पर लगभग हर तत्व इसके संदर्भ के साथ गलत संरेखित है। डिजाइन डरावनी। :)

कौन से औजारों का इस्तेमाल किया गया?

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

जब मैं डिजाइन के बारे में अधिक जागरूक हो गया, तो मैंने डिजाइन टूल्स का इस्तेमाल करना शुरू कर दिया। CorelDRAW मेरी पसंदीदा पसंद थी।

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

वास्तव में, मुझे लगता है कि मौजूदा डिजाइन उपकरण, फिग्मा, एक्सडी और स्केच फोटोशॉप की तुलना में इलस्ट्रेटर के अधिक करीब हैं।

जब मेरे डिजाइन समाप्त हो गए और स्वीकृत हो गए, तो मैंने उन्हें HTML में बदल दिया।

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

Microsoft फ्रंटपेज पहला WYSIWYG संपादक था जिसका मैंने उपयोग किया था। फ्रंटपेज ने आपको अपने पेजों को एक शब्द-प्रकार के संपादक में सेट करने की अनुमति दी और सीधे HTML को स्वचालित रूप से लिख देगा।

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

Macromedia Dreamweaver को कुछ समय बाद लॉन्च किया गया और इसने थोड़ा बेहतर काम किया। एडोब ने कुछ साल बाद मैक्रोमीडिया का अधिग्रहण किया, शायद इसलिए कि उनके पास फ्लैश और आतिशबाजी जैसे अन्य उपकरण थे।

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

तकनीकी समाधान

शुरुआत में सब कुछ स्थिर था। होवर-ओवर क्रियाएं मौजूद नहीं थीं। जब तक जावास्क्रिप्ट ने हमें और अवसर नहीं दिए। होवर-ओवर नेविगेशन एक चलन बन गया। कुछ ऐसा जो पूर्व-सीएसएस दुनिया में स्पष्ट नहीं था।

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

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

नीले कैनवास की लाल सीमाएँ, जिसमें बुलेट सूची दिखाई गई है, स्थिर छवियां थीं। प्रत्येक कोना एक स्वतंत्र छवि थी। बॉर्डर त्रिज्या वाले बॉक्स को प्रदर्शित करने के लिए आपको कम से कम 4 छवियों की आवश्यकता होती है।

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

आपके द्वारा उपयोग किए जा सकने वाले फ़ॉन्ट्स पर भी एक सीमा थी, जब तक कि उन्हें किसी छवि में नहीं दिखाया गया हो। कई हेडर जेपीजी या जीआईएफ थे।

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

काउंटर

Google Analytics भी उपलब्ध नहीं था। प्रारंभ में, काउंटरों का उपयोग किया गया था। वे बहुत प्रमुखता से दिखाई दे रहे थे और उपयोगकर्ता को कोई महत्व नहीं देते थे, लेकिन कम से कम वेबमास्टर यह देख सकता था कि उसकी वेबसाइट कितनी देखी गई थी।

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

यह चित्र आपके 'निजी' सिंहावलोकन का भी एक लिंक था। हर कोई आपका 'एनालिटिक्स' देख पाएगा। अधिकांश लोगों ने छवि का आकार बदलकर 1x1 px कर दिया। थोड़ी सी खोज के साथ, आप अभी भी प्रत्येक वेबसाइट के विश्लेषण देख सकते हैं।

डब्ल्यूटीएफ?

यह उदाहरण उस व्यक्ति के लिए शर्मनाक है जो वास्तव में उपयोगिता की परवाह करता है लेकिन ...

पृथ्वी पर नेविगेशन लंबवत क्यों है?

मुझे यकीन है कि मैं अपनी रचनात्मक दुनिया का पता लगाने की कोशिश कर रहा था। इस वेबसाइट के गरीब आगंतुक पीड़ित थे।

फ्रेम्स

जब हम 90 के दशक के डिजाइन के बारे में बात करते हैं, तो हमें निश्चित रूप से फ्रेम के उपयोग को संबोधित करने की आवश्यकता होती है। जिसके बारे में आप शायद जानते हों।

यह वेबसाइट को कई खंडों में विभाजित करने का एक तरीका है। प्रत्येक खंड एक स्वतंत्र HTML पृष्ठ है।

इसने सामग्री को चिपचिपा बनाने का एक तरीका पेश किया, आमतौर पर बाएं नेविगेशन और एक शीर्ष शीर्षलेख। कमी यह थी कि एकल पृष्ठों से लिंक करना दुःस्वप्न बन गया था।

खोज इंजन (Altavista) स्वतंत्र पृष्ठों को अनुक्रमित करेगा और उनसे लिंक करेगा। आपके उपयोगकर्ता इस प्रकार एक पृष्ठ की सामग्री पर समाप्त हो गए, बिना नेविगेशन और शीर्ष शीर्षलेख शामिल किए।

इसने फ्रैमलेस वेबसाइटों के विकास को आगे बढ़ाया।

कोई फ्रेम नहीं और कोई सीएमएस नहीं

मैं स्थानीय फुटबॉल क्लब की वेबसाइट का प्रबंधन भी कर रहा था। इस स्क्रीनशॉट में होमपेज का मुख्य संदेश यह था कि मैं किसी से वेबमास्टर की भूमिका निभाने के लिए भीख मांग रहा हूं।

ऐसा इसलिए था क्योंकि जटिल वेबसाइटों का रखरखाव लगभग असंभव हो गया था।

सामग्री प्रबंधन प्रणालियों का व्यापक रूप से उपयोग नहीं किया गया था, और वेबसाइटों को फ्रेमलेस डिज़ाइन में स्थानांतरित कर दिया गया था। इसलिए, प्रत्येक पृष्ठ एक अद्वितीय HTML फ़ाइल थी।

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

बाद में, जब मैंने PHP की खोज की, तो मैं प्रत्येक पृष्ठ पर गतिशील रूप से नेविगेशन जोड़ने के लिए <?php include 'navigation.php';?> का उपयोग कर सकता था। बहुत पतला समाधान।

क्षैतिज नेविगेशन

जब फ़्रेम गायब हो गए, तो बायां नेविगेशन बार कम लोकप्रिय हो गया। इसके बजाय क्षैतिज नौसेना का उपयोग किया गया था। यह डिजाइनरों को शीर्ष नेविगेशन मदों की मात्रा कम करने के लिए बाध्य करेगा।

स्वाभाविक रूप से, ड्रॉप-डाउन नेविगेशन ने क्षेत्र प्राप्त किया। एक बड़ी उपयोगिता चुनौती, विशेष रूप से वृद्ध लोगों या पार्किंसंस रोग वाले लोगों के लिए।

उत्तरदायी डिजाइन मौजूद नहीं था, और बहुत कम स्क्रीन रिज़ॉल्यूशन का उपयोग किया गया था, इसलिए अधिकांश वेबसाइटों की पिक्सेल चौड़ाई समान थी। मैंने यह सुनिश्चित करने के लिए एक टेम्पलेट का उपयोग किया था कि मेरे डिजाइन 800x600 पीएक्स स्क्रीन के लिए 760 पीएक्स से अधिक नहीं होंगे)। वे वेबसाइटें 1024x768 px स्क्रीन के लिए यथोचित रूप से अच्छा प्रदर्शित करेंगी।

760 पिक्सेल चौड़ा क्योंकि यह 800-पिक्सेल चौड़ी स्क्रीन में अच्छी तरह से फिट होगा, स्क्रॉल बार और ब्राउज़र कैनवास के पिक्सेल को घटाकर।

मैं इसे आयामों को सत्यापित किए बिना टाइप कर रहा हूं। मैंने उन्हें इतनी बार इस्तेमाल किया कि मैं अब भी उन्हें अपने माता-पिता के फोन नंबरों से बेहतर जानता हूं।

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

एक प्रवृत्ति जो उभर कर सामने आई वह पृष्ठभूमि छवि पैटर्न का उपयोग थी। इस मामले में, क्षैतिज रेखाएं।

इससे पता चलता है कि प्रत्येक प्रवृत्ति वापस आती है। क्षैतिज रेखाएँ जिन्हें मैं अपनी पहली वेबसाइट के लिए डिज़ाइन करने का प्रयास कर रहा था, अब सामने से पृष्ठभूमि में चली गई थीं। इस बार मैंने इसे वैसे ही किया जैसा कि "माना जाता था"।

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

रुझान अक्सर तकनीकी संभावनाओं से प्रेरित होते हैं। फिर हर कोई अति कर रहा है। फिर कुछ समय बाद चलन खत्म हो जाता है। और फिर लंबे समय के बाद इसका इस्तेमाल करने से फिर से "फ्रेश" हो जाता है। चक्र शुरू से शुरू होता है।

अगली शताब्दी

21 वीं सदी की शुरुआत में, अधिकांश वेबसाइटें पूरी तरह से स्थिर सूचना पृष्ठों से कुछ अन्तरक्रियाशीलता की अनुमति देने वाली चीज़ों में चली गईं।

मैं इस चरण को आगामी लेख में खोजूंगा।

अंत तक पहुँचने के लिए धन्यवाद

मेरी सामग्री सभी के लिए खुली है, इसलिए "केवल सदस्य" नहीं

मुझे उम्मीद है कि लेख आपके लिए सार्थक था

कृपया मुझे आभार और अनुमोदन के टोकन के रूप में अनुसरण करने पर विचार करें