Посібник з дизайну тем

На сторінці Теми оформлення пояснюється, як створюється тема QuizWitz: в Adobe Animate з експортом у бібліотеку CreateJS. Ця сторінка охоплює крок перед цим - дизайн теми.

Її написано для графічного дизайнера, і вона передбачає, що дизайном і продакшном в Animate займаються різні люди. Небагато дизайнерів досі працюють в Adobe Animate, тож зазвичай дизайнер передає оформлення, а тему збирає хтось інший. Це добре працює, якщо оформлення надходить у формі, яку можна використати під час збирання. Ця сторінка описує цю форму і водночас слугує переліком результатів роботи, коли ти просиш дизайнера оцінити вартість.

Сторінка складається з чотирьох частин:

1. Що ти створюєш - екрани, які охоплює тема.
2. Вісім кадрів і аркуш елементів, по черзі, зі знімками екрана.
3. Правила дизайну - як має бути побудовано файл, щоб рушій міг його використати.
4. Що передати - вихідний файл, результати роботи та порядок роботи.

порада

Якщо ти хочеш змінити лише кольори, шрифти й фони, усе це тобі не потрібно - натомість налаштуй тему Emerald.

Подивитися в дії

Кожен описаний тут екран можна запустити наживо, із тестовими даними, у розділі Тестування тем за адресою client.quizwitz.com/test.html. Він завантажує тему й пропонує меню тестових екранів: запитання з вкладенням і без нього, розподіл відповідей для малої та великої групи, рейтинг, вступи до раундів, екран підключення з логотипом клієнта і без нього тощо. Додай ?theme=emerald до адреси, щоб побачити тему Emerald. Той, хто збирає тему, використовує ту саму сторінку, щоб перевіряти її під час складання.

---

Що ти створюєш

У QuizWitz грає вся зала одночасно, і завжди задіяно два екрани:

• Екран гри - проєктор або телевізор, 1920 × 1080. Запитання, відповіді, як розподілилися відповіді зали, рейтинг. Саме це ти й створюєш.
• Телефон кожного гравця, на якому він вводить відповідь. Це вебсторінка з фіксованим макетом; її стиль задається твоїм списком кольорів, а не твоїм компонуванням.

Тема - це повна візуальна оболонка екрана гри: фон, типографіка, колір, спосіб подання запитання з чотирма варіантами, те, як вибудовується рейтинг, як оголошується раунд.

---

Вісім кадрів і аркуш елементів

У грі є десятки різних станів екрана, але більшість із них - варіанти одного макета. Ти створюєш вісім кадрів і один аркуш елементів; решта виводиться з них. Це не спрощення - так працює рушій. Екран без власного оформлення використовує загальний кадр.

Аркуш так само важливий, як і кадри: екранові, що використовує загальний кадр, однаково потрібне «наповнення» в області вмісту - панель, рядок, лінія.

#	Кадр	Також охоплює
1	Загальний кадр	Тринадцять станів екрана без власного оформлення
2	Екран підключення	Намалюй його двічі: з логотипом клієнта і без нього
3	Екран очікування	-
4	Екран запитання	-
5	Запитання з вкладенням	Повноекранне вкладення і вкладення, що показуються між запитаннями
6	Екран відповіді	Екран відповіді для відкритих запитань і для запитань із вкладенням
7	Рейтинг і переможець	Рейтинг між раундами та фінальний переможець
8	Вступ до раунду	Усі шість категорій раундів

Про знімки екрана

Наведені нижче екрани взято з наявної теми. Вони показують, які елементи з'являються на кожному екрані і коли. Вони не є зразком ні стилю, ні компонування: де ця тема розміщує запитання, варіанти й таймер - її власне рішення, і в тебе все може бути зовсім інакше.

Кадр 1 - загальний кадр

Що на ньому: фон, заголовок і порожня область вмісту під ним. Це не завершена композиція, а рамка, всередині якої будується все інше.

