Я рос в семье военных: отец, мама, брат, муж сестры работали в силовых структурах. Теперь ещё и я. Не то чтобы у меня не было выбора — меня никто не заставлял и не «пропихивал» на службу. Когда заканчивал 11 класс, бегал с огромными глазами, как и все, думал, что дальше делать и куда идти. Мой отец по специальности инженер-электрик, и раньше я часто ездил к нему на работу, помогал и смотрел, как что работает. Заинтересовался.  

Однажды отец рассказал, что в академии РВСН им. Петра Великого есть энергетическая специальность, и предложил попробовать. Меня никто не заставлял — я подавал документы и в гражданские вузы: МГСУ, МЭСИ, ещё куда-то.

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

Я уже закончил академию, работаю по распределению в Тагиле. Военная служба меня не устраивает уже давно: сейчас я на особом режиме, но есть ребята, которые уезжают в поля и две недели их нет дома. И я думаю — оно мне надо? Кажется, нет. 

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

На третьем курсе академии я заметил, что востребованы профессии, связанные с диджитал. Пробовал заняться рекламой, даже посидел на одной работе, не понравилось. Потом пробовал программирование, но тоже не не заинтересовало. Даже пошел в школу архитектуры  и дизайна в Москве, на курсы по Photoshop, Indesign и другим редакторам. Так и не доучился, школа не понравилась. Но сама сфера дизайна понравилась — понял, что это интересно и есть возможность зарабатывать. Начал искать другие курсы, наткнулся на GeekBrains и подумал: раз это школа от Mail.ru, значит должна быть хорошей. Пошёл учиться, и на втором месяце занятий приключилась история с ноутбуком. 

Мы были на пятом курсе в академии, жили в общежитии. Нужно сказать, что в военных учреждениях есть служба защиты гостайны (ЗГТ), и в связи с этим личный ноутбук — серьёзная тема. Всё командование знало, что у нас есть ноутбуки, но не подавало виду — выпускной курс, их трогать не надо, им надо дипломы писать. Но я-то был «рецидивист». Мы увольнялись, пытались отчислиться, нам делали мозги. Я уже учился на курсах веб-дизайнера, и офицеры об этом знали.

В один прекрасный момент меня вызывает начальник, говорит: «Будешь увольняться?» Да, говорю. Тут он достает мой ноут — пока меня не было в комнате, они провели обыск — и вызывает офицера из службы ЗГТ. Говорит: «Изымаем, описываем». Понятно, что у нас на ноутах ничего подозрительно не было, но вообще если находят какую-то запрещенную информацию, это грозит последствиями вплоть до уголовки. Было стрёмно. 

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

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

Но был другой случай, как раз после того, как меня перевели на другой поток курсов. Мы уехали на стажировку академии на месяц в Йошкар-Олу, и, естественно, я не мог взять с собой ноутбук. Я тогда уже общался с преподавателем Ильей Полянским, и он посоветовал книги, которые нужно прочитать во время стажировки: «Интерфейс» Алана Купера , «Типографика» Эмиля Рудера, «Новая типографика» Яна Чихольда. В общем, я действовал по собственной программе, а курс нагнал, когда приехал домой.

Как я уже сказал, во время учебы начали общаться с Ильей Полянским — сначала по учебе, потом по работе. Дома у меня было достаточно много свободного времени, и я попросил Илью давать мне дополнительные задания, чтобы подтягивать навыки, которые провисают. Он тогда работал в «Инвитро», и там как раз освободилась вакансия дизайнера. Я поинтересовался, что нужно сделать, чтобы попасть туда, Илья накидал теоретические вопросы, которые надо подтянуть. После этого он начал давать тестовые проекты, которые мы сделали вместе.

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

Когда я выпустился из академии, курсы ещё не закончились. Я поехал в отпуск, и буквально за две недели случилось сразу два очень неприятных для меня события. «Ситимобил» расширили штат, им стало невыгодно работать с удаленщиками, и меня уволили. А в «Инвитро» пришел новый маркетинговый директор. Она сказала, что они больше не работают с частными лицами, а только с компаниями, и сократила весь отдел дизайна. Я остался без работы буквально в течение недели. 

Мы с Ильей продолжали общаться, он подкидывал мне сторонние проекты. Один из крупных — компания «ЛеонМед», они занимаются поставками медоборудования. Илья подкинул мне задачу: сделать презентацию нового оборудования для новых клиентов. С этой компанией работаем до сих пор. Ещё немного поработал в «Альфа-Банке» в коммуникационном дизайне. Им не хватало рук, а я был без работы, и мне подкинули несколько проектов по анимации в соцсетях. Ещё как-то делали заказ для Высшей школы экономики, рисовали им баннеры в соцсети для новых программ обучения. С ВШЭ работаем до сих пор.

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

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

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

