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

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

10 тенденций графического дизайна на 2019 год

Тот случай, когда чтобы заинтересоваться статьей, достаточно посмотреть картинки. Если десяток тенденций на будущий год изложить в паре слов — будет 3D-дизайн. Уже сейчас в творческих профилях Instagram и в портфолио на Behance заметно стремление к 3D. Популярные последние два года flat-персонажи преображаются в трехмерных, а известные компании выпускают рекламные ролики в виде 3D-мультов, но с отголосками плоского дизайна. Журналы все чаще публикуют геометрические 3D-абстракции, объемную типографику и фотографии, стилизованные под трехмерные иллюстрации.

Типографика для спецпроекта Fast Company

В Instagram набирают популярность странные арты с человекоподобными существами (humanoids), которые пришли на замену 3D-бюстам: художники играют с человекоподобными образами, совмещают их с фантастическими ситуациями и материалами. Другие тенденции в работах 3D-иллюстраторов — проработанные текстуры и переход от монохромных цветов к одноцветной палитре. Что касается дополненной реальности, ее все больше в искусстве: мы видим сочетания реальных и виртуальных объектов и анимированную механику, как в рекламной кампании Youtube.

Подборка интересных онбордингов

Онбординг (onboarding experience) — демонстрация пользователю основных функций, чтобы он быстрее адаптировался. С онбординг-экрана обычно начинается знакомство с приложением: на нем размещают краткое описание (обычно с фирменными иллюстрациями), презентацию возможностей и основных сценариев работы, создание учетной записи.

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

Что ждет UX-дизайнера в 2019 году

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

В ноябре The Creative Group и AIGA опубликовали результаты опроса о тенденциях в творческих профессиях:

• четверть опрошенных работодателей будут полагаться на фрилансеров в ближайшие три года. Это связывают с неоправданными затратами на штатных специалистов, которые работают полный день;
• половина работодателей готовы сотрудничать с графическими и веб-дизайнерами на фрилансе, и 20 % из них будут заниматься UX-аналитикой и дизайном;
• ожидается, что подрядчики будут более востребованы из-за высококонкурентного рынка и низкого уровня безработицы.

Еще прогнозируют, что в 2019 году станет больше универсальных UX-специалистов — тех, кто пришел из маркетинга, разработки ПО, тестирования, графического дизайна и мультимедиа. Они смогут работать на любом уровне, от исследования проблемы до применения дизайна «в бою».

Автор статьи — Джастин Бейкер, востребованный продуктовый дизайнер, который участвовал в разработке финансового трекера Mint. Тем, кто настроен прокачивать навыки и планирует развиваться в дизайне, он рекомендует изучить прототипирование, брендинг, продакт-менеджмент, UX-исследование, анализ данных, фронтенд-разработку и системную инженерию.

Еженедельное дизайн-вдохновение

Регулярная подборка дизайнерских работ со всего интернета. Каждый найдет то, что его вдохновит: концепты веб-сайтов, графический дизайн, макеты приложений, flat-иллюстрации, авторскую анимацию.

Что должен знать современный дизайнер о типографике

Главные мысли статьи:

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

А в индивидуальности шрифтов главное — сочетаемость и целостность стиля, выбор «правильного» шрифта. Элитному бренду подойдет шрифт с засечками, а вот для сайта лучше выбирать sans serif.

Пример иерархии в типографике. Текст читаемый благодаря контрастному начертанию, кеглю и отступам

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

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

30 бесплатных шрифтов на будущий год

Статью о типографике дополним подборкой шрифтов с открытой лицензией — для тех, кому недостаточно Roboto и надоел Circe. Есть простые, консервативные шрифты — MORGANITE, AILERON, OBJECT SANS или COLUS с поддержкой кириллицы. Фанаты Покраса Лампаса и Альбины Гайнуллиной тоже найдут новинки — HORIZON, SERICO, DISCLAIMER, FREE FAT FONT.

12 вопросов, которые помогут дизайнеру пройти собеседование

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