Що він охоплює: тринадцять станів екрана - пояснення раунду, рейтинг, представлення гравців, варіанти запитань з вибором відповіді, довгі запитання, попередження про Seats, налаштування. Кожен із них по-своєму заповнює область вмісту елементами з аркуша елементів, тож кадр має вміщувати речі, які зовсім не схожі одна на одну. Вибір запитання та довге запитання можуть отримати власну композицію, якщо хочеш; інакше вони використовують цей кадр.

Два моменти гри в одному кадрі: вибір запитання і драбина балів.

Зверни увагу, як мало в них спільного. Вибір запитання розміщує свої три рядки на панелі з рамкою; у драбини панелі немає взагалі, лише рядки, розділені тонкими лініями. Спільні в них лише фон і смуга заголовка над ними - усе нижче належить конкретному екрану, і його заповнює гра, а не ти.

Ця панель і ці лінії беруться з аркуша елементів, а не з цього кадру. Завдання цього кадру - вмістити їх: зроби область вмісту порожньою, нейтральною і просторою зоною, яка однаково добре працює з панеллю з рамкою, простим списком і таблицею з рядків. Фон, перевантажений посередині, або заголовок, який працює лише з панеллю безпосередньо під ним, - ось де все ламається.

Кадр 2 - екран підключення

Що на ньому: усе, що потрібно залі, щоб приєднатися.

• п'ять рядків інструкцій
• код для приєднання і QR-код, обидва генерує рушій - зарезервуй квадрат для QR-коду
• рядок із кількістю підключених гравців
• список гравців, які поступово приєднуються

Намалюй його двічі: з логотипом клієнта біля коду для приєднання і без нього, коли екран тримається на власному оформленні теми.

Кадр 3 - екран очікування

Що на ньому: майже нічого - власний логотип квізу або оформлення теми.

З екраном підключення в нього спільний лише фон, тож проєктуй його як окрему композицію. Він залишається на екрані, поки квізмайстер читає запитання вголос, тож видно його довше, ніж майже будь-що інше в грі. Він заслуговує на більше уваги, ніж зазвичай приділяють порожньому екрану.

Кадр 4 - екран запитання

Що на ньому: запитання, таймер, чотири варіанти відповіді та рядок розбору. На цей екран зала дивиться найдовше. Зверни увагу, що варіант може складатися лише з емодзі:

Запитання без варіантів - гравці вводять відповідь на телефоні. Екран майже порожній, і головним елементом стає таймер:

Момент, коли час вичерпано. Поверх екрана з'являється бульбашка розбору, а таймер порожній:

Кадр 5 - запитання з вкладенням

Що на ньому: ті самі частини, що й у кадрі 4, розміщені навколо зображення або відео. Композиція може бути іншою. Вкладення масштабується так, щоб уміститися в намальовану тобою рамку, тож і горизонтальне, і вертикальне зображення мають виглядати в ній прийнятно.

Що він охоплює: повноекранне вкладення і вкладення, що показуються між запитаннями.

Тут варіанти розміщено ліворуч і праворуч від вкладення:

Вкладення саме по собі, на весь екран:

Кадр 6 - екран відповіді

Що на ньому: яка відповідь була правильною, як відповіді зали розподілилися між варіантами, і рядок розбору.

Що він охоплює: екран відповіді для відкритих запитань і для запитань із вкладенням.

Екран проходить через три моменти. Спершу розподіл, поки нічого не позначено:

Потім правильний варіант позначається галочкою, а неправильні - хрестиком:

А якщо запитання має пояснення, поверх оформлення з'являється бульбашка. Залиш для неї місце - вона з'являється поверх усього, що ти намалював:

Для невеликої групи той самий момент показується як список балів, а не діаграма:

Для відкритого запитання діаграма показує, скільки гравців відповіли правильно:

Кадр 7 - рейтинг і переможець

Що на ньому: список гравців із місцем, аватаром, іменем і балами. Надай рядок гравця як окремий багаторазовий елемент: за замовчуванням він повторюється шість разів, максимум - десять.

Що він охоплює: рейтинг між раундами та фінального переможця.