Пока живу в Тагиле, но планирую переезжать обратно в Москву и устроиться дизайнером в штат. Сейчас работаю по всем проектам на удалёнке. Когда прилетают правки, бегу исправлять, весь в мыле — мало ли что, может, кому-то срочно надо. Боялся, что по шапке прилетит, пока мне не сказали: «Чувак, это не армия. Здесь все адекватно относятся ко всему». Есть у меня армейский принцип «умри, но сделай». Это не то чтобы плохая установка, но в таком виде она явно гиперболизирована. Наверное, так проявляется профдеформация.

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

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

Как же избежать подобных ситуаций и не отпугнуть клиентов после их первого контакта с вашим продуктом?

Онбординг — что это и зачем он нужен?

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

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

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

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

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

Инструменты онбординга

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

Всплывающие подсказки (Tooltips) 

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

Первый интерактивный помощник от Microsoft Office

Более современный пример подсказок на сайте:

Подсказки от Facebook

Всплывающие окна (Pop-up) 

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

Интерактивные туры

Тур по продукту — это совокупность сразу нескольких всплывающих подсказок и/или попап-окон, которые появляются по мере продвижения пользователя по сайту и могут переключаться при помощи кнопки «Далее». Обычно, если пользователю не нужна подобная «экскурсия», он может отключить интерактивный тур, нажав на крестик (некоторые сайты используют кнопку «Все понятно!»). Иногда в этот инструмент также входит вступительный видеоролик с пояснениями о функционале интернет-ресурса.

Тур по панели инструментов 

Обучающий видео-ролик, встроенный в попап-окно

Пустые состояния 

Этот неочевидный инструмент буквально представляет собой пустую интернет-страницу: это может быть альбом, в который пока не добавлены фотографии, стена в социальной сети, где еще нет записей, страница ошибки, когда по запросу пользователя не удалось найти ответа. Однако эту пустоту можно выгодно использовать, если заменить ее призывом пользователя к действию: «Упс, здесь пока ничего нет... Создайте свой проект!»

Пример пустого состояния

Шкалы прогресса 

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

Шкала прогресса рекрутингового сайта 

Рассылки (или Lifecycle-рассылки) 

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

Пример обучающего письма от конструктора сайтов

Как настроить онбординг под пользователя?

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

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

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

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

Примеры сайтов с хорошим онбордингом пользователей

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

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

Онбординг поверх сайта

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

Здесь есть решение, которое не потребует особых дополнительных затрат — онбординг не в структуре самого сайта, а «поверх» него. Как, например, у Experrto.io —  конструктора интерактивных подсказок, который не требует знаний верстки, дизайна и программирования. 

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

Статистика онбординга в личном кабинете Experrto

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

Подведем итоги

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

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

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

В марте Лия уже делилась первыми впечатлениями от учебы в GeekBrains на вебинаре «Как стать дизайнером и получить первый заказ на фрилансе». Я решила подробнее расспросить ее о пути в новую профессию и о том, чем она занимается сейчас.

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

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

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

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

— Как ты пришла в GeekBrains и почему решила, что именно здесь хочешь осваивать профессию?

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

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

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

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

— Сейчас ты на финишной прямой: учишься уже семь месяцев — до выпуска остался один. Какие проекты за время обучения ты сделала и какие еще впереди?

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

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

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

Скриншот: миниатюры макетов разных страниц сайта

Дальше сарафанное радио помогло найти новых заказчиков. Меня привлекли к созданию сайта на конструкторе Tilda. Потом я делала лендинг и еще несколько небольших проектов.

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

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

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

— А можно примеры таких задач?

— Сначала нужно было разработать прототип дизайна для своего сайта-портфолио, а затем — все это сверстать в рамках курса HTML & CSS. В течение всего учебного модуля мы работали над этим заданием и по итогу представили результат.

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

— А проекты, выполненные на фрилансе, тебе засчитывают за учебные?

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

Фрагмент лендинга для кафе

— Какие курсы ты успела пройти к моменту, когда начала работать?

— Мы как раз закончили изучать основные инструменты. Возможности Adobe Photoshop я уже знала как любитель — обрабатывала с его помощью фотографии. Но мы познакомились с редактором Figma, очень удобным для работы над дизайном сайтов и интерфейсов. Дальше был курс «Основы веб-дизайна», где мы узнали от Сергея Чиркова о типографике, работе с цветом, композиции и многом другом.

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

