Отточите свои навыки с помощью веселых онлайн-игр для дизайнеров

Опубликовано: 2022-09-08

Успешные дизайнеры регулярно повышают квалификацию и переквалифицируют, чтобы закрепить основы, используемые в инструментах, проектах и ​​дисциплинах. Однако найти дополнительное время для обучения в течение рабочей недели непросто. К счастью, онлайн-игры — это увлекательный и образовательный способ для дизайнеров UI/UX оттачивать свои навыки и приобретать новые. Благодаря интерактивным и захватывающим (и часто бесплатным) онлайн-играм вы можете отточить такие технические навыки, как выравнивание, типографика и теория цвета.

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

Улучшите свое чувство гармонии

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

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

Начало It's Centered That, онлайн-игры для дизайнеров. Экран включает в себя большой синий крест посередине, смайлик слева и смайлик грусти справа.
Это центрировано Это проверяет чувство выравнивания игроков, предлагая им определить, находится ли точка в центре.

Расширьте свои знания о дизайне шрифтов

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

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

Эта игра будет держать вас в напряжении! Я играю в нее каждую неделю и всегда удивляюсь, насколько сложной она становится после нескольких раундов.

Начало I shot the serif, онлайн-игры для дизайнеров. Двенадцать белых букв с засечками и без засечек на темном фоне.
Я участвовал в испытаниях с засечками, насколько быстро игроки могут распознавать и «выстреливать» разные шрифты с засечками.

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

Начало typewar, онлайн-игры для дизайнеров. Большая буква «D» находится в центре экрана, а под ней отображаются два варианта шрифта.
Typewar помогает игрокам улучшить свои способности распознавать различные шрифты.

Улучшите свой глазомер для кернинга

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

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

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

Начало Kern Type, онлайн-игры для дизайнеров. Слово «Ждать» находится в центре экрана.
Kern Type проверяет способность игроков оптимизировать пробелы между буквами.

Обновите свою цветную игру

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

Начало Color, онлайн-игры для дизайнеров. Цветовой круг с дополнительными цветами и внутренним таймером в центре.
Цвет помогает игрокам улучшить свои навыки сопоставления цветов, заставляя их определять определенные оттенки, насыщенность и цветовые палитры.

Уточните свою векторную технику

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

Логическая игра научит вас логическим операциям, которые используются для быстрого создания и изменения 2D-фигур в инструментах векторного проектирования. В игре вам показывают форму, которую нужно воспроизвести. Через несколько секунд форма превращается в контур. В левой части экрана находятся несколько фигур, которые можно перетащить в контур, чтобы воспроизвести окончательную форму. В нижней части экрана находятся четыре логических операции: объединение, вычитание, пересечение и разность. Нажатие кнопки «Продолжить» запускает пошаговую анимацию, которая показывает, как объединить фигуры с помощью выбранной логической операции. Когда выбрана неправильная операция, эта анимация помогает визуализировать ваши ошибки.

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

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

Начало Shape Type, онлайн-игры для дизайнеров. В центре экрана есть большая буква «B» с процентным счетом, тремя вариантами переключения и кнопкой «Далее» справа.
Shape Type предлагает игрокам попрактиковаться в изменении формы векторных букв.

Последняя игра, которая поможет вам улучшить свои навыки векторной графики, — это The Bezier Game, которая поможет вам создавать более точную графику с помощью инструмента «Перо». Вступительные руководства объясняют, как использовать элементы управления, такие как Alt и Shift, для размещения опорных точек и управления маркерами Безье. Игра научит вас рисовать простые геометрические фигуры наряду с более сложными фигурами, такими как сердце и автомобиль, с минимальным количеством опорных точек или узлов. Чтобы было интересно, вы получаете определенное количество узлов для каждого уровня, и игра постоянно подсчитывает узлы, которые вы не используете.

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

Начало The Bezier Game, онлайн-игры для дизайнеров. Контур сердца с опорными точками находится в центре экрана.
Игра Безье помогает игрокам совершенствовать важные навыки работы с пером, такие как размещение опорных точек и перетаскивание маркеров Безье.

Освежите базовое кодирование

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

Flexbox Froggy шаг за шагом раскрывает основы программирования. Он обучает CSS flexbox, модели веб-макетов CSS3, которая упрощает позиционирование компонентов пользовательского интерфейса, позволяя управлять выравниванием, интервалами и обтеканием элементов на веб-страницах с помощью всего одной или двух строк кода.

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

Начало Flexbox Froggy, онлайн-игры для дизайнеров. Слева редактор кода и инструкции. Справа четыре анимации лягушек разного цвета.
Flexbox Froggy учит игроков писать базовый код CSS для flexbox.

Повысьте свои знания UI/UX

Онлайн-игры также могут помочь дизайнерам улучшить свои знания в области UI/UX и создать беспрепятственный опыт, повышающий коэффициент конверсии и рентабельность инвестиций.

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

Начало Can't Unsee, онлайн-игры для дизайнеров. Сразу под ними есть два окна чата с инструкциями для игрока. В нижней части экрана появится полоса индикатора выполнения.
Can't Unsee просит игроков определить более удобный вариант из двух дизайнов.

Получите максимум от онлайн-игр про дизайн

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

Если вы хотите переквалифицироваться, повысить квалификацию или изучить новую технику UI/UX, онлайн-игры по дизайну помогут вам проверить и развить свои художественные и технические навыки. Как однажды сказал Пабло Пикассо: «Я всегда делаю то, что не могу сделать, чтобы научиться этому».