Веб-дизайн: відмінності UI та UX. Етапи створення прототипу та адаптивного дизайну. вибірковий модуль "Графічний дизайн Конспект уроку Інформатика Старші класи

Спеціалізація: графічний дизайн, веб-дизайн, інформатика. Для кого: учні старших класів (10-11), студенти, а також викладачі, які прагнуть навчити основи проектування зручних та ефективних вебсторінок. Що ви дізнаєтеся та навчитеся: UI vs. UX: чітко зрозумієте фундаментальні відмінності між User Interface (Як це виглядає?) та User Experience (Як це працює?). адаптивний дизайн: засвоїте принцип Responsive Design та підхід «Mobile First» (проектування спершу для мобільних пристроїв). ключові UX-принципи: опануєте основи візуальної ієрархії , зрозумілої навігації та принцип «F-паттерна» для розміщення найважливішої інформації. етапи проектування: ознайомитеся з повним циклом роботи над веб-дизайном: від планування (UX) до візуального оформлення (UI) та розробки (Development). створення Wireframe: на практиці навчитеся створювати чорно-білий схематичний каркас (wireframe) вебсторінки, зосередившись на логіці та структурі. Основні результати для учня: Знає відмінності між UI та UX, а також принципи адаптивного дизайну. Уміє визначати цільову аудиторію та створювати логічний каркас (wireframe) односторінкового сайту. Усвідомлює необхідність планування структури перед візуальним оформленням (User-Centric Approach). Тривалість уроку: 45 хвилин. Обладнання: комп'ютери, доступ до мережі Інтернет, програми для прототипування (Figma, Miro, Google Drawings, PowerPoint або Canva або папір).