— Что в процессе обучения давалось сложнее всего? Насколько быстро удалось освоить инструменты?

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

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

Фрагмент главной страницы сайта строительной компании

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

— Какие темы по ходу обучения принесли тебе больше удовольствия и открытий?

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

• Работа с брифом — лекции Артура Громадина, на которых мы очень подробно разобрали начальный этап работы над проектом. Это здорово, потому что эта фаза — одна из важнейших: не только проясняет, что предстоит сделать, но и задает общий тон общения с заказчиком, позволяет сторонам оценить профессионализм друг друга, умение организованно вести проект. Нам показали близкий к идеальному вариант, и я уверена, что не раз еще применю эти знания на практике.
• Дизайн-мышление — тема в принципе очень интересная, и по ней мы прослушали несколько лекций от Михаила Шишкина. Считаю, что прокачка мозга в этом направлении помогает дизайнеру генерировать идеи не только качественнее, но и быстрее.
• Продуктовый дизайн — материал по теме нам преподнесли тоже интересно. Мы научились смотреть на продукт в целом, а не только с точки зрения дизайна.

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

— На курсе вы уже изучали тренды дизайна?

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

— Какие тренды интересны лично тебе? Что вдохновляет, что хочется использовать?

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

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

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

В следующем проекте хочу поэкспериментировать со шрифтами. Еще одна тема, очень интересная мне в перспективе — анимация.

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

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

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

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

— У тебя есть любимые паблики для вдохновения? На кого ты ориентируешься и за кем следишь в мире дизайна?

— Да, разумеется. Это не только личности, но и агентства:

• «Логомашина», основанная Романом Горбачевым.
• Mail.ru, Юрий Ветров и его дайджест продуктового дизайна.
• Артемий Лебедев, конечно.
• Михаил Шишкин — основатель студии Shishki.pro и школы дизайна Controforma (восторг!).
• Андрей Кожанов — основатель Высшей школы брендинга. Очень информативные лекции.
• Юрий Гордон — типограф и шрифтовой дизайнер. Интересные лекции, работы.
• Дмитрий Черногаев — типограф, сооснователь и совладелец агентства «Артоника».
• Вова Лифанов — основатель агентства «Супрематика» (отдельный респект за ребрендинг «Буше»).

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

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

Люблю Behance за то, что некоторые проекты там подробно «расписаны». Авторы составляют длиннющие объяснения: почему они выбрали именно такие средства и решения.

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

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

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

— Спасибо огромное, что поделилась историей. Желаю работать с профи и скорее достичь следующей ступени!

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

Что почитать у Джона Яблонски

Be the Wolf — о том, чему может научиться дизайнер у мистера Вульфа из «Криминального чтива». Уинстон Вульф из фильма Тарантино оказал большое влияние на Джона в профессиональном смысле. Персонаж Харви Кейтеля появляется в небольшом эпизоде для того, чтобы срочно исправить ситуацию, в которую попали главные герои. Мистер Вульф изящно с этим справляется, оставаясь хладнокровным в экстремальных условиях. Этому Джон Яблонски и призывает дизайнеров: быть спокойными и собранными в любой ситуации, расставлять приоритеты, делегировать задачи, всегда оставаться надежными и твердыми. Чек-лист мистера Вульфа для полного контроля над ситуацией вы найдете в статье.

Если вы не знакомы с фильмом или забыли эпизод с Уинстоном Вульфом, посмотрите его, чтобы понять, о чем говорит Джон

Thoughts on Productivity — методы повышения продуктивности. Джон рассматривает несколько принципов, которые помогли ему работать эффективнее: технику Pomodoro, метод Джерри Сайнфелда, коробку Эйзенхауэра и даже пользу от прокрастинации. Методики он подкрепляет историей их появления и реальными примерами. Вот как работает метод пунктирной линии:

«У Тупака Шакура была относительно короткая, но плодотворная музыкальная карьера. Только за последние 8 месяцев он выпустил 150 песен — по три за одну запись в студии. Он создал достаточно материала для нескольких посмертных альбомов и оставил много неизданной музыки. Тупак добился впечатляющего результата, следуя принципу пунктирной линии: очень быстро записывал треки, в основном за один дубль, а позже возвращался к ним, чтобы доработать и записать недостающие части».