Рейтинг після раунду із шістьма рядками гравців:

Фінальний зворотний відлік називає по одному гравцю, від останнього місця до першого, - місце, бали й назва команди в центрі уваги. Саме тут найбільше летючих емодзі:

Кадр 8 - вступ до раунду

Що на ньому: коротке оголошення для кожної категорії раундів. Є шість категорій: наука й техніка, природа, розваги й музика, спорт, мистецтво, історія.

Що він охоплює: усі шість категорій. Один дизайн може слугувати для кількох із них.

Тут одна композиція з варіантом для кожної категорії:

Персонаж необов'язковий. У стандартній темі QuizWitz є персонаж, який говорить і реагує; тема Emerald постачається без нього, і відмова від персонажа прибирає найдорожчу анімаційну роботу - синхронізацію губ, очі, руки.

Без персонажа вступ до раунду стає графічним, типографічним або ілюстративним моментом. Два підходи допомагають тримати обсяг роботи в межах: одна композиція з варіантом кольору чи значка для кожної категорії або одне універсальне оголошення, у якому змінюється лише назва раунду. Шість справді різних вступів - це багато роботи заради кількох секунд на екрані.

---

Аркуш елементів

Дві групи елементів на одному аркуші; кожен намальований один раз і використовується всюди.

Будівельні блоки вмісту. Вони заповнюють область вмісту загального кадру. Екрани, що використовують цей кадр, складаються з них, тож усе, що ти тут намалюєш, визначає вигляд усіх цих екранів:

• панель: заливка, рамка, радіус кутів - контейнер, у якому розміщується список або блок тексту
• рядок списку: повторюваний елемент будь-якого списку, із власним фоном або без нього
• роздільник: лінія між рядками там, де немає панелі
• пара «мітка - значення»: коротка мітка ліворуч, значення праворуч

Елементи керування. Малюються один раз, використовуються на кожному екрані:

• кнопка в чотирьох станах: звичайний, наведення, натиснута, неактивна
• символи правильно і неправильно
• смуга прокрутки, прапорець, список вибору
• де розміщується логотип QuizWitz

---

Що вирішено за тебе

• Телефони гравців. Фіксований HTML-макет.
• Кілька речей, які рушій малює сам - лінії між рядками на драбині балів, виділений рядок у виборі запитання, QR-код. Їхні кольори беруться з розділу Кольори у вигляді списку.
• Які екрани використовують загальний кадр і як саме.
• Як шість категорій прив'язуються до оформлення вступу до раунду. Ця прив'язка - параметр конфігурації, тож один вступ можна використати для кількох категорій.
• Увесь таймінг і тривалість анімацій.
• Звук. Тема може мати власну музику та звукові ефекти, але це окремий результат роботи, який не входить до технічного завдання на дизайн.

---

Правила дизайну

Жодне з них не обмежує твій візуальний дизайн. Вони стосуються того, як побудовано файл.

Формат

• 1920 × 1080 пікселів, точно. Один кадр на екран.
• Працюй у векторі, де це можливо. Там, де використовуєш растр (фото, текстури): щонайменше 2× від розміру відображення.
• Документ Animate працює з частотою 24 кадри на секунду. Це важливо, якщо ти пропонуєш ідеї для анімації.
• Залишай по краях поле 5% без важливої інформації. Проєктори обрізають зображення.

Структура шарів - найважливіше правило

Усе, що може рухатися, з'являтися або змінювати значення, розміщується на окремому іменованому шарі. Нічого не об'єднано, нічого не зведено.

На практиці:

• чотири варіанти відповіді - це чотири окремі шари, а не один
• таймер відокремлений від фону
• кнопка та її підпис - це два елементи
• рядок гравця - це одна група, яку можна дублювати

Що можна об'єднувати: суто декоративне фонове оформлення, яке працює як одне статичне зображення.

Це єдине правило, недотримання якого справді боляче б'є: тоді оформлення доводиться розбирати або перемальовувати, а це саме ті витрати, яких ця схема роботи має уникати.

Ефекти, які не зберігаються

