ವಿನ್ಯಾಸದ ನಿರ್ದೇಶನ (Design Direction)

ವಿನ್ಯಾಸದ ನಿರ್ದೇಶನ ಹಂತವು Theme Builder ಸಂಪೂರ್ಣ ಥೀಮ್ ಅನ್ನು ರಚಿಸುವ ಮೊದಲು, ನಿಮ್ಮ ಥೀಮ್‌ನ ದೃಶ್ಯ ವಿನ್ಯಾಸವನ್ನು (visual design) ಪರಿಶೀಲಿಸಲು, ಉತ್ತಮಗೊಳಿಸಲು ಮತ್ತು ಅಂತಿಮಗೊಳಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.

ಅವಲೋಕನ (Overview)

Discovery Interview ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, Theme Builder ನಿಮ್ಮ ವಿನ್ಯಾಸದ ನಿರ್ದೇಶನವನ್ನು ಡೆಸ್ಕ್‌ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್ ಪ್ರಿವ್ಯೂ ರೆಂಡರಿಂಗ್ ಮೂಲಕ ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಥೀಮ್‌ಗೆ ಬದ್ಧರಾಗುವ ಮೊದಲು, ವಿಭಿನ್ನ ಸಾಧನಗಳಲ್ಲಿ ನಿಮ್ಮ ವಿನ್ಯಾಸವು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದನ್ನು ಇದು ನಿಮಗೆ ನೋಡಲು ಅನುಮತಿಸುತ್ತದೆ.

ವಿನ್ಯಾಸದ ನಿರ್ದೇಶನದ ಅಂಶಗಳು (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) — ಬೋಲ್ಡ್, ರೆಗ್ಯುಲರ್ ಮತ್ತು ಲೈಟ್ ವ್ಯತ್ಯಾಸಗಳು

3. ಲೇಔಟ್ ಮತ್ತು ಸ್ಪೇಸಿಂಗ್ (Layout and Spacing)

• ಕಂಟೇನರ್ ಅಗಲ (Container width) — ವಿಷಯಕ್ಕಾಗಿ ಗರಿಷ್ಠ ಅಗಲ
• ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಮಾರ್ಜಿನ್‌ಗಳು (Padding and margins) — ಅಂಶಗಳรอบದ ಸ್ಪೇಸಿಂಗ್
• ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ (Grid system) — ರಿಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಕಾಲಮ್ ಲೇಔಟ್
• ಕಾಂಪೊನೆಂಟ್ ಸ್ಪೇಸಿಂಗ್ (Component spacing) — UI ಅಂಶಗಳ ನಡುವಿನ ಅಂತರ

4. ದೃಶ್ಯ ಅಂಶಗಳು (Visual Elements)

• ಬಟನ್ ಶೈಲಿಗಳು (Button styles) — ಪ್ರೈಮರಿ, ಸೆಕೆಂಡರಿ ಮತ್ತು ಟರ್ಟಿಯರಿ ಬಟನ್ ವಿನ್ಯಾಸಗಳು
• ಕಾರ್ಡ್ ವಿನ್ಯಾಸಗಳು (Card designs) — ವಿಷಯದ ಬ್ಲಾಕ್‌ಗಳ ಲೇಔಟ್‌ಗಳು
• ಐಕಾನ್‌ಗಳು (Icons) — ಐಕಾನ್ ಶೈಲಿ ಮತ್ತು ಗಾತ್ರೀಕರಣ
• ಬಾರ್ಡರ್‌ಗಳು ಮತ್ತು ಶ್ಯಾಡೋಗಳು (Borders and shadows) — ಸೂಕ್ಷ್ಮ ದೃಶ್ಯ ಆಳ
• ಹಾವರ್ ಎಫೆಕ್ಟ್‌ಗಳು (Hover effects) — ಸಂವಾದಾತ್ಮಕ ಸ್ಥಿತಿ ಶೈಲೀಕರಣ

ಪ್ರಿವ್ಯೂ ರೆಂಡರಿಂಗ್ (Preview Rendering)