1. Чем отличается пользовательский опыт от интерактивного прототипирования?
2. В чем суть интерактивного прототипирования?
3. Какой из ваших проектов лучший?
4. Чем отличаются веб и мобайл?
5. Почему вы сделали именно такой макет?
6. Есть ли книга или статья про дизайн, с месседжем которой вы не согласны?
7. В чем недостатки нашего проекта? Как его можно улучшить?
8. Что вы делаете, если возникают разногласия с продакт-менеджером?
9. А как себя ведете, если не согласны с визуальным дизайнером?
10. Как именно вы обычно работаете? Опишите процесс.
11. Что думаете о своих сильных и слабых сторонах?
12. У вас есть ко мне вопросы?

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

Еженедельная подборка интерактивов

Еще одна постоянная рубрика для вдохновения. На этой неделе предлагают посмотреть на сценарий работы Anatomic — приложения для изучения анатомии, на анимированные заголовки, интерактивные меню и лонгриды, инфографику, слайдеры в интернет-магазине мебели и кое-что еще. «Найдется всё» — это не только про Яндекс.  

Посмотреть кейсы

Приложение Medical Reminder. Разработка приложения для отслеживания приема лекарств с системой напоминаний и уведомлений для родственников. Теперь бабушка не забудет выпить аспирин.

Редизайн комментариев в Facebook. Попытка сделать стандартные комментарии более привлекательными для общения. Дизайнер превратил обсуждения под постом, которые занимают не больше 20 % страницы, в полноценную площадку для дискуссий.

Редизайн IMDb. Попытка улучшить UX/UI популярного англоязычного сайта о кино. Дизайнер опросил пользователей приложения IMDb и предложил решения — чат, категории, личные коллекции, персонализацию новостей.

Приложение автостоянки. Каноничный пример составления кейса: исследование рынка, опрос пользователей, тестирование, постановка задачи, планирование сроков и дизайн.

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

In English, please

Пересказать статьи из этого списка было бы недостаточно — их лучше прочитать в оригинале целиком:

Как создать изометрические иллюстрации: пошаговое руководство. How-to для продвинутых иллюстраторов с хорошим знанием языка.

Способ мышления, который сделает вас успешным дизайнером. Первая часть большого материала Дэвида Шмидта о бизнес-дизайне.

Что такое дизайн-система. Автор рассказывает, чем дизайн-система отличается от гайдов и фреймворков и какую пользу приносит компаниям.

Никита Садовский, Lead Product Designer в Voximplant, поделился телеграм-каналами, блогами и другими ресурсами по теме. Будет полезно тем, кто занимается графическим и продуктовым дизайном, UX и проектированием интерфейсов.

Костя Горский, Design Manager в Intercom, экс-дизайн-директор «Яндекса»

Телеграм-канал — @desprod

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

Юрий Ветров, Design Director в Mail.Ru

Телеграм-канал — @pdigest

Здесь вы найдете статьи по дизайну интерфейсов, инструменты, паттерны и кейсы. Автор дает мощные дайджесты по продуктовому дизайну. Можно покопаться в описании канала, там еще много полезных ссылок.

Саша Окунев, старший дизайнер в «Газпромбанк»

Телеграм-канал — @slashdesigner

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

Илья Сидоренко, соло-дизайнер, разрабатывает диджитал-продукты

Телеграм-канал — @thedesigntimes

Профиль в Instagram — @iskros

Колонка на Medium — medium.com/@iskros

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

Антон Жиянов, продуктовод в HFLabs

Телеграм-канал — @dangry

Профиль на Facebook — facebook.com/nalgeon

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

Cергей Андронов, дизайн-директор в Binarydistrict.com

Телеграм-канал — @designgest

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

Олег Чулаков, руководитель собственной студии, у которой лучший usability/UX в России по версии «Золотого сайта»

Телеграм-каналы:

@chulakov_design — про аналитику, проектирование и дизайн систем; @chulakov_notes — про жизнь и бизнес.

Мэтт Д. Смит, директор по дизайну в студии MDS

Профиль в Instagram — @mds

Twitter-блог — @mds

YouTube-канал — MDS

Полезная информация по продуктовому дизайну. На YouTube-канале масса интересных видео: «Обучение дизайну иконок за один час», «Создание 16-пиксельных иконок в Sketch», разбор инструментов.

Пабло Стэнли, ведущий дизайнер в InVision Studio Platform

YouTube-канал — Sketch Together

Блог на Medium — @pablostanley

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

Ян Лозер, ведущий дизайнер в Tapdaq

Личный сайт — janlosert.com

