Skip to main content

வடிவமைப்புக் குறிக்கோள் (Design Direction)

வடிவமைப்பு குறிக்கோள் படிநிலை, Theme Builder முழுமையான தீம் உருவாக்கத்திற்கு முன், உங்கள் தீமின் காட்சி வடிவமைப்பை (visual design) மதிப்பாய்வு செய்யவும், செம்மைப்படுத்தவும், இறுதி செய்யவும் உதவுகிறது.

கண்ணோட்டம் (Overview)​

Discovery Interview-ஐ முடித்த பிறகு, Theme Builder உங்கள் வடிவமைப்புக் குறிக்கோளை டெஸ்க்டாப் மற்றும் மொபைல் முன்னோட்ட ரெண்டரிங் (desktop and mobile preview rendering) மூலம் உங்களுக்கு வழங்குகிறது. இதன் மூலம், தீம் உருவாக்கத்திற்கு உறுதியளிக்கும் முன், வெவ்வேறு சாதனங்களில் உங்கள் வடிவமைப்பு எப்படி இருக்கும் என்பதை நீங்கள் சரியாகப் பார்க்க முடியும்.

வடிவமைப்புக் குறிக்கோள் கூறுகள் (Design Direction Components)​

1. வண்ணத் தட்டு (Color Palette)​

உங்கள் தீமின் வண்ணத் திட்டம் இதில் அடங்கும்:

  • முதன்மை நிறம் (Primary color) — பொத்தான்கள், இணைப்புகள் மற்றும் முக்கிய அம்சங்களுக்காகப் பயன்படுத்தப்படும் பிரதான பிராண்ட் நிறம்.
  • இரண்டாம் நிலை நிறம் (Secondary color) — வேறுபாட்டிற்கான துணை நிறம்.
  • முக்கிய நிறம் (Accent color) — முக்கியமான அம்சங்களுக்கான ஹைலைட் நிறம்.
  • நடுநிலை நிறங்கள் (Neutral colors) — பின்னணி மற்றும் உரைக்கு பயன்படுத்தப்படும் சாம்பல் மற்றும் வெள்ளை நிறங்கள்.
  • உரை நிறம் (Text color) — வாசிப்புத்திறனுக்கான பிரதான உரை நிறம்.

2. எழுத்து வடிவம் (Typography)​

இதற்கான எழுத்துத் தேர்வுகள்:

  • தலைப்பு எழுத்து வடிவம் (Heading font) — பக்கத் தலைப்புகள் மற்றும் பிரிவு தலைப்புகளுக்குப் பயன்படுத்தப்படுகிறது.
  • உடல் உரை எழுத்து வடிவம் (Body font) — பத்தி உரை மற்றும் உள்ளடக்கத்திற்குப் பயன்படுத்தப்படுகிறது.
  • எழுத்து அளவுகள் (Font sizes) — வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு மாறும் அளவு.
  • வரி இடைவெளி (Line height) — வாசிப்புத்திறனுக்கான வரிகளுக்கு இடையேயான இடைவெளி.
  • எடை (Font weights) — போல்ட் (bold), ரெகுலர் (regular), மற்றும் லைட் (light) மாறுபாடுகள்.

3. அமைப்பு மற்றும் இடைவெளி (Layout and Spacing)​

  • உள்ளட Container அகலம் (Container width) — உள்ளடக்கத்திற்கான அதிகபட்ச அகலம்.
  • பேடிங் மற்றும் மார்ஜின்கள் (Padding and margins) — அம்சங்களைச் சுற்றியுள்ள இடைவெளி.
  • கிரिड அமைப்பு (Grid system) — எல்லா திரைகளுக்கும் ஏற்ற வடிவமைப்பிற்கான நிரல் அமைப்பு (column layout).
  • கூறு இடைவெளி (Component spacing) — UI அம்சங்களுக்கு இடையேயான தூரம்.

4. காட்சி அம்சங்கள் (Visual Elements)​

  • பொத்தான் பாணிகள் (Button styles) — முதன்மை, இரண்டாம் நிலை மற்றும் மூன்றாம் நிலை பொத்தான் வடிவமைப்புகள்.
  • கார்டு வடிவமைப்புகள் (Card designs) — உள்ளடக்கத் தொகுப்புகளுக்கான அமைப்புகள்.
  • ஐகான்கள் (Icons) — ஐகான் பாணி மற்றும் அளவு.
  • எல்லைகள் மற்றும் நிழல்கள் (Borders and shadows) — நுட்பமான காட்சி ஆழம்.
  • மாவுர் விளைவுகள் (Hover effects) — ஊடாடும் நிலை ஸ்டைலிங்.

முன்னோட்ட ரெண்டரிங் (Preview Rendering)​

டெஸ்க்டாப் முன்னோட்டம் (Desktop Preview)​

