वेबसाईटच्या इंडेक्स पेजचे डिझाईन

वेबसाईटचे इंडेक्स पेज म्हणजे वेबसाईट ब्राउजरमध्ये उघडल्यावर दिसणारे पहिले पान. एखाद्या दुकानाच्या दर्शनी भागात जशी दुकानाच्या नावाची पाटी व आकर्षक प्रवेशद्वार असते तसेच वेबसाईटचे इंडेक्स पेज हे आकर्षक व वेबसाईटचे नाव व मुख्य उद्देश स्पष्ट करणारे असणे असावे लागते. रस्त्यावरून जाणारे लोक दुकानाची पाटी व दर्शनी भाग पाहून आकृष्ट होतात व दुकानाला भेट देतात. त्याप्रमाणेच वेबसाईटला भेट देणारे वाचक पहिल्या पानावरूनच वेबसाईटचा अंदाज बांधतात. त्यामुळे या पानाच्या डिझाईनला फार महत्व असते. काहीवेळा दुकानाबाहेर चित्रकृती वा कारंजे असते. त्याप्रमाणे वेबडिझाईनचे पहिले पान उघडण्याआधी फ्लॅश स्क्रीन टाकून त्याद्वारे एखादी चित्रफीत (फ्लॅश प्रोग्रॅम वा व्हिडिओ फिल्म) दाखविली जाते. मात्र या चित्रफितीस वेळ लागत असल्याने ग्राहक दुसरीकडे जाऊ नये म्हणून चटकन पहिल्या पानावर जाण्यासाठी एक लिंक ठेवावी लागते. सध्याच्या घाइगर्दीच्या जमान्यामुळे अशी चित्रफीत दाखविण्याची पद्धत आता मागे पडली आहे. ज्यांच्यासाठी वेबसाईट करावयाची आहे त्यांच्या आवडीनिवडीनुसार आकर्षक रंगसंगतीचे पहिले पान प्रथम फोटोशॉपमध्ये ग्राफिक डिझाईनरकडून तयार करून घेतले जाते. यात संस्थेचा लोगो, वेबसाईटचे नाव, आतील पानांच्या विभागवार लिंक असणारा मेनू व महत्वाच्या विभागांची ओळख करून देणार्‍या मजकुराची व चित्रांची आकर्षक मांडणी केलेली असते. यासाठी इंतरनेटवर उपलब्ध असणारे फोटो व चित्रे यांवर फोटोशॉपमध्ये योग्य संस्कार करून इंडेक्स पेज सारखे दिसणारे एकसंध चित्र तयार केले जाते. पर्याय निवडीस वाव रहावा यासाठी वेगवेगळ्या मांडणीची अशी तीन चित्रे करून त्यातून एका योग्य चित्राची निवड केली जाते. या चित्राचा इंडेक्स पेज म्हणून वापर करता येत नाही. कारण त्यावर वेगवेगळ्या लिक देता येत नाहीत. या चित्राचे वेगवेगळे भाग व आकृत्या फोटोशॉपच्या स्लाईस टूल ने कापून त्याची वेगवेगळी अनेक चित्रे बनविली जातात. ही चित्रे html च्या टेबल वा div टॅग चा उपयोग करुन इंडेक्स पेजचे html पेज बनविण्यात येते. व त्यातील वेगवेगळ्या चित्रांना वा मजकुराला वेगवेगळ्या लिंक दिल्या जातात. आता ज्ञानदीपने केलेल्या अशा इंडेक्स पेजेसची उदाहरणे पाहू. १. डॉ. बापट बाल शिक्षण मंदिर, सांगली च्या वेबसाईटचे इंडेक्स पेज वरील पेजमध्ये निळ्या रंगाचे बॅकग्राऊंड ( पार्श्वभूमी) घेऊन मध्ये पिवळट पांढर्‍या रंगाची एक पट्टी घेतली व त्यात ठळक अक्षरात संस्थेचे नाव, इमारतीचा फोटो व लोगो यांची मांडणी केली. माजी विद्यार्थी, भविष्यकालीन स्वप्ने, सुवर्ण क्षण याविभागांसाठी समर्पक चित्रे वरच्या बाजूस तर अमृत महोत्सव, मुख्याध्यापक मनोगत, यशोधन व क्षणचित्रे या विभागांची चिन्हे खालच्या उजव्या बाजूस मांडली. पानाच्या मुख्य भागात डॉ. बापट बाल शिक्षण शाळेच्या स्थापनेविषयी थोडक्यात माहिती लिहिली. एका दृष्टीक्षेपात वेबसाईटच्या अंतर्गत माहितीची कल्पना देणारे असे हे पान आहे. २. सांगली हायस्कूल, सांगली च्या वेबसाईटचे इंडेक्स पेज येथे वरच्या बाजूस कमानीसारखी रचना करून वरच्या बाजूस लोगो, शाळेचे नाव व वेबसाईतचे नाव तर कमानीत वरच्या भागात शाळेची इमारत व मधल्या मुख्य भागात शाळेच्या संस्थापकांचा फोटो व स्थापनेविषयी माहिती दिली आहे. ३. हि. हा रा. पटवर्धन हायस्कूल, सांगली चे इंडेक्स पेज वरील गुलाबी व लाल बॅकग्राऊंडच्या पेजमध्ये मध्यभागी लंबवर्तुळाकृती डिझाईनमध्ये शाळेची इमारत दाखवून सर्व विभागांच्या लिंक त्याभोवतीच्या वक्र आकृतीत मांडल्या आहेत. वरच्या पट्टीत शाळेचे नाव पांढर्‍या अक्षरात लिहिले आहे. खाली डाव्या बाजूस मा. राजेसाहेबांचा फोटो व उजव्या बाजूस शाळेतील एका कार्यक्रमाचे चित्र दाखविले आहे. ४. वालचंद इंजिनियरिंग कॉलेज, सांगली च्या वेबसाईटचे इंडेक्स पेज येथे निळ्या रंगाचे डिझाईन वापरून वरच्या पट्टीत कॉलेजचे नाव, जागतिक दर्जाचे निदर्शक करणारी पृथ्वीची रेखांकित आकृती,इंजिनिअरिंगच्या स्थापत्य, यांत्रिकी व इलेक्ट्रीकल शाखांच्या निदर्शक चित्रांचा डिझाईनमध्ये उपयोग केला आहे. येथील मेनूदेखील आकर्षक स्वरुपात डिझाईन केला आहे. पहिल्या पानाच्या मुख्य भागात कॉलेजच्या इमारतीचा फोटो व लोगो यांना स्थान दिले आहे व कॉलेजविषयी थोडक्यात महत्वाची माहिती तसेच गौरवप्राप्त प्राध्यापकांचे फोटो दाखविले आहेत. वरील उदाहरणांव्यतिरिक्त इतर अनेक प्रकारच्या डिझाईनमध्ये इंडेक्स पेज बनविता येते. हल्ली कॉम्प्युटर, लॅपटॉप यांचे स्क्रीन अधिक रुंद असतात चित्र दाखविण्याची क्षमता व वेगही जास्त असतो. यामुळे मोठा एकच चांगल्या दर्जाचा फोटो घालूनही चांगले आकर्षक पेज करता येते. ५. माजी विद्यार्थी संघटना,वालचंद इंजिनियरिंग कॉलेज, सांगली च्या वेबसाईटचे इंडेक्स पेज वरील पेजमध्ये एकच फोटो पेजला आकर्षक बनविण्यास पुरेसा होतो हे दिसते. फोटोच्या रुंदीपेक्षा स्क्रीन अधिक रुंद असल्यास राहिलेल्या जागेत संलग्नतेसाठी रंगाच्या पट्ट्या वाढतील असे डिझाईन करता येते.