Ян специализируется на создании сложных веб-приложений и разработке цифровых продуктов. Его сайт привлечет тех, кто интересуется UI/UX, создает посадочные страницы.

Данил Ковчий, дизайнер интерфейсов

Блог на Medium — @kovchiy

Twitter-блог — @kovchiy

После прочтения статей Дани всегда есть над чем подумать. Его блог в Twitter — просто бомбический: чего стоит одна фраза «Все красивое — правильно».

Ольга Жолудова, редактор UX Crash Course: Fundamentals

Блог на Медиум — @nancypong

Всегда отличные переводы свежих статей. Будет интересно тем, кто занимается UI/UX: советы по проектированию интерфейсов сайтов, мобильных приложений и веб-сервисов. Материалов очень много, и они действительно стоящие. Помогут узнать, какое важнейшее правило UX все нарушают или что строить сначала — User Journey Map или User Flow?

Зорик Истомин, художник, криейтор, основатель thehaze.ru

Профили в Instagram:

@zorikistomin — личный;

@thehaze — проект;

@scazy — персонаж.

Просто космическая личность и диджитал-арт, вызывающий восторг.

На кого еще стоит подписаться, по вашему мнению? Кроме Артемия Лебедева, конечно. :)

Это перевод статьи The Hidden Power of Reward Systems In Design. Автор оригинала — Николас Крамер, дизайнер из нью-йоркской компании Barrel. Он помогает бизнесу объяснять потребителям, зачем нужен и чем хорош продукт.

Поощрения отлично работают

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

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

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

Способы привлечь пользователя

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

На практике дизайнеры используют:

1. Информационные поощрения.
2. Социальные стимулы.
3. Геймификацию.
4. Монетизацию.

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

Информационное поощрение

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

Medium, Twitter и Buzzfeed поощряют нас информацией

Механика игрового автомата

В 2008 году разработчик программного обеспечения Лорен Брихтер (Loren Brichter) создал Tweetie — программу-клиент для «Твиттера». Вскоре Twitter купил права на это приложение и оно стало официальным клиентом соцсети на iPhone. Так сервис укрепил свои позиции в магазине приложений и попутно ввел в обиход новую функцию жестового управления — «потяните, чтобы обновить» (pull-to-refresh).

Вот как интерфейс Tweetie выглядел десять лет назад (изображение — InformationWeek)

И хотя интерфейс Twitter-клиента c тех пор претерпел много изменений, pull-to-refresh по-прежнему в основе взаимодействия приложения с пользователем. Эту жестовую команду внедрили и другие сервисы: Instagram, LinkedIn, Medium, — и сегодня она в числе самых распространенных.

Twitter, Instagram, LinkedIn и Medium — лишь некоторые из приложений, использующих pull-to-refresh

Бывший сотрудник Google и специалист по этике дизайна Тристан Харрис проводит параллель между функцией pull-to-refresh и игровыми автоматами. В своей вирусной статье он утверждает: «Технический дизайнер должен увязать действия пользователя с вознаграждением. Вы тянете за рычаг и тут же получаете либо ценный приз, либо ничего».

Мы обновляем ленту приложения, чтобы получить новую информацию или контент, так же как дергаем ручку игрового автомата в надежде на джекпот.

Создавайте дизайн осознанно

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

Сообщение “You’re All Caught Up” («Ты в курсе всех новостей») в Instagram — умный способ освободить пользователей от лишнего контента

В Instagram функция You’re All Caught Up помогает юзерам ограничить поток материалов для переваривания.

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

Социальные стимулы

Социальное поощрение в приложениях обнаружить проще всего, потому что кнопки «Нравится», «Комментировать» и «Поделиться» есть практически везде. Сердечко в Instagram, аплодисменты в Medium или просмотры в Dribbble — типичные элементы системы социального поощрения.

В Facebook под каждым постом удобно расположены кнопки «Нравится», «Комментировать», «Поделиться»

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

Почему не все «Нравится»?

В 2007 году программист Facebook Джастин Розенштайн (Justin Rosenstein) возглавлял команду, которая внедряла кнопку Like. Он рассказал газете Guardian, что нововведение «оказалось очень успешным: активность пользователей подскочила, когда они к своему удовольствию поняли, как легко теперь выражать и получать социальное одобрение».