ಡೆಸ್ಕ್‌ಟಾಪ್ ಪ್ರಿವ್ಯೂ (Desktop Preview)

ಡೆಸ್ಕ್‌ಟಾಪ್ ಪ್ರಿವ್ಯೂ ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಪೂರ್ಣ ಅಗಲದಲ್ಲಿ (ಸಾಮಾನ್ಯವಾಗಿ 1200px ಅಥವಾ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚು) ತೋರಿಸುತ್ತದೆ:

• ಪೂರ್ಣ ನ್ಯಾವಿಗೇಷನ್ ಮೆನು
• ಎಲ್ಲಾ ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಲೇಔಟ್
• ದೊಡ್ಡ ಟೈಪೋಗ್ರಫಿ ಮತ್ತು ಸ್ಪೇಸಿಂಗ್
• ಎಲ್ಲಾ ದೃಶ್ಯ ಅಂಶಗಳು ಪೂರ್ಣ ಗಾತ್ರದಲ್ಲಿ

ಮೊಬೈಲ್ ಪ್ರಿವ್ಯೂ (Mobile Preview)

ಮೊಬೈಲ್ ಪ್ರಿವ್ಯೂ ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಮೊಬೈಲ್ ಅಗಲದಲ್ಲಿ (ಸಾಮಾನ್ಯವಾಗಿ 375px) ತೋರಿಸುತ್ತದೆ:

• ರಿಸ್ಪಾನ್ಸಿವ್ ನ್ಯಾವಿಗೇಷನ್ (ಹ್ಯಾಂಬರ್거 ಮೆನು)
• ಸಿಂಗಲ್-ಕಾಲಮ್ ಲೇಔಟ್
• ಹೊಂದಾಣಿಕೆಯ ಟೈಪೋಗ್ರಫಿ ಮತ್ತು ಸ್ಪೇಸಿಂಗ್
• ಟಚ್-ಸ್ನೇಹಿ ಬಟನ್ ಗಾತ್ರಗಳು

ರಿಸ್ಪಾನ್ಸಿವ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು (Responsive Breakpoints)

Theme Builder ಈ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿ ಪ್ರಿವ್ಯೂಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ:

