Веб-дизайн, юзабилити және оны жылжыту
Сипаттама: Пән сандық интерфейстерді жобалау мен дамытудың тұтас жүйесі ретінде веб-дизайнның теориялық және практикалық негіздерін ашады: визуалды коммуникация және композиция қағидаттары, сайттардың типологиясы; Figma және Tilda құралдары; UX-жобалау, прототиптеу және пайдалануға қолайлылықты (юзабилити) тестілеу; UX-копирайтинг және Tone of Voice; адаптивті беттеу; ProtoPie және After Effects-тегі анимация; ақпараттық архитектура, паттерндер және iOS/Android гайдлайндары. Дизайнды, пайдалануға қолайлылықты және ілгерілетуді (маркетингті) бизнес-процестерге интеграциялауға ерекше назар аударылады: гипотезаларды тұжырымдау және воронкаларды құру, аналитика, іске қосуға дайындық және интерфейстерді өнімдік әрі коммерциялық мақсаттарға сәйкес оңтайландыру — конверсияны және пайдаланушы тәжірибесінің сапасын арттыру үшін.
Кредиттер саны: 5
Пререквизиты:
- Маркетинг негіздері
Пәннің еңбек сыйымдылығы:
| Жұмыс түрлері | сағат |
|---|---|
| Дәрістер | 15 |
| Практикалық жұмыстар | 30 |
| Зертханалық жұмыстар | |
| СӨЖО | 30 |
| СӨЖ | 75 |
| Қорытынды бақылау нысаны | емтихан |
| Қорытынды бақылауды жүргізу нысаны | Емтихан |
Компонент: Таңдау бойынша компонент
Цикл: Кәсіптік пәндер
Мақсат
- «Веб-дизайн, юзабилити және оны жылжыту» пәнінің мақсаты - студенттерде цифрлық интерфейстерді жобалау бойынша жүйелі білімдері мен практикалық дағдыларын қалыптастыру: визуалды коммуникация, Figma және Tilda құралдарымен жұмыс, UX-копирайтинг, прототиптеу, ақпараттық архитектура, iOS/Android паттерндері мен гайдлайндары, адаптивті беттеу, анимация, тестілеу, талдау, сондай-ақ шешімдерді маркетингтік мақсаттармен интеграциялау.
Міндет
- 1
- Освоить профессиональную работу в Figma: фреймы, стили, компоненты, Auto Layout, прототипирование и экспорт.
- Разрабатывать дизайн для разных площадок: визуалы и элементы сайтов, лендингов.
- Проектировать адаптивные макеты под десктоп, планшет и смартфон с корректным выбором breakpoints.
- Проектировать удобные интерфейсы на основе поведенческих сценариев и принципов юзабилити.
- Выполнять быстрые UX-проверки/тесты прототипов и вносить итеративные улучшения.
- Выстраивать минимальную дизайн-систему (палитры, типографика, сетка, компоненты) для единообразия решений.
- Связывать дизайн с задачами продвижения: подбирать форматы, учитывать требования контента и базовые метрики эффективности.
Оқыту нәтижесі: білу және түсіну
- Студенттер визуалды коммуникация, композиция, түс және типографика принциптері, сайт типологиясы, UX негіздері мен ақпараттық архитектура жөніндегі білімдерін көрсетеді, сондай-ақ бейімделгіш интерфейстерді жасау үшін Figma, Tilda, ProtoPie, Adobe After Effects мүмкіндіктерін және iOS пен Android нұсқаулықтарын түсінеді.
Оқыту нәтижесі: білім мен ұғымды қолдану
- Студенттер алған білімдерін іс жүзінде қолданады: Figma-да прототиптер мен дизайн-тұжырымдамаларды әзірлейді; Tilda-да (Zero Block-ты қоса) сайттарды құрып, баптайды; бейімделгіш интерфейстерді жобалайды; ассеттерді дайындайды; элементтерді анимациялайды және негізгі аналитиканы орнатады.
Оқыту нәтижесі: талқылай білуді қалыптастыру
- Студенттер юзабилити-тестілеу нәтижелері мен аналитика деректеріне сүйеніп, жобалық шешімдерді негіздейді; UX-паттерндерді саналы түрде таңдайды, гипотезаларға басымдық береді және пайдаланушы тәжірибесі, техникалық шектеулер мен бизнес-мақсаттар арасындағы тепе-теңдікті табады.
Оқыту нәтижесі: коммуникативтік қабілеттіліктер
- Студенттер дизайн шешімдерін мүдделі тараптарға түсінікті түрде ұсынады; түсінікті жобалық құжаттама мен спецификацияларды әзірлейді; UI-киттерді қалыптастырады; сондай-ақ әртүрлі цифрлық арналар үшін брендтің дұрыс Tone of Voice-ына сай UX-мәтіндер жазады.
Оқыту нәтижесі: Оқу дағдылары немесе сабаққа қабілеттілігі
- Студенттер кәсіби дамуын өз бетінше жоспарлайды; жаңа құралдарды және нұсқаулықтардың (гайдлайндардың) жаңартуларын меңгереді; A/B-тестілеулерін жүргізіп, нәтижелерін талдап, рефлексия жасайды; алынған жақсартуларды дизайн-жүйеге және жұмыс процестеріне енгізеді.
Оқыту әдістері
дистанционные образовательные: проведение лекций и практик в формате видеоконференций и в LMS; предоставление записей занятий, презентаций, ТЗ и чек-листов; удалённый доступ к Figma/Tilda/Adobe After Effects и инструкциям по установке и настройке.
личностно ориентированные (например, использование экранной клавиатуры и альтернативных устройств ввода для обучающихся с нарушениями опорно-двигательного аппарата; оборудование аудитории для обучающихся с нарушением слуха компьютерной техникой, аудио- и видеотехникой, интерактивной/электронной доской; применение высококонтрастных режимов интерфейсов и масштабирования шрифтов в учебных материалах и демонстрациях макетов).
предметно-ориентированные (процесс целеобразования: цели формируются через результаты, выраженные в действиях обучающихся — создание макетов и прототипов в Figma, сборка адаптивных страниц в Tilda, подготовка простых анимаций интерфейсов в Adobe After Effects, базовая проверка удобства и доступности выполненных работ).
Білім алушының білімін бағалау
Оқытушы ағымдағы бақылау жұмыстарының барлық түрлерін жүргізеді және академиялық кезеңде екі рет білім алушылардың ағымдағы үлгеріміне тиісті баға береді. Ағымдағы бақылау нәтижелері бойынша 1 және 2 рейтинг қалыптастырылады. Білім алушының оқу жетістіктері 100 балдық шкала бойынша бағаланады, Р1 және Р2 қорытынды бағасы ағымдағы үлгерім бағасынан орташа арифметикалық ретінде шығарылады. Академиялық кезеңде білім алушының жұмысын бағалауды пән бойынша тапсырмаларды тапсыру кестесіне сәйкес оқытушы жүзеге асырады. Бақылау жүйесі жазбаша және ауызша, топтық және жеке формаларды біріктіре алады.
| Кезең | Тапсырма түрі | Өлшем |
|---|---|---|
| 1 рейтинг | Устный опрос | 0-100 |
| Разбор практических кейсов | ||
| Разбор практических кейсов | ||
| Разбор практических кейсов | ||
| Рубежное тестирование | ||
| 2 рейтинг | Устный опрос | 0-100 |
| Разбор практических кейсов | ||
| Разбор практических кейсов | ||
| Разбор практических кейсов | ||
| Составление презентации | ||
| Қорытынды бақылау | емтихан | 0-100 |
Жұмыс түрлері бойынша оқыту нәтижелерін бағалау саясаты
| Тапсырма түрі | 90-100 | 70-89 | 50-69 | 0-49 |
|---|---|---|---|---|
| Өте жақсы | Жақсы | Қанағаттанарлық | Қанағаттанарлықсыз | |
| Различные виды работ (устный опрос, рубежное тестирование, проектный практикум в Figma/Tilda, разбор практических кейсов, составление презентации/портфолио) в зависимости от задания оцениваются по 100-% шкале. | Работа выполнена полно и безошибочно, решения оригинальны и методически обоснованы с опорой на гайдлайны HIG/Material и WCAG, корректно применены инструменты Figma/Tilda (Auto Layout, компоненты, Zero Block, формы/аналитика). Презентация и документация демонстрируют высокий уровень визуальной культуры: стройная типографическая иерархия, корректная сетка, ясная микрокопия с соблюдением Tone of Voice. Ответы по содержанию курса развёрнуты и точны, отражают глубокое понимание UX-принципов, адаптива и критериев юзабилити. | Решения в целом верны и соответствуют заданию, но наблюдаются отдельные недочёты: недостаточная детализация документации, единичные огрехи визуальной иерархии или адаптивных состояний. Использование Figma/Tilda корректно, хотя встречаются мелкие несоответствия в консистентности компонентов или настройке метрик. Ответы по теории адекватны, однако аргументация местами неполна и требует уточнений. | Задание выполнено частично: имеются заметные неточности в применении сеток/брейкпоинтов и выборе паттернов, компоненты и стили оформлены непоследовательно. Отсутствуют отдельные требуемые артефакты (варианты состояний, спецификация, проверка доступности) либо отчёт содержит методические и терминологические огрехи. Теоретические ответы и пояснения фрагментарны, рекомендуется существенная доработка с обращением к учебным материалам. | Имеются существенные пробелы в знаниях и методике, решения не соответствуют требованиям задания или стандартам курса; ключевые артефакты (прототип/лендинг/документация) отсутствуют или невоспроизводимы. Применение Figma/Tilda некорректно, обнаружены критические ошибки в адаптиве, структуре контента и логике взаимодействий. Ответы по содержанию курса неверны либо сведены к формальным высказываниям, академические нормы и требования к оформлению не соблюдены. |
Бағалау нысаны
Пән бойынша білім алушының білімін қорытынды бағалау 100 баллдық жүйе бойынша жүзеге асырылады және:
- Емтиханда алынған нәтиженің 40%;
- Ағымдағы үлгерімнің 60% - ы.
Қорытынды бағаны есептеу формуласы:
| И= 0,6 | Р1+Р2 | +0,4Э |
| 2 |
мұндағы, Р1, Р2-тиісінше бірінші, екінші рейтингті бағалаудың сандық эквиваленттері;
Э - емтихандағы бағаның сандық баламасы.
Қортынды әріптік бағасы және оның балдық сандық эквиваленті:
Төрт балдық жүйе бойынша цифрлық баламаға сәйкес келетін білім алушылардың оқу жетістіктерін бағалаудың әріптік жүйесі:
| Әріптік жүйе бойынша бағалар | Балдардың сандық эквиваленті | Балдар (%-тік құрамы) | Дәстүрлі жүйе бойынша бағалар |
|---|---|---|---|
| A | 4.0 | 95-100 | Өте жақсы |
| A- | 3.67 | 90-94 | |
| B+ | 3.33 | 85-89 | Жақсы |
| B | 3.0 | 80-84 | |
| B- | 2.67 | 75-79 | |
| C+ | 2.33 | 70-74 | |
| C | 2.0 | 65-69 | Қанағаттанарлық |
| C- | 1.67 | 60-64 | |
| D+ | 1.33 | 55-59 | |
| D | 1.0 | 50-54 | |
| FX | 0.5 | 25-49 | Қанағаттанарлықсыз |
| F | 0 | 0-24 |
Дәріс сабақтарының тақырыптары
- Основы веб-дизайна: принципы визуальной коммуникации между пользователем и интерфейсом, виды сайтов и их назначение, основы проектирования интерфейсов и разработки дизайн-концепции, методы вдохновения и творчества, а также ключевые инструменты композиции: модульная сетка, работа с цветом и типографикой для адаптивных интерфейсов на разных устройствах
- Инструменты дизайнера - Figma: настройка интерфейса, создание фреймов и объектов, работа с текстовыми блоками, сетками и адаптивным дизайном, применение Auto Layout, компонентов, библиотек и UI-китов, а также прототипирование, проектирование экранов мобильных приложений и работа с анимацией
- UX-копирайтинг: тексты в интерфейсе и Tone of Voice: создание понятных и эффективных продуктовых текстов для цифровых интерфейсов - от микрокопии до сложных сценариев - с учётом специфики UI, принципов и синтаксиса, выбора и применения Tone of Voice и передачи ценностей продукта через текст
- Создание сайтов на Tilda: профессиональная работа в Tilda - от интерфейса, стандартных блоков и Zero Block (лейаут, сетки, адаптив, анимация) и кастомизации через модификации/код до настройки сайтов и страниц, подготовки к запуску и публикации, оптимизации проекта, внедрения e-commerce (каталог, платежи), подключения Tilda-CRM, рассылок и аналитики, работы с новостными потоками и личным кабинетом, а также применения платформы в маркетинге для быстрой проверки гипотез
- Основы UX-проектирования в вебе: базовые принципы UX-проектирования веб-интерфейсов: составление ТЗ и методы проектирования, разработка информационной архитектуры, создание прототипов разной детализации и интерактивности с адаптацией под устройства, применение UX-паттернов и гайдлайнов iOS/Android, оценка юзабилити и подготовка к разработке веб-сайтов
- Сложные визуальные эффекты в интерфейсе: проектирование и внедрение сложных визуальных эффектов для веб- и мобильных интерфейсов - от работы с тенями, слоями и эффектами смешения до построения UI-китов и библиотек компонентов, применения принципов анимации и микровзаимодействий, а также создания веб- и мобильной анимации в ProtoPie для обеспечения непрерывного пользовательского опыта
- Проектирование пользовательского опыта: формирование базовых компетенций UX-проектирования веб-интерфейсов: составление ТЗ, выбор и применение паттернов UX, разработка информационной архитектуры и карт пользовательских сценариев, проведение юзабилити-тестирования, проектирование адаптивных решений и подготовка к разработке веб-сайтов
- Прототипирование интерфейсного решения: знакомство с инструментами и практиками прототипирования - от разработки информационной архитектуры и прототипов разной степени детализации до создания интерактивных макетов для мобильных приложений с учётом UX-гайдлайнов iOS/Android и проведения пользовательского тестирования
- Анимация веб-интерфейсов в Adobe After Effects: превращение статичных макетов в динамичные интерфейсы; функции и виды UI-анимации, принципы и инструменты создания; базовый функционал After Effects (таймлайн, ключевые кадры, маски, слои, эффекты, 3D), а также построение и экспорт анимаций для веба
- Адаптивная и мобильная вёрстка: создание интерфейсов, корректно работающих на компьютерах, планшетах и смартфонах: резиновая вёрстка и изображения, медиазапросы и медиафункции, особенности мобильной вёрстки, адаптивная типографика и выбор breakpoints, а также работа с адаптивными изображениями
- Нейросети для дизайнера: как ускорять креативные процессы и продакшн с помощью Midjourney, ChatGPT и других ИИ-инструментов - формулирование эффективных промптов для генерации изображений и логотипов, создание и стилизация визуальных концептов по описанию, подбор референсов, фотореалистичный рендер и очистка фона/артефактов, исследование аудитории и делегирование рутинных задач
Негізгі әдебиет
- Купер А., Рейман Р., Кронин Д. Алан Купер об интерфейсе. Основы проектирования взаимодействия. – Пер. с англ. – СПб.: Символ'Плюс, 2009. – 688 с., ил. ISBN 978'5'93286'132'5
- Феличи, Джеймс. Типографика: шрифт, верстка, дизайн / Джеймс Феличи ; [пер. с англ. и коммент. С. И. Пономаренко]. — 2-е изд. — Санкт-Петербург : БХВ-Петербург, 2014. — 474 с. : ил. : 23 см.; ISBN 978-5-9775-0908-4.
- Уолтер, А. Эмоциональный веб-дизайн / Аарон Уолтер ; пер. с англ. Павла Миронова. — М. : Манн, Иванов и Фербер, 2012. — 144 с. : илл. ISBN 978-5-91657-386-2
- Норман, Дональд А. Дизайн привычных вещей / Дональд А. Норман ; пер. с англ. Б. Л. Глушака. — М. : Манн, Иванов и Фербер, 2013. — 272 с. ISBN 978-5-91657-625-2
Қосымша әдебиеттер
- Яблонски Дж. Законы UX-дизайна: Пер. с англ. — СПб.: БХВ-Петербург, 2022. — 160 с.: ил. ISBN 978-5-9775-6771-8
- Сьюзан Уэйншек. 100 новых главных принципов дизайна: Питер; Санкт-Петербург; 2016 ISBN 978-5-496-02239-2