Designing with Occam’s Razor — как классический принцип решения проблем поможет дизайнеру улучшить проект. Усложнение интерфейсов — одна из главных дизайнерских проблем, пишет Джон. Даже опытный дизайнер часто создает слишком сложное решение: увлекается деталями, которые в итоге путают пользователей. Задача дизайнера — сделать сложное простым, и для этого можно руководствоваться принципом бритвы Оккама. О нем Джон рассказывает в статье, подкрепляя теорию цитатами известных людей. «Good design is as little design as possible», — фраза дизайнера бренда Braun Дитера Рамса, которой можно описать месседж статьи.

Какие работы Джона Яблонски посмотреть

Swiss in CSS — знаменитые примеры швейцарского графического дизайна, анимированные с помощью CSS. Этот сайт — дань уважения швейцарской типографике, которая до сих пор считается эталоном дизайна. Джон Яблонски придал плакатам и обложкам более современный вид с помощью анимации:

storytelling.design — коллекция интерактивных историй. Сайт открывается фразой: «После питания, жилья и общения именно истории — то, что больше всего нужно человеку». Сторителлинг, или рассказывание историй, — основа человеческого опыта, говорит Джон. Мы делимся историями и узнаем их, чтобы развиваться или лучше понимать мир: так человечество учится на своих ошибках, берет пример с героев прошлого.

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

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

Последние впечатляющие публикации:

Moment Zero — визуализация сейсмических данных Земли;

Nomadic Tribe — интерактивная сказка о кочевых племенах;

Nuclear Dissent — интерактивная документалка об опасности ядерного оружия.

King of soul — сайт в память о соул-музыканте Отисе Реддинге, песни которого до сих пор исполняют Jay Z и Florence and the Machine. Джон — поклонник его творчества, а также сторителлинга, поэтому он решил совместить два своих увлечения и создал что-то вроде веб-мемориала. И это все, что можно рассказать о сайте, — его нужно изучить самостоятельно. История жизни и творчества Отиса Реддинга в виде лендинга с рассказом и архивными материалами, все это под песню «I’ve be loving you too long» — работа, которая заслуживает уважения.

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

Что почитать у Дейва Геддеса

Article Layout with CSS Grid — адаптивный макет статьи с помощью CSS Grid. Дейв хотел создать удобный макет для статей в своем блоге, в котором текст будет легко читать на мобильных устройствах, а гифки и примеры будут центрированы на странице. В качестве примера он взял Medium.com и в итоге нашел способ сделать такой макет на CSS Grid.

Джон сопровождает статьи фирменными иллюстрациями

Start a Gratitude Project — как начать проект благодарности. Дейв рассказывает, чем полезно делать проекты, которые дадут профит другим людям, а не вам в первую очередь. Для него проектом благодарности стала обучающая игра по CSS Grid, которую мы упоминали в публикации «Игры, чтобы попрактиковаться в верстке». Если кратко — в проекте благодарности вы можете освоить навыки и приемы, которые пригодятся в других, уже коммерческих, проектах.

Overlapping Grid Items — как сделать журнальный макет в вебе. В статье Дейв рассказывает, как с помощью CSS Grid создать гибкую сетку и имитировать журнальный стиль на сайте. Кроме обучающего материала Дейв демонстрирует построение макета на примере журнального разворота:

Character animation — большой рассказ о создании анимации в обучающих играх по CSS Flexbox и CSS Grid. Дейв рассказывает не только о методиках и инструментах — он делится фильмом, который лег в основу вселенной его игр, показывает нарисованные от руки концепты, итерации и то, как идея превратилась в результат:

Посмотрите другие статьи Дейва Геддеса:

Use Firefox for Layout. Почему браузер от Mozilla — лучший инструмент для разработчика.

Routine Success. Как привычный распорядок дел помогает достигать целей и минимизировать неудачи.

Чему и как будут учить на новом факультете дизайна в GeekUniversity? Кем смогут работать выпускники? На вопросы отвечает Марине Мкртчян, руководитель образовательного направления «Дизайн» в GeekBrains.

— Марине, привет! Чем факультет дизайна в GeekUniversity отличается от профессий по направлению «Дизайн» в GeekBrains?

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

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

— Как построено обучение на факультете?

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

Третий и четвертый этапы — погружение в веб-дизайн. По ходу обучения студенты двигаются от простых задач (создание лендинга) к сложным, требующим погружения в продукт и аналитику (работа над сервисами). На пятом этапе — итоговая работа по заданиям от Delivery Club, Maps.me и других проектов в рамках Mail.ru Group.

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

— Четырнадцать месяцев — срок немалый. Почему именно столько?

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