Device	Width	Preview
Mobile	375px	Portrait phone
Tablet	768px	Landscape tablet
Desktop	1200px	Full-width desktop
Large Desktop	1920px	Ultra-wide display

ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಉತ್ತಮಗೊಳಿಸುವುದು (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. ಎರಡೂ ಪ್ರಿವ್ಯೂಗಳನ್ನು ಪರಿಶೀಲಿಸಿ (Review both previews) — ಡೆಸ್ಕ್‌ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್ ಚೆನ್ನಾಗಿ ಕಾಣಿಸುತ್ತವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
2. ಎಲ್ಲಾ ಬಣ್ಣಗಳನ್ನು ಪರಿಶೀಲಿಸಿ (Check all colors) — ಕಾಂಟ್ರಾಸ್ಟ್ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
3. ಟೈಪೋಗ್ರಫಿಯನ್ನು ಪರೀಕ್ಷಿಸಿ (Test typography) — ಎಲ್ಲಾ ಗಾತ್ರಗಳಲ್ಲಿ ಓದಲು ಸಾಧ್ಯವಾಗುವಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸಿ
4. ಲೇಔಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ (Confirm layout) — ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ಅಲೈನ್‌ಮೆಂಟ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
5. ವಿನ್ಯಾಸವನ್ನು ಅನುಮೋದಿಸಿ (Approve design) — ಥೀಮ್ ರಚನೆಗೆ ಮುಂದುವರಿಯಿರಿ

ಮುಂದಿನ ಹಂತಗಳು (Next Steps)

ನಿಮ್ಮ ವಿನ್ಯಾಸದ ನಿರ್ದೇಶನವನ್ನು ಅನುಮೋದಿಸಿದ ನಂತರ:

1. Theme Builder ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಥೀಮ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ
2. ಥೀಮ್ ಅನ್ನು ನಿಮ್ಮ WordPress ಸೈಟ್‌ನಲ್ಲಿ ಅಳವಡಿಸಲಾಗುತ್ತದೆ
3. ನೀವು WordPress customizer ಬಳಸಿ ಮತ್ತಷ್ಟು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು
4. Hospitality Menus ಅಥವಾ ಇತರ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಮುಂದುವರಿಯಿರಿ

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು (Best Practices)

• ನಿಜವಾದ ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ (Test on real devices) — ಸಾಧ್ಯವಾದರೆ ನಿಜವಾದ ಫೋನ್‌ಗಳು ಮತ್ತು ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳನ್ನು ಬಳಸಿ
• ಓದಲು ಸಾಧ್ಯವಾಗುವಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸಿ (Check readability) — ಎಲ್ಲಾ ಗಾತ್ರಗಳಲ್ಲಿ ಪಠ್ಯ ಓದಲು ಸಾಧ್ಯವಾಗುವಂತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
• ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ (Verify contrast) — ಪ್ರವೇಶಸಾಧ್ಯತೆಗಾಗಿ Validate Palette Contrast ಬಳಸಿ
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ (Consider performance) — ವೇಗಕ್ಕಾಗಿ ಚಿತ್ರಗಳು ಮತ್ತು ಫಾಂಟ್‌ಗಳನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿ
• ವಿಷಯಕ್ಕಾಗಿ ಯೋಜಿಸಿ (Plan for content) — ನಿಮ್ಮ ನಿಜವಾದ ವಿಷಯದೊಂದಿಗೆ ಲೇಔಟ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ

ಸಮಸ್ಯೆ ಪರಿಹಾರ (Troubleshooting)

ಪ್ರಿವ್ಯೂ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತಿಲ್ಲ (Preview Not Updating)

• ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ
• ಬ್ರೌಸರ್ ಕ್ಯಾಶ್ ಅನ್ನು ಕ್ಲಿಯರ್ ಮಾಡಿ
• ಬೇರೆ ಬ್ರೌಸರ್ ಪ್ರಯತ್ನಿಸಿ
• ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕವನ್ನು ಪರಿಶೀಲಿಸಿ

ಬಣ್ಣಗಳು ವಿಭಿನ್ನವಾಗಿ ಕಾಣುತ್ತವೆ (Colors Look Different)

• ಮಾನಿಟರ್ ಬಣ್ಣ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
• ವಿಭಿನ್ನ ಸಾಧನಗಳಲ್ಲಿ ಪ್ರಯತ್ನಿಸಿ
• ಪ್ರವೇಶಸಾಧ್ಯತೆ ಉಪಕರಣಗಳೊಂದಿಗೆ ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ
• ಬಣ್ಣ ಕುರುಡರ ಸಿಮ್ಯುಲೇಟರ್‌ಗಳನ್ನು ಪರಿಗಣಿಸಿ

ಟೈಪೋಗ್ರಫಿ ಸಮಸ್ಯೆಗಳು (Typography Issues)

• ಫಾಂಟ್ ಫೈಲ್‌ಗಳು ಲೋಡ್ ಆಗುತ್ತಿವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
• ವಿಭಿನ್ನ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಪರಿಶೀಲಿಸಿ
• ನಿಜವಾದ ವಿಷಯದೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ
• ಓದಲು ಸಾಧ್ಯವಾಗುವಿಕೆಗಾಗಿ ಲೈನ್ ಉದ್ದವನ್ನು ಪರಿಗಣಿಸಿ

ಸಂಬಂಧಿತ ದಾಖಲೆಗಳು (Related Documentation)

• Discovery Interview — ವಿನ್ಯಾಸದ ಮಾಹಿತಿಯನ್ನು ಸಂಗ್ರಹಿಸಿ
• Hospitality Menus — ರಚನಾತ್ಮಕ ಮೆನು ಪುಟಗಳನ್ನು ರಚಿಸಿ
• Validate Palette Contrast — ಬಣ್ಣದ ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಶೀಲಿಸಿ
• Generate Logo SVG — ಕಸ್ಟಮ್ ಲೋಗೋಗಳನ್ನು ರಚಿಸಿ