जर तुम्ही कधी एखाद्या डेव्हलपरला "लोगो मोठा करा" असे सांगितले असेल किंवा डिझायनरला "डेटाबेस एरर फिक्स करा" असे सांगितले असेल, तर तुम्ही एकटे नाही आहात. तंत्रज्ञान क्षेत्राबाहेरील बहुतेक लोक "वेबसाइट डिझाइन" आणि "वेबसाइट डेव्हलपमेंट" हे शब्द एकमेकांऐवजी वापरतात. पण ते दोन्ही सारखे नाहीत. एक व्यवसाय ठरवतो की कार कशी दिसेल आणि तिचे कंट्रोल्स कुठे असतील. दुसरा व्यवसाय इंजिन, ट्रान्समिशन आणि वायरिंग तयार करतो. जर तुम्ही एखादी साइट बनवण्याचे, टीम हायर करण्याचे किंवा करिअर बदलण्याचे नियोजन करत असाल, तर यातील फरक समजून घेतल्याने तुमचे पैसे, वेळ आणि त्रास वाचू शकतो.
वेबसाइट डिझाइनमध्ये नेमके काय येते
वेब डिझायनरचे काम कोडची एक ओळही लिहिण्यापूर्वी समस्या सोडवणे हे असते. त्यांना साइट कशी दिसते यासोबतच मानवी दृष्टिकोनातून ती कशी कार्य करते, याचीही काळजी असते. त्यांचे काम (deliverables) त्यानंतर येणाऱ्या सर्व गोष्टींसाठी मार्गदर्शक ठरते.
काम सहसा संरचनेपासून (structure) सुरू होते. डिझायनर्स लेआउट आणि वायरफ्रेम्स तयार करतात — हे साधे ग्रेस्केल रेखाचित्र असते जे नेव्हिगेशन कुठे असेल, कंटेंट कसा असेल आणि युजरने 'call-to-action' वर क्लिक केल्यावर काय होईल, याचे नियोजन करते. उदाहरणार्थ, ऑनलाइन अपॉइंटमेंट बुकिंग पेजच्या वायरफ्रेममध्ये असे दाखवले जाऊ शकते की युजरने वैयक्तिक तपशील भरण्यापूर्वी उपलब्ध वेळ (time slots) पाहणे आवश्यक आहे. जर ही क्रमवारी चुकली, तर लोक फॉर्म भरणे सोडून देतात.
एकदा का सांगाडा (skeleton) मंजूर झाला की, डिझायनर्स त्यावर व्हिज्युअल लँग्वेजचा थर चढवतात. ते ब्रँडच्या मानकांनुसार आणि ॲक्सेसिबिलिटी कॉन्ट्रास्ट चेकनुसार कलर पॅलेट निवडतात. ते असे फॉन्ट्स (typefaces) निवडतात जे कडक सूर्यप्रकाशातही फोनच्या स्क्रीनवर स्पष्ट वाचता येतील. ते बटणे, आयकॉन्स आणि फॉर्म फील्ड्स अशा प्रकारे डिझाइन करतात की त्यावर माऊस नेल्यावर (hover states) किंवा कृती केल्यावर योग्य फीडबॅक मिळेल. हे सर्व 'युजर इंटरफेस' (UI) कामाचा भाग आहे.
त्यानंतर 'युजर एक्सपिरियन्स' (UX) हा व्यापक विषय येतो. UX डिझायनर अडथळ्यांचा (friction) विचार करतो. चाचणी घेतलेल्या गटातील अर्ध्या लोकांना शिपिंग कॅल्क्युलेटर का सापडले नाही? मोबाईल युजर्स प्रॉडक्ट गॅलरीवर 'पिंच-झूम' का करतात? डिझायनर नेव्हिगेशनची पुनर्रचना करू शकतो, लांब चेकआउट प्रक्रिया सोप्या टप्प्यांत विभागू शकतो किंवा पासवर्ड का नाकारला गेला हे सांगणारे 'मायक्रो-कॉपी' जोडू शकतो. याचे उद्दिष्ट सजावट करणे नसून स्पष्टता आणणे हे आहे.
आधुनिक डिझायनरच्या टूलबॉक्समध्ये कोलाबोरेटिव्ह प्रोटोटाइपिंगसाठी Figma, Adobe XD, Sketch (जे अजूनही Mac-केंद्रित एजन्सीमध्ये वापरले जाते) आणि इमेज-हेवी कामासाठी Photoshop यांचा समावेश होतो. आता डिझायनर्स इंटरअॅक्टिव्ह प्रोटोटाइप्स देतात, ज्यामुळे डेव्हलपर्सच्या कामात येण्यापूर्वीच स्टेकहोल्डर्सना पेजेसवर क्लिक करून पाहता येते. हे सुरुवातीचे सिम्युलेशन अशा गैरसमजांना पकडते जे स्टॅटिक स्क्रीनशॉट्समध्ये दिसत नाहीत.
वेबसाइट डेव्हलपमेंट नेमके काय करते
जर डिझाइन म्हणजे ब्लूप्रिंट असेल, तर डेव्हलपमेंट म्हणजे बांधकाम कामगार, इलेक्ट्रिकल काम आणि इमारतीची तपासणी या सर्वांचा एकत्रित संगम आहे. डेव्हलपर्स मंजूर डिझाइन्स घेतात आणि त्यांचे रूपांतर अशा फाईल्समध्ये करतात ज्या ब्राउझर रेंडर करू शकतात आणि सर्व्हर्स प्रोसेस करू शकतात.
फ्रंट-एंड डेव्हलपर्स दृश्य भागाची (visible side) जबाबदारी सांभाळतात. ते कंटेंटच्या संरचनेसाठी HTML, लेआउट आणि टायपोग्राफी नियंत्रित करण्यासाठी CSS आणि इंटरअॅक्टिव्हिटी व्यवस्थापित करण्यासाठी JavaScript लिहितात. जेव्हा एखादा डेव्हलपर React — जे सर्वात सामान्य JavaScript लायब्ररींपैकी एक आहे — वापरतो, तेव्हा ते अनेकदा रिअल-टाइम सर्च फिल्टर्स किंवा डायनॅमिक शॉपिंग कार्ट्स सारखे जटिल घटक (components) तयार करत असतात, जे पेज रीलोड न करता अपडेट होतात. डिझायनरने काढलेले बटण प्रत्यक्षात डेटा सबमिट करते का, लोडिंग स्टेट दाखवते का आणि कन्फर्मेशन मेसेज प्रदर्शित करते का, हे सुनिश्चित करणे हे त्यांचे काम आहे.
त्या दृश्य थराच्या मागे 'बॅक एंड' (back end) असते. बॅक-एंड डेव्हलपर्स Node.js, Python किंवा PHP सारख्या भाषा वापरून सर्व्हर-साइड लॉजिक लिहितात. ते लॉगिन ऑथेंटिकेट करतात, पेमेंट प्रोसेस करतात आणि युजरला "in stock" किंवा "out of stock" दिसेल की नाही हे ठरवणारे बिझनेस रूल्स हाताळतात. जेव्हा ते APIs तयार करतात, तेव्हा ते डेटा वाहून नेणारा संदेशवाहक (messenger) तयार करत असतात.