На современных площадках интернет-общения кнопка «Нравится» — самый узнаваемый атрибут

Короче говоря, кнопка Like произвела революцию. Она поощряет пользователей за публикацию материалов и уже изменила то, как люди общаются в интернете. Также в последние годы много разговоров про «вызывающие привыкание циклы обратной связи» — о них предупреждают Розенштайн и другие специалисты.

Обоюдоострый меч

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

Геймификация

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

Так выглядят достижения, которые пользователь может открывать по мере выполнения заданий курса Treehouse

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

Измерение пройденного пути

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

Strava вознаграждает бегунов и велосипедистов за достижение более высоких показателей из списка предложенных

Не всегда это работает

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

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

Монетизация

Монетизация предполагает, что пользователь получает деньги или материальные призы за выполнение определенных действий в приложении. Игра HQ Trivia — в числе свежих популярных приложений с монетизируемым вознаграждением. Игроки состязаются в онлайн-викторине за денежные и другие материальные призы. Некоторые трансляции собирали более полутора миллионов игроков одновременно! А Time Magazine назвал HQ Trivia лучшим приложением 2017 года.

В HQ Trivia даже список лучших игроков ранжирован по суммам их выигрышей

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

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

Стремитесь к прозрачности

И HQ Trivia, и YouTube не раз подвергались критике за неудобную или несправедливую, по мнению пользователей, систему выплат. Нашлись люди, которые обвинили HQ в махинациях за правило, по которому вывести деньги можно, только если вы в 90-дневный срок выиграли не менее 20 $ (в январе 2018 года ограничение на сумму выводимого выигрыша сняли). А когда в 2017 году YouTube изменил свою рекламную политику в пользу рекламодателей, создатели контента прозвали ее Adpocalypse [от англ. Ad — «реклама» и Apocalypse — «конец света»], потому что часть видео лишилась монетизации без внятной причины.

Чтобы не вызвать гнев пользователей, критически важно как можно четче объяснить им, когда и как они смогут получить вознаграждение. Если денежные призы выплачиваются без проблем, это очень стимулирует аудиторию продолжать пользоваться продуктом.

Заключение

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

Статья подготовлена на основе публикации Лео Ху Тенга (Leow Hou Teng) Who we are, reflect on what we design. Автор — сингапурский UX/UI-дизайнер, арт-директор, цифровой стратег.

25 сентября 2018 года я присутствовал на конференции в рамках World Interaction Design Day. Тема мероприятия в этом году — инклюзивный дизайн. Ниже я резюмирую презентаций трех докладчиков.

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

«Технологии превращают рабочее место людей, трудоспособность которых ограничена, в игровое поле. На нем они конкурируют наравне с коллегами, которые не испытывают проблем со здоровьем» — Mary Pat Radabaugh, руководитель Национального центра IBM по поддержке людей с повышенными потребностями, 1988

Что такое инклюзивный дизайн

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

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

Например, часы Dot Watch со шрифтом Брайля сообщают время и дату слепым и слабовидящим. Это красивое устройство, но бесполезное для тех, кто не понимает Брайля. Две группы пользователей не могут пользоваться часами одинаково эффективно.

Dot watch

Для сравнения: новые Apple Watch Series 4 звонят в экстренную службу, если человек упал и обездвижен. Такой инцидент может произойти с любым, но особенно полезна функция для пожилых людей и тех, кто ограничен в движении.

Образ пользователя

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

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

«Если вы называете пользователя по имени, еще не значит, что вы его знаете»

Вспомогательные технологии

«Технологии могут помочь слепым видеть, глухим — слышать, обездвиженным — двигаться, немым — говорить»

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

Окружение людей с повышенными потребностями

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

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

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

«Каждое принятое нами решение ставит или убирает барьеры во взаимодействии человека с обществом. Мы ответственны за то, чтобы снизить их с помощью инклюзивных продуктов, услуг и среды» — Microsoft Design

Постоянная, временная и ситуационная нетрудоспособность

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

Примеры постоянной, временной и ситуационной нетрудоспособности

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

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

Инклюзивный дизайн совместными силами

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

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

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

«Когда мы берем за основу собственные возможности и предубеждения, мы создаем продукт для людей определенного пола, возраста, говорящих на конкретном языке и обладающих технологической грамотностью и физическими возможностями одного уровня» — Microsoft Design

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