Рушій малює на полотні HTML5. Такі ефекти треба вбудувати в зображення або не використовувати:

Ефект	Що робити натомість
Живе розмиття, тіні та світіння як фільтри	Надай їх як оформлення
Режими накладання (множення, екран, перекриття)	Переведи їх у суцільний колір
Ефекти шарів і коригувальні шари	Вбудуй їх
Градієнти всередині тексту або текст з обведенням кожного символу	Не використовуй їх
Маски, які змінюються в кожному кадрі	Не використовуй їх

Градієнти у фігурах - без проблем. Прозорість - без проблем. Тіні як нерухоме оформлення - без проблем.

Як поводиться текст

Саме тут дизайн для QuizWitz найбільше відрізняється від звичайної дизайнерської роботи.

Ти не задаєш розмір шрифту. Ти малюєш рамку.

Увесь текст малює в реальному часі компонент, який отримує дві речі: рядок тексту і прямокутник, який ти намалював. Потім він знаходить найбільший розмір шрифту, за якого цей рядок, розбитий на кілька рядків, ще вміщується в рамку. Довгий рядок зменшується, щоб уміститися; короткий збільшується, доки не заповнить рамку.

Три рядки, три однакові рамки - і три зовсім різні розміри шрифту, лише тому що текст коротший або довший. «Where is love» займає всю висоту; запитанню над ним доводиться задовольнятися двома дрібними рядками. Мітки ліворуч поводяться так само.

Що з цього випливає:

• Те саме запитання в іншій грі виглядає інакше. Запитання із шести слів виглядає великим і заповнює екран; запитання з тридцяти п'яти слів - дрібним, на п'ять рядків, у точно такій самій рамці. Обидва варіанти мають виглядати добре.
• Проєктуй кожну текстову рамку двічі. Заповни її один раз дуже коротким зразком, а другий раз - дуже довгим і перевір, що композиція тримається в обох випадках. Орієнтовно: варіант відповіді - від одного до приблизно восьми слів, запитання - від п'яти до сорока, ім'я гравця - від двох до двадцяти символів.
• Не розраховуй на фіксовану кількість рядків. Заголовка, який «завжди в один рядок», тут не існує.
• Не вирівнюй текст оптично з іншими елементами. Текст, який має збігатися з лінією чи фігурою, зміститься, щойно стане коротшим або довшим. Використовуй достатньо просторі рамки та вирівнювання (ліворуч, по центру, праворуч) замість точних позицій.
• Дванадцять мов. Німецькі складні слова довгі, та й угорська не легша. Рамка, яка тісна для англійської, у німецькій зменшує текст до нечитабельного розміру.
• Емодзі можуть з'являтися всередині тексту. Гравці вибирають емодзі біля назви своєї команди, а запитання чи варіант відповіді можуть містити емодзі - іноді варіант складається лише з емодзі. Вони малюються кольоровими й вищі за літери навколо.

Що потрібно знати для збирання про кожну текстову рамку: де вона розташована, якого вона розміру, як вирівняна, якого кольору і який шрифт. Але не: якого розміру в пунктах.

Ти можеш цим скористатися. Велика рамка з коротким текстом сама по собі стає сильною типографічною композицією, а рамка, яку ти навмисно робиш вузькою й високою, змушує текст вишикуватися в колонку. Використовуй припасування тексту як дизайнерський прийом; просто не проєктуй усупереч йому.

Таймер - обов'язковий, і це анімація

Кожен екран запитання має таймер; зала має бачити, скільки часу залишилося.

Таймер - це не число, що відраховується, а анімація, курсор відтворення якої рухає рушій. Ти створюєш перехід від «повного» до «порожнього» стану - смуга, що зменшується, кільце, що замикається, пісковий годинник, лінія, що коротшає. Рушій відтворює цю анімацію саме з такою швидкістю, щоб останній кадр збігся з кінцем запитання.

Що з цього випливає:

• Тривалість запитання не фіксована. Вона задається для кожного квізу - часто від двадцяти до тридцяти секунд, але може бути коротшою або довшою. Твою анімацію розтягують або стискають, щоб вона вмістилася.
• Жодних чисел чи позначок щосекунди. Таймер, що відраховує «20, 19, 18…», перестає бути правдивим, щойно змінюється тривалість.
• Останні секунди - найнапруженіший момент гри. Добре, якщо ближче до кінця прогрес стає помітнішим або тривожнішим.
• Читабельність із задніх рядів зали - з першого погляду.
• Можна кілька таймерів. І смуга вгорі, і кільце біля запитання керуватимуться рушієм, якщо кожен має назву timer.

Надай таймер як послідовність ключових кадрів або як опис переходу - достатньо чогось на кшталт «смуга зменшується справа наліво й змінює колір із зеленого на червоний».

Летючі емодзі з'являються поверх усього

Кожен гравець під час приєднання вибирає емодзі, і гра запускає ці емодзі по всьому екрану. Їх малює рушій на шарі над темою. Тут тобі нічого не треба малювати - але треба враховувати їх у дизайні, бо вони з'являються зовсім не рідко.

Вони з'являються в трьох моментах:

• Коли гравець відповідає. Його емодзі злітає від нижнього краю у випадковому місці по горизонталі, описує дугу й падає назад за межі кадру.
• Коли гравець кидає емодзі. Гравці можуть кинути свій емодзі з телефона; кут і швидкість залежать від свайпу, а емодзі вилітає знизу по центру, обертаючись.
• Коли у фінальному зворотному відліку оголошується місце. Вибух емодзі названого гравця: двадцять за звичайне місце, п'ятдесят за третє, сімдесят п'ять за друге і сто п'ятдесят для переможця.

Що це означає для дизайну:

• Не розміщуй нічого дрібного чи важливого в нижній третині екранів рейтингу та переможця. Під час зворотного відліку там справді тісно.
• Розраховуй на те, що вони не пасуватимуть до твоєї палітри. Це повнокольорові емодзі з усіх куточків таблиці Unicode, і жодна тема ними не керує. Дизайн, який тримається купи лише у вузькому діапазоні кольорів, у ці секунди виглядатиме випадковим.
• Кидки вимикаються, поки показується зображення або відео, тож екрани з вкладеннями залишаються чистими.
• Увесь шар можна вимкнути для окремої гри, тож не будуй і композицію, яка залежить від їхньої присутності.

Шрифти

• Шрифти мають бути вбудовуваними. Потрібен файл .ttf або .otf, а також ліцензія, яка дозволяє вбудовувати шрифт у застосунок. Шрифт, ліцензований лише як вебшрифт або лише для друку, використовувати не можна. Перевір це до того, як використовувати його в дизайні; виправляти це згодом дорого.
• Шрифти з незвично великими виносними елементами можна скомпенсувати, але повідом, якщо використовуєш такий шрифт.

Кольори у вигляді списку

Тема зчитує список кольорів із конфігураційного файлу, і телефони гравців оформлюються за тим самим списком. Надай свою палітру як іменований список, а не лише як кольори в оформленні:

Де	Кольори
Екран гри	Основний колір, акцентний колір, фон, колір панелі або контейнера, фон таймера, колір тексту за замовчуванням, колір тексту заголовка, колір тексту запитання, текст кнопок, текст діалогів і пояснень, текст імені гравця та балів, колір для «правильно», колір для «неправильно»
Чотири варіанти відповіді	Для кожного варіанта: колір фону, колір рамки і один суцільний колір для телефонів і діаграм
Телефони гравців	Фон, колір тексту, колір контуру, колір контуру варіантів, а також колір фону й тексту контейнера відповіді

На екрані гри дозволено градієнти: вказуй їх як два шістнадцяткові значення.

Кілька кольорів - це єдиний спосіб вплинути на частини, які рушій малює сам, тож їх варто визначити самостійно, а не залишати значення за замовчуванням:

• роздільник - лінії між рядками там, де немає панелі, і на драбині балів
• стани активний, неактивний і вибраний для рядка у виборі запитання
• текст діалогів
• передній план і фон QR-коду

