பூஜ்ஜியத்திலிருந்து எனது வடிவமைப்பு அமைப்பை நான் எவ்வாறு உருவாக்கினேன்

ஒவ்வொரு திட்டத்தையும் ஒரு காலியான Figma ஃபைலுடன் தொடங்கும் பல ஆண்டுகளுக்குப் பிறகு, நான் இறுதியாக ஒரு முழுமையான டிசைன் சிஸ்டத்தை (design system) உருவாக்க முடிவெடுத்தேன். இந்தச் செயல்முறை சவாலானதாகவும் அதே சமயம் மிகுந்த திருப்தி அளிப்பதாகவும் இருந்தது, இதே போன்ற பாதையைத் தேர்ந்தெடுக்க விரும்பும் மற்ற வடிவமைப்பாளர்களுக்காக எனது அணுகுமுறையைப் பகிர்ந்து கொள்ள விரும்புகிறேன்.

எனது சமீபத்திய ஐந்து திட்டங்களை UI review (audit) செய்வதன் மூலம் நான் தொடங்கினேன், இதன் மூலம் வெவ்வேறு வடிவமைப்புகளில் மீண்டும் மீண்டும் வரும் பொதுவான பேட்டர்ன்கள் மற்றும் கூறுகளைக் கண்டறிந்தேன். இது எனது வேலையில் நான் முன்பு கவனிக்காத முரண்பாடுகளை வெளிப்படுத்தியது—ஏழு சற்று மாறுபட்ட பட்டன் ஸ்டைல்கள், சீரற்ற இடைவெளி விதிகள் மற்றும் தெளிவான நோக்கம் இன்றி மாறுபடும் டெக்ஸ்ட் ஸ்டைல்கள்.

ஆரம்பத்திலேயே ஒரு கடுமையான அமைப்பை உருவாக்குவதற்குப் பதிலாக, ஒரு உண்மையான கிளையன்ட் திட்டத்தின் மூலம் அதை படிப்படியாக உருவாக்கினேன். EcoTrack ஆப்பிற்காக, நான் ஒவ்வொரு கூறையும் வடிவமைக்கும்போது அதை ஆவணப்படுத்தினேன், இதன் மூலம் திட்டத்தின் தேவைகளுக்கேற்ப பரிணமிக்கும் ஒரு நேரடி அமைப்பை உருவாக்கினேன்.

எனது சிஸ்டத்தின் முக்கிய அம்சங்கள்:

• semantic naming முறைகளைக் கொண்ட ஒரு நெகிழ்வான கலர் சிஸ்டம்
• தங்க விகிதத்தின் அடிப்படையில் டைப்போகிராபி ஸ்கேல்கள்
• தெளிவான பயன்பாட்டு வழிகாட்டுதல்களுடன் கூடிய காம்போனென்ட் வேரியன்ட்கள்
• அனைத்து சாதனங்களிலும் சீரான தன்மையைப் பேணும் இடைவெளி மற்றும் லேஅவுட் விதிகள்

மிகப்பெரிய சவால் தொழில்நுட்ப ரீதியானது அல்ல, மாறாக உளவியல் ரீதியானது—ஒவ்வொரு புதிய பிரச்சனைக்கும் புதிய தீர்வுகளைக் கண்டறிவதற்குப் பதிலாக, அமைப்பை நம்பக் கற்றுக்கொள்வதுதான் அது. ஆனால் அதன் பலன் மிகப்பெரியது: எனது வடிவமைப்பு செயல்முறை இப்போது 40% வேகமானது, வாடிக்கையாளர் திருத்தங்கள் கணிசமாகக் குறைந்துள்ளன, மேலும் மேம்பாட்டுக் குழுவிடம் ஒப்படைக்கும் பணி மிகவும் எளிதாக உள்ளது.

நீங்களும் உங்களுக்கென ஒரு சிஸ்டத்தை உருவாக்கத் திட்டமிட்டிருந்தால், எனது அறிவுரை என்னவென்றால், அடிப்படை கூறுகளுடன் சிறிய அளவில் தொடங்குங்கள், அவற்றை உண்மையான திட்டங்களில் சோதித்துப் பாருங்கள், மற்றும் நீங்கள் செய்யும்போதே ஆவணப்படுத்துங்கள். ஒரு சிறந்த டிசைன் சிஸ்டம் என்பது கட்டுப்பாடுகளின் தொகுப்பாக இல்லாமல், ஒரு நம்பிக்கைக்குரிய கூட்டாளியைப் போல உணரப்பட வேண்டும்.

எனது component documentation முறையின் டெம்ப்ளேட்டை கீழே இணைத்துள்ளேன்—உங்கள் சொந்த பணிப்பாய்விற்கு (workflow) ஏற்ப அதை மாற்றியமைத்துக் கொள்ளலாம்!