Мы то, что мы разрабатываем

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

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

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

Выводы

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

Советы по работе над проектом, который подойдет всем пользователям:

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

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

Вдохновитесь другими проектами:

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

Gemalto — компания разработала дебетовые карты с высокой видимостью для пожилых и людей с нарушением зрения и моторики.

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

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

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

«Как создать интерфейс для всех» — руководство для дизайнеров и разработчиков: как создать проект, удобный для всех пользователей.

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

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

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

Проверьте готовый продукт на инклюзивность.

Чек-лист UX-дизайнера от Uplabs

1. Визуальная часть — формы, цвета, контрасты, размер текста и графические детали интерфейса.
2. Звуковая часть — звуки, которые ваш продукт производит, их громкость и чистота.
3. Рефлексивная часть — количество времени, которое пользователь тратит на восприятие вашего интерфейса; сколько внимания интерфейс привлекает; сколько опыта необходимо, чтобы комфортно использовать продукт.
4. Механическая часть — движения, которые надо совершить, чтобы пользоваться продуктом.

Инструменты

«Веблайнд» — рекомендации по разработке сайтов для людей с нарушениями зрения.

Chrometric и Coblis — проверьте, как видят ваш сайт дальтоники с разными видами нарушения.

VoiceOver — голосовой ассистент для людей с нарушениями зрения, который «читает» интерфейс. Установите программу (если пользуетесь macOS, просто включите эту функцию в настройках) и протестируйте навигацию на своем сайте.

Много нечитаемого текста

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

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

Нет визуальной иерархии

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

Это помогает найти нужную информацию на странице. Читатель будет доволен — и может превратиться в клиента.

Нет узнаваемости элементов

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

Недостаточно «воздуха»

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

Все лучшее — сразу

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

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

Плохая навигация

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

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

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

Неадекватная перелинковка

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

Несерьезное отношение к контенту

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

Текст должен быть полезным. Наверняка вы встречали (а может, и делали) сайты, где под каталогом товаров расположен SEO-фрагмент с множеством ключей и нулевой информативностью. Серьезно, никто не заходит в магазин кроватей почитать, что «спальня является местом, где человек проводит много времени, поэтому перед каждым рано или поздно встает вопрос, где купить кровать в Санкт-Петербурге».

Оптимизацию текстов для поисковиков оставьте на потом. Сначала подумайте о структуре информации и о том, как ответить на все вопросы посетителя сайта.

Непродуманные фильтры каталогов

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

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

Секретные цены

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

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

Неработающий поиск по сайту

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

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

Не вовремя всплывающие сообщения

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

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

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

Нет мобильной версии

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

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

Требование регистрации

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

Отсутствие здравого смысла у дизайнера

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

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

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

Зависит от того, о каком дизайнере речь

Нет «дизайнера в вакууме»: есть UX-дизайнер, ландшафтный дизайнер, дизайнер персонажей, модельер. Это самостоятельные профессии, для которых важны совершенно разные навыки. Для некоторых направлений дизайна уметь рисовать от руки — важно, для других — нет.

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

Кому точно важно уметь рисовать, так это дизайнерам одежды. Профессор моды в Университете Монтеррея Игорь Стар, у которого 15 лет опыта в дизайне одежды, объясняет: «Мода построена на нюансах: пропорции форм и детали кроя, отделка, декор, — все эти компоненты особенно важны на объемной фигуре человека, в движении и с разных ракурсов: фас, профиль, спина. Поэтому лучший способ для дизайнера и стилиста — делать регулярные наброски фигуры человека в разных позах и нарядах. Так приходит автоматизм: учишься определять форму одежды, распознавать марки и выявлять подделки. Человек, который этого не умеет и выдает себя за дизайнера или стилиста, легко может “лажать”, принимая фейк за оригинал, игнорируя диспропорции шрифтов в логотипе марки, некачественные строчки, принты и фурнитуру».

Эскизы Saint Laurent 1970-х годов, которые помогают «чувствовать» одежду

Обязательно ли графическому дизайнеру уметь рисовать