Как учится человек, если верить таксономии Блума? Сначала ты узнаешь о существовании чего-то, например графического редактора Figma. Это «Знание» — этап, когда ты видишь, что есть вот такой прекрасный редактор с вот таким интерфейсом.

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

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

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

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

— К слову о преподавателях, кто они?

— GeekBrains — часть Mail.ru Group, и преподавателей факультета мы подбирали прежде всего из дизайнеров компании. Декан — Артем Фенелонов — арт-директор Mail.ru Group. Но мы не ограничиваемся опытом одной организации. Чтобы студенты видели мир дизайна со всех сторон, у нас преподают владельцы дизайн-студий, успешные фрилансеры, дизайнеры из небольших компаний.

— Расскажи о «T-модальной системе компетенций», упомянутой на странице факультета. Что это такое и зачем это дизайнеру?

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

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

— Кто может учиться на факультете?

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

Записаться на обучение можно прямо сейчас.

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

Не цветовая слепота, а нарушение восприятия цвета

«Каждый раз, когда знакомые узнают, что я дальтоник, меня спрашивают: „Вот это что за цвет?“ В 95 % случаев я отвечаю правильно, на что слышу: „Погоди, ты ведь правильно назвал цвет, с чего же ты дальтоник?“» — Аарон Тенбуррен, дизайнер и иллюстратор.

По определению на «Википедии», дальтонизм  — это особенность зрения человека, которая выражается в сниженной способности или в полной неспособности различать цвета. Еще дальтонизм называют цветовой слепотой, по-английски color blind. Мы привыкли думать, что дальтоники путают красный с зеленым (и не умеют пользоваться светофором), а также не различают цвета, которые видит человек с нормальным зрением.

На самом деле это не совсем так: как и написано в «Википедии», дальтонизм — особенность зрения. Полная цветовая слепота бывает в случае монохромазии — при этом виде дальтонизма люди (и некоторые животные, например моржи и дельфины) различают цвета только по их яркости и видят мир черно-белым.

«Да, я вижу красный и зеленый. А еще вижу розовый и оранжевый. И желтый не путаю с синим», — так на вопрос «То есть ты все видишь?!» отвечает дизайнер-дальтоник Александр Насенник.

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

Вот как описывает восприятие цветов Аарон Тенбуррен, дизайнер-иллюстратор с дальтонизмом:

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

Слева — бананы, которые видят люди с нормальным зрением. Справа — они же глазами дальтоника. Источник: medium.com

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

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

Все, что нужно запомнить о дальтонизме, — эта цитата из статьи Android-разработчика:«In reality, 99 % of all colorblind people are not really color blind but rather color deficient».

Что еще почитать

Как видят дальтоники? — карточки «Медузы»

Who’s afraid of red, orange and green? — подробно, научно и в схемах о видах цветовых нарушений

Вот как видят мир дальтоники: 7 объясняющих гифок — наглядный материал, почему-то опубликованный в мужском журнале

Почему важно это учитывать

«В первые годы железнодорожных перевозок тысячи людей, раненых или убитых в результате железнодорожных катастроф, считались жертвами небрежности. На самом деле проводники поездов не могли отличить сигналы безопасности. В 1876 году школьная авария привела к тому, что доктор Фитиоф Холмгрен проверил 266 железнодорожников на предмет цветовой слепоты. Тринадцать сотрудников оказались дальтониками, включая машиниста» — Figure 1, сайт для медицинских работников.

По данным Colour blind awareness, дальтонизм наблюдают у каждого двенадцатого мужчины и у одной женщины из двухсот. В Англии дальтоников 3 миллиона, в Бразилии — больше 8 миллионов, в России — 4 миллиона. Даже если только половина из них пользуется интернетом и только один процент этих людей посетят когда-нибудь ваш сайт — это слишком много пользователей, чтобы ими пренебрегать.

Общая статистика нарушений цветового зрения: 8 % у мужчин, полпроцента у женщин. Источник: Научпок

Ученые изобрели очки для дальтоников Enchroma, которые помогают скорректировать нарушения, но вряд ли все смогут себе их позволить — в интернет-магазине Medgadgets они стоят 30 000 ₽. Если вы сторонник инклюзивного (универсального) дизайна, стоит побороться за доступность вашего сайта для каждого пользователя.

Что еще почитать

How colored yarn changed railway history — первый тест на дальтонизм

Daltonismo e UX: a experiência para todos — статья на испанском (гугл-переводчик в браузере отлично с ней справляется) о важности адаптации интерфейсов для дальтоников

