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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UX/UI-дизайн

Начнем с дизайна пользовательского опыта / пользовательских интерфейсов (User eXperience / User Interface). Эти два направления часто ставят вместе, но некоторая разница между ними все-таки есть. Цель UX-дизайна — развивать взаимодействие пользователя с продуктом так, чтобы росло удовлетворение пользователя, а вместе с ним и его лояльность продукту. Формулировка очень обтекаемая, но она четко выражает суть термина. UX-дизайн применим во всех сферах жизни, в отличие от UI-дизайна, который все-таки относится к цифровым продуктам. UI-дизайн сконцентрирован на самом продукте.

Обладатель премии UX Design Awards 2019 года — бимодальное слуховое решение, управляемое с помощью смартфона 

В статье Хельги Морено, посвященной разнице между UX- и UI-дизайном, есть хорошее сравнение: «Если что-нибудь выглядит здорово, но им сложно пользоваться — это признак хорошего UI и плохо UX. Если пользоваться легко, но на вид это ужасно — мы имеем дело с хорошим UX и недоработанным UI».

Кстати, сегодня мы как раз запустили новый факультет GeekUniversity — UX/UI-дизайн. Но об этом мы еще напомним — давайте продолжим рассказ о других «полезных» направлениях дизайна.

Промышленный дизайн

Пример интересного индустриального дизайна

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

Веб-дизайн

Когда веб-дизайнер добавляет пространства между элементами

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

Графический дизайн

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

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

Гейм-дизайн

Прекрасный мир Skyrim, созданный гейм-дизайнерами

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

Архитектурный дизайн

Традиционная архитектура в Голландии

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

Дизайн интерьеров

Когда решил сэкономить на услугах дизайнера

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

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

Световой дизайн фар Audi

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

Вам нравится играть со светом и вы знаете, как с его помощью выгодно подать любой объект? Вы видите магию света всюду — на фотографиях, в кино, в музеях, театрах и ресторанах? Развивайте свой талант в световом дизайне.

Ландшафтный дизайн

Сад камней

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

Экологичный дизайн

Зеленый дизайн в Сиднее

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

В GeekUniversity вы можете освоить различные виды дизайна. Есть как «общий» факультет, так и специализированные — веб-дизайн, графический дизайн, дизайн интерьера. И, как уже было сказано в начале, сегодня открылся еще и факультет UX/UI-дизайна, где за один год обучения вы освоите все навыки специалиста уровня middle и разработаете портфолио для дальнейшего трудоустройства.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

AR-маски, популярные сейчас в Instagram, на самом деле появились намного раньше. В 2015 году их увидели пользователи приложения MSQRD, позже они пришли в Snapchat. За пару лет маски стали использоваться гораздо шире, чем просто для развлечения: маски активно используются в рекламе, блогеры с их помощью продвигают аккаунты. Также маски могут привлечь внимание к интересным проектам и социальным проблемам.

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

Скачайте программу Spark AR Studio

Spark AR Studio — это AR-среда Facebook. В ней создают маски на основе нужной текстуры, подготовленной в Photoshop или любом графическом редакторе, который работает с альфа-каналами (прозрачностью). Чтобы создать маску в инстаграме самому, необходима программа Spark AR Studio, которая есть в версиях для компьютера (macOS, Windows) и смартфона (iOS, Android). Рекомендуем скачать обе версии — на смартфоне удобно сразу же тестировать результат

.

Соедините Spark AR на десктопе и смартфоне

Запустите Spark AR Studio. Вас встретит набор предустановленных эффектов и масок — на их примере можно посмотреть некоторые принципы работы. Но изменять пресеты нужно аккуратно: обычно это рушит установленные зависимости объектов, и маска может заработать неверно.

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

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

Чтобы протестировать маску перед загрузкой в Instagram, нужно подключиться к Spark AR Hub — это творческая среда от Facebook для авторов масок. Для этого создайте публичную ссылку для тестирования или соедините Spark AR с подключенным к компьютеру смартфоном:

• присоедините смартфон USB-кабелем к компьютеру; 
• нажмите Test on device и выберите, где хотите увидеть маску — Facebook или Instagram. Если выберете второй вариант, получите ссылку, которой можно поделиться или отправить на нужный гаджет. Загружать маски на обе площадки пока нельзя; 

• откройте приложение Spark AR на смартфоне.

Создайте трекер лица в Photoshop или загрузите готовый

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

Если готовы подготовить ее сами, переместитесь в Photoshop или Figma. Дальше порядок действий такой:

• Скачайте и откройте папку Textures из инструкции для разработчиков. Выберите один из файлов — faceFeminine.jpg для женских лиц и faceMasculine.jpg для мужских — и откройте в программе.
• Новым слоем поверх схемы лица с помощью Transform добавьте нужные эффекты и рисунки — они должны идти поверх слоя с лицом, чтобы результат был виден сразу. Все, что выходит за границы схемы лица, не будет отображаться на человеке. 
• Выключите или удалите слой с лицом, сохраните результат в PNG — только этот формат поддерживает прозрачность. Важно сохранить только эффект, без схемы лица.

Как создать свою маску в Инстаграме

Снова переместитесь в Spark AR и создайте проект: нажмите Create project. Затем загрузите в программу текстуру — перетащите ее в Assets в нижний правый угол, и текстура автоматически отобразится в разделе Texture.

Далее перейдите в рабочее пространство для создания маски — Insert → Scene. Вы будете работать с функциями FaceTracker и FaceMesh. Первая отслеживает движение лица и мимику, вторая — 3D-объект, который синхронизируется с трекером и содержит ваши текстуры с эффектами. 

Нажмите Scene → FaceTracker → Insert, затем Scene → FaceMesh → Insert. Эта связка, именно в такой последовательности, поможет привязать маску к мимике и движениям лица. Следите, чтобы трекер был вложен в последовательность папок: device / camera / focal distance. FaceMesh должен быть внутри device / camera / focal distance / facetracker.

Дальше создаем материал для маски. В окне Assets кликните +add asset в правом нижнем углу, затем нажмите Material. Выберите тип нанесения (Shader Type) — например, Retouching сглаживает кожу, а Flat не отражает свет и удобен для рисунков на лице. В большинстве случаев подходит Face paint: он учитывает рельеф и форму лица и органично наносит на него рисунок.

Свяжите FaceTracker с материалом: в правом меню кликните Material, затем Texture и выберите текстуру. Рисунок появится на модели в рабочей области. Маска почти готова.

К маске можно добавить анимацию. Перейдите во вкладку View → Patch editor. Протестируем такой сценарий: маска появляется вместе с улыбкой человека. Что нужно для этого сделать:

•  в поле Patch editor перенести эффект Face Tracker — в рабочей области отобразятся его свойства; 
•  выбрать параметр Smile и связать его с эффектом; 
•  во вкладке Scene выбрать объект и кликнуть на стрелку рядом с пунктом Visible; 
•  получившийся объект связать с объектом Smile. 

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

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

Протестируйте маску

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

Если маска слетает при движении, внесите изменения и протестируйте еще раз. Затем переходите к экспорту.

Экспортируйте маску

Здесь все просто: в левом нижнем углу экрана найдите кнопку Export и выберите папку, в которую нужно сохранить маску. Если маска весит больше, чем нужно (допускается 10 Мб, но желательно 2 Мб и меньше), программа предупредит об этом перед экспортом. Обратите внимание, что в Instagram нужно выгрузить именно этот файл, а не файл проекта. 

Как добавить маску в Инстаграм

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

Если хотите официально выложить маску в Facebook или Instagram, нужно записать демо-видео. В ролике расскажите или покажите, как работает эффект, и уложитесь в 15 секунд. Видео должно быть качественным — оно будет отображаться чем-то вроде обложки раздела с масками в вашем аккаунте.

Дождитесь, пока модераторы проверят маску. После этого она появится во вкладке «Галерея эффектов» в окне записи stories в Instagram.

Пока ждете проверку, маской легко делиться с кем угодно через ссылку. Ее можно открыть 200 раз, после чего придется создать новую ссылку. Там же, в AR Hub, можно на 60 минут закрепить маску в вашем инстаграм-аккаунте.

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

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

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

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

