Играем и учимся: 20 игр для дизайнеров
Конверт, журнал Unisender ·
Прокачиваем работу со шрифтами, цветом и композицией Сообщение Играем и учимся: 20 игр для дизайнеров появились сначала на Конверт, журнал Unisender .
Хороший дизайнер умеет выстраивать композицию , сочетать цвета и подбирать шрифты. Уверенность в этих навыках приходит с практикой, а тренироваться можно в игровом формате. Собрали 20 игр, которые помогут закрепить теорию и набить руку в решении дизайнерских задач. Подборка будет полезна дизайнерам любого уровня — от новичков до профи.
Если нужно натренировать глазомер и научиться замечать даже небольшие смещения элементов, сыграйте в It’s Centred That. В каждом раунде нужно определить, точно ли по центру находится точка внутри круга, квадрата или треугольника. Иногда она сдвинута всего на несколько пикселей, при этом сами фигуры могут быть вписаны одна в другую.
Игра научит лучше чувствовать выравнивание и создавать визуально сбалансированные макеты.
Попробовать
Чтобы научиться оценивать размеры и расстояния без линейки и инструментов разметки, попробуйте Pixactly. Игра помогает лучше чувствовать габариты элементов в пикселях и точнее работать с отступами в макетах.
На каждом уровне вас ждет новое задание — например, нарисовать прямоугольник определенной ширины и высоты. Когда вы его выполните, игра покажет, насколько результат отличается от заданного размера.
Попробовать
The Boolean Game пригодится тем, кто работает с векторной графикой . Игра учит создавать объекты из простых фигур с помощью объединения, вычитания и пересечения. Например, таким способом можно создать облако, месяц или дискету.
Справа контуром показана форма, которую нужно получить. Слева — набор элементов, из которых ее предстоит собрать. Внизу находятся операции, с помощью которых можно комбинировать фигуры.
Попробовать
I Shot the Serif — игра на знание типографики. С ней вы станете быстрее различать виды шрифтов .
Вам предстоит найти определенное количество букв с засечками среди других символов. Сложность в том, что на поиск отводится ограниченное время — долго разглядывать символы не получится. В каждом следующем раунде их становится больше, поэтому задача постепенно усложняется.
Перед началом можно выбрать уровень сложности: новичок, мидл или синьор.
Попробовать
Kern Type — тренажер по кернингу, то есть настройке расстояния между буквами. Ваша задача — расставить символы так, чтобы интервалы между ними были одинаковыми.
После каждого задания результат можно сравнить с эталонным вариантом. Это помогает увидеть, как даже небольшие изменения в кернинге влияют на внешний вид текста. А главное — научиться настраивать кернинг с учетом формы и начертания букв.
Попробовать
Rather Difficult Font Game проверяет, насколько хорошо вы различаете шрифты. На экране появляется название шрифта, а ниже — нескольких вариантов текстов. Вам нужно выбрать, какой из них набран указанной гарнитурой.
Кириллицы в игре нет. Зато можно научиться определять популярные латинские шрифты по их характерным особенностям.
Попробовать
Для тех, кто справится с первой версией игры, есть более сложная вторая .
Better Web Type поможет разобраться в нюансах работы с типографикой на сайтах и в приложениях. В игре нужно подобрать размер шрифта , межстрочный интервал и ширину строки с учетом других параметров текстового блока. В результате текст должен выглядеть аккуратно и оставаться удобным для чтения.
Попробовать
Попробовать себя в роли шрифтового дизайнера можно в игре Shape Type. В каждом раунде появляется буква, у которой нарушена форма. Нужно двигать опорные точки и направляющие кривых Безье, чтобы максимально точно восстановить исходное начертание. Игра сравнивает ваш вариант с оригиналом и показывает процент совпадения.
Так можно натренировать навык работы с кривыми, научиться лучше чувствовать форму букв и понимать, из каких деталей складывается характер шрифта.
Попробовать
Потренироваться в работе с текстом можно в The Rag Time. Задача простая: исправить переносы строк в абзаце так, чтобы его правый край выглядел аккуратно и не образовывал резких провалов и выступов. На каждое задание дается 60 секунд.
Игра помогает набить руку в верстке и научиться оформлять текстовые блоки так, чтобы их было легко воспринимать на сайтах и в приложениях.
Попробовать
Чтобы понять, как работать с цветовым кругом , попробуйте Color Method. Сначала вам предстоит искать разные оттенки, а затем подбирать цветовые сочетания — комплементарные, аналоговые, триадические или тетрадические.
Выполнять задания нужно на время, поэтому важно быстро ориентироваться в цветах. После такой тренировки будет проще подбирать палитры для своих проектов.
Попробовать
What the Hex? тренирует умение определять цвет по его HEX-коду. В игре нужно выбрать оттенок, который соответствует заданному коду. Можно начать с простого и выбирать нужный оттенок среди двух вариантов. А затем увеличить сложность и постепенно дойти до 48.
Игра особенно полезна UX/UI-дизайнерам. С ней вы станете быстрее ориентироваться в кодах страниц и настраивать стили интерфейсов.
Попробовать
Kolor — еще одна игра, которая учит различать оттенки. Но в ней цвета предстоит определять не по HEX-коду, а искать исключительно на глаз: в каждом раунде нужно как можно быстрее найти среди нескольких вариантов тот, который совпадает с заданным. Постепенно они становятся все более похожими, и выбрать правильный становится труднее.
Попробовать
В Color Practice нужно восстановить цветовую сетку: расставить пиксели так, чтобы они образовали плавный переход по цвету, насыщенности и яркости. Сетка может включать в себя от 10 до 120 элементов: чем больше квадратиков, тем сложнее. Игра тренирует цветовое восприятие и учит различать близкие оттенки .
Попробовать
Потренировать внимательность в работе с цветом можно и в игре Odd One Out. Перед вами будут появляться сетки из цветных плиток. Ваша задача — находить среди них ячейки, которые отличаются от остальных по цвету.
Игра быстро превращается в соревнование с самим собой. Хочется решить как можно больше задач, пока не вышло 60 секунд, и побить личный рекорд.
Перед началом лучше откалибровать монитор — оттенки в заданиях бывают очень близкими. От настроек экрана зависит, насколько реально их различить.
Попробовать
Flexbox Froggy — отличный способ разобраться с CSS-свойствами . Игра помогает на практике понять, как работают разные настройки и как с их помощью управлять расположением элементов на странице.
У игры забавный сюжет: нужно помочь лягушкам добраться до кувшинок, а для этого — написать несколько строк кода. В процессе вы сможете освоить выравнивание и направление элементов, а затем научиться задавать их порядок, переносить элементы на новую строку и управлять другими параметрами.
Попробовать
Если у вас есть базовые навыки фронтенд-разработки или желание их освоить, попробуйте CSS Diner. Игра учит работать с селекторами и понимать, как происходит настройка интерфейса после передачи макетов в разработку.
В каждом задании нужно написать код и выбрать с его помощью нужные блюда на столе. Сначала все просто: например, нужно найти все тарелки или элементы определенного типа. Дальше задания становятся сложнее — появляются классы, вложенные элементы и другие условия.
Попробовать
User Inyerface показывает, как неудобный интерфейс влияет на пользовательский опыт. Вам предстоит заполнить форму, но сделать это непросто: кнопки выглядят неочевидно, подсказки могут сбивать с толку, а привычные элементы работают не так, как вы ожидаете. Например, окно чата сбоку не сворачивается по клику на стрелку, а вместо этого двигается вверх.
Игра заставляет задуматься, насколько привычные сценарии и понятная навигация важны для удобства интерфейса. После ее прохождения проще посмотреть на собственные макеты глазами пользователя и заранее заметить то, что может его запутать.
Попробовать
Can’t Unsee тренирует внимание к мелочам и учит замечать недочеты в интерфейсах. Перед вами появляются два похожих экрана. Задача — определить, какой выглядит гармоничнее.
На первый взгляд варианты могут казаться почти одинаковыми, но в одном есть ошибка: нарушены отступы, элементы стоят не на одной линии, отличаются размер или начертание текста, сбита иерархия или неудачно подобраны цвета . С каждым уровнем отличия становятся менее очевидными.
Попробовать
Если вы работаете в Figma , попробуйте пройти Figma Ninja. Это туториал в формате игры, который помогает освоить базовые возможности редактора и запомнить горячие клавиши. Чем меньше времени вы будете тратить на поиск нужной кнопки или команды, тем быстрее сможете собирать макеты.
Попробовать
Если заскучали и хотите бросить себе вызов, Designercize сгенерирует для вас дизайнерский челлендж. Задания могут быть неожиданными — например, за 15 минут разработать дизайн сервиса для покупки билетов, рассчитанный на пловцов.
Такие условия заставляют искать нестандартные решения и быстро адаптироваться к разным вводным. А еще игра помогает выйти за рамки привычных сценариев, потренировать креативность и научиться быстрее превращать абстрактный запрос в конкретную идею.
Попробовать
12 аналогов Canva для работы с визуальным контентом
13 курсов моушн-дизайна: где учиться анимашкам, 3D и не только
10 правил веб-дизайна: шпаргалка для маркетолога
15 лучших книг о дизайне
12 принципов анимации — от правил студии Disney до современного моушн-дизайна
Сообщение Играем и учимся: 20 игр для дизайнеров появились сначала на Конверт, журнал Unisender .