WEB DESIGNING क्‍या होता है ?

WEB DESIGNING क्‍या है ?

जब हम किसी भी Website को बनाते है, update करते है, या plan करते है तो उसको हम Web Designing कहते है।

जैसे कि एक बिल्‍डर का काम बिल्‍डिंग बनाना होता है, उसी तरह से Web Designer का काम website को बनाना होता है।

Web Designing के दो हिस्‍से होते है : Front End Web Design और Back End Web Developer.

एक अच्छा Web designer वही होता है जो इस बात का ध्यान रखता है कि user उसके website में क्या देखना चाहता है और उसका primary goal यही होता है कि audience की requirements को समझे और उसे पूरा करे।

FRONT END WEB DESIGN:

जैसे कि नाम से पता चलता है कि Front End Web Design Front मे deal करती है, यानि कि उस हिस्‍से से जो कि User (Visitor) को दिख रहा है।

जब हम किसी भी Website को खोलते है तो हमारे सामने जो भी बना आता है वो सब Front End designer का काम होता है। Front End Web Designing से हमारा मकसद सिर्फ website को सुन्‍दर बनाना ही नही होता, web designing के द्वारा हमें ये भी ध्‍यान रखना होता है कि कौन सी चीज कहॉं जुडे जिससे हमारी website पर आने वाले visitor को कोई दिक्‍कत ना हो।

अगर हम इसे एक Car से compare करे तो Front End designer का काम गाड़ी को सुन्‍दर बनाना है, गाड़ी के engine से उसका कोई मतलब नही है, गाड़ी के अन्‍दर की बैटरी Engine वो सब Back End Developer का काम है।

BACK END WEB DEVELOPER

Web Developer website के दिमाग को बनाता है, जैसे कि website पर अगर कोई फार्म भरेगा तो वो किसके पास पहुँचना चाहिये, कोई ID/Password डालता है तो कौन सी profile खुलनी चाहिये ऐसी चीजो से ।

Back End Developer का काम visitor को नही दिखता, लेकिन development के बिना बढिया website नही बन सकती।

FRONT END WEBSITE DESIGN करते समय किन-किन बातों का ध्यान रखा जाता है?

TARGET AUDIENCE

सबसे पहली और जरूरी चीज होती है Target audience यानि के आपके वेबसाइट में आने वाले visitors, जब आपको अपने website के audience के बारे में पता चल जाता है तो आपका काम काफ़ी आसान हो जाता है। इससे आपको समझ आ जाता है कि आपके audience किस प्रकार के हैं वे किस तरह के content को पसंद करते है, अब इसके अनुसार आप आगे अपनी site को design कर पायेंगे। Example के लिये आप कोई automobile की website बना रहें हैं तो जाहिर सी बात है audience group में वही लोग होंगे जो car आदि पसंद करते हैं, तो इससे आपको उनके interest के बारे में पता चलता है, इससे पता चलता है कि वे आपकी साइट से किस प्रकार की जानकारी चाहते हैं, अब आप अपनी site में सिर्फ़ उन्ही चीजों को डालेंगे जो car पसंद करने वाले व्यक्ति के काम की हो।Information architectureआपको ये पता चल चुका है कि आप को कैसी जानकारियां अपने site में publish करनी है, लेकिन उन जानकारियों को किस format में आप अपने audience तक पहुंचायें कि वह देखने और पढने में और भी ज्यादा interesting लगे इस बात का भी ध्यान रखना जरूरी है।LayoutWebsite के structure या ढांचे को ही उसका layout कहा जाता है, layout डिजाईन करते समय वेबसाइट के अलग-अलग sections जैसे header, sidebar, content, footer आदि के height-width, position आदि को ध्यान में रख कर structure को कुछ ऐसे design किया जाता है कि हम अपने site के information को सही तरीके से user को present कर पायें।पढ़ें: Fluid या Liquid Website Layout Design कैसे बनाएंNavigationकिसी भी site में एक effective navigation ( menu ) का होना बहुत ही जरूरी है| Navigation से ही visitor को पता चलता है उसे जिस प्रकार की जानकारी चाहिये वो कहां और किस page में उपलब्ध है।
एक अच्छे navigation को simple, साधारण और समझ में आने योग्य होनी चाहिये। Navigation को कई तरीके से बनाया जा सकता जैसे की header, sidebar या footer में link डालकर या फ़िर अलग से एक menu बनाकर pages के links को अलग-अलग category में divide करके दिखा सकते हैं जिससे की user को उसकी मनचाही चीजें ढूंढने में आसानी हो।

