UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Інструменти для тренування твоїх дизайн навичок
Anastasiia Koval
Anastasiia Koval

Опубліковано

Інструменти для тренування твоїх дизайн навичок

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


Kern Type

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

Image description


To the point

Гра перевіряє, наскільки швидко ви можете розпізнавати шрифти із зарубками. Для початку вам буде запропоновано дві літери, одна з яких є шрифтом із засічками, і вам потрібно «зняти засічку», натиснувши на неї, перш ніж закінчиться час. У міру просування вам одночасно показується все більше і більше букв, що ускладнює пошук.

Image description


Betterwebtype

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

Image description


It`s Centered That

It's Centered That — чудовий інструмент для вдосконалення відчуття вирівнювання.
Завдання просте: визначити, чи ідеально розташована точка всередині фігури. Незважаючи на свою простоту, гра представляє значну складність, оскільки точки часто розташовані дуже близько до центру.

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

Image description


Pixact.ly

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

Image description


Cantunsee

Can’t Unsee збагачує ваші загальні здібності UI/UX, перевіряючи ваші знання концепцій дизайну, таких як ієрархія, контраст, вирівнювання, типографіка та стиль компонентів.
На екрані відображаються два компоненти дизайну та пропонується вибрати більш зручний варіант. Компоненти можуть виглядати ідентичними для недосвідченого ока, але експерт-дизайнер повинен мати можливість відрізнити їх, помітивши невеликі відмінності між елементами, як-от неправильне вирівнювання тексту або нерівномірний відступ.

Image description


Bezier

Цей тренажер допомагає створювати точнішу графіку за допомогою інструмента «Перо». Тут пояснюється, як використовувати елементи керування, такі як alt і shift, для розміщення опорних точок і керування кривими Безьє. Гра навчить вас малювати прості геометричні фігури разом із більш складними формами, такими як серце та автомобіль, з якомога меншою кількістю опорних точок або вузлів. Щоб було цікаво грати, ви отримуєте певну кількість вузлів для кожного рівня, і гра постійно підраховує вузли, які ви не використали.

Image description


Shape Method

Shape Type — ще одна векторна гра, яку варто спробувати. Тут гравцеві пропонується літера, яку потрібно змінити у правильну форму, перетягуючи різні опорні точки, і отримати схожість за шкалою в 100 балів. Подібно до Kern Type, ви також можете перемикатися між трьома видами, щоб порівняти свій результат із оригінальною формою. Окрім удосконалення ваших здібностей до векторного малювання, Shape Type — це чудовий спосіб ближче розглянути анатомічні елементи різних шрифтів.

Image description


Color Method

Це гра, у якій вам потрібно визначити відтінки та насиченість, а також комплементарні, аналогічні, триадичні та тетрадичні пари кольорів. Інтерфейс показує інтерактивне кольорове коло з виділеним кольором у центрі. Ви повинні визначити колір (або кольори) всередині колірного кола за 10 секунд або менше.

Image description


What the HEX

What the Hex — це весела (кому як хах) та навчальна інтерактивна гра, яка пропонує гравцям досліджувати та експериментувати з теорією кольорів, особливо зосереджуючись на шістнадцяткових кодах кольорів.

Image description


Hue Test

Hue Test це завдання, в якому потрібно розташувати кольори в палітрі в правильній послідовності. Завдання ускладнене тим, що вся палітра складається з приглушених пастельних відтінків.

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

Image description


Kolor

Гра на швидкість, також пов’язана з точним визначенням кольору. Внизу у вас є запропоновані варіанти вибору, а зверху колір який треба визначити. Також складність зростає з кожним раундом, і вже після 15 там йдуть дуже близькі кольори і стає важче швидко визначити.

Image description


The boolean game

Boolean Game служить інтерактивним посібником з булевих операцій. Вам надається форма для копіювання, яка потім перетворюється на контур через короткий проміжок часу. У лівій частині екрана доступні різні фігури, які можна перетягувати в контур, поступово відновлюючи остаточну форму. У нижній частині екрана наведено чотири логічні операції — об’єднання, віднімання, перетин і різниця.
Натискання кнопки «Продовжити» запускає покрокову анімацію, яка ілюструє процес об’єднання за допомогою вибраної логічної операції. Ця анімація допомагає візуалізувати будь-які помилки, допущені під час вибору неправильної операції.

Image description


Ось така підбірка вийшла! Всім дякую за увагу!

Якщо знаєте ще якісь подібні сервіси-тренажери діліться в коментарях)

Топ коментарі (1)

Згорнути/розгорнути
 
igor_6e6d profile image
Igor S

Супер, дякую!