Як обирали базовий вигляд і чому скін — це файл даних
· 3 хв читання · Команда Тямки
Три концепти, один із яких усе ще виглядав машинним, проста паперова тема, що стала базовою, і формат скінів, де розкладка забрала більше роботи, ніж колір.
Першим дизайнерським завданням Тямки була базова тема, та, яку кожен гравець бачить до будь-якої покупки. Почали з дослідження. Переглянули близько 40 ігор із чартів категорії в американському App Store і зібрали мудборд із 36 референсів. Обидва показали одне й те саме. Великі застосунки для тренування мозку схожі один на одного і застарілі на вигляд, а преміальні головоломки тримаються за одну матеріальну ідею і передають сенс кольором.
Три концепти, потім простіший
На цій основі ми намалювали три концепти. Один був газетною сторінкою з головоломками, другий вагомим вимірювальним приладом, третій вирізкою з паперу. У кожного була своя розкладка, спільною лишалася тільки логіка таблиці Шульте. Ще раніше до смітника пішла перша чернетка. Вона була одним макетом, перефарбованим тричі, і мала фіолетовий неон.
Коли ми поклали три концепти поруч, газетний варіант усе одно виглядав як зроблений ШІ. Хотілося рівніше і чистіше, без курсиву і зайвих виділень. Так зʼявилася проста паперова тема, яка стоїть у грі зараз. Зрештою жоден із трьох концептів не викинули. Усі вони стали платними скінами, а чистий варіант став базовим. Сьогодні вони в грі під назвами Прилад, Вирізка і Шпальта.
Дрібні числа, які змінили дизайн
- У першого шрифту, Schibsted Grotesk, немає кирилиці, а гра виходить і українською. Ми замінили його на Onest.
- Сірий текст першої версії, #8b8882, не проходив перевірку контрасту WCAG AA. Тепер він #6f6c66.
- Бриф просив сітку Шульте до 50 чисел. На телефоні шириною 375 pt сітка 7×7 найбільша, у якій клітинка лишається 44 pt, а у 8×8 вона вже 42,9 pt. Тому останній рівень таблиці Шульте має сітку 7×7.
- На телефоні 375×667 у мобільному браузері сітка 7×7 давала клітинку 30 px. Це виправив компактний режим для низьких екранів.
- У тесті Струпа чотири кольори чорнила стоять на темній панелі, а правильну чи хибну відповідь видно за формою і рухом, ніколи за червоним. Кнопки відповіді містять тільки слова.
Скін — це файл даних
Систему скінів описали ще до першого екрана. Правило таке, що новий скін — це дані, а не код. Скін, який змінює лише кольори, шрифти і відступи, — це один файл даних. Скін, який змінює розкладку, замінює тільки потрібні частини, як-от таймер, клітинки чи екран результатів, а все інше бере з базового. Жодна гра не знає, який скін увімкнено.
Ми думали, що скіни з розкладкою будуть рідкістю, а вийшло навпаки. Із 21 скіна, запланованого на 25 вересня, лише 3 можна було зробити самими токенами. Тому частини розкладки зробили дешевими в написанні, а те, що не має ламатися ніколи, тримає оболонка гри, а не скін. Там живуть введення, зони натискання і підписи для доступності. Три токенні скіни, Папір, Ніч і Поп, справді вміщаються кожен в один файл, але не задарма. Усі три в першому вигляді не пройшли перевірку контрасту, у двох шрифти були без кирилиці, а Ніч утратила градієнт і світіння, щоб лишитися одним файлом.
Перевірки замість смаку
Кожен скін проходить ті самі автоматичні перевірки. Скрипт експортує вебзбірку, запускає одинадцять перевірок на кожному скіні і зберігає знімки в семи розмірах екрана англійською і українською. Правильне і хибне не можна показувати лише кольором, зона натискання має бути від 44 pt, цифри в HUD мають однакову ширину, у браузері телефона нічого не обрізається, а найменший текст лишається читабельним на екрані Steam Deck.
Перевірки важать більше за смак. Червоний, яким ми спершу писали текст помилки, мав контраст 3,96, а правило вимагає 4,5. 26 вересня ми вирішили не повертати червоний, тож текст помилки лишається кольору чорнила.
Де ми зараз
26 вересня в грі були базовий скін і сім платних, від Паперу до Шпальти, а повні референси ще кількох скінів чекали на затвердження. Усі пʼятнадцять ігор є на сторінці ігор.