டெஸ்க்டாப் முன்னோட்டம் உங்கள் வடிவமைப்பை முழு அகலத்தில் (பொதுவாக 1200px அல்லது அதற்கு மேல்) காட்டுகிறது:

  • முழு வழிசெலுத்தல் மெனு (Full navigation menu)
  • அனைத்து நிரல்களுடன் கூடிய முழுமையான அமைப்பு (Complete layout with all columns)
  • பெரிய எழுத்து வடிவம் மற்றும் இடைவெளி
  • அனைத்து காட்சி அம்சங்களும் முழு அளவில்

மொபைல் முன்னோட்டம் (Mobile Preview)​

மொபைல் முன்னோட்டம் உங்கள் வடிவமைப்பை மொபைல் அகலத்தில் (பொதுவாக 375px) காட்டுகிறது:

  • எல்லா திரைகளுக்கும் ஏற்ற வழிசெலுத்தல் (hamburger menu)
  • ஒற்றை நிரல் அமைப்பு (Single-column layout)
  • சரிசெய்யப்பட்ட எழுத்து வடிவம் மற்றும் இடைவெளி
  • தொடுவதற்கு எளிதான பொத்தான் அளவுகள் (Touch-friendly button sizes)

எல்லா திரைகளுக்கும் ஏற்ற இடைவெளிகள் (Responsive Breakpoints)​

Theme Builder இந்த இடைவெளிகளில் முன்னோட்டங்களை ரெண்டர் செய்கிறது:

சாதனம் (Device)அகலம் (Width)முன்னோட்டம் (Preview)
மொபைல்375pxபோர்ட்ரெய்ட் ஃபோன்
டேப்லெட்768pxலேண்ட்ஸ்கேப் டேப்லெட்
டெஸ்க்டாப்1200pxமுழு அகல டெஸ்க்டாப்
பெரிய டெஸ்க்டாப்1920pxஅல்ட்ரா-வைட் டிஸ்ப்ளே

உங்கள் வடிவமைப்பை செம்மைப்படுத்துதல் (Refining Your Design)​

மாற்றங்களைச் செய்தல் (Making Adjustments)​

பின்வருவனவற்றின் மூலம் உங்கள் வடிவமைப்புக் குறிக்கோளை நீங்கள் செம்மைப்படுத்தலாம்:

  1. வண்ணங்களைச் சரிசெய்தல் (Adjusting colors) — வண்ணத் தட்டில் உள்ள எந்த நிறத்தையும் மாற்றலாம்.
  2. எழுத்துக்களை மாற்றுதல் (Changing fonts) — வெவ்வேறு எழுத்துருக்களைத் தேர்ந்தெடுக்கலாம்.
  3. இடைவெளியை மாற்றுதல் (Modifying spacing) — பேடிங் மற்றும் மார்ஜின்களைச் சரிசெய்யலாம்.
  4. அமைப்பை புதுப்பித்தல் (Updating layout) — உள்ளடக்க அகலங்கள் மற்றும் கிரिड நிரல்களை மாற்றலாம்.
  5. அம்சங்களை தனிப்பயனாக்குதல் (Customizing elements) — பொத்தான் பாணிகள், கார்டு வடிவமைப்புகள் போன்றவற்றை மாற்றலாம்.

முன்னோட்ட புதுப்பிப்புகள் (Preview Updates)​

மாற்றங்கள் நிகழ்நேரத்தில் பிரதிபலிக்கின்றன:

  • டெஸ்க்டாப் முன்னோட்டம் உடனடியாகப் புதுப்பிக்கப்படும்.
  • மொபைல் முன்னோட்டம் உடனடியாகப் புதுப்பிக்கப்படும்.
  • அனைத்து எல்லா திரைகளுக்கும் ஏற்ற இடைவெளிகளும் புதுப்பிக்கப்படும்.
  • மாற்றங்களைச் சரிபார்க்க நீங்கள் முன்னோட்டங்களுக்கு இடையில் மாறலாம்.

ஒப்பீட்டுப் பார்வை (Comparison View)​

உங்கள் வடிவமைப்புக் குறிக்கோளை இவற்றோடு ஒப்பிடலாம்:

  • அசல் வடிவமைப்பு (Original design) — என்ன மாறியுள்ளது என்று பார்க்க.
  • போட்டியாளர் வடிவமைப்புகள் (Competitor designs) — உத்வேகம் தரும் தளங்களுடன் ஒப்பிடுவதற்கு.
  • முந்தைய பதிப்புகள் (Previous versions) — முந்தைய வடிவமைப்புக் குறிக்கோள்களுக்குத் திரும்பச் செல்ல.

வடிவமைப்புக் குறிக்கோள் ஒப்புதல் (Design Direction Approval)​

