Статья подготовлена на основе публикации Лео Ху Тенга (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

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

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

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

Выигрывает портфолио, которое уже существует

Антон Антонюк, арт-директор проекта «Совесть»:

Суровая правда в том, что обычно работодатель отсматривает десятки кандидатов, мельком пролистывая страницы портфолио, и обращает внимание только на три–четыре проекта:

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

В конце доходит очередь до сопроводительного письма и резюме.

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

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

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

Не важно, как именно вы оформляете портфолио — в виде собственного сайта, многостраничного файла в экранном размере, аккаунта Behance или чего-то еще. Главное, что в нем должно быть, — понятная структура и порядок. Не забывайте про типографику и грамотность.

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

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

Включайте в портфолио проекты-«завтра»

Серафима Болоткина, старший web-дизайнер международной IT- компании Movavi:

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

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

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

1. Проекты-доверители — проекты, сделанные для известных компаний в соответствии с понятной задачей. Человек, оценивающий ваши компетенции, может сказать следующее: «Я хорошо знаю эту компанию и ее задачи. Как здорово, что дизайнер нашел такое решение». По подобным проектам заказчики понимают уровень масштабирования дизайн-способностей исполнителя. Проекты-доверители должны быть в самом начале портфолио. Это ваше заявление о способности делать работы высокого уровня.
2. Крутые проекты — то, что вы делаете высокопрофессионально. Это работы, которые у вас получаются разнообразно, интересно и, по собственному ощущению, — идеально.
3. Проекты технического мастерства — проекты, которые технически вы выполнили сами, без участия команды. Такие работы показывают реальный скилл и доказывают мастерство. Например, отрисованный самостоятельно шрифт, смонтированный ролик, анимация.
4. Проект-«завтра» — проект, который раздвигает ваш диапазон знания, мышления и опыта в дизайне. Это может быть публичный, хайповый или смешной проект, который будет интересен многим и которым захочется поделиться. Например, однажды дизайнер сделал айдентику планеты Земля: флаг, герб и прочее. Такие работы делают обычно для себя в свободное время. Они отлично показывают масштаб и возможности дизайнера.

Экономьте время заказчика — создавайте портфолио в формате showreel

Digital-дизайнер Сартасова Елена, digital-агентство P R O M О B E L K A

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

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

Выкладывать портфолио лучше на своем сайте. Но если его нет, то на известные площадки типа re:vision. Тогда заказчикам будет удобно перейти по одной ссылке, чтобы посмотреть работы. На сайте-портфолио не должно быть однотипных работ. Лучше пусть будет 10–15 проектов, в которых фигурируют разные стили и подходы. К каждой работе делайте интересное и умное превью, которое побудит открыть ее.

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

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

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

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

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

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

Шрифты

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

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

Тогда Кевин совместно с Google Creative Lab разработал Fontmap. Алгоритм машинного обучения сортирует шрифты по визуальным характеристикам и подбирает сочетающиеся. Сейчас в базе Fontmap 750 шрифтов.

Шрифты, которые нейронные сети Fontmap выбрали для использования с Roboto

René — программа, которая поиграет со шрифтами за вас. Ее создал разработчик Джон Голд из Airbnb и TheGrid. Работа René построена на машинном обучении — с каждым новым подбором программа учится понимать принципы сочетания шрифтов. René помогает дизайнерам и разработчикам экономить время и составлять подборки шрифтов для разных проектов.

Джон Голд настраивает базовые характеристики для подбора шрифтов

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

Логотипы

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

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

Варианты логотипов, которые предложила нам система. Не ДжонФедор, но начинающей компании пригодится

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

Для российских пользователей 65 $ за логотип — не совсем бюджетный вариант. Отечественный аналог Logojoy — «Турболого» — делает то же самое, но дешевле. Логотип в низком разрешении стоит 690 рублей, одиннадцать файлов с логотипом, включая версию для печати, — 990 рублей, а за бизнес-пакет с дополнительным набором для соцсетей, фирменной документацией, водяным знаком и фавиконкой придется заплатить 2290 рублей. «Турболого» работает на той же системе машинного обучения и нейронных сетей, что и Logojoy.

Лучшие логотипы за апрель 2018 по версии разработчиков «Турболого»

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

Иллюстрации

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

Autodraw пригодится для рисования иконок, логотипов, баннеров, афиш и быстрого прототипирования.

Пример работы Autodraw от The Verge

ProjectQuick3D — инструмент для создания 3D-моделей от Adobe. Программа работает по схожему с Autodraw алгоритму: пользователь рисует быстрый скетч, а программа с помощью машинного обучения находит в библиотеке Adobe Stock нужную 3D-модель. Нейросеть обучается — чем больше пользователей рисуют, тем точнее работает алгоритм. Разработчики представили проект на конференции Adobe MAX как инструмент для начинающих дизайнеров, которые прежде не работали с 3D.

Разработчики Adobe демонстрируют работу программы на конференции Adobe MAX

Фото

Let’s Enhance — сервис, улучшающий фотографии с низким разрешением. Его основатель Александр Савсуненко давно занимается машинным обучением, и после неудачного проекта по производству ДНК-тестов Titanovo решился на новый стартап. Идею для сервиса Александру подсказал отец — он продает камины, сауны и аксессуары для них, и товар возит из разных стран, в том числе из Китая. О качестве фотографий китайских товаров известно по AliExpress: большинство снимков — низкого разрешения, размещать на сайте их стыдно.

Тогда Александр Савсуненко совместно с разработчиком Владиславом Пранскевичусом создали Let’s Enhance. Сервис убирает jpeg-артефакты с фотографий, увеличивает разрешение в 4 раза, восстанавливает детали и увеличивает четкость снимков.

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

Работает система на основе трех нейронных сетей, которые учатся улучшать фотографии. Технология Super-resolution обучается на базе из сотен тысяч фотографий низкого и высокого качества. Нейросеть обрабатывает два снимка, восстанавливает детали и сохраняет четкие линии, опираясь на знание типовых объектов и текстур. Вторая нейросеть — Boring — увеличивает четкость изображения. Третья — Magic — дорисовывает детали, которых нет на фотографии, чтобы сделать снимок более реалистичным.

Так работает нейросеть Boring, которая лучше всего восстанавливает текст, логотипы и комиксы. «Boring is not so boring» — говорит Александр Савсуненко

Сначала сервис был бесплатным, и пользователям разрешали обрабатывать любое количество фотографий. Сейчас сайт работает по подписке — без нее можно обработать только пять изображений. Для покупки доступны пакеты на 20, 50, 120 фотографий или подписка на месяц или год. Обработка двадцати изображений стоит 5 $, месячная подписка с возможностью обработать до тысячи фото — 7 $, годовая — 52 $.

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

Обучается NVIDIA схоже с Let’s Enhance — сравнивает фотографии с шумом и без. Нейросеть умеет удалять артефакты, шум, зерно. Создатели NVIDIA считают, что технологию уже можно использовать для улучшения изображений МРТ, а в будущем  — применять для визуализации в медицине.

Исследователи NVIDIA в ролике об ИИ демонстрируют работу технологии

Дизайн

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

Решением для быстрого редизайна стал uKit AI — это сервис на основе SaaS+AI, сочетающий конструктор сайтов и машинное обучение. Система перекомпоновывает контент с учетом современных требований к дизайну и формирует новые версии страниц. uKit AI работает так: технология распознает контент и структуру старого сайта, алгоритм перестраивает и переоформляет контент, а нейросеть оценивает результат и выкатывает новую адаптивную версию. Лучший вариант система выбирает с помощью нейросети WebScore AI, которая не только оценивает сайт визуально, но и проверяет код на соответствие современным требованиям. Пока uKit AI дорабатывается, но уже можно записаться на бета-тестирование.

На главной странице uKit AI — «шторка», которая демонстрирует редизайн сайта с помощью этой разработки

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

Перевод

Thing Translator — инструмент, который помогает учить иностранный язык с помощью фото. Технологию разработали совместно с Google Creative Lab в рамках проекта AI Experiments. Это простые эксперименты с машинным обучением, которые помогают разработчикам всего мира узнать о возможностях ИИ.

Thing Translator помогает учить новые слова на иностранном языке без учебников, словарей и карточек. Нейронная сеть построена на Cloud Vision API и переводчике Translate API. Технологии распознают форму предмета, выбирают несколько совпадений и переводят слова. Наведите камеру на предмет, сфотографируйте его — и программа выдаст его название на любом языке и даже воспроизведет слово голосом.

За 4 секунды Thing Translator узнает предмет, подбирает совпадения, выдает название на английском и переводит на другой иностранный язык. Для русскоговорящих пользователей — двойной профит

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

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

Посмотрите еще несколько программ и сервисов на основе ИИ, которые пригодятся в работе:

10 программ Adobe, которые работают на машинном обучении

Проекты AI Experiments совместно с Google

Итан Маркотт «Отзывчивый веб-дизайн»

Дизайнер-разработчик Итан Маркотт рассказывает, как создать удобный веб-ресурс современного формата. Он призывает учитывать все виды устройств и показывает, как адаптировать сайт под каждый из них, дает готовые решения и коды.

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

Аарон Уолтер «Эмоциональный веб-дизайн»

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

Если хотите, чтобы ваши работы вызывали удивление и восторг, обязательно прочтите это издание.

Майк Монтейро «Дизайн — это работа»

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

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

Скотт Макклауд «Понимание комикса»

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

Майкл Микалко «Рисовый штурм»

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

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

Уитни Кесенбери, Кевин Брокс «Сторителлинг в проектировании интерфейсов»

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

Подзаголовок книги — «Как создавать истории, улучшающие дизайн». Она пригодится всем, кто занимается интерфейсами и пользовательским взаимодействием.

Джеф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»

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

Джеф Раскин — создатель проекта Apple Macintosh — знает, о чем говорит, когда рассказывает об эффективном подходе к дизайну.

Алан Купер «Об интерфейсе»

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

Алан Купер «Психбольница в руках пациентов»

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

Голден Кришна «Хороший интерфейс — невидимый интерфейс»

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

Виктор Брет — Magic Ink

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

Пол Рэнд «Дизайн: форма и хаос»

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

Эрик Шпикерманн «О шрифте»

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

Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне»

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

 Иоханнес Иттен «Искусство цвета»

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

Тим Браун «Дизайн-мышление в бизнесе»

СЕО компании IDEO рассказывает, как при создании дизайна ориентироваться на клиента и почему это необходимо. Дизайн-мышление поможет получить максимальный эффект от результата.

Стив Круг «Как сделать сайт удобным»

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

Тим Кедлек «Адаптивный дизайн. Делаем сайты для любых устройств»

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

Есть чем дополнить нашу подборку? Ждем в комментариях ваше мнение про книги из категории must read для веб-дизайнера.