Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:
Игровой кроссфит для дизайнеров

Подборка приложений и браузерных игр для тренировки скиллов в UX, векторной графике, подборе шрифтов и hex-кодов.

card-photo
card-photo
Вика Пушкина

автор в SKVOT

Валяешься на диване, тапаешь по экрану и повышаешь креативную ману — звучит как мечта, но это вполне может быть реальностью. Ненапряжной и доступной с экрана смартфона.

Развлекательных ресурсов, прокачивающих дизайн-скиллы, много, но степень полезности у них разная. Эта подборка — на 100% прикладная. Тут собраны игры, которые освежат в памяти теорию UX и hex-коды, помогут отточить скиллы в векторной графике и подборе шрифтов, натренируют память и глазомер.

 

Defeat B.O.C.O.

Онлайн-игра Defeat B.O.C.O. — интерактивное путешествие по миру UX для новичков. Ресурс запустила американская компания Fresh. Ее команда разрабатывает софт, стратегии, дизайн-концепции и главным в работе считает дизайн-мышление.

Принцип перенесли и в Defeat B.O.C.O. В игре поэтапно рассказывают о главном в теории UX во время прогулки по четырем мирам:

RESEARCH (Исследование)

DESIGN (Дизайн)

TEST (Тестирование)

DELIVERY* (Передача в разработку) — пока доступен не полностью.

В каждом разделе — море информации по теме. В некоторых локациях можно останавливаться, открывать секретные места и узнавать больше. Например, просмотреть юзер-сторис разных пользователей на одном из островов мира Research.

Продвигаясь вперед на машине, воздушном шаре или подводной лодке, время от времени сталкиваешься с B.O.C.O., или Зверем Конфликтующих Мнений (The Beast of Conflicting Opinions). Причем у каждого мира свой монстр. В разделе Test это Змея, а в Research — Осьминог:

Монстры появляются время от времени фоново в своем разделе, но сражаться с ними можно только в конце каждой части путешествия. Под сражением создатели Defeat B.O.C.O. понимают тест: ответь правильно на все пять вопросов, и зверь этого мира пропустит тебя в следующий.

Финальной битвы пока нет, потому что последний раздел игры еще в разработке.

Польза: поможет изучить теорию UX.

Can’t Unsee

Can’t Unsee взорвала игровые дайджесты в 2019 году, снова доказав, что все гениальное просто: из двух вариантов макета полей, кнопок и других элементов интерфейса нужно выбрать правильный.

Игру сделали американский веб-разработчик Кеян Жанг из финтех-компании Robinhood и Алекс Котлярский, украинский софтверный инженер в Facebook. Они точно понимают в дизайне диджитал-продуктов.

В Can’t Unsee три уровня (легкий, средний и сложный), в каждом по 18 вопросов. В начале небольшой туториал из трех примеров. После выбора — как в туториале, так и в самом тесте — объясняют, почему ответ правильный или неправильный. Еще после ответа можно кликнуть на Compare и сравнить макеты:

Польза: учит быстро находить ошибки в дизайне.

Boolean

Американский веб-разработчик Марк МакКей с 2011 года создает обучающие онлайн-игры для дизайнеров на своем проекте Method of Action.

МакКей сделал крутой диджитал-тест на проверку восприятия цвета (Color), тренажеры для глазомера (Kern Type, Shape Type) и игру, обучающую рисовать в векторе (The Bezier Game). Последние пару лет у проекта был перерыв, а недавно он обновился пазлом для дизайнеров, которые работают в векторе, — Boolean.

В этой мини-игре дается несколько базовых фигур, из которых нужно создать новую (в начале задания показывают, какую именно) с помощью объединения, вычитания, пересечения или отсечения:

С каждым уровнем задача усложняется. Например, только две из трех фигур нужно будет объединить, а третью — отсечь. Любое действие можно отменить или вообще начать игру заново.

Польза: помогает выучить булевы операции в векторной графике и прокачать скилл быстрого создания иконок и логотипов.

Font Memory Game

