Зертханалық жұмыс: Мобильді құрылғыларға бейімделген дизайн әзірлеу 

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

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

• Сайттың бейімделген дизайнын әзірлейді.
• Мобильді құрылғылардың ерекшеліктерін (экран өлшемдері, тач-интерфейс) ескереді.
• Түрлі экран ажыратымдылықтарына сәйкес макет жасайды.

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

1. Дайындық кезеңі:
   • Бейімделген дизайнның негізгі қағидаларымен танысыңыз:
     • Икемді торды пайдалану.
     • Әртүрлі экран ажыратымдылықтарына (320px, 768px, 1024px және т.б.) бейімдеу.
     • Media query қолдану.
   • Бейімделген сайттардың мысалдарын зерттеңіз (мысалы, браузердің мобильді нұсқасын қарау құралдары арқылы).

2. Интерфейстің негізгі элементтерін анықтау:
   • Бар сайттың немесе жасалатын дизайнның құрылымын талдаңыз.
   • Мобильді құрылғыларға бейімделуі тиіс элементтерді айқындаңыз:
     • Навигация мәзірі (мысалы, «гамбургер-меню»).
     • Суреттер мен батырмалардың өлшемдері.
     • Мәтіндік контентті жеңілдету.

3. Мобильді прототип әзірлеу:
   • Мобильді нұсқаға арналған прототип жасаңыз (Figma, Adobe XD және т.б.).
   • Интерфейс элементтерінің тач-интерфейс үшін ыңғайлы орналасуын қадағалаңыз:
     • Батырмалар мен сілтемелер жеткілікті үлкен болуы керек.
     • Мәтін енгізу өрістері оңай белсенуі тиіс.
   • Макетті мына өлшемдерде тексеріңіз:
     • Кіші экрандар (320–480 px, мысалы, смартфондар).
     • Орташа экрандар (768 px, мысалы, планшеттер).

4. Дизайнды нақтылау:
   • Негізгі элементтердің бейімделуін баптаңыз:
     • Мәтін: қаріп көлемі оқылатын болуы керек (14–16px).
     • Суреттер: пропорционалды өлшем өзгерту (responsive images).
     • Макет: экран ені азайғанда элементтер автоматты түрде бірінің астына орналасуы керек.
   • Мобильді нұсқа үшін аса маңызды емес элементтерді жасырыңыз немесе жеңілдетіңіз.

5. Дизайнды тексеру:
   • Әртүрлі құрылғылар үшін алдын ала қарау режимінде макетті тексеріңіз.
   • Батырмалармен, формалармен және басқа интерфейс элементтерімен әрекеттесуді сынақтан өткізіңіз.
   • Дизайн барлық ажыратымдылықтарда эстетикалық әрі функционалды болып қалғанына көз жеткізіңіз.

6. Жұмысты рәсімдеу:
   • Есеп дайындаңыз, оған енгізілетіндер:
     • Әртүрлі құрылғыларға арналған бейімделген дизайн скриншоттары.
     • Мобильді нұсқаға енгізілген өзгерістер сипаттамасы.
     • Дизайнерлік шешімдердің негіздемесі (мысалы, мәзірді жеңілдету ыңғайлы болу үшін).

Мысал тапсырма: Интернет-дүкенге бейімделген дизайн жасаңыз, оған кіретіндер:

• Басты бет: тақырып, баннерлер, тауар карточкалары.
• Өнім беті: сурет, сипаттама және «Себетке қосу» батырмасы.
• Себет: тауарлар, жалпы сома және «Тапсырыс беру» батырмасы.

Талаптар:

• Экранның ең аз ені – 320px.
• Мобильді нұсқада навигация үшін «гамбургер-меню» қосу.

Кеңестер:

• Навигация мен өзара әрекетке маңызды элементтер мобильді нұсқада қолжетімді болуы тиіс.
• Экранды шамадан тыс жүктейтін артық декоративті элементтерден аулақ болыңыз.
• Ыңғайлылықты бағалау үшін дизайнды нақты құрылғыларда сынақтан өткізіңіз.

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

• Түрлі экран ажыратымдылықтарында дұрыс көрсетілетін бейімделген сайт макеті.
• Мобильді нұсқаның беттері үлгісі.