જો તમે ક્યારેય ડેવલપરને “લોગો મોટો કરો” એમ કહ્યું હોય અથવા ડિઝાઇનરને “ડેટાબેઝની ભૂલ સુધારો” એમ કહ્યું હોય, તો તમે એકલા નથી. ટેકનોલોજીની બહારના મોટાભાગના લોકો “વેબસાઇટ ડિઝાઇન” અને “વેબસાઇટ ડેવલપમેન્ટ” ને એવી રીતે વાપરે છે જાણે કે તે એકબીજાના પર્યાય હોય. પણ તે નથી. એક વ્યવસાય નક્કી કરે છે કે કાર કેવી દેખાશે અને તેના કંટ્રોલ્સ ક્યાં હશે. બીજો એન્જિન, ટ્રાન્સમિશન અને વાયરિંગ બનાવે છે. જો તમે સાઇટ બનાવવાનું, ટીમ રાખવાનું અથવા કારકિર્દી બદલવાનું વિચારી રહ્યા હોવ, તો આ તફાવત સમજવાથી તમારા પૈસા, સમય અને હતાશા બચશે.
વેબસાઇટ ડિઝાઇન ખરેખર શું આવરી લે છે
વેબ ડિઝાઇનરનું કામ કોડની એક પણ લાઇન લખતા પહેલા સમસ્યાઓનો ઉકેલ લાવવાનું છે. તેઓ સાઇટ કેવી દેખાય છે તેની સાથે સાથે માનવીય દ્રષ્ટિકોણથી તે કેવી રીતે કામ કરે છે તેની પણ કાળજી રાખે છે. તેમના દ્વારા તૈયાર કરવામાં આવેલા પરિણામો (deliverables) પછીના તમામ કાર્યો માટે માર્ગદર્શન પૂરું પાડે છે.
કામ સામાન્ય રીતે માળખા (structure) થી શરૂ થાય છે. ડિઝાઇનર્સ લેઆઉટ અને વાયરફ્રેમ્સ બનાવે છે — સાદા ગ્રેસ્કેલ સ્કીમેટિક્સ જે નાવિગેશન ક્યાં છે, કન્ટેન્ટ કેવી રીતે વહે છે અને જ્યારે યુઝર call-to-action પર ક્લિક કરે ત્યારે શું થાય છે તેનું નકશા બનાવે છે. ઉદાહરણ તરીકે, ઓનલાઇન એપોઇન્ટમેન્ટ બુકિંગ પેજ માટેનું વાયરફ્રેમ એવું બતાવી શકે છે કે યુઝરે વ્યક્તિગત વિગતો ભરતા પહેલા ઉપલબ્ધ સમયના સ્લોટ્સ જોવા જરૂરી છે. જો તમે આ ક્રમમાં ભૂલ કરશો, તો લોકો ફોર્મ ભરાવ્યા વગર જ છોડી દેશે.
એકવાર સ્કેલેટન (માળખું) મંજૂર થઈ જાય પછી, ડિઝાઇનર્સ તેના પર વિઝ્યુઅલ લેંગ્વેજ ઉમેરે છે. તેઓ બ્રાન્ડના ધોરણો મુજબ હોય અને એક્સેસિબિલિટી કોન્ટ્રાસ્ટ ચેક્સ પાસ કરે તેવા કલર પેલેટ્સ પસંદ કરે છે. તેઓ એવા ટાઇપફેસ પસંદ કરે છે જે તેજ સૂર્યપ્રકાશમાં પણ ફોન સ્ક્રીન પર સ્પષ્ટ વંચાય. તેઓ બટન, આઇકોન અને ફોર્મ ફીલ્ડ્સને કન્સીસ્ટન્ટ હોવર સ્ટેટ્સ (hover states) અને ફીડબેક લૂપ્સ સાથે ડિઝાઇન કરે છે. આ બધું યુઝર ઇન્ટરફેસ (UI) ના કાર્ય હેઠળ આવે છે.
ત્યારબાદ યુઝર એક્સપિરિયન્સ (UX) નો વ્યાપક વિષય આવે છે. UX ડિઝાઇનર અવરોધો (friction) વિશે વિચારે છે. ટેસ્ટ ગ્રુપના અડધા લોકો શિપિંગ કેલ્ક્યુલેટર શોધવામાં કેમ નિષ્ફળ ગયા? મોબાઈલ યુઝર્સ પ્રોડક્ટ ગેલેરી પર પિંચ-ઝૂમ કેમ કરે છે? ડિઝાઇનર નાવિગેશનને ફરીથી ગોઠવી શકે છે, લાંબી ચેકઆઉટ પ્રક્રિયાને સ્પષ્ટ સ્ટેપ્સમાં વહેંચી શકે છે, અથવા પાસવર્ડ કેમ રિજેક્ટ થયો તે સમજાવતી માઇક્રો-કોપી ઉમેરી શકે છે. ધ્યેય સજાવટ કરવાનો નથી, પણ સ્પષ્ટતા લાવવાનો છે.
આધુનિક ડિઝાઇનરના ટૂલબોક્સમાં કોલેબોરેટિવ પ્રોટોટાઇપિંગ માટે Figma, Adobe XD, Sketch (જે હજુ પણ Mac-કેન્દ્રી એજન્સીઓમાં સામાન્ય છે), અને ઇમેજ-હેવી એસેટ વર્ક માટે Photoshop સામેલ છે. વધુને વધુ, ડિઝાઇનર્સ ઇન્ટરેક્ટિવ પ્રોટોટાઇપ્સ સોંપે છે જે ડેવલપર્સના જોડાણ પહેલા સ્ટેકહોલ્ડર્સને પેજ પર ક્લિક કરીને જોવા દે છે. આ પ્રારંભિક સિમ્યુલેશન એ સમજણની ભૂલો પકડી લે છે જે સ્ટેટિક સ્ક્રીનશોટ્સમાં છુપાયેલી રહે છે.
વેબસાઇટ ડેવલપમેન્ટ ખરેખર શું કરે છે
જો ડિઝાઇન બ્લુપ્રિન્ટ હોય, તો ડેવલપમેન્ટ એ બાંધકામ ટીમ, ઇલેક્ટ્રિકલ કામ અને બિલ્ડિંગ ઇન્સ્પેક્શનનું મિશ્રણ છે. ડેવલપર્સ મંજૂર થયેલી ડિઝાઇન લે છે અને તેને એવી ફાઇલોમાં ફેરવે છે જેને બ્રાઉઝર્સ રેન્ડર કરી શકે અને સર્વર્સ પ્રોસેસ કરી શકે.
ફ્રન્ટ-એન્ડ ડેવલપર્સ દેખી parte સંભાળે છે. તેઓ કન્ટેન્ટનું માળખું બનાવવા માટે HTML, લેઆઉટ અને ટાઇપોગ્રાફીને નિયંત્રિત કરવા માટે CSS, અને ઇન્ટરેક્ટિવિટી મેનેજ કરવા માટે JavaScript લખે છે. જ્યારે ડેવલપર React — જે સૌથી સામાન્ય JavaScript લાઇબ્રેરીઓમાંની એક છે — નો ઉપયોગ કરે છે, ત્યારે તેઓ ઘણીવાર રિયલ-ટાઇમ સર્ચ ફિલ્ટર્સ અથવા ડાયનેમિક શોપિંગ કાર્ટ જેવા જટિલ ઘટકો (components) બનાવી રહ્યા હોય છે જે પેજ રિલોડ કર્યા વગર અપડેટ થાય છે. તેમનું કામ એ સુનિશ્ચિત કરવાનું છે કે ડિઝાઇનરે દોરેલું બટન ખરેખર ડેટા સબમિટ કરે, લોડિંગ સ્ટેટ બતાવે અને કન્ફર્મેશન મેસેજ પ્રદર્શિત કરે.
તે દેખી parte લેયરની પાછળ બેક એન્ડ હોય છે. બેક-એન્ડ ડેવલપર્સ Node.js, Python, અથવા PHP જેવી ભાષાઓનો ઉપયોગ કરીને સર્વર-સાઇડ લોજિક લખે છે. તેઓ લોગિન પ્રમાણિત કરે છે, પેમેન્ટ પ્રોસેસ કરે છે, અને બિઝનેસ નિયમો સંભાળે છે જે નક્કી કરે છે કે યુઝર “in stock” જોશે કે “out of stock.” જ્યારે તેઓ APIs બનાવે છે, ત્યારે તેઓ એ મેસેન્જર બનાવી રહ્યા હોય છે જે ડેટા લઈ જાય છે