Якщо ти їх не вкажеш, використовуватимуться вбудовані значення за замовчуванням - білий, сірий, червоний, чорний і білий, - які рідко пасують до дизайну.

Логотип QuizWitz

Власні дизайни містять логотип QuizWitz. Зарезервуй для нього місце, де він не заважатиме дизайну.

---

Що передати

Вихідний файл - бажано Illustrator

Тема збирається в Adobe Animate, і те, що Animate може імпортувати, визначає, скільки твоєї роботи переживе передачу без змін:

Інструмент	Що відбувається під час імпорту	Для чого використовувати
Adobe Illustrator (.ai)	Animate імпортує файл напряму й перетворює твої шари на шари Animate або окремі символи, зберігаючи назви шарів і залишаючи вектори редагованими. Саме цей крок рятує оформлення від перебудови вручну.	Бажано для фінального результату
Adobe Photoshop	Імпортується зі збереженими шарами, як Illustrator, але дає растр замість вектора.	Можливо
Figma	Усе проходить через експорт у SVG і PNG, і саме там втрачається потрібна тут структура шарів. Якщо ти все ж використовуєш Figma, надай кожен елемент окремо у форматі SVG з назвами файлів, що збігаються з назвами шарів, щоб структуру можна було відтворити вручну.	Етап концепції, якщо в ній ти працюєш швидше

Структура файлу:

• Одна монтажна область на екран, названа за кадрами вище.
• Багаторазові частини (кнопка, рядок гравця, варіант відповіді, таймер) як символи або компоненти, а не як окремі копії.
• Назви шарів англійською, без пробілів: question, від option1 до option4, timer, feedback, header, background, playerScore.
• Кольори як іменовані зразки, а текст як іменовані стилі, замість того щоб задавати їх для кожного об'єкта окремо.

Контрольний перелік результатів

1. Вихідний файл, структурований, як описано вище.
2. Кожен кадр у форматі PNG, 1920 × 1080 - як зразок того, як він має виглядати. Для кадру 2 - обидві версії: з логотипом клієнта і без нього.
3. Аркуш елементів як одна монтажна область: будівельні блоки вмісту та елементи керування.
4. Кожен окремий графічний елемент як прозорий PNG у розмірі 2× в одній папці, з назвою файлу, що збігається з назвою шару.
5. Таймер як ключові кадри або письмовий опис переходу.
6. Шрифти у форматі .ttf або .otf із підтвердженням ліцензії.
7. Список кольорів із розділу Кольори у вигляді списку у вигляді шістнадцяткових значень.
8. Пів сторінки нотаток: у чому ідея, як мають з'являтися варіанти, що рухається, а що залишається нерухомим. Не десятисторінкове обґрунтування дизайну - той, хто збирає тему, має знати, що саме збирати. Ідеї для анімації можна описати або надати у вигляді чорнового аніматика.

Порядок роботи

1. Кадр 4, екран запитання, разом з аркушем елементів. Узгодь обидва, перш ніж братися за решту. Разом вони містять таймер, варіанти, панель і всі елементи керування, тож визначають стиль усієї теми.
2. Кадри 1-3. Вони природно випливають із перших двох.
3. Кадри 6-8 - наостанок.

---

Додаток - назви символів

Для повноти і для тих, хто хоче знати, куди саме потрапляє їхнє оформлення. Щоб виконати роботу, читати це не обов'язково; описаних вище восьми кадрів і аркуша елементів достатньо. Якщо використовувати ці назви як назви шарів, не доведеться нічого «перекладати».

