Зертханалық жұмыс: Style Guide құру

Мақсаты: Style Guide (стиль бойынша нұсқаулық) жасауды үйрену, ол дизайндағы бірыңғай стандарттарды сипаттап, веб-қосымшада консистенттілікті сақтауға көмектеседі.

Бағалау критерийлері:

• Style Guide жасаудың негіздерін түсінеді.
• Дизайнның негізгі элементтерін құрылымдап, сипаттай алады.
• Болашақта қолдануға ыңғайлы әрі түсінікті нұсқаулық әзірлейді.

Жұмыс барысы:

1. Дайындық кезеңі:
   • Style Guide үлгілерімен танысыңыз (мысалы, Google Material Design, Apple Human Interface Guidelines).
   • Style Guide мақсаттарын анықтаңыз:
     • Визуалды консистенттілікті құру.
     • Дизайнерлер мен әзірлеушілер арасындағы жұмысты жеңілдету.
   • Негізгі бөлімдерімен танысыңыз:
     • Түстер палитрасы.
     • Қаріптер.
     • Интерфейс элементтері (батырмалар, формалар, мәзірлер).

2. Деректер жинау:
   • Style Guide құрамына енетін элементтерді анықтаңыз:
     • Негізгі және қосымша түстер.
     • Қолданылатын қаріптер, олардың өлшемдері мен стильдері.
     • Батырмалар, формалар, иконкалар, карточкалар үлгілері.
   • Компанияның фирмалық стилі бар болса, соны негіз ретінде қолданыңыз.

3. Style Guide құрылымын жасау:
   • Нұсқаулықты мына бөлімдерге бөліңіз:
     • Кіріспе: сайттың мақсаты мен аудиториясы.

Түстер палитрасы:

• Негізгі түстер (HEX, RGB кодтарымен).
• Қосымша түстер (акцент, фон, мәтін үшін).
• Қолдану мысалдары.

Типография:

• Қаріптер (негізгі және қосымша).
• Заголовоктар (H1–H6), мәтін, түсіндірме жазулар үшін өлшемдер.
• Жоларалық интервал (line-height).

Интерфейс элементтері:

• Батырмалар: стандартты, hover, белсенді емес.
• Формалар: енгізу өрістері, чекбокстар, ауыстырып-қосқыштар.
• Мәзірлер: навигациялық панельдер, ашылмалы тізімдер.

Иконкалар мен суреттер:

• Стиль мен өлшемдері.
• Қолдану үлгілері.

4. Style Guide әзірлеу:
   • Дизайн құралдарын қолданыңыз (Figma, Adobe XD).
   • Әр элементтің визуалды үлгісін қосыңыз (батырмалар: стандартты, hover, disabled).
   • Барлық элементтерге бірыңғай стиль қолданыңыз.

5. Құжатты рәсімдеу:
   • PDF немесе интерактивті файл түрінде дайындаңыз.
   • Әр элементке түсініктеме және қолдану нұсқаулығын қосыңыз.
   • Құжаттың оқылымды әрі түсінікті болуын қадағалаңыз.

6. Тексеру және толықтыру:
   • Нұсқаулықтың мақсатқа сай екеніне көз жеткізіңіз.
   • Топ немесе оқытушыдан кері байланыс алып, өзгерістер енгізіңіз.

7. Презентация:
   • Дайын Style Guide ұсыныңыз.
   • Оны әзірлеу процесін жеңілдету үшін қалай қолдануға болатынын түсіндіріңіз.

Style Guide мысал құрылымы:

• Түстер палитрасы:
  • Негізгі: #0044CC (көк).
  • Қосымша: #FFAA00 (қызғылт-сары).
  • Фон: #F5F5F5 (ашық-сұр).
• Типография:
  • Заголовоктар: Roboto Bold, 24px.
  • Негізгі мәтін: Open Sans Regular, 16px.
• Батырмалар:
  • Стандартты: көк фон, ақ мәтін.
  • Hover: көлеңке, ашық түсті реңк.

Кеңестер:

• Барлық элементтердің әртүрлі құрылғыларда жақсы көрінуіне назар аударыңыз.
• Толықтық пен қарапайымдылық арасында тепе-теңдік сақтаңыз.
• Нақты қолдану сценарийлерінен мысалдар қосыңыз.

Күтілетін нәтиже:

• Дизайнның негізгі элементтерін қамтитын дайын Style Guide.
• Дизайнерлер мен әзірлеушілерге түсінікті нұсқаулық.
• Бірыңғай және тартымды құжат.