Font Memory Game — это веб-игра от Матея Латина, старшего UX-дизайнера в продуктовой компании GitLab и создателя сайта о типографике Better Web Type.

В этой игре за 25 ходов нужно найти 10 пар одинаковых шрифтов, скрытых за карточками в таблице. Один ход — два клика на рандомные карточки. Если пара правильная, она исчезает, если нет — карточки снова переворачиваются.

С момента первого клика отсчитывается время, хотя ограничений нет — таймер, скорее, просто помогает понять, насколько быстро ты запоминаешь шрифты.

Названия шрифтов в игре не указываются, но Латин специально подобрал похожие между собой: чтобы найти пару, нужно уметь подмечать мелкие детали:

До релиза Font Memory Game дизайнер уже пробовал себя в создании типографических тренажеров. На его сайте и сейчас доступна игрушка Equilateral Triangle of a Perfect Paragraph, в которой нужно задать абзацу предложенные параметры на глаз.

Еще одна альтернатива игре, где не нужно ничего запоминать — Typewar. В ней просто дается буква, а игрок должен выбрать из двух вариантов шрифт, каким она написана.

Польза: учит замечать отличия в шрифтах и тренирует память.

The Eyeballing Game

The Eyeballing Game — винтажная находка для дизайнеров. Эту браузерную игру выпустил в 2008 году канадский инженер-конструктор Маттиас Вандел, который делает подставки, лампы и музыкальные инструменты из дерева. Процесс их создания выкладывает на ютуб.

Дизайн The Eyeballing Game полностью соответствует времени, но при этом продолжает быть юзабельным, а сама игра — мегаполезной.

В игре семь заданий на глазомер. Например, поставить точку в центре фигуры, начертить биссектрису, параллелограмм и прямой угол. Каждое задание дается три раза — и каждый раз пишется, на сколько пикселей ты ошибся. Итоговый результат — среднее значение по всем ошибкам. В идеале оно должно равняться нулю.

Свежая, но не такая обстоятельная альтернатива этой игре — тест It’s Centred That. Тут нужно на глаз определить, находится ли точка в центре изображения. Всего десять заданий, но играешь до первого неправильного шага, и начинать заново можно бесконечное количество раз.

Польза: учит инженерной точности в дизайне.

Pixactly

Онлайн-игра Pixactly — тест на то, насколько хорошо ты «знаешь свои пиксели». Сервис запустили еще в 2014 году веб-разработчик Дэн Гинтис и дизайнер Дэвид Гог — тогда они оба работали в Razorfish, одном из крупнейших интерактивных агентств в мире.

Идея суперпростая — нарисовать прямоугольник заданного количества пикселей. И это не так уж легко. Если промахиваешься, игра тебя троллит:

В игре пять раундов, за каждый начисляются баллы: на сколько пикселей промахнулся, столько и баллов. В финале пишется сумма по всем раундам и вывод, где ты промахиваешься меньше — в высоте или ширине прямоугольника.

Польза: круто прокачивает глазомер.

Hex Guess

Hex Guess — простая, но забавная веб-игрушка, которую недавно выпустил Гаутам Саит, экс-дизайнер Google. Задача одна: угадать hex-код цвета фона на главной странице игры.

Играть можно до бесконечности, заодно пополняя знания: на каждую догадку игра пишет правильный ответ и погрешность, показывает оттенок, код которого указан в ответе. Возможно, через несколько (тысяч) ходов ты запомнишь отдельные цифры и начнешь ошибаться меньше:

Если не хочется ничего вписывать, можно поиграть в альтернативу Hex Guess — What the Hex. Она вышла гораздо раньше, но там сразу дается код и варианты оттенков на выбор — от 2 до 48, в зависимости от сложности уровня. Если выбираешь неправильно, тоже пишется код выбранного цвета.

Польза: помогает выучить hex-коды цветов и тренирует визуальную память.

Поделиться материалом
РАССЫЛКА SKVOT

Раз в две недели мы отправляем новые публикации и анонсы курсов на почту