Играем и учимся: 20 игр для дизайнеров

Хороший дизайнер умеет выстраивать композицию, сочетать цвета и подбирать шрифты. Уверенность в этих навыках приходит с практикой, а тренироваться можно в игровом формате. Собрали 20 игр, которые помогут закрепить теорию и набить руку в решении дизайнерских задач. Подборка будет полезна дизайнерам любого уровня — от новичков до профи.

It’s Centred That

Если нужно натренировать глазомер и научиться замечать даже небольшие смещения элементов, сыграйте в It’s Centred That. В каждом раунде нужно определить, точно ли по центру находится точка внутри круга, квадрата или треугольника. Иногда она сдвинута всего на несколько пикселей, при этом сами фигуры могут быть вписаны одна в другую.

Игра научит лучше чувствовать выравнивание и создавать визуально сбалансированные макеты.

Попробовать

Pixactly

Чтобы научиться оценивать размеры и расстояния без линейки и инструментов разметки, попробуйте Pixactly. Игра помогает лучше чувствовать габариты элементов в пикселях и точнее работать с отступами в макетах.

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

Попробовать

The Boolean Game

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

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

Попробовать

I Shot the Serif

I Shot the Serif — игра на знание типографики. С ней вы станете быстрее различать виды шрифтов. 

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

Перед началом можно выбрать уровень сложности: новичок, мидл или синьор.

Попробовать

Kern Type

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

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

Попробовать

Rather Difficult Font Game

Rather Difficult Font Game проверяет, насколько хорошо вы различаете шрифты. На экране появляется название шрифта, а ниже — нескольких вариантов текстов. Вам нужно выбрать, какой из них набран указанной гарнитурой.

Кириллицы в игре нет. Зато можно научиться определять популярные латинские шрифты по их характерным особенностям.

Попробовать

Для тех, кто справится с первой версией игры, есть более сложная вторая.

Better Web Type

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

Попробовать

Shape Type

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

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

Попробовать

The Rag Time

Потренироваться в работе с текстом можно в The Rag Time. Задача простая: исправить переносы строк в абзаце так, чтобы его правый край выглядел аккуратно и не образовывал резких провалов и выступов. На каждое задание дается 60 секунд.

Игра помогает набить руку в верстке и научиться оформлять текстовые блоки так, чтобы их было легко воспринимать на сайтах и в приложениях.

Попробовать

Color Method

Чтобы понять, как работать с цветовым кругом, попробуйте Color Method. Сначала вам предстоит искать разные оттенки, а затем подбирать цветовые сочетания — комплементарные, аналоговые, триадические или тетрадические. 

Выполнять задания нужно на время, поэтому важно быстро ориентироваться в цветах. После такой тренировки будет проще подбирать палитры для своих проектов.

Попробовать

What the Hex?

What the Hex? тренирует умение определять цвет по его HEX-коду. В игре нужно выбрать оттенок, который соответствует заданному коду. Можно начать с простого и выбирать нужный оттенок среди двух вариантов. А затем увеличить сложность и постепенно дойти до 48.

Игра особенно полезна UX/UI-дизайнерам. С ней вы станете быстрее ориентироваться в кодах страниц и настраивать стили интерфейсов.

Попробовать

Kolor

Kolor — еще одна игра, которая учит различать оттенки. Но в ней цвета предстоит определять не по HEX-коду, а искать исключительно на глаз: в каждом раунде нужно как можно быстрее найти среди нескольких вариантов тот, который совпадает с заданным. Постепенно они становятся все более похожими, и выбрать правильный становится труднее.

Попробовать

Color Practice

В Color Practice нужно восстановить цветовую сетку: расставить пиксели так, чтобы они образовали плавный переход по цвету, насыщенности и яркости. Сетка может включать в себя от 10 до 120 элементов: чем больше квадратиков, тем сложнее. Игра тренирует цветовое восприятие и учит различать близкие оттенки. 

Попробовать

Odd One Out

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

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

Перед началом лучше откалибровать монитор — оттенки в заданиях бывают очень близкими. От настроек экрана зависит, насколько реально их различить.

Попробовать

Flexbox Froggy

Flexbox Froggy — отличный способ разобраться с CSS-свойствами. Игра помогает на практике понять, как работают разные настройки и как с их помощью управлять расположением элементов на странице.

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

Попробовать

CSS Diner

Если у вас есть базовые навыки фронтенд-разработки или желание их освоить, попробуйте CSS Diner. Игра учит работать с селекторами и понимать, как происходит настройка интерфейса после передачи макетов в разработку.

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

Попробовать

User Inyerface

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

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

Попробовать

Can't Unsee

Can’t Unsee тренирует внимание к мелочам и учит замечать недочеты в интерфейсах. Перед вами появляются два похожих экрана. Задача — определить, какой выглядит гармоничнее. 

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

Попробовать

Figma Ninja

Если вы работаете в Figma, попробуйте пройти Figma Ninja. Это туториал в формате игры, который помогает освоить базовые возможности редактора и запомнить горячие клавиши. Чем меньше времени вы будете тратить на поиск нужной кнопки или команды, тем быстрее сможете собирать макеты. 

Попробовать

Designercize

Если заскучали и хотите бросить себе вызов, Designercize сгенерирует для вас дизайнерский челлендж. Задания могут быть неожиданными — например, за 15 минут разработать дизайн сервиса для покупки билетов, рассчитанный на пловцов. 

Такие условия заставляют искать нестандартные решения и быстро адаптироваться к разным вводным. А еще игра помогает выйти за рамки привычных сценариев, потренировать креативность и научиться быстрее превращать абстрактный запрос в конкретную идею.

Попробовать