Зависит от того, что вкладывать в словосочетание «уметь рисовать». Писать реалистичные пейзажи и портреты с натуры — совсем не обязательно. Набросать на бумаге идею так, чтобы донести ее другому — да, необходимо. Развить этот навык может каждый — для этого не нужно быть одаренным художником.

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

Дизайн — это не рисование

Вот неполный список того, что действительно важно знать, по мнению Калины Ивановой, продуктового дизайнера из Болгарии:

• теория цвета;
• визуальная иерархия;
• визуальный ритм;
• перспектива;
• история искусства.

Почему многие говорят, что надо уметь рисовать

Даже Сергей Попков, дизайнер из AIC — лидера среди веб-студий премиум-сегмента в «Рейтинге Рунета» — с задором говорит: «Я не умею рисовать». Если и без этого можно достичь успеха, то почему многие продолжают настаивать, что навык рисунка очень важен?

Причины такие:

1. Возможность выполнять заказы «под ключ». Бывает, что клиенту надо изобразить что-то эдакое, чего нельзя сделать только средствами графического редактора. Умея рисовать, вы сможете сделать это самостоятельно.
2. Ведущий иллюстратор в BANG! BANG! Илья Митрошин считает, что умение рисовать помогает быстро набросать разные идеи, чтобы потом отсеять ерунду от стоящего. Он сравнивает это с техникой фрирайтинга, когда автор пишет все, что приходит на ум, а потом выбирает действительно крутые мысли.
3. Чем лучше рисуешь, тем доходчивее и быстрее можешь показать идею на бумаге клиенту, коллеге или арт-директору.

Как быстро научиться рисовать

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

Главное — без крайностей. Просмотрев 10 видеокурсов по рисунку, вы не станете художником. Рисуя, но не понимая теории, вы рискуете допустить дилетантские ошибки, которых можно избежать, если понимать принципы рисунка. Занимаясь с преподавателем, нельзя «забивать» на самостоятельную практику.

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

Рисунки до и после занятий по рисованию с сайта Art-matita

Главное — понимать, что умение рисовать — не дар свыше. Это просто навык, который можно развить — как ездить на велосипеде или складывать в уме четырехзначные числа.

А вы умеете рисовать? Хотите научиться? Или вы дизайнер, который уверен, что рисование — совершенно бесполезный навык?
 

Перевод статьи Харшиты Ароры An Intro to Color Theory: How to combine colors and set the mood of your designs. Автор — 16-летняя девушка из Индии, разработчик и дизайнер, создатель приложения для отслеживания цен на криптовалюты Crypto Price Tracker.

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

Цвета задают определенное настроение и помогают добиваться разных целей:

1. Красный обычно ассоциируется с любовью, энергией, активностью и силой. В рекламе автомобилей всегда используют его оттенки, как и в роликах о том, что связано с отношениями.
2. Желтый выбирают, чтобы передать радость, внимание, ассоциировать продукт с интеллектом. Это невероятно привлекательный цвет, но не лучший для фона приложения или основного интерфейса — он может утомлять. Тем не менее желтый — хороший вариант для иконок и иллюстраций.
3. Зеленый ассоциируют со свежестью, безопасностью и развитием. Поэтому вы часто видите, как компании, которые связаны с природой и здоровым питанием, используют зеленый в фирменном стиле.
4. Синий — стабильность, доверие, спокойствие. Неудивительно, что фейсбук и твиттер синего цвета.

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

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

Прочитайте статью Ника Бабича «Создание эмоций в интерфейсе с помощью цвета», чтобы узнать больше.

Как сочетать цвета и создавать цветовые палитры

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

Вот несколько способов использовать цветовую теорию для проектов:

Аналоговые цвета (Analogous). Это соседние цвета на круге. Сочетайте их, чтобы создать простой и гармоничный дизайн:

Комплементарные цвета (Complementary). Для этой комбинации выберите два цвета, которые расположены напротив друг друга, как красный и зеленый:

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

Расщепленные цвета (Split) — выберите один цвет, а затем еще два, которые расположены напротив основного:

Такое сочетание не только привлекает внимание, но и приятно смотрится.

Триады (Triadic). Выберите цвет и нарисуйте в круге равносторонний треугольник. Получится палитра, которая придаст дизайну сбалансированности:

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