В одной команде мы создаем виртуальную химическую лабораторию: с помощью VR-очков и контроллера вы можете проводить химические опыты.

Дизайн периодической системы химических элементов. Таблица распечатывается и считывается камерой смартфона для получения дополнительной информации в AR

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

Карточка товара в приложении для подбора одежды FitsMe 

— Расскажите о крупных проектах, в которых участвовали: для концерна «Калашников» и Уральского вагоностроительного завода. 

— Для «Калашникова» я готовил интерфейс AR-приложения, которое показывает на карте мира пути поставок продукции и сведения о заводах концерна. 

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

Экран с информацией о поезде. Проект для Уралвагонзавода

— Где можно посмотреть примеры ваших работ?

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

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

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

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

Где-то с августа 2018 я начал выполнять первые небольшие заказы от друзей и знакомых. К маю 2019 года — взял первый крупный заказ.

Самое сложное — когда кажется, будто ничего не знаешь и не умеешь. Вроде отучился, а открываешь тот же Dribbble, смотришь на все это великолепие и думаешь: «А вот я так не могу». Однако не стоит бояться!

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

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

Инфографика для панорамы 360°

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

— На старте надо владеть программами для прототипирования: например, Figma, Sketch, Axure. Конечно, эскизы приложения можно набросать и на листочке, но собранный в Figma интерактивный прототип будет куда информативнее и привлекательнее для заказчика.

Для подготовки иллюстраций, иконок и сложной графики пригодится Adobe Illustrator.

Для работы с растровой графикой — Photoshop. К слову, некоторые заказчики до сих пор просят исходники в формате .psd.

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

Вообще, чем больше у вас знаний в разных областях, тем лучше. Знакомы с HTML хотя бы на самом базовом уровне? Хорошо. Знаете, что такое Native React? Прекрасно. Прочли книги по копирайтингу? Отлично! 

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

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

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

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

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

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

— Почему выбрали именно UI, а не другие направления?

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

— Расскажите немного о жизни до учебы в GB. Почему после вуза вы решили стать педагогом и до сих пор не хотите расставаться с этой профессией?

— Я окончил МЭИ по специальности «Психология». Еще во время учебы в вузе работал с подростками в молодежном клубе. Вскоре после получения диплома я нашел вакансию педагога в лицее в Звенигороде. Предложение оказалось более привлекательным, чем то, что можно было найти у нас в Краснозаводске, и я переехал. 

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

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

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

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

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

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

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

Прототипирование приложения для подбора авточехлов

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

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

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

 — Вам в дизайнерской работе доводилось осознанно, специально применять свои знания в области психологии?

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

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

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

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

Планирую углубиться в UX, поведение и паттерны. Главное — не останавливаться.

— Спасибо, что поделились историей, примерами работ, наблюдениями. Успеха вам в профессии и творчестве!

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

Miro

RealtimeBoard — инструмент для командной работы на виртуальных досках от компании из Кремниевой долины. Сервисом пользуются больше 2 млн человек и большие компании вроде Netflix, Twitter, Ikea. Не так давно проект пережил ребрендинг: RealtimeBoard переименовали в Miro и обновили фирменный стиль. По этому поводу компания разработала лендинг, на котором авторы рассказали о причинах ребрендинга и новых функциях проекта. «Наши амбиции больше не совпадали с брендом», — так компания объясняет необходимость перемен. Теперь это не просто доски для Agile-планирования, а полноценный сервис для удаленной работы с командой. 

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

Коопирайтеры

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

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

Land-book

Коллекция макетов сайтов. Пока работ на Land-book не так много, но сборник хорошо структурирован — макеты разбиты по категориям «Лендинги», «Портфолио», «Блоги», «Магазины» и «Другие». 

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

А еще команда Land-book ведет блог на Medium. Правда, пока там только один пост — «60+ классных страниц с ценниками». 

scrnshts

