[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-article-lesson-visual-hierarchy":3},{"uuid":4,"title":5,"subtitle":6,"content":7,"preview":371,"date_published":377,"date_pinned":377,"img":378,"alias":379,"is_published":380,"is_pinned":381,"type":13,"category":382,"category_name":383,"category_alias":384,"background_color":385,"preview_icon":13,"category_value":386,"external_link":13},"4472355a-d6ce-46d9-8267-772c4a6f31de","Що таке візуальна ієрархія уроку і як вона полегшує розуміння","Як заголовки, відступи, акценти та порядок елементів показують головне. Розглядаємо зв’язок оформлення з навчальною дією й перевірку матеріалу на різних екранах.",{"type":8,"content":9},"doc",[10,18,23,31,36,41,46,52,57,62,67,73,78,90,95,101,106,111,116,122,135,140,145,151,156,169,180,186,191,196,201,207,212,217,222,228,233,238,243,249,254,259,264,270,275,280,285,290,295,301,306,311,316,322],{"type":11,"attrs":12,"content":14},"paragraph",{"align":13},null,[15],{"text":16,"type":17},"На сторінці уроку можуть бути правильне пояснення, корисна схема й добре завдання, але студент однаково не розуміє, з чого почати. Причина іноді в тому, що всі елементи однаково помітні або головний крок губиться серед декоративних блоків. Візуальна ієрархія допомагає показати структуру: що належить до основного пояснення, де приклад, яка умова важлива й що потрібно зробити далі. Вона має підтримувати зміст, а не змагатися з ним за увагу.","text",{"type":11,"attrs":19,"content":20},{"align":13},[21],{"text":22,"type":17},"Нижче — запропонований спосіб редагування навчальної сторінки або презентації. Він не обіцяє гарантованого покращення результатів від певного кольору чи шрифту. Спочатку потрібно визначити логіку уроку, а потім узгодити з нею оформлення. Доступність та зрозумілість перевіряються окремими діями. Красивий вигляд не доводить ані правильності пояснення, ані можливості скористатися матеріалом за різних способів сприйняття. Приклади в цій статті умовні й призначені для роботи автора.",{"type":24,"attrs":25,"content":28},"heading",{"align":13,"level":26,"id":27},2,"heading_2_1",[29],{"text":30,"type":17},"Визначте головний маршрут до навчальної дії",{"type":11,"attrs":32,"content":33},{"align":13},[34],{"text":35,"type":17},"Сформулюйте, що студент має зробити після пояснення. Наприклад, відрізнити спостереження від висновку або обрати доречний спосіб подання даних. Перегляньте матеріал саме щодо цієї дії. Частину інформації потрібно знати до вибору, частина пояснює результат, а частина лише розширює тему. Якщо ці ролі не визначено, оформлення стане випадковим: автор виділятиме те, що йому подобається, замість того, що допомагає виконати навчальну задачу.",{"type":11,"attrs":37,"content":38},{"align":13},[39],{"text":40,"type":17},"Створіть текстовий каркас без кольорів і зображень. Назва, коротке призначення, пояснення, приклад, самостійна дія та спосіб перевірки мають складатися в зрозумілу послідовність. Не кожному уроку потрібні всі ці блоки, але кожен наявний блок повинен мати роль. Коли зміст неможливо логічно розташувати без дизайну, спершу потрібна методична редактура. Декоративна стрілка не виправить пропущену передумову, а яскрава рамка не зробить суперечливе правило однозначним.",{"type":11,"attrs":42,"content":43},{"align":13},[44],{"text":45,"type":17},"Позначте місце, де учасник переходить від читання до дії. Інструкцію краще розташувати поруч із потрібними умовами й матеріалами. Якщо студент має постійно гортати назад, щоб згадати критерій, перевірте структуру. Можливо, достатньо коротко повторити необхідну умову або дати зрозуміле посилання на неї. Не дублюйте всю теорію біля кожного кроку. Потрібно зберегти доступ до потрібного контексту, не перевантажуючи основний маршрут зайвим повторенням.",{"type":24,"attrs":47,"content":49},{"align":13,"level":26,"id":48},"heading_2_2",[50],{"text":51,"type":17},"Створіть кілька змістових рівнів замість багатьох стилів",{"type":11,"attrs":53,"content":54},{"align":13},[55],{"text":56,"type":17},"Авторові корисно розрізняти назву уроку, назви розділів, основний текст, приклади та допоміжні примітки. Для цих ролей достатньо послідовних оформлювальних рішень. Якщо кожний абзац має власний фон, рамку й значок, відмінності перестають щось означати. Учасник витрачає увагу на розпізнавання нового оформлення. Визначте невеликий набір стилів і поясніть команді, яку інформаційну роль представляє кожний із них у матеріалах курсу.",{"type":11,"attrs":58,"content":59},{"align":13},[60],{"text":61,"type":17},"Не зменшуйте важливість умови через її незручність для дизайну. Обмеження застосування методу може бути коротким, але критичним. Його потрібно показати до того, як студент зробить вибір. Допоміжною приміткою краще оформити справді необов'язкове уточнення, без якого основне завдання залишається коректним. Розмір тексту має відповідати ролі, а не бажанню вмістити все на одному слайді. Якщо місця замало, перегляньте поділ матеріалу або зайві подробиці.",{"type":11,"attrs":63,"content":64},{"align":13},[65],{"text":66,"type":17},"Зафіксуйте відповідність у простій пам'ятці. Наприклад, один тип блоку використовується для розібраного прикладу, інший — для завдання студенту. Назва й текст також повинні пояснювати роль: самої кольорової рамки недостатньо. У майбутньому новий автор зможе відтворити логіку без здогадок. Пам'ятка має бути коротшою за повний брендбук і містити приклади правильного застосування, особливо для ситуацій, де кілька видів інформації стоять поруч.",{"type":24,"attrs":68,"content":70},{"align":13,"level":26,"id":69},"heading_2_3",[71],{"text":72,"type":17},"Нехай заголовки описують зміст розділів",{"type":11,"attrs":74,"content":75},{"align":13},[76],{"text":77,"type":17},"Заголовок допомагає орієнтуватися до повного читання. «Перевірте, чи дані підтримують висновок» повідомляє більше, ніж «Важливо знати». Конкретні назви розділів дозволяють повернутися до потрібного пояснення. Водночас не перетворюйте заголовок на довгий абзац. Він повинен називати тему або дію достатньо точно для навігації. Перегляньте всі заголовки окремим списком: чи можна за ними зрозуміти логіку уроку без декоративних елементів?",{"type":11,"attrs":79,"content":80},{"align":13},[81,88],{"text":82,"type":17,"marks":83},"W3C WAI пояснює роль заголовків",[84],{"type":85,"attrs":86},"link",{"href":87,"title":13},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002Ftutorials\u002Fpage-structure\u002Fheadings\u002F",{"text":89,"type":17}," як структури, яку можуть використовувати браузери та допоміжні технології. Тому великий жирний рядок сам по собі не завжди є технічним заголовком. Використовуйте відповідний стиль або семантичний елемент у редакторі. Підрозділ має належати до свого розділу, а сусідні теми — мати узгоджений рівень. Не обирайте рівень лише за бажаним розміром літер у конкретному шаблоні.",{"type":11,"attrs":91,"content":92},{"align":13},[93],{"text":94,"type":17},"Не робіть заголовком кожне виділене речення. Для короткого акценту всередині пояснення достатньо доречного текстового оформлення. Надмірна кількість рівнів також ускладнює огляд. Якщо в невеликому уроці постійно потрібні вкладені підрозділи, перевірте, чи не поєднано в ньому кілька різних навчальних задач. Можливо, краще створити окремі частини з ясним зв'язком. Структура має відображати думку, а не просто заповнювати доступні стилі конструктора.",{"type":24,"attrs":96,"content":98},{"align":13,"level":26,"id":97},"heading_2_4",[99],{"text":100,"type":17},"Групуйте пов'язані елементи простором",{"type":11,"attrs":102,"content":103},{"align":13},[104],{"text":105,"type":17},"Розташування допомагає показати, що належить до одного прикладу. Підпис, зображення та пояснення варто сприймати як пов'язану групу. Якщо між ними стоїть чужий блок, студент може приписати коментар іншій схемі. Перегляньте відступи всередині групи та між групами. Вони мають підтримувати зв'язки. Не вирівнюйте всі проміжки автоматично однаково, якщо так зникає відмінність між новим розділом і продовженням того самого пояснення.",{"type":11,"attrs":107,"content":108},{"align":13},[109],{"text":110,"type":17},"На слайді з двома прикладами дайте кожному власну назву й достатню відстань. Не покладайтеся тільки на розміщення ліворуч і праворуч: під час мобільного перегляду або лінійного читання колонки можуть перебудуватися. У тексті називайте приклади за змістом. Формулювання «у другому прикладі з неповними даними» точніше, ніж «подивіться праворуч». Важливі зв'язки повинні залишатися зрозумілими після зміни ширини екрана чи способу читання матеріалу.",{"type":11,"attrs":112,"content":113},{"align":13},[114],{"text":115,"type":17},"Не використовуйте порожні рядки й пробіли для імітації таблиці у звичайному тексті. Якщо дані мають рядки, стовпці та заголовки, потрібна відповідна структура. Якщо це два незалежні пояснення, можливо, краще зробити послідовні блоки. Дизайнер має знати, які відносини між елементами суттєві. Без цього він може красиво розташувати інформацію, але втратити зв'язок між умовою, прикладом і висновком, на якому тримається навчальне завдання.",{"type":24,"attrs":117,"content":119},{"align":13,"level":26,"id":118},"heading_2_5",[120],{"text":121,"type":17},"Збережіть змістовний порядок за межами макета",{"type":11,"attrs":123,"content":124},{"align":13},[125,127,133],{"text":126,"type":17},"У цифровому матеріалі видимий порядок не завжди збігається з тим, у якому елементи читає програмне забезпечення. ",{"text":128,"type":17,"marks":129},"Пояснення WCAG про meaningful sequence",[130],{"type":85,"attrs":131},{"href":132,"title":13},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fmeaningful-sequence.html",{"text":134,"type":17}," стосується випадків, коли послідовність впливає на значення. Для уроку важливо, щоб умова з'являлася до потрібного рішення, а коментар — не змішувався з іншим прикладом. Перевіряйте це в реальному форматі доставки, а не лише в авторському макеті.",{"type":11,"attrs":136,"content":137},{"align":13},[138],{"text":139,"type":17},"Прочитайте сторінку лінійно без уявних колонок. Чи зрозуміло, до якого зображення належить підпис? Чи не починається задача з висновку, який мав бути прихований до спроби? Для презентації перевірте порядок читання об'єктів. Для вебуроку — структуру елементів та роботу допоміжних технологій. Якщо потрібна технічна допомога, передайте розробнику конкретний фрагмент і очікувану послідовність, а не загальне прохання «зробити доступно».",{"type":11,"attrs":141,"content":142},{"align":13},[143],{"text":144,"type":17},"Не кожна зміна порядку є помилкою. Два незалежні довідкові приклади можуть бути представлені в різній послідовності без втрати змісту. Важливо визначити саме потрібні залежності. Це допомагає уникати зайвих обмежень і водночас захистити головний маршрут. Наприклад, пояснення двох рівноправних термінів можна міняти місцями, але вхідні дані й обґрунтований висновок повинні залишатися пов'язаними. Перевірка має спиратися на сенс, а не на копіювання координат із макета.",{"type":24,"attrs":146,"content":148},{"align":13,"level":26,"id":147},"heading_2_6",[149],{"text":150,"type":17},"Використовуйте акценти для конкретного завдання",{"type":11,"attrs":152,"content":153},{"align":13},[154],{"text":155,"type":17},"Виділення жирним доречне, коли допомагає знайти термін або важливу відмінність. Якщо майже весь абзац виділений, акцент втрачає функцію. Попросіть автора назвати, що саме повинен помітити студент. Потім перевірте, чи потрібне виділення, коротший текст або окреме пояснення. Іноді найкраще рішення — переписати складне речення. Велика кількість декоративних маркерів може бути сигналом, що редактор намагається компенсувати неясну логіку сторінки.",{"type":11,"attrs":157,"content":158},{"align":13},[159,161,167],{"text":160,"type":17},"Колір не має бути єдиним носієм значення. ",{"text":162,"type":17,"marks":163},"WCAG Use of Color",[164],{"type":85,"attrs":165},{"href":166,"title":13},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fuse-of-color.html",{"text":168,"type":17}," пояснює цю вимогу. Якщо два варіанти відрізняються лише зеленим і червоним, додайте текстову назву або інший доречний спосіб розрізнення. Для графіка потрібні зрозумілі позначення серій, а для результату завдання — повідомлення про зміст відповіді. Не змушуйте студента пам'ятати умовну палітру, щоб зрозуміти, чи його рішення прийнято.",{"type":11,"attrs":170,"content":171},{"align":13},[172,178],{"text":173,"type":17,"marks":174},"Мінімальний контраст тексту за WCAG",[175],{"type":85,"attrs":176},{"href":177,"title":13},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG22\u002FUnderstanding\u002Fcontrast-minimum.html",{"text":179,"type":17}," для звичайного тексту становить 4,5:1, а для визначеного великим — 3:1, із зазначеними у критерії винятками. Перевіряйте поєднання інструментом, а не лише на око. Особливо уважно дивіться на підписи, текст кнопок і примітки на кольоровому фоні. Фірмова палітра не робить інформаційний текст автоматично читабельним. За потреби використовуйте інше поєднання для самого навчального змісту.",{"type":24,"attrs":181,"content":183},{"align":13,"level":26,"id":182},"heading_2_7",[184],{"text":185,"type":17},"Підпорядкуйте зображення поясненню",{"type":11,"attrs":187,"content":188},{"align":13},[189],{"text":190,"type":17},"Спочатку визначте роль зображення: пояснити процес, показати об'єкт, дати дані для аналізу або створити загальний настрій. Не вимагайте від декоративної обкладинки виконувати роль навчальної схеми. Якщо студент має розрізнити етапи, зображення повинно правдиво передавати ці етапи та їхні зв'язки. Підпис пояснює, на що звернути увагу, не підміняючи самостійне завдання, коли його метою є власна інтерпретація матеріалу.",{"type":11,"attrs":192,"content":193},{"align":13},[194],{"text":195,"type":17},"Розміщуйте пояснення поруч із релевантною частиною, коли це допомагає зіставленню. Для складної схеми іноді краще послідовно розібрати фрагменти й потім показати ціле. Але не приховуйте зв'язки між частинами заради ефектної появи. Під час повернення до матеріалу студент має мати змогу переглянути потрібний стан без довгого повтору анімації. Для статичного документа збережіть достатній контекст, щоб окремий фрагмент не виглядав неповною або суперечливою моделлю.",{"type":11,"attrs":197,"content":198},{"align":13},[199],{"text":200,"type":17},"Змістовний текст не варто без потреби перетворювати на картинку. Його важче змінювати, шукати та пристосовувати до потреб читача. Якщо зображення справді необхідне, передбачте відповідний текстовий доступ до суттєвої інформації. Особливо це стосується схем і графіків, які є умовою завдання. Пояснення альтернативи має зберігати навчальну задачу: не приховувати потрібні дані, але й не видавати готовий висновок там, де студент повинен його сформулювати.",{"type":24,"attrs":202,"content":204},{"align":13,"level":26,"id":203},"heading_2_8",[205],{"text":206,"type":17},"Розрізняйте приклад, спробу та пояснення відповіді",{"type":11,"attrs":208,"content":209},{"align":13},[210],{"text":211,"type":17},"Умовний урок навчає перевіряти силу висновку за даними. Спершу автор показує розібраний приклад із поясненням. Потім дає інший набір і просить студента зробити власний вибір. Якщо обидва блоки оформлені однаково й стоять без назви, учасник може продовжити читання замість виконання. Позначте, де починається самостійна дія, що потрібно подати та коли відкривається коментар. Роль блоку повинна бути зрозумілою з тексту.",{"type":11,"attrs":213,"content":214},{"align":13},[215],{"text":216,"type":17},"Не робіть правильну відповідь найбільшою або найконтрастнішою ще до спроби. Інакше дизайн змінює завдання на пошук візуальної підказки. Порівнювані варіанти мають мати узгоджене оформлення, якщо різниця стилю не є частиною перевірюваного змісту. Після вибору можна показати результат і пояснення, але не лише змінити колір. Учасник має розуміти, яка ознака рішення була суттєвою та що варто врахувати в наступному прикладі.",{"type":11,"attrs":218,"content":219},{"align":13},[220],{"text":221,"type":17},"Розділіть допоміжну підказку й готовий розбір. Підказка може спрямувати увагу до потрібного показника, не називаючи висновку. Розбір пояснює логіку повністю. Якщо обидва елементи приховані за однаково названими кнопками, студент не контролює рівень допомоги. Дайте конкретні назви й поясніть доступність. Технічний спосіб реалізації перевірте у своєму середовищі, не припускаючи, що кожен тип блоку автоматично передає потрібні стани допоміжним технологіям.",{"type":24,"attrs":223,"content":225},{"align":13,"level":26,"id":224},"heading_2_9",[226],{"text":227,"type":17},"Перевірте матеріал на реальній ширині екрана",{"type":11,"attrs":229,"content":230},{"align":13},[231],{"text":232,"type":17},"Макет, створений на великому моніторі, може втратити ієрархію на телефоні. Колонки стають довгою послідовністю, підпис відривається від прикладу, а важлива кнопка з'являється після великого декоративного зображення. Перевірте основний маршрут за різної ширини та збільшення тексту. Не зменшуйте всі елементи до мікроскопічного розміру, щоб зберегти композицію. Потрібно зберігати зміст і можливість читання, а не незмінність зовнішнього вигляду кожного пікселя.",{"type":11,"attrs":234,"content":235},{"align":13},[236],{"text":237,"type":17},"Якщо порівняння вимагає одночасно бачити дві частини, продумайте доступний спосіб зіставлення на вузькому екрані. Можна використати послідовні чітко названі блоки, короткий підсумок відмінностей або іншу структуру відповідно до задачі. Не обіцяйте, що будь-яка таблиця автоматично стане зручною на телефоні. Відкрийте фактичний матеріал і спробуйте виконати завдання. Авторський перегляд у конструкторі не завжди показує всі умови, які бачить учасник курсу.",{"type":11,"attrs":239,"content":240},{"align":13},[241],{"text":242,"type":17},"LMS платформа WeStudy може бути середовищем розміщення уроку, тому перевіряйте результат у фактичному вигляді для студента. Важлива взаємодія оформлення матеріалу з навігацією курсу та інструкціями. Якщо назва кнопки в самому уроці суперечить наступному кроку в програмі, виправте цей зв'язок. Не приписуйте шаблону відповідальність за всі авторські рішення. Команда має переглянути вже зібрану сторінку з її реальним текстом, прикладами й доступними діями.",{"type":24,"attrs":244,"content":246},{"align":13,"level":26,"id":245},"heading_2_10",[247],{"text":248,"type":17},"Проведіть коротку перевірку зрозумілості",{"type":11,"attrs":250,"content":251},{"align":13},[252],{"text":253,"type":17},"Покажіть матеріал кільком добровільним представникам аудиторії та попросіть знайти початок завдання, потрібні умови й спосіб перевірки. Не запитуйте тільки, чи подобається дизайн. Спостерігайте, що людина робить і як пояснює призначення блоків. Це мала діагностична перевірка, а не доказ ефективності для всіх студентів. Вона допомагає знайти конкретний бар'єр, який автор через знайомство з матеріалом уже не помічає під час власного перегляду.",{"type":11,"attrs":255,"content":256},{"align":13},[257],{"text":258,"type":17},"Поставте окреме змістове запитання. Якщо людина легко знаходить блок, але неправильно розуміє правило, потрібна робота з поясненням. Якщо вона знає правило, але не бачить, де відповідати, проблема може бути в маршруті. А коли важливий фрагмент недоступний для читання певним способом, потрібна перевірка доступності. Не об'єднуйте ці випадки в одну оцінку «поганий дизайн». Різні причини вимагають різних змін і різних способів повторної перевірки.",{"type":11,"attrs":260,"content":261},{"align":13},[262],{"text":263,"type":17},"Збережіть умови та конкретні спостереження. Наприклад, підпис сприйняли як частину наступної схеми або кнопку відкриття підказки переплутали з надсиланням відповіді. Виправте відповідний фрагмент і знову перевірте його з людьми, які не знають задуму автора. Не робіть десятки змін одночасно, якщо хочете зрозуміти причину плутанини. Для першого циклу достатньо усунути головну перешкоду та переконатися, що нове рішення не створило іншої.",{"type":24,"attrs":265,"content":267},{"align":13,"level":26,"id":266},"heading_2_11",[268],{"text":269,"type":17},"Відредагуйте один перевантажений фрагмент поетапно",{"type":11,"attrs":271,"content":272},{"align":13},[273],{"text":274,"type":17},"Уявімо сторінку з трьома великими кольоровими блоками, схемою та кнопкою завдання. У першому блоці подано правило, у другому — історичну довідку, у третьому — умову застосування. Вони виглядають рівнозначними, хоча для рішення потрібні правило й умова. Автор спочатку визначає цю залежність. Довідку можна перенести після основної практики або позначити як додаткове читання. Не потрібно видаляти корисне розширення, але воно не має переривати головний маршрут.",{"type":11,"attrs":276,"content":277},{"align":13},[278],{"text":279,"type":17},"Далі редактор перевіряє зв'язок зі схемою. Якщо вона пояснює саме обмеження методу, розташуйте її біля відповідного тексту та дайте змістовний підпис. Кнопку завдання перенесіть після всіх необхідних умов. Назвіть дію конкретно: не «Далі», якщо насправді відкривається самостійна спроба з відповіддю. Після такої перебудови можна налаштовувати розміри, інтервали й акценти. Тепер вони підтримують уже визначену логіку, а не приховують її декоративною композицією.",{"type":11,"attrs":281,"content":282},{"align":13},[283],{"text":284,"type":17},"Потім приберіть зайві сигнали важливості. Якщо у правилі одночасно використано великий шрифт, капітелі, піктограму й яскравий фон, перевірте, які з них справді потрібні. Збережіть достатню помітність і читабельність. Для умови використайте зрозумілу назву та розміщення поруч із рішенням. Вона може бути візуально спокійнішою, але не повинна ставати непомітною. Ієрархія показує взаємозв'язок, а не просто ранжує всі блоки від гучнішого до тихішого.",{"type":11,"attrs":286,"content":287},{"align":13},[288],{"text":289,"type":17},"Перевірте перебудований фрагмент у лінійному читанні й на вузькому екрані. Коли колонки стають послідовними, схема та її пояснення повинні залишатися разом. Дайте іншій людині завдання знайти умову застосування й пояснити наступний крок. Якщо вона відразу знаходить потрібне, але неправильно тлумачить обмеження, поверніться до самого формулювання. Не продовжуйте збільшувати рамку навколо тексту, який потребує змістового уточнення або іншого навчального прикладу.",{"type":11,"attrs":291,"content":292},{"align":13},[293],{"text":294,"type":17},"Останнім кроком зафіксуйте, що саме змінили та чому. Наприклад, довідку винесено з основного маршруту, а умову поставлено перед вправою. Це допоможе іншому автору повторити принцип, а не буквально копіювати макет. Під час подальшого оновлення він зможе перевірити, чи зберігся зв'язок. Такий опис рішення часто корисніший за скриншот красивої сторінки без пояснення її навчальної структури й очікуваної дії учасника.",{"type":24,"attrs":296,"content":298},{"align":13,"level":26,"id":297},"heading_2_12",[299],{"text":300,"type":17},"Підтримуйте послідовність між уроками",{"type":11,"attrs":302,"content":303},{"align":13},[304],{"text":305,"type":17},"Після перевірки одного уроку створіть кілька прикладів застосування стилів для команди. Потрібні зразки звичайного пояснення, розібраного прикладу, завдання, важливої умови та джерела. Не змушуйте всі теми мати однакову довжину й кількість блоків. Послідовність означає стабільне значення оформлення, а не механічну копію композиції. Якщо певний тип матеріалу потребує іншої структури, поясніть це й перевірте, що студент зберігає зрозумілий маршрут до дії.",{"type":11,"attrs":307,"content":308},{"align":13},[309],{"text":310,"type":17},"LMS платформа WeStudy у загальному курсі має працювати разом із цією авторською системою: знайомий спосіб позначення завдань і прикладів допомагає команді підтримувати матеріали. Перед наступним набором перегляньте реальні сторінки після оновлень, особливо коли змінено схеми, пакети або інструкції. Добра ієрархія залишається видимою в тому, що студент може знайти, прочитати й виконати. Вона потребує перевірки змісту та маршруту, а не лише погодження красивого шаблону.",{"type":11,"attrs":312,"content":313},{"align":13},[314],{"text":315,"type":17},"Починайте редактуру з найважливішого студентського рішення в уроці. Якщо оформлення допомагає знайти потрібні умови та виконати цю дію, його можна перевіряти й поступово вдосконалювати на основі конкретного досвіду учасників.",{"type":24,"attrs":317,"content":319},{"align":13,"level":26,"id":318},"heading_2_13",[320],{"text":321,"type":17},"Джерела",{"type":323,"content":324},"bullet_list",[325,338,349,360],{"type":326,"content":327},"list_item",[328],{"type":11,"attrs":329,"content":330},{"align":13},[331,336],{"text":332,"type":17,"marks":333},"W3C WAI — Headings",[334],{"type":85,"attrs":335},{"href":87,"title":13},{"text":337,"type":17},".",{"type":326,"content":339},[340],{"type":11,"attrs":341,"content":342},{"align":13},[343,348],{"text":344,"type":17,"marks":345},"W3C WAI — Understanding Meaningful Sequence",[346],{"type":85,"attrs":347},{"href":132,"title":13},{"text":337,"type":17},{"type":326,"content":350},[351],{"type":11,"attrs":352,"content":353},{"align":13},[354,359],{"text":355,"type":17,"marks":356},"W3C WAI — Understanding Contrast Minimum",[357],{"type":85,"attrs":358},{"href":177,"title":13},{"text":337,"type":17},{"type":326,"content":361},[362],{"type":11,"attrs":363,"content":364},{"align":13},[365,370],{"text":366,"type":17,"marks":367},"W3C WAI — Understanding Use of Color",[368],{"type":85,"attrs":369},{"href":166,"title":13},{"text":337,"type":17},{"type":8,"content":372},[373],{"type":11,"content":374},[375],{"text":376,"type":17},"Як показати головне, пов'язати пояснення з прикладом і зробити маршрут уроку зрозумілим за допомогою заголовків, відступів, акцентів та послідовного оформлення.",1791269014,"https:\u002F\u002Fcloud.cs3.westudy.ua\u002Ffile?path=westudy_online%2Fpublic%2Fwestudy%2Fd7fc9288-63ec-4082-815b-059ee0413d69.webp","lesson-visual-hierarchy",true,false,"b7901c21-e9c9-4457-8b67-447ed7804f43","Створення контенту","content-creation","light","news.articles"]