Монохроматические, или однотонные цвета (Monochromatic). Монохромный дизайн красиво смотрится на экранах смартфонов. Чтобы создавать монохроматические тона, просто выберите один цвет и сочетайте его с оттенками белого или черного. Экспериментируйте с пропорциями, чтобы получить нужный контраст. Такие цветовые палитры отлично работают в современном диджитал-дизайне.

Варианты оттенков синего цвета

Советую посмотреть эти статьи:

Базовые цветовые схемы. Введение в теорию цвета

Цветовые схемы

Инструменты для работы с цветом

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

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

1. Color Hunt. Сервис, куда профессиональные дизайнеры выкладывают любимые цветовые палитры. Они разделены на категории «Новые», «Тренды», «Популярные», «Рандомные» — среди множества вариантов вы подберете что-то для своего проекта.
2. Flat UI Colors. На сайте — 20 цветовых палитр, созданных для эффективной работы на iOS. Разработчики Android используют палитры с сайта Material Palette.
3. ColorZilla. Крутое расширение для браузера Chrome, которое определяет код любого цвета на сайте в формате HEX.

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

Понравилась статья? Посмотрите другие инструменты для работы с цветом:

Pictaculous — сайт, который анализирует и определяет цвета PNG, JPG и GIF

BrandColors — фирменные цвета знаменитых брендов

Сервис для подбора и создания градиента

Материальный дизайн: принципы, примеры, палитры

Создание интерфейсных цветовых палитр

Все говорят о высоких зарплатах веб-дизайнеров — и мы тоже, потому что это чистая правда. По данным Superjob, средний доход специалиста этого профиля составляет 80 тысяч рублей в месяц. Но никто не предупреждает, что на покупке сервисов для работы можно разориться. Полный пакет Adobe Illustrator с Adobe Stock, например, обойдется в пять тысяч рублей в месяц.

Поговорим о бесплатных или бюджетных заменах дорогостоящим инструментам.

ProtoPie

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

Gravit Designer

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

Pencil Project

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

Marvel

Платформа позволяет работать индивидуально или быстро делиться прототипами и обсуждать их в реальном времени. Создавайте макеты в сервисе или экспортируйте их из Sketch и Photoshop. На прототип в виде веб-страницы или мобильного приложения можно в любой момент посмотреть глазами пользователя.

Vectr

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

Inkscape

Отличная замена Adobe Illustrator, которая не стоит ни копейки и поддерживает файлы своего дорогостоящего собрата. В редакторе можно сделать буквально все: от простенького веб-дизайна до шедевров графики.

Form

Подключайте iPhone и iPad к компьютеру через USB или «по воздуху» и просматривайте прототипы сразу на мобильных устройствах.

PowerMockup

Вряд ли вы рассматриваете в качестве инструмента для веб-дизайна Microsoft PowerPoint, но все меняет плагин PowerMockup. Дополнительная панель превращает программу для создания презентаций в платформу для прототипирования. Тестовый период плагина бесплатный.

Fluid UI

Сервис создан для прототипирования мобильных приложений в онлайн-режиме и содержит набор элементов, подходящих для iOS, Android и Windows 8. Бесплатно можно разработать десять страниц для одного проекта. Хотите больше — придется доплатить.

iPhone Mockup

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

Proto

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

UXPin

Сервис для быстрой работы над прототипами. Можно открыть совместный доступ для нескольких человек, чтобы редактировать и комментировать проект «в прямом эфире».

Balsamiq

Сервис для прототипирования мобильных приложений. В нем представлены шаблоны для нескольких операционных систем и некоторых популярных смартфонов.

Justinmind

Этот инструмент прототипирования выручит любителей виджетов — он поддерживает работу с ними.

Moqups

Простой интерфейс, масса вариантов кнопок, контейнеров, полей, шаблоны для приложений под iPhone и iPad — все это собрано в сервисе для прототипирования на HTML5.

Lost Type

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

Red Pen

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

Subtle Patterns

Бесплатный набор изображений для создания бесконечного фона на сайте.

I want hue

Если за плечами нет художественной школы и вы не уверены в подборе цветов и их сочетаний — этот сайт поможет найти удачные решения.

Iconfinder

Огромная база иконок для любых целей.

Font Reach

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

Pttrns

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

Mobile Patterns

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

UX Myths

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

Good UI

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

Провели экскурсию, рассказали о задачах курса и будущей профессии. Было здорово!