Рекомендации от дизайнеров-дальтоников

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

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

Черно-белая контрастность и светло-коричневый акцент на сайте «Медузы»

У сайта команды разработчиков «Кружок» черно-белое оформление, и от этого фирменный стиль только выигрывает

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

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

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

Больше синего и серого. Эти цвета, как правило, нейтральны для дальтоников.

Нижний скриншот — сайт kingofsoul.storytelling.design, который оформлен полностью в синей палитре, глазами дальтоника. Здесь и контрастность, и синий цвет: спектр сместился в сторону фиолетового, но на содержание это не влияет

Меньше цветов. Ограничьте цветовую палитру: чем она минималистичнее, тем меньше путаницы.

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

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

Красный и зеленый, зеленый и коричневый, синий и фиолетовый, светло-зеленый и желтый, серо-голубой, зеленый и голубой, зеленый и черный, зеленый и серый

Скриншот справа — сайт smallvictori.es глазами человека с тританопией. Синий и салатовый почти сливаются

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

Нижний скриншот — айфоны на сайте Apple глазами дальтоника

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

Что еще почитать

Designing for Colour Blindness — рекомендации с примерами

Проектирование для людей с цветовой слепотой — еще примеры удачных цветовых решений

Инструменты

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

NoCoffee — расширение для Chrome. Это симулятор плохого зрения: NoCoffee поможет понять, насколько сайт удобен для дальтоника, слабовидящего или человека с катарактой. Монохромия тоже есть в списке — можно проверить контрастность сайта в черно-белом виде.

Coblis — еще один симулятор дальтонизма, но для картинок. Загрузите макет на сайт и проверьте, каким его увидят люди с разными типами цветоаномалии.

Contrast — приложение для macOS, которое поможет определить коэффициент контрастности макета в соответствии с рекомендациями WCAG (руководства по обеспечению доступности веб-контента). Как добиться доступности сайта и что обозначают коэффициенты — смотрите в инструкции от разработчиков.

Contrast ratio — онлайн-инструмент для проверки контрастности, если у вас не macOS или не хочется скачивать приложение. Помогает проверить, насколько сочетаются цветовые комбинации. Введите названия или значения цветов фона и текста (в формате hsla, rgb или HEX), а инструмент покажет коэффициент контрастности и рекомендации по размеру и начертанию букв.

Sim Daltonism — симулятор дальтонизма для iOS и macOS. Скачайте приложение, выберите тип нарушения цветовосприятия и направьте камеру на любой объект.

Color Oracle — симулятор дальтонизма для macOS, Windows, Linux, чтобы проверять любые файлы на компьютере. Программу создали опытные разработчики: на сайте можно почитать также о дизайне картографии для людей с нарушениями зрения.

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

Color Contrast Analyzer — более профессиональная программа для Windows и macOS. Помогает определить четкость текста и контрастность элементов интерфейса — визуальных индикаторов, например.

Что еще почитать

Discover how to fix your color blind problems on Android devices with the Color Correction mode — приложение для Android с тестом на дальтонизм, плюс рекомендации по настройке цветокоррекции на смартфоне

Smartphone Customizations for Color Blindness & Nearsightedness — как настроить режим для дальтоника или слабовидящего на iPhone

С 1 января 2019 года все российские фрилансеры (или самозанятые граждане, как их называют законодатели) могут легализовать свою деятельность по упрощенной системе — то есть без официального устройства на работу с НДФЛ, пенсионными отчислениями и прочими прелестями и даже без регистрации в качестве ИП.

Это значит, что теперь можно платить меньше, но вместе с тем иметь все плюсы легальной работы в стране.

Что произошло?

27 ноября 2018 года президент РФ подписал Федеральный закон № 422-ФЗ, из которого следует, что с 1 января 2019-го фрилансеры, желающие легализовать свою деятельность, могут воспользоваться специальным налоговым режимом.

То есть самозанятые граждане теперь вместо НДФЛ (налога на доходы физических лиц, который еще называют подоходным) могут платить НДП (налог на профессиональный доход). Это меньшая сумма, и он проще в реализации.

Сколько?

В отличие от НДФЛ, ставка у НДП заметно ниже: 4 % для тех, кто оказывает услуги или продает товары гражданам, и 6 % для тех, кто работает с компаниями, организациями и прочими юридическими лицами.

Как платить?