Navigation की design उस साइट की सभी pages में समान होनी चाहिये।पढ़ें: HTML और CSS से Simple Menu Design कैसे बनायें
Graphicsआपने सुना होगा की एक तस्वीर अपने आप में हजारो शब्द बयां करती हैं, ऐसे ही बिना चित्रों के आपकी वेबसाइट नीरस तथा उबाऊ लग सकती है और visitor 5 seconds में ही आपकी साइट बंद कर के कहीं और चला जायेगा। Images use करने से आपकी साइट दिखने में अच्छी तो लगेगी ही इसके अलावा graphics से आपकी website की SEO (Search Engine Optimization) भी improve होगी।  ग्राफ़िक्स का use करते समय हमें कई बातो का ध्यान रखना जरूरी होता है जैसे:

• Image format
• Resolution
• Size
• Height-Width 
• Color combination

आपके वेबसाइट के images दिखने में attractive होने तो चाहिये इसके अलावा यह content से related और जल्दी से load भी होने चाहियेColorsजब भी हम अपनी website design करते हैं तो हमें color combination का भी ध्यान रखना पडता है, आपने देखा होगा कि ज्यादतर websites में maximum 3 या 4 colors ही use किया जाता है जिससे वह साईट और भी professional दिखाई देता है। उपयोग होने वाले images, fonts, backgrounds आदि के color को पहले से तय किये गये color combination के हिसाब से ही चुना जाता है और सभी pages में वही combination use होता है।
Fontsजाहिर सी बात है अगर fonts clear और पढने लायक ना हो तो हमारी website किसी काम की नही है, इसके अलावा जो fonts हम अपने system में MS-Word आदि में देखते हैं, जरूरी नही कि उन सभी को हम अपनी website में उपयोग कर पायेंगे।
Font चुनते समय हमारे पास 2 options होते हैं:

• हम उन्हीं common fonts का use करते हैं जो user के system में पहले से installed होते हैं या
• Web fonts का उपयोग करते हैं जिसमें हमें fonts को अपने site में ही include करना होता है

इन सब के अलावा हमें font size, color, bold हो या light हो, content के situation से match कर रहा है या नही इन सभी बातों को भी ध्यान में रखा जाता है।

WEBSITE DESIGN करने के लिये क्या सीखना जरूरी है?

आजकल website बनाना बहुत ही आसान हो गया है, internet पर कई सारे ऐसे tools हैं जिनकी मदद से आप बिना कोई programming किये आसानी से अपना वेबसाइट बना सकते है|

लेकिन अगर आप एक professional web designer बनना चाहते हैं, आप चाहते हैं कि किसी भी तरह की website हो आप उसे design करलें और सिर्फ़ डिजाइन नही बल्कि उसके अन्दर की सारी functionality को भी आप समझ सकें, तो इसके लिये आपके अन्दर थोडी सी programming skills होनी जरूरी है। घबराइये नही, web design सीखना बहुत ही आसान और मजेदार है।  वैसे तो website designing में कई सारी technologies हैं पर सबसे पहले आप नीचे दिये कुछ जरूरी चीजों से सीखना शुरु करें:

• HTML
• CSS
• Basic Javascript (Optional)
• jQuery