உங்கள் வடிவமைப்பில் நீங்கள் திருப்தி அடைந்தவுடன்:

  1. இரண்டு முன்னோட்டங்களையும் மதிப்பாய்வு செய்யவும் — டெஸ்க்டாப் மற்றும் மொபைல் இரண்டும் சரியாக இருக்கிறதா என்று சரிபார்க்கவும்.
  2. அனைத்து வண்ணங்களையும் சரிபார்க்கவும் — கான்ட்ராஸ்ட் மற்றும் அணுகல்தன்மை (accessibility) உள்ளதா என்பதை உறுதிப்படுத்தவும்.
  3. எழுத்து வடிவத்தை சோதிக்கவும் — எல்லா அளவுகளிலும் வாசிப்புத்திறன் உள்ளதா என்பதை உறுதிப்படுத்தவும்.
  4. அமைப்பை உறுதிப்படுத்தவும் — இடைவெளி மற்றும் சீரமைப்பைச் சரிபார்க்கவும்.
  5. வடிவமைப்பிற்கு ஒப்புதல் அளிக்கவும் — தீம் உருவாக்கத்திற்குச் செல்லவும்.

அடுத்த படிகள் (Next Steps)​

உங்கள் வடிவமைப்புக் குறிக்கோளுக்கு ஒப்புதல் அளித்த பிறகு:

  1. Theme Builder உங்கள் முழுமையான தீமை உருவாக்கும்.
  2. அந்தத் தீம் உங்கள் WordPress தளத்தில் நிறுவப்படும்.
  3. நீங்கள் WordPress customizer-ஐப் பயன்படுத்தி மேலும் தனிப்பயனாக்கலாம்.
  4. Hospitality Menus அல்லது பிற அம்சங்களுக்குச் செல்லவும்.

சிறந்த நடைமுறைகள் (Best Practices)​

  • உண்மையான சாதனங்களில் சோதிக்கவும் — முடிந்தால் உண்மையான ஃபோன்கள் மற்றும் டேப்லெட்டுகளைப் பயன்படுத்தவும்.
  • வாசிப்புத்திறனைச் சரிபார்க்கவும் — எல்லா அளவுகளிலும் உரை படிக்கக்கூடியதாக இருப்பதை உறுதி செய்யவும்.
  • கான்ட்ராஸ்டைச் சரிபார்க்கவும் — அணுகல்தன்மைக்காக Validate Palette Contrast பயன்படுத்தவும்.
  • செயல்திறவைக் கருத்தில் கொள்ளவும் — வேகத்திற்காக படங்களையும் எழுத்துருக்களையும் மேம்படுத்தவும்.
  • உள்ளடக்கத்திற்கான திட்டமிடல் — உங்கள் உண்மையான உள்ளடக்கத்துடன் அமைப்பு வேலை செய்கிறதா என்பதை உறுதிப்படுத்தவும்.

சிக்கல் தீர்க்கும் வழிகாட்டி (Troubleshooting)​

முன்னோட்டம் புதுப்பிக்கவில்லை (Preview Not Updating)​

  • பக்கத்தை புதுப்பிக்கவும் (Refresh the page).
  • பிரவுசர் கேஷை அழிக்கவும் (Clear browser cache).
  • வேறு பிரவுசரைப் பயன்படுத்த முயற்சிக்கவும்.
  • இணைய இணைப்பைச் சரிபார்க்கவும்.

வண்ணங்கள் வேறு மாதிரி தெரிகின்றன (Colors Look Different)​

  • மானிட்டர் வண்ண அமைப்புகளைச் சரிபார்க்கவும்.
  • வெவ்வேறு சாதனங்களில் முயற்சிக்கவும்.
  • அணுகல் கருவிகளுடன் வண்ண கான்ட்ராஸ்டைச் சரிபார்க்கவும்.
  • வண்ண குருட்டுத்தன்மை உருவகப்படுத்திகளை (color blindness simulators) கருத்தில் கொள்ளவும்.

எழுத்து வடிவம் சிக்கல்கள் (Typography Issues)​

  • எழுத்துரு கோப்புகள் ஏற்றப்படுகின்றனவா என்று சரிபார்க்கவும்.
  • வெவ்வேறு இடைவெளிகளில் எழுத்து அளவைச் சரிபார்க்கவும்.
  • உண்மையான உள்ளடக்கத்துடன் சோதிக்கவும்.
  • வாசிப்புத்திறனுக்காக வரி நீளத்தைக் கருத்தில் கொள்ளவும்.
  • Discovery Interview — வடிவமைப்புக் தகவல்களைச் சேகரிக்க.
  • Hospitality Menus — கட்டமைக்கப்பட்ட மெனுப் பக்கங்களை உருவாக்க.
  • Validate Palette Contrast — வண்ண அணுகல்தன்மையைச் சரிபார்க்க.
  • Generate Logo SVG — தனிப்பயன் லோகோக்களை உருவாக்க.