Законодатели — ура им! — решили, что фрилансеру нечего заморачиваться и ходить по инстанциям. Поэтому всё, что касается взаимоотношений с налоговой, происходит через специальное мобильное приложение для самозанятых «Мой налог», которое можно скачать и в App Store, и в Google Play.

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

Кто может воспользоваться специальным налоговым режимом?

Кажется, что ответ очевиден: любой, кто является фрилансером и работает на себя. Однако это не совсем так. Если работаете дизайнером, программистом, журналистом, фотографом, копирайтером и так далее — вы действительно можете зарегистрироваться как самозанятый гражданин. Но если для вида деятельности, которым вы занимаетесь, требуется обязательная регистрация в качестве ИП (вы таксист, к примеру), или же ваша деятельность определяется другими законами РФ (как адвокатская практика) — увы, никаких поблажек.

Какие нужно соблюсти условия для оформления специального налогового режима?

В п. 2 ст. 4 №422-ФЗ указано, какие работники не имеют права применять специальный налоговый режим, а в ст. 6 ФЗ описываются те виды доходов, которые не подпадают под действие закона.

То есть вы можете «выйти из сумрака» и оформить спецрежим, если:

• не работаете по трудовому договору;
• не привлекаете к своей деятельности других людей на основании трудовых договоров;
• не работаете на основании договоров поручения, комиссии или агентского договора;
• доход от вашей деятельности не превышает 2,4 миллиона рублей (это около 200 тысяч в месяц);
• не соответствуете иным пунктам, указанным в п. 2 ст. 4 закона.

Кроме того, доходы не подпадают под действие № 422-ФЗ, если:

• вы получили их после продажи своей квартиры, дачи, машины, другой недвижимости;
• вы получили их, сотрудничая с конкретным заказчиком по гражданско-правовому договору менее двух лет;
• вы получили их, работая нотариусом, арбитражным управляющим, адвокатом;
• вы получили их иным способом, указанным в ст. 6 закона.

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

• если несовершеннолетний стал полностью дееспособным, вступив в брак (п. 2 ст. 21 ГК РФ);
• если несовершеннолетний объявлен полностью дееспособным (эмансипация) по решению суда или органов опеки и попечительства (ст. 27 ГК РФ);
• если есть разрешение законных представителей: родителей, попечителей, усыновителей (п. 1 ст. 26 ГК РФ).

Специальный налоговый режим будет действовать во всей России?

Нет. Федеральный закон называется так: «О проведении эксперимента по установлению специального налогового режима „Налог на профессиональный доход“ в городе федерального значения Москве, в Московской и Калужской областях, а также в Республике Татарстан (Татарстан)».

Соответственно, это эксперимент, который состоится только в четырех регионах страны:

• Москве;
• Московской области;
• Калужской области;
• Татарстане.

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

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

Бывает и так, что человек переезжает в Москву или Питер в поисках лучшей жизни и работает себе спокойно, к примеру, дизайнером. Живет на съемной квартире, а зарегистрирован, скажем, в Липецке. Но фактически работает в Москве.

Что делать в таких случаях? Пока непонятно. Федеральная налоговая служба, которая должна объяснить все эти тонкости, дала разъяснения только в части несовершеннолетних фрилансеров, а в территориальный вопрос ясность не внесла. Регион, на территории которого вы работаете, указывается при регистрации в мобильном приложении «Мой налог». И теоретически вас могут попросить доказать, что вы сотрудничаете, к примеру, именно с московским заказчиком. Но это пока только в теории, хотя вполне вероятно, что и практика не за горами.

Что там с пенсией?

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

Предполагается, что 1,5 % из той суммы, что заплатит самозанятый гражданин, пойдет в Фонд обязательного медицинского страхования. А вот пенсионные накопления фрилансеру нужно будет делать самому и самостоятельно платить в ПФР. Или не платить — тут уж каждый решает сам.

Для чего мне нужна регистрация в качестве самозанятого работника?

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

Вы легко подтвердите свои доходы, чтобы получить кредит или визу.

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

Что дальше?

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

С большой степенью вероятности закон № 422-ФЗ не будет долго действовать в том виде, в котором он представлен сейчас — должны быть дополнения и изменения. Федеральная налоговая служба должна выпустить несколько писем или разъяснений по поводу ряда деталей.

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

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

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

Всем говорить «да»

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

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

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

Общение во «вконтактике»

«Общаться с клиентом надо не в мессенджерах, не по телефону, не по скайпу, а только по электронной почте. Во-первых, это дисциплинирует. Так вы ничего не забудете и не потеряете. Во-вторых, при негативном сценарии будет очень трудно доказать в суде, что вы договаривались об одном, а вышло по-другому, имея в распоряжении только переписку из „вконтактика“», — говорит Алиса Ермолаева, дизайнер компании ICL Services.