Подборки промокартинок приложений в App Store. Создатель сайта, дизайнер Томас, вдохновлялся Mobbin — коллекцией дизайна в приложениях. Когда Томас не смог найти что-то похожее для скриншотов App Store, он сделал собственное решение.  

Скриншоты подкрепляются ссылками на приложение в App Store и разбиты по категориям:

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

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

Подборка советов Артема Горбунова

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

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

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

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

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

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

Remove.bg

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

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

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

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

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

Анатомия шрифта

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

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

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

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

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

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

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

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

Нижний выносной элемент — элемент строчных букв, опущенный ниже линии шрифта (например, в буквах у и ф).

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

Понятие шрифта и его характеристики

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

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

Гарнитура — это семейство начертаний шрифта, имеющих общие стилевые особенности. Есть множество известных гарнитур: Helvetica, Futura, Roboto и другие.

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

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

Начертание — это внешний вид шрифта. Большинство гарнитур предполагают стандартный набор начертаний: Regular (обычное), Italic (курсивное), Semibold (полужирное) и Bold (жирное).

Типографская система мер

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

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

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

Кегль — размер буквы или знака по вертикали, включающий ее нижние и верхние выносные элементы. Единица измерения кегля — пункт (pt). Например, популярны кегли шрифта в 14, 16, 24 pt и многие другие.

Интерлиньяж (межстрочный интервал) — это вертикальный интервал между строками текста. Измеряется в пунктах, но его размер зависит от кегля шрифта. Интерлиньяж в 120 % от размера шрифта принято считать минимальным. То есть при шрифте в 14 pt интерлиньяж составит по меньшей мере 17 pt. Размер межстрочного интервала зависит от кегля и начертания шрифта, а также от расположения текста, поэтому универсальной формулы по вычислению интерлиньяжа нет.

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

Полезные советы и ресурсы по теме

• Прочитайте книгу Александры Корольковой «Живая типографика». Это базовое пособие о типографике для начинающих дизайнеров, которое доступно бесплатно.
• Еще один электронный ресурс, но по платной подписке — учебник «Типографика и верстка» издательства «Бюро Горбунова». Обратите внимание на оформление сайта — это лучшая реклама содержания.
• На начальном этапе полагайтесь на готовые подборки сочетаний гарнитур. Они есть на множестве сайтов: FontPair, Fontjoy, Canva Font Combinations и других.
• Используйте не более 2–3 гарнитур в одном проекте. Это правило универсально для задач любой направленности. Если вы только начинаете изучать что такое типографика, рекомендуем сперва ограничиться одной гарнитурой.
• Установите расширение WhatFont для Chrome или для Safari, чтобы быстро узнать название понравившегося шрифта.
• Типографика построена на акцентах. Используйте начертания и кегль, чтобы расставлять их и создавать структуру текста. Традиционно заголовок имеет жирное начертание и значительно больший кегль, чем основной текст. Например, он может быть выполнен шрифтом Helvetica Bold 48 pt, а основной текст — Helvetica Regular 14 pt.

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

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

Unsplash

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

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

Freebie Supply

Сегодня Freebie Supply, пожалуй, самый функциональный ресурс по поиску бесплатных файлов. В основном ориентирован на дизайнеров, но пригодиться может и разработчикам, и менеджерам. Охватывает все современные инструменты в сфере дизайна: Figma, Photoshop, Adobe XD, Illustrator, Sketch, Google Slides и другие.

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

Google Fonts

Вы слышали о Google Fonts? В век лицензирования и борьбы с пиратством советуем задумываться, используя шрифты. Для собственных работ вы, конечно, можете брать и пиратские. Но если проект коммерческий, применение нелицензированных шрифтов может обернуться судебным иском.

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

ManyPixels Illustrations Gallery

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

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

Tilda Icons

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

Более 700 иконок на 43 темы — вот что нужно всегда иметь под рукой. Их можно свободно использовать как в личных, так в коммерческих целях — при условии, что вы ссылаетесь на ресурс-источник. Воспользуйтесь быстрым поиском в нижнем правом углу страницы — просто введите название объекта, чтобы найти подборку иконок.

UI Gradients

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

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

Coolors

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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