HTMLयानि की HyperText Markup Language, यह सबसे जरूरी और पहली चीज है किसी वेबसाइट को बनाने के लिये।

इससे website का layout यानी की structure तैयार किया जाता है। यकीन मानिये यह सीखने में बहुत ही आसान है, और इसे सीख कर आप एक simple web page कुछ ही मिनटो में तैयार कर सकते हैं। आप सिर्फ़ 20 minutes में basic HTML सीख सकते है।
CSSआपको HTML सीखने के बाद CSS (Cascading Style Sheets) सीखना आवश्यक है क्यों कि आप सिर्फ़ HTML से अपने वेबसाइट को attractive नही बना सकते। HTML से website का ढांचा तैयार किया जाता है फ़िर CSS से उसमें सजावट की जाती है यानि की रंग रोगन का सारा काम CSS से होता है। इसे सीखना HTML से भी ज्यादा मजेदार होता है, पर हां इसे सीखने से पहले HTML जरूर सीखें क्योंकि अकेला CSS कुछ भी नही कर सकता। Javascriptवैसे तो यह इतना आवश्यक नही है, आप HTML+CSS से बेहतरीन design बना सकते हैं| लेकिन अगर आप कुछ नये functionalities add करना चाहते हैं जैसे की आपने देखा होगा किसी साइट में कुछ forms होते हैं, contact form, registration form आदि जिसको fill करके submit करने पर बिना पेज reload हुये हमारा data submit हो जाता है, इस तरह की चीजों को javascript से बनाया जाता है। jQueryJavascript के कुछ common tasks को और आसान बनाने के लिये jQuery का use किया जाता है।

यह Javascript से ज्यादा आसान होता है।

जिस काम को करने के लिये Javascript में कई सारे lines of code लिखने पडते हैं उसे हम jQuery में आसानी से कुछ ही लाइनो में कर सकते हैं। 

पढ़ें:

WEB DESIGN में USE होने वाले TOOLS:

इसके लिये कई सारे tools होते हैं, designing के लिये अलग, coding के लिये अलग tools use किये जाते हैं। जरूरी नही की आप इन्हीं tools का इस्तेमाल करें, designer अपने हिसाब से अपनी पसंद की tools select करते हैं। 

यहां नीचे कुछ popular web designing tools की list दी जा रही है जो beginners के लिये उपयोगी हैं:Designing के लिये tools:जैसे हम घर बनवाने के लिये पहले architecture से नक्‍शा बनवाते है, ठीक उसी तरह Website design करने से पहले हमारे पास एक विचार होना चाहिये कि website कैेसी दिखेगी। कई लोग पूरी website का design बहुत बारिकी से photoshop पर बनवाते है, लेकिन जो experts है वो Photoshop को सिर्फ एक blueprint या prototype बनाने के लिये करते है।

• Photoshop
• Corel Draw

Coding के लिये text editors:

• Notepad++
• Dreamweaver

 
Web browsers:

• Chrome
• Firefox
• Safari
• Opera

HTML :

HTML का मतलब होता है Hyper Text Markup Language. HTML एक markup language है जिसका प्रयोग Website का ढा़चा बनाने के लिये होता है। HTML एक भाषा है जो कि Code के रूप में लिखी जाती है। HTML सीखन बहुत ही आसान है। एक बार HTML सीख ली तो आप एक सरल सी Static website बना सकते है।

CSS :

CSS का मतलब है Cascading Style Sheet. HTML हमारी website को structure देने के काम आता है और दूसरी ओर CSS हमारे HTML से बने structure को design देने के काम में आती है, ये हमारे design को Style देने के काम आती है।

JavaScript:

यहॉं हम पूरी तरह से programming करना शुरू कर देते है। HTML/CSS हमारी website को बना देती है, लेकिन design को interactive बनाने के लिये JS का प्रयोग होता है। Interactive से मेरा मतलब जैसे आप Facebook पर ऊपर Friend request वाले icon पर click करते हो तो नीचे एक drop down खुल जाता है। JavaScript ये detect करता है कि User ने आपकी website पर क्‍या Action किया है अौर उस action के हिसाब से वो design को बदल देता है। जब किसी website पर ऊपर images घुम रही हाेती है तो इनको JavaScript घुमाता है।

HTML और CSS मिलकर एक बहुत अच्‍छी Static Website बना सकते है। अगर आपने सिर्फ Photoshop, HTML और CSS सीख लिया तो आप किसी IT company मे नौकरी ढ़ुढ कसते है और एक अच्‍छी Website बना सकते है।

FRONT END DESIGN के लिये क्‍या सीख्‍ो ?

HTML/CSS/JS से आप static website बना सकते है, static website मे hum database entry, Login, Register जैसे features नही बना सकते।

PHP

वैसे तो backend पर बहुत सी भाषायें चल सकती है, लेकिन शुरू में PHP सीखना सबसे आसान है। PHP बहुत ही powerful है और इससे हर feature perform हो सकता है। Facebook PHP पर ही बनायी गयी थी।

PHP सीखना इसलिये भी फायदेमंद है क्‍योकि इससे हम कम पैसो में ही website बना सकते है। इससे हम WordPress पर web site design करन भी सीख सकते है, दुनिया की सबसे ज्‍यादा website और blogs WordPress पर बने है, तो PHP सीखने से आपके लिये WordPress बनाना आसान हाे जायेगा।

DataBase

जब हम Facebook पर ID बनाते है या YouTube पर video देखते है। तो ये सारा data जहॉं store होता है उसे हम Data Base कहते है। सबसे ज्‍यादा प्रयोग होने वाला Data MySQL है इसे सीखने के बाद आप अपनी website पर लोगो का data भी store करवा सकते हो।

MySQL जैसे data base मे कुछ भी store करवाने के लिये PHP जैसी भाषाओ का प्रयोग हो रहा है।

कहाँ से शुरू करे ?

बहुत से लोग ये सवाल पूछते है, मैं आज आपको चरण-दर-चरण बताता हूँ कि क्‍या करना है।

• HTML सीख्‍ाना शुरू करो।
• साथ साथ photoshop के basic सीखो, photoshop मे बहुत ज्‍यादा advanced जाने की जरूरत नही है। बेसिर आने चाहिये बस ।
• जब HTML में अापका हाथ चलने लग जाता है तो CSS सीखना शुरू कर दिया है।
• रोज HTML / CSS प्रयोग करके कुछ ना कुछ बनाओं।
• HTML / CSS का अच्‍छी तरह से सीखने के बाद JavaScript सीखना शुरू करो। karo
• JavaScript को बेसिक जान लो।
• फिर PHP शुरू करो, और कुछ projects बनाकर देखो।
• WordPress पर websites बनाना सीख्‍ाो।
• अब PHP और DataBase को साथ साथ उसको इस्‍तेमाल करके कोई भ्‍ाी सरल project बना लो। इतना सब कुछ करने के बाद आप एक बढि़या level के Web Design बन जाओगे। इतने हुनर होने के बाद आप Internet पर Freelance word करके dollars मे पैसा कमा सकते हो। या किसी अच्‍छी company मे नौकरी के लिये आवेदन कर सकते हो।

Web Designing एक ऐसा हुनर है जिसकी आने वाले समय में बहुत मांग होगी। Expert level पर जाने के लिये मेहनत करी जायेगी। लेकिन मेहनत से डरने वालो के लिये जीवन में सिर्फ गरीबी ही लिखी है।

अगर आपको अभी भी Web Designing के बारे में कोई सवाल है तो नीचे comment करे, और मुझे उसका जवाब भी दे कि "क्‍या आप Web Designing सीखना चाहते है ?"

धन्‍यवाद,