Сразу говорить стоимость

Поторопившись озвучить цену, вы рискуете недополучить денег. «Проект, на который вы закладывали месяц, может растянуться на два. В этом случае второй месяц вы будете работать бесплатно. А если выставите дополнительный счет, клиент может быть недоволен. Поэтому важно максимально подробно изучить все хотелки и боли заказчика, узнать, что конкретно он желает видеть и в какие сроки, и только после этого выставлять ценник. Но если заказчик не хочет ждать, можно озвучить ему вилку стоимости. Либо заложить «подушку безопасности» и назвать цену, которая будет на 25–30 % выше. Клиенту будет приятно, если проект окажется менее трудоемким, чем предполагалось, и вы сможете сделать небольшую скидку», — объясняет Алиса Ермолаева.

Не «задалбывать» клиента лишний раз

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

Если этого не делать, может получиться как в истории, которой поделилась Наталья Иванова, советник гендиректора по развитию бренда НПФ «Согласие»: «Одна крупная компания решила запустить программу лояльности для премиальных клиентов. Бизнес разработал пакет привилегий, задача маркетинга — оформить продукт в VIP-упаковку. Компания большая, бюджет соответствующий, всё сделали профессионально: провели тендер и выбрали концепцию дизайна премиальной коммуникации. Концепцию презентовали на экране монитора — черный „богатый“ фон, солидный медный оттенок элементов дизайна. Согласовали с первым лицом компании и пошли реализовывать. Результат был неожиданный — все то, что имело премиум-блеск на мониторе, на оффлайн-носителях выглядело дешевой бумажкой черно-коричневого цвета».

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

Когда паттерн совсем не в тему. Источник

Ничего не объяснять

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

«Испаряться», когда что-то идет не так

«Если вы упускаете сроки, заболели, сломался „компуктер“ или случился потоп и вы чувствуете, что не успеваете выполнить работу вовремя, сообщите об этом заказчику», — говорит Алиса Ермолаева.

Ну или хотя бы так:))) Такие сервисы, кстати, правда есть

Вести себя как наемник

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

Вот что с позиции заказчика рассказывает советник гендиректора по развитию бренда НПФ «Согласие» Наталья Иванова: «Дайте клиенту возможность высказаться, привести примеры и аналогии. Отлично работает предложение показать референсы того, что нравится из уже существующего дизайна. И это будет 80 % успеха. Не стоит жестко критиковать пожелания клиента — это деструктивно и может полностью разрушить коммуникацию. В конце концов, из вас двоих только вы — художник и видите мир в ярких красках. Так дайте клиенту время сформировать чувство прекрасного в своей душе. И обязательно презентуйте свои работы как занимательную историю — какой клиент откажется от интересного и красочного зрелища!»

А каких ошибок нужно избегать, по вашему мнению?

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

Алексей Шевцов, арт-директор WebProfy (Kokoc Group)

Новая эстетика находится в фазе формирования: более-менее ясны ее направления, но устоявшихся течений пока не видно.

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

Заметна мода на классический авангард, модернистские эксперименты ХХ века и их переосмысление в цифровых технологиях. Например, здесь от классического модернизма сетка и типографика, от новой эстетики — вольная и избыточная цифровая обработка KV.

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

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

Можно указать три основных тренда:

1. В почти бытовой обиход входят боты и специализированные нейросети.
2. Появляется все больше задач на визуализацию больших массивов данных.
3. В широком смысле идет поиск новых форм взаимодействия «клиент — сайт».

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

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

Анастасия Алексеева, дизайнер why.effect и esPrezo

Тренды уходящего года в новом 2019 принципиально не изменятся — скорее, эволюционируют. Приоритетное направление развития — осмысленность в использовании визуального языка.

От анимации к интерактиву

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

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

От стоковых фотографий к индивидуальным иллюстрациям

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

От украшательства к смыслу

Мы часто наблюдаем визуализации ради визуализаций. Но от бессмысленных украшательств нужно уходить.

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

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

Наталья Иванова, советник генерального директора по развитию бренда НПФ «Согласие»

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

И этот тренд подчинен стремлению выделиться, персонализироваться в информационном пространстве.

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

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

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

Екатерина Сиренко, графический дизайнер

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

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

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

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

А что, по вашему мнению, стало трендом в дизайне в 2018 году? Что вам нравится в новых сайтах, а что бесит?