Геймификация — один из самых простых и при этом эффективных способов учиться. Мы подобрали 20+ интересных обучающих игр для IT- и диджитал-специалистов: с ними можно весело и непринужденно подтянуть свои знания в дизайне, верстке и программировании.

А чтобы осваивать диджитал-маркетинг, приходите учиться в CyberMarketing. У нас есть статьи, вебинары, видеокурсы по ключевым направлениям: SEO, PPC, SMM и не только. Преподают эксперты Promopult, Click.ru и др.

Kolor

Сайт: kolor.moro.es

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Игра, которая проверит, насколько точно вы можете определять цвета. Первые 5-7 уровней довольно простые, однако дальше придется внимательно присматриваться к разноцветным кружочкам. А чтобы дойти до 20-30 уровня, кроме хорошего глазомера, нужно иметь еще и монитор с очень хорошей передачей оттенков — настолько цвета там похожи друг на друга.

При этом на каждый раунд дается по 3-5 секунд — думать нужно очень быстро.

The Color!

Сайт: game.ioxapp.com/eye-test

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Похожая игра на определение цветов. Однако играть в неё проще — вместо того, чтобы искать нужный цвет среди десятков кружков, достаточно найти единственную плитку, которая отличается по цвету от остальных. Но, несмотря на это, уже на 15 уровне играть становится довольно тяжело.

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

Читайте также: Топ-15 инструментов для обработки фотографий: от простого к сложному

Kern Type

Сайт: type.method.ac

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

А глаз как у орла! Или нет? Сыграйте в Kern Type, чтобы проверить. Здесь придется ставить размеры межбуквенных интервалов, ориентируясь только на свою интуицию и познания в типографике.

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

The Bezier Game

Сайт: bezier.method.ac

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Игра, что научит пользоваться кривыми Безье. Отличное времяпрепровождение для тех, кто хотел освоить «Перо», но у него всё никак не доходили до этого руки. Также игра будет полезной, если есть желание попробовать себя в векторной графике.

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

Shape Type

Сайт: shape.method

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Сервис, где буквально придется «играть со шрифтами». Всего здесь 10 уровней: на каждом из них выдается по одной букве и названию шрифта. Игрок должен вспомнить особенности указанного шрифта и настроить букву так, чтобы она совпадала с оригиналом. Однако никто не запрещает немного читерить и гуглить нужный шрифт 🙂

TypeWar

Сайт: typewar.com

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Этот сервис проверит, насколько хорошо пользователь знает шрифты. На каждом уровне ему выдается одна буква и два шрифта на выбор. Обычно выбирать приходится среди четырех популярных шрифтов: Times New Roman, Helvetica, Verdana и Optima.

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

The Font Game

Сайт: ilovetypography.com/2020/07/01/the-font-game/

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

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

Shot The Serif

Сайт: tothepoint.co.uk/us/fun/i-shot-the-serif/

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

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

Такое необычное название и отсылки появились из-за того, что шрифты с засечками называют «Serif», что созвучно со словом «Sheriff».

Читайте также: 30+ ресурсов для веб-разработчиков и дизайнеров: тематические сообщества, блоги, курсы, Telegram- и YouTube-каналы

Can’t Unsee

Сайт: cantunsee.space

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

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

Brandseen

Сайт: brandseenapp.com

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Перед игроком есть черно-белое лого известного бренда и цветовой круг. Задача — вспомнить необходимый оттенок и найти его. Время не ограничено — думайте сколько надо. 

Is centered that

Сайт: supremo.co.uk/designers-eye

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

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

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

В обычные дни можно сыграть только в классическую версию, а по большим праздникам разработчики запускают «тематические» игры: на Пасху нужно было определять точку в яйце, на Хеллоуин её помещали в тыкву, а на новогодние праздники её спрятали в дверной венок.

Pixact.ly

Сайт: pixact.ly

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

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

И если рисунок пользователя будет по размеру близок к правде (отличаться от заданных значений до 15%), то система похвалит пользователя. Однако если игрок ошибется и нарисует фигуру совсем других габаритов, то игра начнет отпускать язвительные комментарии в стиле «Отличная работа! Сказал бы никто», «Видали и лучше» или «Ты что, пьян?»

CSS Diner

Сайт: flukeout.github.io

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Этот сервис научит базовым функциям CSS необычным способом: через игру, где геймеру придется «освободить» тарелку. Постепенно задачи усложняются: в игре появляются другие приборы и разная пища, которую нужно убрать с игрового поля. Всего здесь 32 уровня — справа есть небольшие подсказки, какую команду придется вводить.

Если и это не помогло — на ютубе есть десятки видео с прохождением и подробным объяснением игрового процесса.

Flexbox Froggy

Сайт: flexboxfroggy.com

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Ещё одна игра, что научит работать с CSS. Здесь игрок играет за ленивую зеленую жабу, которой нужно допрыгнуть до большого листа лотоса на болоте. И если на первых уровнях игроку достаточно ввести одну-две команды, то дальше задачи усложняются.

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

Читайте также: Обзор 11 онлайн-инструментов для создания интеллект-карт, схем, диаграмм

Elevator Saga

Сайт: play.elevatorsaga.com

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Добраться на нужный этаж в утреннем лифте — то ещё удовольствие. А этот сервис позволяет вернуть справедливость хотя бы в виртуальный мир. 

Используя JavaScript, игроку нужно прописать эффективный код передвижения лифта: на каждом уровне свои задачи. Где-то нужно забрать определенное количество людей за заданное время, на другом уровне нужно не допустить «пробок» и т.д.

Scratch

Сайт: scratch.mit.edu

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

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

Изначально Scratch задуман как бесплатный обучающий сервис для детей, но он отлично подойдет и для взрослых, которые только начинают задумываться о IT-карьере и хотят понять, насколько сильно им «зайдет» написание скриптов.

Blockly Games

Сайт: blockly.games

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

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

SNAP!

Сайт: https://snap.berkeley.edu/snap/snap.html

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Еще один сервис по обучению блочному программированию от университета Беркли в США. От предыдущих игр отличается более лаконичным дизайном и увеличенным числом переменных. Подойдет для тех, кто уже освоился в простых сервисах и хочет получить больше свободы программирования, но ещё не готов выбрать какой-то определенный язык.

Crunch Zilla

Сайт: www.crunchzilla.com/code-monster

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Простая игра для обучения базовому JavaScript, где игрок должен прописать команды, которые будут менять размеры, цвет, прозрачность и местоположение квадратов с линиями и фракталами. Примечательно, что здесь не нужно подстраиваться под какие-то заданные цифры — сервис предоставляет полную свободу фантазии. 

FlexBox Defence

Сайт: flexboxdefense.com

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Игра в жанре «Защита башни». Только вместо того, чтобы просто расставить нужные пушки по полю, геймеру придется самому прописать местоположение и другие особенности оружия с помощью CSS.

Grasshopper

Сайт: grasshopper.app

Игровое обучение: 20+ полезных игр для дизайнеров и разработчиков

Сервис, который научит азам JavaScript: от простого к сложному. Здесь вы узнаете, как рисовать и анимировать объекты, использовать массивф, автоматизировать процессы и дажа проводить отладку кода. И всё это в простой игровой форме!

Геймификация — как играть, а не заигрывать с подписчиками

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