Кадр	Назва символу	Обов'язкові частини
1. Загальний кадр	GeneralPurposeScreen; GeneralPurposeScreenWithHeader - необов'язково	placeholder (область вмісту); текстова рамка title - необов'язково
1b. Вибір запитання, довге запитання	MultiQuestionScreen, LongQuestionScreen; обидва необов'язкові, за відсутності використовується загальний кадр	вибір запитання: заповнювач questions, timer; довге запитання: заповнювач question
2. Екран підключення	PresentationConnectScreen; PresentationConnectScreenWithLogo - необов'язково, із заповнювачем logo	від instructions.line1 до line5, connectedPlayers; заповнювач qrCode із міткою кадру showQrCode - необов'язково
3. Екран очікування	PendingScreen; PendingScreenWithLogo - необов'язково	header.text
4. Екран запитання	QuestionScreen	question.text, timer, feedback.text, від option1 до option4, мітки кадрів showOptions і showFeedback
5. Запитання з вкладенням	QuestionScreenAttachment	як вище, плюс attachment.placeholder
5b. Повноекранне вкладення	AttachmentScreen	placeholder
6. Екран відповіді	AnswerPieScreen; AnswerPieScreenAttachment - необов'язково	від option1 до option4, answer.text, feedback.text
6b. Відповідь на відкрите запитання	AnswerScreen, AnswerOpenQuestionPieScreen; варіанти …Attachment - необов'язково	answer.text, feedback.text, players, piechart
7. Рейтинг	WinnerScreen + PlayerScore; WinnerScreen_round, WinnerScreen_game і PlayerScoreNoImage - необов'язково	header.text, players, feedback.text (playAgain.text - необов'язково); у рядку: position, name, score, avatar - необов'язково
8. Вступ до раунду	один або кілька символів з будь-якою назвою; конфігураційний файл прив'язує кожну з шести категорій до символу	-
-	LoadingScreen	text, progress
-	Button, Checkbox, Slider, QuestionSelect, Scrollbar, SettingsScreenScrollarea, SymbolCorrect, SymbolWrong, PackListItem	власне оформлення не потрібне - вони будуються з того, що є у твоїх кадрах
-	IntroScreen, IntroScreenBranded, MenuScreen, SettingsScreen, AlertScreen, ActivityScreen, ActivityVotePieScreen	показуються лише в десктопному застосунку, а не в живому квізі. Не входять до технічного завдання: їх беруть із шаблону теми й переоформлюють твоїм фоном і кнопками

Символи вступу до раунду в стандартній темі називаються RoundIntroScienceAndTech, RoundIntroFloraAndFauna, RoundIntroTedMusic, RoundIntroTedSport і RoundIntroTedCultHist; мистецтво та історія використовують останній спільно. «Ted» у цих назвах - залишок від персонажа оригінальної теми, і це не означає, що в них має з'являтися персонаж.

Кожен елемент із .text у назві - це текстова рамка з припасуванням, як описано в розділі Як поводиться текст: прямокутник, який рушій заповнює сам. Елемент timer - це кліп (movie clip) із власною шкалою часу; рушій зчитує кількість його кадрів і переміщує курсор відтворення пропорційно до часу, що минув, щонайбільше 24 рази на секунду.

Що конфігураційний файл бере з твого дизайну

{
  "fontFiles": { "<body font>": "fonts/body.ttf", "<heading font>": "fonts/heading.ttf" },
  "fonts":  { "default": "<body font>", "header": "<heading font>" },
  "colors": {
    "_accent_": "#…", "_main_": "#…", "_background_": "#…-#…",
    "_container_": "#…", "_timerBackground_": "#…",
    "default": "#…", "header": "#…", "question": "#…",
    "buttons": "#…", "dialog": "#…", "player": "#…",
    "_optionColors_": [ { "background": "#…-#…", "border": "#…" } ]
  },
  "optionColors": [ "#…", "#…", "#…", "#…" ],
  "booleanResultColors": { "correct": "#…", "wrong": "#…" },
  "remoteColors": {
    "background": "#…", "text": "#…", "outline": "#…",
    "options-outline": "#…", "container-background": "#…", "container-text": "#…"
  },
  "roundIntros": { "science": "<symbol>", "nature": "<symbol>", "entertainment": "<symbol>",
                   "sports": "<symbol>", "art": "<symbol>", "history": "<symbol>" },
  "overlay": "light | dark"
}